Редактор WordPress: руководство + полезные хаки

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

Редактор WordPress: руководство + полезные хаки

Дело в том, что в визуальном Вы только пишите, форматируете, располагаете картинки на странице — в общем работаете, как как в Word’е. А вот как все это отформатирует в html встроенный обработчик — никому не известно. И по факту он это делает не всегда корректно, создавая множество ненужных тегов и символов, что ухудшает оптимизацию кода страницы.

Поэтому я всегда пользуюсь и Вам советую HTML редактор WordPress. Кнопок тут меньше, панель скорее напоминает bb редактор на форумах, однако к этому вы достаточно быстро привыкните и сложностей не будет, тем более, что есть возможность добавить в редактор свои частоиспользуемые кнопки, о чем я расскажу ниже. Зато будет большой плюс — полный контроль за html кодом на странице.

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

[b] — выделение жирным шрифтом. «B» обозначает «bold» — жирный, но по факту ставится более мощный в плане seo тег
[i] — выделение текста курсивом с помощью тега . Также сильное действие для поисковой оптимизации
[link] — вставка ссылки на страницу [b-quote] — выделение текста в виде цитаты

[del] — перечеркнутый текст

[img] — вставка изображения со стороннего сайта [ul] — вставка списка на страницу [li] — ненумерованный элемент списка [ol] — нумерованный элемент списка [сode] — вставка на страницу исполняемого кода без его работы (php, javascript, css и др.) [more] — для вставки тега , который отделяет анонс новости от основной части [Поиск] — поиск по словарю [Закрыть теги] — закрыть все открытые теги

[На весь экран] — развернуть редактор на всю ширину монитора

А также иконка Загрузить/Вставить для добавления медиа файла (на скриншоте отмечена стрелкой)

Редактор WordPress: руководство + полезные хаки

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

Как показать скрытые кнопки в WYSIWYG редакторе WordPress?

Визуальный редактор WordPress поддерживает намного больше тегов, чем присутствует по умолчанию. И для того, чтобы все они отображались, надо в файл functions.php добавить код:

function enable_more_buttons($buttons) {
$buttons[] = 'sub';
$buttons[] = 'u';
$buttons[] = 'cut';

// и так далее ...

return $buttons;
}
add_filter("mce_buttons", "enable_more_buttons");

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

bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, charmap, visualaid, anchor, newdocument, separator

С редактором HTML все немного сложнее. Во-первых, он не поддерживает вставки некоторых тегов из-за стандарта XTML 1.0, под который он форматирует текст. Например

 или . Чтобы они заработали добавим в functions.php строки:

function fb_change_mce_options($initArray) {
        $ext = 'pre[id|name|class|style],iframe[align|longdesc| name|width|height|frameborder|scrolling|marginheight| marginwidth|src]';

        if ( isset( $initArray['extended_valid_elements'] ) ) {
                $initArray['extended_valid_elements'] .= ',' . $ext;
        } else {
                $initArray['extended_valid_elements'] = $ext;
        }

        return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

Как добавить кнопки в html редактор WordPress



Теперь про вставку дополнительных кнопок в html редактор WordPress. Для этого понадобиться найти в глубине папок файл /wp-includes/js/quicktags.dev.js, сохранить на комп и открыть в текстовом редакторе. Далее находим в нем участок код наподобие этого:
Редактор WordPress: руководство + полезные хаки
Это как раз все те теги, которые выведены в данный момент на панель редактора. Чтобы добавить новую кнопку в редактор WordPress, копируем ту строку, где вставлены какие-то параметры, например я скопирую самую вторую строку (обязательно с запятой на конце)
edButtons[20] = new qt.TagButton('em','i','','','i'),

и добавлю ее предпоследней (!).
Сохраним и будем разбираться, что к чему.
edButtons[20] = new qt.TagButton('em' //    название
,'i'//   имя для редактора
,'' //    открывающий тег
,'' //    закрывающий тег
,'i'),//    название для функции

Далее мы должны дать ей числовой ID, которого еще нет, кратный 10, который задает порядок расположения кнопок в редакторе. В моем случае это будет «150». И изменим тег, который она будет вставлять. Например, я хочу добавить тег для сокрытия ссылок и текста от поисковика на странице. Мой код теперь должен выглядеть так:
edButtons[150] = new qt.TagButton('noindex'
,'noindex'// имя для редактора
,'' // открывающий тег
,'' // закрывающий тег
,'noindex'),

Попробуйте таким же образом добавить еще какие-то теги, которые часто приходится вставлять, но которых нет в редакторе WordPress. Если закрывающего тега нет, например надо вставить скриншот сайта при помощи тега [snар], то в строке закрывающего тега его место оставляем пустым, а в открывающий добавляем дополнительные параметры.
Получится вот так:
edButtons[150] = new qt.TagButton('noindex'
,'snap'// имя для редактора
,'[snap url="" alt="" w=170 h=100]' // открывающий тег с доп. параметрами
,'' // пустота вместо закрывающего тега
,'snap'),

После этого сохраните редактируемый файл 2 раза (!) — как quicktags.dev.js и quicktags.js.
Перед загрузкой обратно на сервер сделайте резервные копии файлов quicktags.dev.js и quicktags.js
Теперь загружаем их обратно в папку wp-includes/js/, перезаписывая содержащиеся в ней файлы. И смотрим результат. Если делали все правильно, должно получиться что-то типа этого:
Редактор WordPress: руководство + полезные хаки
Как сделать в WordPress шорткод (shortcode)?
Добавлять кнопки с тегами мы научились, но это еще не все. Теперь я покажу еще одну фишку — до сих пор с помощью шорткодов мы вставляли лишь единичные теги. Но можно вставлять целые блоки с html кодом. Например, если надо в тело статьи добавить рекламный блог от Яндекс Директа или AdSense Google. До сих пор мы использовали плагин AdManager, но можно обойтись и без него.
Открываем файл functions.php и добавляем новую функцию:
/*Добавляем новую функцию*/
function adsense_468x60() {
return '






';
}
/*Создаем shortcode*/
add_shortcode ('adsense', 'adsense_468x60');

Разумеется, код скрипта рекламного блока замените на свой. В последней строке за вывод рекламного блока мы назначили ответственным код с названием «adsense», то есть теперь чтобы вставить на страницу в середине статьи данный рекламный блок, достаточно прописать в тексте шорткод [adsense]. Ну а как добавить кнопку с этим шорткодом на редактора мы уже знаем.
Для ленивых есть также отличный плагин AddQuickTag, позволяющий добавлять новый кнопки в панель непосредственно из админки.
На этом почти все. Остался еще один момент — возвращаясь к визуальному редактору, скажу, что в WordPress используется TinyMCE редактор. Если вы не хотите заморачиваться с правкой кодов, а html слишком сложная вещь, то можете заменить стандартный WYSIWYG вариант более продвинутыми, такими как TinyMCE Advanced или FCKEditor.
Вконтакте
Facebook
Twitter
Google+
Одноклассники ➤

Оцените статью