Главная » Сайтостроение » WordPress » Увеличение первой буквы

Увеличение первой буквы

[sc name=»ads2″]

В этом посте речь пойдет о том, как сделать первую букву записи другим цветом и размером. Для начала разберем самую верстку, а затем автоматизируем процесс увеличения первой буквы.

HTML

Для того что бы изменить стиль первой буквы, вам нужно эту букву поместить в отдельный <div>, который позже будет отвечать за стиль. Для примера дадим этому диву имя largelet, и поместим в него нашу букву, примерно это будет выглядеть так:

<span class="largelet">У</span>роки WordPress…

CSS

[sc name=»ads2″]

Здесь есть не большая проблема, разные темы имеют разные размеры шрифта и разную высоту строки. Будем считать, что у нас размер шрифта 14, а высота строки 18 пикселей.

  1. Обтекание. Что бы нашу букву обтекал текст, ми должны использовать:
    span.largelet{
    float: left;
    }
  2. Размер шрифта. Задаем нашей букве размер в 40 пикселей, а высота строки 35 пикселей, что в два раза превышает высоту строки абзаца минус 1 пиксель (на всякий случай).
    span.largelet{
    float: left;font-size: 40px;
    line-height: 35px;
    }
  3. [sc name=»ads2″]
  4. Дополнительный стиль. Здесь указываем свой стиль, в котором вы бы хотели видеть первую букву и получаем окончательный результат.
    span.largelet{
    float: left;font-size: 40px;
    line-height: 35px;
    
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #2583ad;
    padding-right: 5px;
    }

Автоматизация

Если CSS достаточно один раз вставить в style.css файл, то HTML часть вам придется настраивать каждый раз для каждой новой записи. Что бы сделать этот процесс автоматическим достаточно добавить код ниже в файл functions.php.

function letra_capital($content){
    $searchfor = '/&gt;(<a>]+&gt;)?([^&lt; \s])/';     $replacewith = '&gt;$1<span class="letracapital">$2</span>';
    $content = preg_replace($searchfor, $replacewith, $content, 1);
    return $content;
}
add_filter('the_content', 'letra_capital');
</a>

Эта функция определяет первую букву в записи и помещает ее в нужный <div>.

1 комментарий

  1. Хороший способ дополнительно выделить свои посты и блог в целом! спасибо за информацию!

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

x

Посмотрите

Влияет ли смена темы WordPress на SEO и трафик?

[sc name=»ads1″] Если вы один из тех блогеров, которые используют бесплатные темы WordPress, вам, вероятно, ...