Преди известно време направих рязка промяна на темата на блога, но не го отбелязах, защото не бях напълно готов с промените. И сега не съм, но реших да обърна внимание на направеното до тук, защото някои от тях може да са интересни на хората. Опитах се с новия вид на блога да му придам вестникарски изглед, като за целта направих най-новата публикация да излиза цялата на първа страница, с голямо заглавие със серифен шрифт.  Направих и заглавията на публикациите в страниците им по-големи, добавих страница с архива и го махнах от страничния панел. Ето и по-подробно промените:

Структура на заглавията

След като прочетох една публикация на Роджър Йохансон, преосмислих структурата на заглавните елементи в блога:

• На първа страница основното заглавие е заглавието на сайта и то е H1, заглавията на публикациите са H2 и т.н.
• На страниците на публикациите основното заглавие е заглавието на поста, така че то е H1, а името на блога е просто P елемент.
• На страниците със списък с постове – архив, категории, тагове – съм поставил заглавие, което описва страницата, в H1, а заглавията на постовете са в H2.

Тази промяна в структурата доведе до някои неочаквани резултати, за които трябваше да се вземат мерки. Първо, трябваше в публикациите всички заглавни елементи да станат с едно ниво по-високо – H3 да стане H2, H4 да стане H3 и так дале. Обаче, на първа страница най-новата публикация се показва цялата и ако в нея има H2, става страшно! Набързо направих следната промяна:

Във файла functions.php добавих една такава функция (не можах да измисля работещ регулярен израз, така че използвах str_replace)

function fix_content($text) {
    global $post;

    $text = str_replace('<h2>','<h3>',$text);
    $text = str_replace('</h2>','</h3>',$text);

    return $text;
}

След това в home.php преди първия пост добавих това:

<?php add_filter('the_content', 'fix_content'); ?>

Така по най-грубия начин променям H2 таговете в текста да станат H3.

Типография

Както споменах в началото, търсех ефекта на вестник, така че за заглавията на публикациите и за текстовете използвам серифен шрифт. За заглавията избрах набор от шрифтове, базиран на Garamond от тази статия в SitePoint, а за текста – Georgia. За заглавието на блога и навигацията исках шрифта да е без серифи и след кратко търсене се спрях на Gputeks – шрифт, разпространяван под OFL, което ми позволава свободно да го ползвам в сайта. Тъй като той никак не е web-save, за да го видите, ще трябва да използвате нова версия на браузър, базиран на WebKit (Сафари или Конкърър) или бета на Firefox или Opera. Не съм си играл с EOT файл за IE, но може и да го направя… Направих и EOT шрифтове за IE, така че и с тоз браузър ще видите разликата. Освен това за първа страница разположих текста в три колони, като се възползвах от поддръжката на Firefox на колони от CSS3. Друга добавка е различното оформяне на първия ред на публикациите чрез :first-line псевдо-елемент и падащи букви благодарение на :first-letter. За да не важат правилата за други абзаци освен първия, използвах селектор от типа нещо > p:first-child:first-letter. По-подробно за шрифтове в уеб ще пиша скоро, темата се оказа доста къдрава, а който бърза да види как става, да погледне набора със стилове.

Съдържание

Освен страницата с архива, в която вкарах облака с етикети, архив по категории и по месеци, най-накрая добавих и страница за мен. Все още не е достатъчно надлежно попълнена, но към нея има един бонус – коментарите ми в други блогове. Благодарение на услугата BackType и на разширението за WordPress My Comments Elsewhere мога да ви покажа какви глупости пиша по чуждите блогве. За съжаление BackType не успява да събира коментарите от всички блогове на света, но има възможност потребителите да предлагат блогове за следене, от която се възползувам регулярно.

Ще се радвам, ако читателите (благодаря и на двама ви, както се шегувал Джими Хендрикс на един празен концерт) споделите мнението си по тези промени. Държа да уточня, че пълна представа от новата визия можете да получите с Firefox 3.1 beta, във всички останали браузъри едни или друг ефект няма да е видим, но това не е голяма драма все пак, стига да се чете.

Етикети: CSS, Firefox, font embedding, font linking, HTML, wordpress