ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Как добавить собственные стили в редактор текста WordPress

.

Всем привет!

Визуальный редактор текста WordPress изначально (после установки движка) имеет небольшой, но достаточный для форматирования публикаций набор опций.
Но всегда хочется добавить ту, или иную функцию, а зачастую и целые классы из таблицы CSS. Да, это не опечатка! WordPress позволяет расширять редактор вплоть до добавления в публикацию целых стилизованных блоков, не говоря о тэгах и шоркодах. И в этой статье пойдет речь о том, как добавить свои собственные классы CSS, без использования плагинов.

Конечно, всегда можно воспользоваться специальными плагинами для расширения визуального редактора не утруждая себя ручной правкой кодов. Но для оптимизации сайта не желательно устанавливать много расширений (плагинов), тем более что и так уже установлено несколько «обязательных».

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

Итак просто скопируйте приведенный ниже (в спойлере) код, и просто добавьте его в файл functions.php, перед закрывающим тегом ?>

После добавления кода, в визуальном редакторе должна появиться кнопка в виде выпадающего меню с нашими классами.

Для того, чтобы добавить свой стилизованный блок в редактор текста, нужно всего-лишь скопировать дочерний элемент из массива, (на скриншоте обведен красным прямоугольником) и поменять настройки. После чего можно удалить все дочерние элементы из данного отрывка кода и добавлять по аналогии свои собственные дочерние элементы. Эти элементы должны в последствии отображаться в выпадающем меню в редакторе и каждый из элементов представляет из себя тэг с определенным классом CSS. Например <a class=button_1 href="#">Сюда останется вставить ссылку</a>. Смотрите скриншот :

Где :

  1. Viki block — название блока, может быть произвольным.
  2. div — тег, можно использовать любые теги, к которым присваиваются классы.
  3. viki — ваш собственный класс из таблицы CSS, который присвоится тегу.

Все, что осталось сделать — добавить собственные классы со стилями для визуального редактора WordPress в таблицу CSS.

И зачем запоминать классы, открывать файл стилей (style.css), чтобы посмотреть нужный, применять на компьютере буфер обмена, если все находится на расстоянии одного клика, в визуальном редакторе текста WordPress !

БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

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

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