Буквица в статьях WordPress без плагина

Про создание буквицы различными способами во всемирной паутине уже писано-переписано. В этой статье поговорим об очень лёгком способе создания буквицы на чистом CSS, причём без плагина и безо всякой правки каких-либо файлов движка и шаблона.

Честно говоря, я не сторонник использования буквицы - зачастую она выглядит просто неуместно, за исключением сайтов какой-либо литературной или исторической тематики, где сам стиль сайта предназначен для использования подобных украшательств. И не собирался я ни статью писать про это, ни использовать эту фишку у себя.

Однако, небольшая наша полемика с Игорем Черноморцем по поводу буквицы на его блоге в статье про плагин буквицы для WordPress,  подтолкнула меня к попытке решения этой задачи совершенно другим способом - создать буквицу на чистом CSS без плагина, без правки кода каких-либо файлов движка и  CSS шаблона. Стало просто интересно...

Итак, приступим...

Создаём CSS для буквицы

В данном случае CSS - это та основа, которая ляжет во все наши дальнейшие действия. Давайте-же создадим и разберём этот маленький и довольно простенький стиль.

/* Буквица */
.arkfirstletter {
margin-right: 1px; /* Отступ справа */
font: 1.8em/1 Georgia; /* Размер и имя шрифта*/
font-weight: bold;  /* Жирный шрифт */
text-shadow: 1px 1px 3px silver; /* Тень */
color: crimson; /* Цвет*/
}

  Вот, собственно и весь стиль. Здесь мы просто определили класс arkfirstletter, который можно использовать где угодно. Почему именно arkfirstletter? Дело в том, что во многих источниках подобные фишки делают при помощи создания класса firstletter. И вот, во избежание возможных накладок одноимённых стилей я просто добавил своеобразный префикс. Вот и всё. В принципе, Вы можете поименовать этот класс как Вам угодно...

Остальные атрибуты данного стиля должны быть понятны из комментариев в коде css... И Вы можете их изменять под свои нужды.

Практическое использование стиля буквицы

Способ первый

Этот способ - скорее классика, его используют и при создании плагинов, и при ручной вставке кода. Суть его заключается в добавлении стиля буквицы в css-файл Вашей темы и добавлении специального шорткода, например - посредством правки злосчастного великомученика functions.php.

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

Открываем файл /wp-content/themes/Ваша тема/style.css и в самый конец вставляем вышеприведённый блок стиля.

Открываем файл /wp-content/themes/Ваша тема/functions.php и в самый конец перед закрывающим тегом

?>

 вставляем следующий код:

function ark_firstletter($attr,$content) {
   return '<span class="arkfirstletter">'.$content.'</span>';
}
// регистрируем шорткод
add_shortcode( 'arkfirstletter', 'ark_firstletter' );

И теперь, в тексте статьи, при её редактировании мы в нужное место просто вставляем этот шорткод.

При редактировании будет выглядеть как-то так: [arkfirstletter]В[/arkfirstletter] данном случае CSS - это та основа...

А в самой статье будет смотреться вот так:

В данном случае CSS - это та основа...

Наверное на этом можно было-бы остановиться, но это решение настолько банально и некрасиво, что мне захотелось чего-то большего...

Например, чтобы буквица была видна уже при редактировании статьи, а не только во фронтенде. И это оказалось решить довольно просто... 

Открываем файл /wp-includes/js/tinymce/skins/wordpress/wp-content.css и в самый конец вставляем всё тот-же блок стиля, обозначенный в самом начале.

Вот и вся премудрость. Теперь и в редакторе наша буквица будет выглядеть точно так-же, как и при чтении статьи.

Минусы первого способа

 Очень ненадёжный способ... И это не наш путь.

Способ второй

Вот это как раз и есть тот самый способ, о котором я писал вначале статьи - лёгкий, буквица на чистом CSS без плагина, без правки кода каких-либо файлов движка и CSS шаблона.

Не надо ничего никуда вставлять! Ни в файл стилей, ни в functions.php, ни куда-либо ещё.

За основу берём всё тот-же стиль, обозначенный в начале статьи, только слегка трансформируем его вот в такой вид:

<span style="margin-right: 1px;font:bold 1.8em/1 Georgia;text-shadow: 1px 1px 3px silver;color: crimson;"></span>

 И теперь эту конструкцию просто вставляем в текст статьи, обрамляя нужную букву этим span.

Вот как-то так:

<span style="margin-right: 1px; font: bold 1.8em/1 Georgia; text-shadow: 1px 1px 3px silver; color: crimson;">В</span>от это как раз и есть тот самый способ

 На выходе получим, что в редакторе, что в статье - одинаковый вид:

Вот это как раз и есть тот самый способ - лёгкий, буквица на чистом CSS без плагина, без правки кода каких-либо файлов движка и CSS шаблона.

Вот и всё! Как Вам такой способ?

Общие минусы обоих способов

Общих минусов я увидел два:

 Полезный инструментарий

Наверное у каждого блогера есть некий набор инструментов, облегчающий ему жизнь и ведение блога. Расскажу о двух очень полезных инструментах, которые давно использую сам. Это плагины, о них я упоминал в статье Плагины WordPress 2015.

Инструмент № 1

Это плагин AddQuicktag. Он избавит нас от необходимости писать шорткоды и теги ручками.

Я не буду тут расписывать принципы его использования - он прост, как три копейки, разберётесь. Покажу лишь удобство его применения.

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

	Как видим, в редакторе у нас появляется выпадающий список Quicktags... Выделяем нужную букву и из этого списка выбираем необходимый код.
	И теперь, выделенная буква приобретает надлежащий вид уже сразу в редакторе!

 Это, конечно, только при использовании второго способа. В первом-же случае, она будет просто обрамлена шорткодом...

Таким образом мы очень изящно закрываем первый из общих минусов! Удобство и простота использования бесспорны!

Инструмент № 2

Это два плагина.

Search & Replace - ищет указанную строку в базе данных и заменяет её на другую.

Search Regex - поиск и замена в постах, страницах, комментариях и мета-данных, с полной поддержкой регулярных выражений.

Оба плагина почти идентичны, но в каких-то случаях ищет один, а в каких-то другой. Я при помощи этих плагинов много чего менял на блоге одним запросом. Например, адреса картинок, коды вставки блоков выделения текста и т.д... Хранятся они в деактивированном состоянии. При необходимости активирую и потом снова отключаю.

При использовании шорткода (первый способ) надо задать сначала поиск строки [arkfirstletter], а затем [/arkfirstletter]. В обоих случаях заменять на пустую строку.

При использовании второго способа искать надо вот такой фрагмент:

<span style="margin-right: 1px; font: bold 1.8em/1 Georgia; text-shadow: 1px 1px 3px silver; color: crimson;">

И заменить его на вот это:

<span style="">

Другими словами, мы просто удаляем стиль из тега span, а сам по себе пустой span никак не повлияет на внешний вид текста.

Хочу обратить внимание, что поиск и замена происходит сразу по всему блогу одним запросом. А это значит, что нет необходимости ковыряться в статьях и убирать код ручками.

Таким образом мы закрываем и второй из общих минусов.

Некоторые замечания

Зачастую, для оформления буквицы используют тег абзаца - P. Такой способ чреват появлением буквицы в неожиданных местах, правда это зависит от реализации, но кроме этого существуют и ограничения - только первая буква абзаца!

На мой взгляд, гораздо правильнее привязывать буквицу к тегу span. При таком подходе мы получаем практически неограниченные возможности, ведь этот span можно вставлять куда угодно!

Примеры:

Первый способ - это полная «Ж», по сравнению со вторым!

1. Привлекаем внимание к элементу списка.

2. А здесь просто Элемент...

√ Привлекаем внимание к абзацу...

Можно извращаться как угодно, даже выделить всю строку или её часть!

Ну и так далее, тут всё ограничено только Вашей фантазией...

Расширение возможностей

В том-же AddQuicktag можно прописать несколько вариантов буквицы с различным оформлением и использовать разную буквицу для разных элементов текста.

Правда тогда и убирать потом буквицу из статей придётся не одним запросом, а по количеству определённых стилей. Но в принципе, при использовании инструмента № 2 не имеет значения сколько запросов выполнять, один или три... Так, что это не проблема.

Не уверен, что сам буду использовать буквицу где-либо ещё, кроме этой демонстрационной статьи, но вот пока я её писал - мне даже понравилось... 😀 

Вот и всё, что я хотел сказать по поводу использования буквицы в WordPress.

Удачи Вам и до встречи на моём и Вашем блогах!

Материалы по теме:

This CKEditor version 4.11.3 is not secure

Продвижение в социальных сетях

Как бесплатно увеличить объём Яндекс Диска

Как масштабировать изображения в CSS

301 редирект с http на https, разные сервера – разные способы

Полезный онлайн сервис 2whois.ru