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

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

wordpress редактор

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

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

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

[b] — выделение жирным шрифтом. «B» обозначает «bold» — жирный, но по факту ставится более мощный в плане seo тег <strong>
[i] — выделение текста курсивом с помощью тега <em>. Также сильное действие для поисковой оптимизации
[link] — вставка ссылки на страницу
[b-quote] — выделение текста в виде цитаты
[del] — перечеркнутый текст
[img] — вставка изображения со стороннего сайта
[ul] — вставка списка на страницу
[li] — ненумерованный элемент списка
[ol] — нумерованный элемент списка
[сode] — вставка на страницу исполняемого кода без его работы (php, javascript, css и др.)
[more] — для вставки тега <- -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, под который он форматирует текст. Например <pre> или <iframe>. Чтобы они заработали добавим в 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, сохранить на комп и открыть в текстовом редакторе. Далее находим в нем участок код наподобие этого:

html редактор wordpress

Это как раз все те теги, которые выведены в данный момент на панель редактора. Чтобы добавить новую кнопку в редактор WordPress, копируем ту строку, где вставлены какие-то параметры, например я скопирую самую вторую строку (обязательно с запятой на конце)

edButtons[20] = new qt.TagButton('em','i','<em>','</em>','i'),

и добавлю ее предпоследней (!).

Сохраним и будем разбираться, что к чему.

edButtons[20] = new qt.TagButton('em' //    название
,'i'//   имя для редактора
,'<em>' //    открывающий тег
,'</em>' //    закрывающий тег
,'i'),//    название для функции

Далее мы должны дать ей числовой ID, которого еще нет, кратный 10, который задает порядок расположения кнопок в редакторе. В моем случае это будет «150». И изменим тег, который она будет вставлять. Например, я хочу добавить тег <noindex> для сокрытия ссылок и текста от поисковика на странице. Мой код теперь должен выглядеть так:

edButtons[150] = new qt.TagButton('noindex'
,'noindex'// имя для редактора
,'<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/, перезаписывая содержащиеся в ней файлы. И смотрим результат. Если делали все правильно, должно получиться что-то типа этого:

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

Как сделать в WordPress шорткод (shortcode)?

Добавлять кнопки с тегами мы научились, но это еще не все. Теперь я покажу еще одну фишку — до сих пор с помощью шорткодов мы вставляли лишь единичные теги. Но можно вставлять целые блоки с html кодом. Например, если надо в тело статьи добавить рекламный блог от Яндекс Директа или AdSense Google. До сих пор мы использовали плагин AdManager, но можно обойтись и без него.

Открываем файл functions.php и добавляем новую функцию:

/*Добавляем новую функцию*/
function adsense_468x60() {
return '
<!-----НАЧАЛО СКРИПТА РЕКЛАМНОГО БЛОКА----->
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1452554547940439";
/* page-top-468x60 */
google_ad_slot = "8234244588";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-----НАЧАЛО СКРИПТА РЕКЛАМНОГО БЛОКА----->
';
}
/*Создаем shortcode*/
add_shortcode ('adsense', 'adsense_468x60');

Разумеется, код скрипта рекламного блока замените на свой. В последней строке за вывод рекламного блока мы назначили ответственным код с названием «adsense», то есть теперь чтобы вставить на страницу в середине статьи данный рекламный блок, достаточно прописать в тексте шорткод [adsense]. Ну а как добавить кнопку с этим шорткодом на редактора мы уже знаем.

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




На этом почти все. Остался еще один момент — возвращаясь к визуальному редактору, скажу, что в WordPress используется TinyMCE редактор. Если вы не хотите заморачиваться с правкой кодов, а html слишком сложная вещь, то можете заменить стандартный WYSIWYG вариант более продвинутыми, такими как TinyMCE Advanced или FCKEditor.

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Комментариев: 3

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