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

Буквица в статьях 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 и в самый конец вставляем всё тот-же блок стиля, обозначенный в самом начале.

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

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

  1. Вопреки моим заявлениям в начале статьи о том, что «создать буквицу на чистом CSS без плагина, без правки кода каких-либо файлов движка и  CSS шаблона», мы всё-же внесли правки аж в три файла!
  2. При обновлении то-ли WordPress, то-ли редактора наша последняя вставка пропадёт и в редакторе вместо красивой буквицы опять будут шорткоды.
  3. При смене или обновлении шаблона исчезнут вообще все наши вставки и тогда уже шорткоды будут отображаться не только в редакторе, но и при чтении статьи!
  4. Может хватит уже насиловать functions.php и style.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 шаблона.

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

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

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

  1. Что шорткод, что тег span вставлять приходится ручками, а набирать кучу непонятных символов очень не хочется, да и в памяти их правильное написание хранится не всегда. Впрочим, можно код просто где-то сохранить и в последующем использовать банальный копипаст. Однако тут есть выход поизящней, об этом чуть ниже, в разделе «Полезный инструментарий».
  2. В том случае, когда захочется убрать буквицу с сайта - придётся лопатить все статьи, где она использовалась и убирать коды, опять-таки ручками. Но и тут есть довольно простое и лёгкое решение - и о нём я тоже расскажу в разделе «Полезный инструментарий».

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

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

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

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

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

192402e28277 - Буквица в статьях WordPress без плагина
В принципе, тут всё понятно. Прописываем осмысленный заголовок, название шорткода, если используем шорткод, открывающий тег, закрывающий тег и отмечаем галочками где это применять.
53d816cc061a - Буквица в статьях WordPress без плагина

Как видим, в редакторе у нас появляется выпадающий список Quicktags...

Выделяем нужную букву и из этого списка выбираем необходимый код.

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

И теперь, выделенная буква приобретает надлежащий вид уже сразу в редакторе!

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

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

Инструмент № 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.

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

Смотрите также

WordPress изображения. Как избавиться от лишних…

WordPress изображения. Как избавиться от лишних…

Изображения WordPress, пожалуй, самая неудачная часть реализации этого, в общем-то, неплохого движка. Я уже писал …

Видео с YouTube без чёрных рамок

Видео с YouTube без чёрных рамок

Видео без чёрных рамок? Легко! YouTube настолько прочно вошёл в нашу жизнь, что сложно представить …

52 комментария

  1. Класс! Да, творчество в вордпресс не иссекаемо. Мне понравился способ без плагина, интересно и заманчиво. Может и себе применю. Так что спасибо за науку.

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

    Но, разве вы не знаете поговорку "Всё гениальное – просто" Так это не тот случай!!! 

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

    Первый вариант вообще завал, мало кто захочет его использовать, но и остальные не такие уж и простые (во всяком случае на первый взгляд) 

    Вы меня простите конечно за впервые мою критику, но мне кажется, что тот плагин, о котором я писал, намного проще и не хуже. это конечно первичное моё мнение. Но…я уверен в том, что сейчас в ответе на мой коммент вы сможете меня переубедить! Вы же в этом профессионал  

    • уверен в том, что сейчас в ответе на мой коммент вы сможете меня переубедить

      А зачем? Я же не говорил, что твой способ плох. Очень даже хорош. И для многих он прекрасно подойдёт. Но, если ты обратил внимание, то в комментариях под твоей статьёй несколько раз прозвучало, что ради нескольких строк css не стоит устанавливать плагин. И я с этим согласен.

      Теперь, что касается

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

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

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

      Ладно, допустим, плагин, о котором ты писал, добавляет в редактор свою кнопку – бесспорный плюс. Но разве кроме этих шорткодов никакие другие ты не используешь?

      Инструмент № 1, о котором я писал, решает проблему вставки шорткодов и тегов в статьи и в статье я просто показал, как можно его использовать совместно с моим способом. Но ведь это совсем не обязательное условие…

      Теперь, об инструменте № 2… Вот скажи, а разве в твоём случае, если ты захочешь убрать буквицу – он тебе не понадобится? Руками будешь шорткоды из статей выковыривать?

      Вот и получается, что и при твоём способе надо ставить как минимум два плагина – плагин буквицы, и что-то подобное инструменту № 2… И в чём тогда разница?

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

      Ну, и как всегда, каждый ведь сам выбирает, что ему использовать. Ты показал отличный способ с плагином, я показал альтернативу, на мой взгляд, довольно неплохую – без плагина. Что-то подойдёт одному, что-то другому. Ни твой способ не отменяет мой, ни мой способ не отменяет твой.

      • Ну вот, я же говорил, что профессионал  Скажем так, почти переубедил, но есть пару моментов…

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

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

        Ладно, допустим, плагин, о котором ты писал, добавляет в редактор свою кнопку – бесспорный плюс. Но разве кроме этих шорткодов никакие другие ты не используешь?

        Опа на, а вот здесь как раз вы меня подловили  Да, я использую другие шорткоды для оформления текста в рамки. Значит…мне наверно будет полезно установить тот плагин и упростить жизнь, хотя…она не такая уж и была тяжёлая, когда вручную вставлял шорткод!

        Подведу итог:

        Ваш способ великолепный! Мне понравилось то, что буквицу видно в редакторе. И ещё плюс в том, что не надо удалять шорткоды.Наверно всё-таки вам удалось убедить в том, в вашем способе достоинств больше чем в моём (хотя это не мой )

        Спасибо Александр

        • Почему то мне мало верится, что эти плагины популярны среди многих простых блогеров. Лично я впервые о них слышу и до сих пор не пользовался. 

          Возможно, что и так, хотя я об этих плагинах писал в своих обзорах…

          А вот, кстати, их популярность:

          AddQuicktag – более 80 000 установок.

          Search and Replace – более 200 000 установок.

          Search Regex – более 50 000 установок.

          Это данные из репозитория вордпресс…

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

          Как я уже говорил – вовсе необязательно. Можно просто тупо хранить строчку с тегом span в каком-нибудь текстовом файлике и, при необходимости копировать оттуда. А если в этом файлике хранить и другие свои шорткоды и важные вставки, да разместить его где-нибудь на Google Диске, например, то он всегда будет под рукой и доступен даже с мобильного устройства. В этом случае никаких дополнительных плагинов устанавливать нет необходимости. При условии, что потом это своё творчество не будем убирать из статей…

          Просто раз я уже всё-равно использую AddQuicktag у себя на блоге, то грех было не совместить полезное с приятным. Что я и показал в статье.  Но, как видишь, его использование совсем необязательно.

          Кстати, у меня вся база с паролями и кодами доступа хранится на Dropbox.   Правда не в текстовом формате. Тем не менее я из любой точки и с любого устройства имею к ней доступ. Очень удобно!

  3. Все!!! Убедил!!! Протестирую сначала на тестовом блоге и…ВПРЕД!

  4. Здравствуй, Саша! У меня два месяца не было интернета, только пару дней как подключили. Пока сидела без дела, написала книжку о бесплатных методах привлечения трафика, которая поможет зарабатывать в партнёрских программах новичкам. Сейчас делаю страницу захвата, хотела сделать на ней форму подписка, как на твоём блоге. То есть, чтобы была просто кнопка, а при нажатии на неё открывалось окошко с формой подписки. Прогуглила весь интернет, ничего не нашла. Хочу попросить у тебя скрипт для подключения такой функции. Поделишься? И не плохо бы тебе написать статью о таком способе размещения формы подписки. Будешь на первом месте в поисковой выдаче! Прости, что пишу не по теме статьи, но очень уж хочется настроить подписную страницу по современному. Добавила на неё различные эффекты к тексту и картинкам, а вот с формой заминка. Помоги мне пожалуйста! 

     

    • Ира, здравствуй. Боюсь тебя разочаровать – тут нет никаких специальных и секретных кодов. Всё банально и просто.

      Для создания самой формы использую плагин ContactForm7, для вывода её в модальном окне – плагин SBModal.

      При этом, в верхнем меню это выглядит так:

       

       

       

      А в виджете так:

      Здесь Вы можете <br><a href='#KontaktForm'>Написать мне письмо</a>

       

  5. Спасибо, Саша, за ответ. Жалко конечно, что это плагин выводит. Я к подписной странице плагин не приклею. Ну ничего, попробую разобраться, покопаюсь в кодах таких страниц. Ну а если не получится, то оставлю открытой форму подписки. Всего доброго!
    Опа, только сейчас заметила, что у тебя пропал визуальный редактор комментариев. Хотела смайлик оставить, и не поняла куда всё делось!!!
    😉

    • у тебя пропал визуальный редактор комментариев

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

      Я к подписной странице плагин не приклею.

      Посмотри в сторону лайтбокс. По этому поводу в Сети полно примеров. В модальном окне можно вывести любое содержание.

      Либо, действительно, сделай просто открытую форму. Вот глянь, когда-то делал страницу, правда она уже не актуальна, но в виде примера. Там форма открыта, вроде неплохо смотрится…

      Кстати, там соцсети не отображаются, не обращай внимания – это я сам скрипт просто удалил. Потом переделаю…

  6. А у меня на компьютере не отображается визуальный редактор. Видно какой то глюк. Сегодня тоже его нет. А когда пробую обновить страницу, то вместо сайта грузится фон и пусто, ничего нет. А при переходе с почты опять появляется, но без редактора. Может быть это только у меня? Хотя другие сайты грузятся нормально.
    По поводу странички, спасибо за подсказку про лайтбокс. У тебя страничка классная, слов нет! Но мне хочется сделать с прибамбасами (потому что сама наверное такая) 😉
    Увидела у одних ребят, и загорелось сделать подобное. Жаль я ссылку на неё удалила. Но вот что то подобное здесь – mail-scribe.ru/1shag-1day/7/index.html
    Конечно это бзик, но просто хочется узнать как такое сделать. Я же учусь, и стараюсь не пропустить того, чего не знаю.

    • Может быть это только у меня? Хотя другие сайты грузятся нормально.

      Ирина, ну не знаю… Вроде все заходят и у всех всё нормально отображается. А не поможет-ли тебе Ctrl+F5? А не отключены-ли в самом браузере Яваскрипты? Попробуй сменить браузер…

      Но вот что то подобное здесь…
      Конечно это бзик, но просто хочется узнать как такое сделать

      Посмотрел… Ну не-е-ет. Такого и даром не надо. Навязчивость раздражает. Я там нажал "Нет", после чего понял, что никогда больше туда не зайду и ничего мне от них не надо.

      Ира, такой подход только распугает клиентов!

  7. Да, я это понимаю, и не собираюсь так делать. Я просто сделаю форму в отдельном окне, и всё. А эти ди и нет я не буду делать. Кто не захочет подписываться просто закроет страницу не нажимая на кнопку.
    Нажала Ctrl+F5, у меня открылось окно с историей.
    Проверю в настройках браузера, раньше всё было включено. Может быть пока не было интернета что то отключилось. Да, попробовала зайти с другого браузера, вообще не соеденяет, выдаёт такую ошибку
    “504 Gateway Time-out

    The server didn’t respond in time.”

  8. Спасибо, второй способ мне понравился, не знал что такую красоту можно сделать. Все довольно просто и понятно.  

    • А ещё стоит обратить внимание на строку css

      font: 1.8em/1 Georgia; /* Размер и имя шрифта*/

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

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

  9. У меня стоит плагин ультимат шорткод. Мне им очень удобно пользоваться. Он много шорткодов предлагает. Также там есть и буквица. Поэтому я у себя вывожу ее именно этим плагином. Просто мне так удобнее. Не нужно вручную прописывать.

    Раньше я не использовал буквицы, но как статью у Игоря прочитал, так аж самому захотелось ее прикрутить. Теперь потихоньку буду вставлять буквицу во все посты. Так как-то оригинальнее текст смотрится.))) Главное, один раз ставить только в начале статьи, а иначе она приедаться будет.

    • Сергей, у каждого есть свой инструментарий и собственные предпочтения. Так и должно быть. Это нормально. Я просто показал свой, но можно и вообще без всего.

      Когда-то я пробовал Shortcodes Ultimate, если речь о нём… Мне он показался излишне навороченным и тяжеловатым. Встроено множество шорткодов, из которых я использовал от силы два – три… Только тут ведь зависит от того, у кого какие нужды, сейчас глянул – более 300 000 установок, цифра говорит сама за себя.

      Лично для меня оказалось проще использовать AddQuicktag – легкий, прописываю там только то, что необходимо… Хотя у него только 80 000 установок.

      Главное, один раз ставить только в начале статьи, а иначе она приедаться будет.

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

      • Да, Александр, тут многое зависит от предпочтения вебмастера. Я может быть и попробовал бы ваш способ, но я специально для многих задач люблю пользоваться Shortcodes Ultimate. Да, он немного громоздкий – содержит шорткоды так сказать, на все случаи жизни. Но я много чего в нем использую. К примеру, делаю буквицы, спойлеры, различные вкладки, галереи, метки и так далее. Поэтому решил не собирать различные скрипты или мелкие плагины, а установить такой хороший сборник дополнительных функций.)))

        Буквицу я только один раз в статье использую. Вообще считаю, что она на многие блоги пойдет. Не важно литературная тематика или нет. Просто ее нужно подходяще оформить. А так буквицы это хорошо. Они помогают человеку сконцентрироваться и сразу обратить внимание именно на начало текста. На сайте и блогах частенько появляются отвлекающие факторы. Буквица в этом плане немного помогает человеку сконцентрироваться на главном.

        • решил не собирать различные скрипты или мелкие плагины, а установить такой хороший сборник дополнительных функций

          На мой взгляд – это абсолютно верное решение. Но тут, как я и говорил, всё зависит от нужд. Если Вы используете многие фишки этого плагина, то для Вас он великолепное решение. Мне-же, ради трёх-четырёх шорткодов его ставить наверное не резон. Хотя вот спойлер у Вас в комментах мне очень глянулся…

          Насчёт буквицы, хоть я и заявлял, что считаю это излишеством и не буду использовать, тем не менее сам уже вторую статью так оформляю… Понравилось… cheeky

  10. Благодарю Вас, Александр, за столь обширный материал. Мне кажется, такая буквица очень пригодится для сайта со сказками. Выйдет очень похоже на настоящую книгу, знакомую с детства. Или с пословицами-поговорками.

    А я в последнее время что-то ухожу от излишеств. Без них проще, но не так интересно конечно!

    • А я в последнее время что-то ухожу от излишеств.

      Да в принципе, Вы и правы. Когда идёт серьёзная работа с блогом, то излишества ни к чему. Это я тут могу развлекаться для собственного интереса. Ну и может кому-то это и пригодится – зависит от специфики блога…

  11. Спасибо, Александр, взяла вашу информацию на заметку, со временем может пригодится!

    • Да, Лидия, так зачастую и бывает – смотришь и думаешь, а мне-то зачем? Но спустя какое-то время начинаешь вспоминать где эту фишку видел, devil потому, что вдруг захотелось применить и у себя…

  12. Здорово смотрится такая красивая заглавная буква! У себя на сайте использовать вряд ли буду. Но сама идея супер! Надеюсь, многим Вашим читателям, Александр, она будет очень кстати!

  13. Интересная информация, вы просто "творец". Беру на заметку.

  14. Я тоже не сторонник выделения заглавной буквы, но способ очень понравился

    Александр, с вашими познаниями, вам надо авторские шаблоны под вордпресс верстать.

    • Спасибо, Андрей! Про шаблоны у меня была идея, но мне показалось это слишком хлопотным – в тонкостях создания шаблона надо разбираться а где взять на это время… Как-то пробовал создать в Артистере, но так нигде и не использовал. Считаю, что по-хорошему шаблон надо делать ручками. И не абы как – стотысячный клон подобных себе, а что-то оригинальное… Вряд-ли я такое потяну. Но, если честно, сама идея отложена на будущее с пометкой "когда-нибудь"… cheeky

  15. Найти более простое и легкое решение подвластно большому профессионалу! Идея мне тоже понравилась, тем более её реализация не требует особых усилий.

    • подвластно большому профессионалу

      Спасибо, Людмила, только это не про меня… Я очень многих вещей не знаю и не умею… Так, что у меня только любительский уровень, можно сказать…

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

  17. Надежда

    Самым простым мне показался способ с помощью span, что трудного  – в скопировать и вставить?

  18. Можно использовать псевдоэлемент ::first-letter

    Из минусов — его тоже как-то контролировать нужно, иначе все параграфы будут им забиты, что не всегда желательно. Либо ввести дополнительный класс для данного эффекта (или его отсутствия). Оформление удобнее в одном месте иметь, думается.

    p::first-letter {
        margin-right:1px; font: 1.8em/1 Georgia;
        font-weight: bold;
        text-shadow: 1px 1px 3px silver;
        color: crimson;
    }

     

    • Согласен, с отдельным классом – хороший вариант. В таком случае, если надоест буквица – достаточно удалить из css соответствующий селектор, либо изменить его. И не надо лопатить статьи.

      Но в моём варианте больше гибкости в том плане, что можно использовать не только на первой букве, а в любой комбинации…

  19. Саша, здравствуйте! А вы не рассматривали вариант с буквицей, которая вниз уходит, она в плагине называется плавающей почему то. Я бы хотела без плагина обойтись, но вот красивее, когда заглавная буква вниз уходит.

    • Лена, здравствуйте! Как Вы наверное заметили, я и эту-то буквицу в статьях почти не использую. Крайне и крайне редко. Как говориться – придумал, показал, поигрался и забыл… В принципе можно со стилями поиграть, чтобы буква уходила вниз. Но это уже не мой вариант. В своём я могу и целые строки выделять буквицей…

  20. Э-Эх, Саша, какие у вас достойные игрушки Я подожду, вот чек бокс в форме обратной связи дождалась :). Почитаю еще и сделаю. Спасибо вам!.

    • Елена, я не совсем понимаю, чего Вы именно хотите, но тут нет ничего запредельно-сложного. В стиль нужно просто добавить один параметр – vertical-align. Вот смотрите:

      А вот код:

      <span style="margin-right: 1px;font:bold 1.8em/1 Georgia;text-shadow: 1px 1px 3px silver;color: crimson;vertical-align:middle;">В</span>от плавающий стиль буквицы!

      Здесь значение vertical-align:middle

      А здесь

      Здесь значение vertical-align:top

      Полный список значений можно посмотреть и подобрать под свои нужды вот здесь

  21. Саша, спасибо Вам, за то что увидели у меня на сайте, что плагин отвалился. Я же использовала Simple Drop Cap, а он умер год назад, оказывается. Сейчас тему меняла, с плагинами запуталась и удалила его, а восстановить не могу. С новой темой столько проблем получила, что даже не все вижу на сайте. Даже не знаю, как теперь, в каждой статье шорт код удалятьdevil

    Мне нравился вид буквицы, поэтому Вашими рекомендациями не воспользовалась. Стили не изучила до сих пор :(, сожалею.

    • Елена, а зачем все статьи вручную лопатить? В этой-же статье я показывал два плагина, которые позволяют сделать нужную замену одним запросом: Search & Replace и Search Regex. На второй даже ссылка есть на репозиторий. Там, кстати, подобных плагинов немало. Иногда они здорово облегчают жизнь…

      А если уж так нравится буквица, то посмотрите мой вариант, особенно второй. Ни от чего не зависит, будет работать всегда – там чистый CSS, а он никуда не денется…. 

      • Ну, думаю, не скоро мне захочется теперь буквицы ставить, после таких косяков. А с плагином  Search Regex  попробую разобраться. Получается я активировала плагин, нашла стиль своей буквицы, удалила стиль из тега span , плагин сработал и я могу деактивировать плагин, да? Щас попробую.

        • Не совсем так, Елена. Там принцип – найти и заменить. Вам нужно два поиска/замены сделать.

          Найти [ dropcap ] и заменить на пустую строку
          Найти [ /dropcap ] и заменить на пустую строку.

          Кстати, интересно, у меня этот шорткод срабатывает и без всякого плагина… Еле написал этот ответ, а то всё буквицей получалось… 

  22. Ну даже не знаю, что сказать. Это круто, очень круто! У меня нет теперь шорткодов! Саша! Какой Вы суперски умный. Спасибо.

Добавить комментарий

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

 Ясогласен с политикой конфиденциальности сайта и пользовательским соглашением