Выделение первых букв используют очень многие дизайнеры, они могут иметь другой шрифт, другой цвет, или даже быть картинкой вместо буквы. В этом уроке мы попытаемся выделить первые буквы параграфов использую HTML разметку, CSS стили, а затем попробуем автоматизировать процесс с помощью PHP функции.
HTML
Для того чтобы выделить первую букву параграфа, мы должны обернуть его в специальный HTML элемент к которому мы затем сможем применять некоторые CSS стили. Для этого я собираюсь использовать простой span элемент с классом initialcap.
Только не повторяйте букву после span‘a
CSS
Пришло время для написания CSS стилей, но для начала условимся что наш параграф имеет размер шрифта 14 пикселей, и высоту строки в 18 пикселей.
1.Сдвинем нашу первую букву влево, что бы весь текст параграфа обтекал его
span.initialcap{
float: left;
}
2. Применим к нему размер шрифта 40 пикселей и высоту строки в 35 пикселей, чтобы буква отличалась от остального текста.
span.initialcap{
float: left;
font-size: 40px;
line-height: 35px;
}
3. Ну и применим к нашей букве шрифт Serif, синий цвет и добавим маленькое пространство справа.
span.initialcap{
float: left;
font-size: 40px;
line-height: 35px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #2583ad; /* синий */
padding-right: 5px;
}
Автоматизация
Ну а теперь последний этап урока автоматизация всего того что мы делали с помощью конечно же PHP. Вы же не будете каждый раз вручную прописывать span с классом. Эта функция поможет этого не делать:
function wpguy_initial_cap($content){
$searchfor = '/>(<a [^>]+>)?([^<s])/';
$replacewith = '>$1<span class="initialcap">$2</span>';
$content = preg_replace($searchfor, $replacewith, $content, 1);
return $content;
}
Поясним как работает функция. Во первых ей нужно передать контент в котором нужно выделить первую букву, функция находит ее благодаря регулярным выражениям и оборачивает ее в наш span с классом initialcap, ну и возвращает обратно уже отформатированный контент.
Для того чтобы воспользоваться этой функцией на своем сайте нужно просто при выводе контента проводить через эту функцию, не забыв перед этим прописать стили.