ДОСТИГНУТО:

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

Расширяем текстовый редактор WordPress

ТК ТрансЭйм предлагает: грузоперевозки по Москве. Работаем качественно, быстро, надежно. .

Всем привет!

Как известно, в WordPress редакторе существует два режима публикации и редактирования постов — Визуальный и Текстовый. Я при публикации всегда использую текстовый редактор WordPress. Даже и забыл, что такое вкладка «Bизуально». Конечно, визуально намного проще редактировать посты, но я рекомендую все-таки привыкать пользоваться текстовым редактором WordPress в режиме «Текст» и этому есть рад объективных причин.

Почему текстовый редактор WordPress?

Первая и самая весомая причина в том, что визуальный редактор текста WordPress «оставляет после себя очень грязный код». При публикации текста, если вы выделяете слова или словосочетания цветом, к примеру, редактор генерирует стили inline. То есть применяет стили напрямую к элементам, прямо в статье, что не очень хорошо для поисковых систем. Если много таких стилей, то получается дублированный контент. Ведь такие-же стили inline уже применены в множестве других сайтов.

Пример из визуального WordPress редактора :

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

Ну и третья субъективная причина, пользуясь текстовым редактором WordPress вы быстрее освоите азы HTML и СSS. Ведь любой блоггер должен знать основы этих языков, так как постоянно приходится с ними сталкиваться, какая бы ни была автоматизированная система. Но если я вас не убедил, и вы будете и дальше использовать визуальный редактор, то у меня есть статья о том как добавить собственные стили в визуальный WordPress редактор.

Расширяем текстовый редактор WordPress

Все бы ничего, но в текстовом редакторе WordPress очень скудный набор тегов. Явно не хватает заголовков, да и не только их. Но это очень легко решаемое неудобство. Ниже я опубликую как добавить в редактор не только заголовки, но и целые блоки, возможно даже и вложенные. Можно прописать стили для кнопок, прописать стили для выделения текста цветом и прочее. Все стили прописываются в таблице стиле, код получается чистым, валидным и без лишних тегов.

Пример того, чем и как расширить текстовый редактор WordPress

Добавляем код в файл functions.php

Вот как выглядят эти добавленные кнопки у меня в WordPress редакторе:

Этот отрывок кода добавляет в WordPress редактор теги h2, h3, pre, div, которые я наиболее часто использую при публикации статей.
Просто по аналогии добавляйте в код нужные вам теги, и удаляйте лишние. Только смотрите внимательно и не пропускайте кавычки.

А как добавить теги целых блоков в WordPress редактор текста?

Очень просто, также по аналогии я добавил в текстовый редактор WordPress так называемые «выноски в стиле bootstrap» warning, danger, info. И естественно прописал в таблице стилей style.css их стили.

В итоге в файле functions.php у меня получился такой код:

А вот и сами блоки:

Блок danger

Здесь находится содержимое выноски danger.

Блок warning

Здесь находится содержимое выноски warning.

Блок info

Здесь находится содержимое выноски info.

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

Можно поставить кнопку, которая позволяет выстраивать текст в две адаптивные колонки в публикациях. Код текста в два столбца здесь.

Кому интересны стили выносок callout, вот они:

— Остались вопросы? Жду их в комментах.

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




лайк

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

1 комментарий Расширяем текстовый редактор WordPress

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

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