изменение файлов шаблона WordPress

’tag’

Добавление кнопок на панель Визуального редактора в Полноэкранном режиме в WordPress 3.3.2

Май 31, 2012

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

1-й автор пишет про созданный фильтр wp_fullscreen_buttons для добавления кнопки на панель редактора в Полноэкранный режим. До того, как попал на его запись, я заметил аналогичную функцию в плагине SyntaxHighlighter TinyMCE Button. Она находится в следующем файле:
/wp-content/plugins/syntaxhighlighter-tinymce-button/sh-tinymce-button-box/sh-tinymce-button-box.php

Добавляется следующий фильтр:

add_filter('wp_fullscreen_buttons', 'shtb_adv_codebox_fullscreen');

Сама функция shtb_adv_codebox_fullscreen выглядит следующим образом:

// For fullscreen mode
function shtb_adv_codebox_fullscreen($buttons) {
	$buttons['shtb_adv_codebox'] = array(
		'title' => __("SyntaxHighlighter TinyMCE Button CodeBox", "shtb_adv_lang"),
		'onclick' => "tinyMCE.execCommand('shtb_adv_codebox_cmd');",
		'both' => false);
	return $buttons;
}

Как видно, в массив $buttons добавляется новое значение (кнопка) shtb_adv_codebox с заданными параметрами, которые также задаются в массиве. Более всего я обратил внимание конечно на JavaScript функцию, которая вызывается при нажатии:

tinyMCE.execCommand('shtb_adv_codebox_cmd');

Я сразу сделал попытку найти весь список функций execCommand для TinyMCE, но мне это не удалось. Но продолжаю дальше, это пока не важно и к этому я еще вернусь.

Оригинальный массив $buttons, который содержит все кнопки панели Визуального редактора в Полноэкранном режиме находится здесь:
/wp-includes/class-wp-editor.php

Вырезка из кода данного файла:

$buttons = array(
	// format: title, onclick, show in both editors
	'bold' => array( 'title' => __('Bold (Ctrl + B)'), 'onclick' => 'fullscreen.b();', 'both' => false ),
	'italic' => array( 'title' => __('Italic (Ctrl + I)'), 'onclick' => 'fullscreen.i();', 'both' => false ),
	'0' => 'separator',
	'bullist' => array( 'title' => __('Unordered list (Alt + Shift + U)'), 'onclick' => 'fullscreen.ul();', 'both' => false ),
	'numlist' => array( 'title' => __('Ordered list (Alt + Shift + O)'), 'onclick' => 'fullscreen.ol();', 'both' => false ),
	'1' => 'separator',
	'blockquote' => array( 'title' => __('Blockquote (Alt + Shift + Q)'), 'onclick' => 'fullscreen.blockquote();', 'both' => false ),
	'image' => array( 'title' => __('Insert/edit image (Alt + Shift + M)'), 'onclick' => "fullscreen.medialib();", 'both' => true ),
	'2' => 'separator',
	'link' => array( 'title' => __('Insert/edit link (Alt + Shift + A)'), 'onclick' => 'fullscreen.link();', 'both' => true ),
	'unlink' => array( 'title' => __('Unlink (Alt + Shift + S)'), 'onclick' => 'fullscreen.unlink();', 'both' => false ),
	'3' => 'separator',
	'help' => array( 'title' => __('Help (Alt + Shift + H)'), 'onclick' => 'fullscreen.help();', 'both' => false )
);

$buttons = apply_filters( 'wp_fullscreen_buttons', $buttons );

Однако, видно, что здесь на событии onclick вызывается не функции вызываются без execCommand, а, к примеру, как fullscreen.ul(). С помощью поиска, я обнаружил, как кнопки на самом деле работают. Я нашел следующий файл:
/wp-admin/js/wp-fullscreen.dev.js

Привожу часть кода:

/**
 * Buttons
 */
api.b = function() {
	if ( s.has_tinymce && 'tinymce' === s.mode )
		tinyMCE.execCommand('Bold');
}

api.i = function() {
	if ( s.has_tinymce && 'tinymce' === s.mode )
		tinyMCE.execCommand('Italic');
}

api.ul = function() {
	if ( s.has_tinymce && 'tinymce' === s.mode )
		tinyMCE.execCommand('InsertUnorderedList');
}

api.ol = function() {
	if ( s.has_tinymce && 'tinymce' === s.mode )
		tinyMCE.execCommand('InsertOrderedList');
}

Отлично, теперь понятно, что и здесь все работает через тот же tinyMCE.execCommand. Ссылки по теме:

Я так и не понял, на сайте TinyMCE предлагается брать коды execCommand с сайта Mozilla и Microsoft? Плагин SyntaxHighlighter TinyMCE Button, как было выше показано, использует свою команду. В общем это для тех, кто будет копаться.

Добавим наконец-то свои кнопки на панель в Полноэкранном режиме. В закрытой части сайта открываем "Внешний вид", затем "Редактор". Открываем на редактирование файл functions.php. Вставляем сверху:

function cay_adv_fullscreen_buttons($buttons) {
	return $buttons;
}
add_filter('wp_fullscreen_buttons', 'cay_adv_fullscreen_buttons');

Название функции cay_adv_fullscreen_buttons может быть любым. Я сделал для уникальности со своим префиксом "cay". Однако, ни одну кнопку я не добавил, а в функции вернул массив с существующими.

К примеру, хочу добавить кнопку подчеркивания. Теперь код будет выглядеть так:

function cay_adv_fullscreen_buttons( $buttons ) {
	$buttons['underline'] = array(
		'title' => __("Underline"),
		'onclick' => "tinyMCE.execCommand('Underline');",
		'both' => false
	);
	return $buttons;
}
add_filter('wp_fullscreen_buttons', 'cay_adv_fullscreen_buttons');

После изменений, за кнопкой "Справка" на панели в Полноэкранном режиме появится кнопка "Подчеркивание". Если изменить имя элемента массива с underline на underline2 ($buttons['underline']), то ничего не будет работать.

Но как же я узнал это имя и указал правильно "execCommand = tinyMCE.execCommand('Underline');". Сначала конечно взял из головы. Имена используемых кнопок прописываются в следующем файле (уже упоминал его):
/wp-includes/class-wp-editor.php

Приведу вырезку:

if ( $set['teeny'] ) {
	$mce_buttons = apply_filters( 'teeny_mce_buttons', array('bold', 'italic', 'underline', 'blockquote', 'separator', 'strikethrough', 'bullist', 'numlist', 'justifyleft', 'justifycenter', 'justifyright', 'undo', 'redo', 'link', 'unlink', 'fullscreen'), $editor_id );
	$mce_buttons_2 = $mce_buttons_3 = $mce_buttons_4 = array();
} else {
	$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', '|', 'bullist', 'numlist', 'blockquote', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'link', 'unlink', 'wp_more', '|', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id);
	$mce_buttons_2 = apply_filters('mce_buttons_2', array( 'formatselect', 'underline', 'justifyfull', 'forecolor', '|', 'pastetext', 'pasteword', 'removeformat', '|', 'charmap', '|', 'outdent', 'indent', '|', 'undo', 'redo', 'wp_help' ), $editor_id);
	$mce_buttons_3 = apply_filters('mce_buttons_3', array(), $editor_id);
	$mce_buttons_4 = apply_filters('mce_buttons_4', array(), $editor_id);
}

Также я просматривал исходный код страницы редактирования записи. К примеру, HTML код кнопки "Выравнивание по центру" следующий:

<a role="button" id="content_justifycenter" href="javascript:;" class="mceButton mceButtonEnabled mce_justifycenter" onmousedown="return false;" onclick="return false;" aria-labelledby="content_justifycenter_voice" title="По центру (Alt + Shift + C)" tabindex="-1" aria-pressed="false">
	<span class="mceIcon mce_justifycenter"></span>
	<span class="mceVoiceLabel mceIconOnly" style="display: none;" id="content_justifycenter_voice">По центру (Alt + Shift + C)</span>
</a>

Видно, что значение id равно content_justifycenter. Так вот, по моему предположению, приставку content_ я откидывал и получал название команду justifycenter для execCommand в TinyMCE. Метод конечно не очень.

На радостях я добавил еще 2 кнопки к себе на панель – "Выравнивание по ширине" и "Перечеркнутый текст":

$buttons['justifyfull'] = array(
	'title' => __("justifyfull"),
	'onclick' => "tinyMCE.execCommand('justifyfull');",
	'both' => false
);
$buttons['strikethrough'] = array(
	'title' => __("strikethrough"),
	'onclick' => "tinyMCE.execCommand('strikethrough');",
	'both' => false
);

Кнопки появились и заработали. После этого я сделал скриншот панели с кнопками в Обычном режиме и в Полноэкранном. Совместил два изображения и те кнопки, что добавлял, зачеркивал. Так я хотел получить полноценную панель.

Добавление новых кнопок длилось несколько минут, пока я не дошел до кнопки, которая открывала окошко для выбора цвета выделенного текста. Это кнопка forecolor и она не стала работать. Я стал вновь копаться. "Своим" методом я понял, что нужна дополнительная кнопка, та, что справа от главной и с перевернутым треугольником. Я решил, что ее имя forecolor_open и добавил. Но кнопка выбора цвета текста все равно не заработала.

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

Хочу заметить, что панель с кнопками имеет ограниченную ширину, а так как строка одна, то место под желаемые кнопки нужно экономить. Для того же, чтобы добавить Дополнительную панель, придется править файл class-wp-editor.php или файл с CSS стилями. В файле class-wp-editor.php HTML Визуального редактора Полноэкранного режима находится в методе wp_fullscreen_html():

public static function wp_fullscreen_html() {

Также не стоит забывать про следующий файл wp-fullscreen.dev.js, а точнее wp-fullscreen.js. Файл со вставкой .dev. для разработчиков, в последствии он сжимается, имена функций сокращаются. Поэтому рабочий файл wp-fullscreen.js. Стоит обратить внимание на функцию init конечно, которая вызывается при запуске Полноэкранного режима.

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

Для тех же, кого это не устраивает и тем, кому нужен полноценный Визуальный редактор TinyMCE в Полноэкранном режиме, ответ ждет в следующих записях.

Tags: , , , , , , , , , ,
Записано в WordPress, Программирование    |    Постоянная ссылка

Изменение размера шрифта Визуального редактора в WordPress 3.3.2

Май 27, 2012

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

Визуальный редактор выводится посредством IFrame. Поэтому стили главного HTML документа на него не распространяются.

Как всегда поиск я начал с Интернета. Не без труда нашел следующую статью:

Вновь нужно отредактировать файл в используемой теме functions.php. При использовании темы twentyeleven это папка:
wp-content/themes/twentyeleven

Достаточно добавить внутрь <?php ... ?> в любом месте следующую строчку:

add_editor_style();

Теперь Визуальный редактор будет искать в папке с темой файл стилей editor-style.css. Значит нужно его добавить в папку с темой со следующим содержимым:

#tinymce {
	font-size: 14px;
}

После сохранения файла CSS, изменения сразу вступают в силу.

О функции add_editor_style можно прочитать на данной странице в официальной документации WordPress:

Мой файл editor-style.css принял следующий вид:

#tinymce, #tinymce p {
	font-family: Verdana, sans-serif;
	font-size: 0.9em;
}
p {
	margin-top: 0;
}
body {
	line-height: 1.2em;
}
code {
	font: 1em 'Courier New', Courier, Fixed;
}
h2 {
	font-size: 0.85em;
	font-weight: bold;
	padding: 0;
	margin: 0;
}
pre {
	margin-top: 0;
}

Tags: , , , , ,
Записано в WordPress    |    Постоянная ссылка

Как изменить размер шрифта HTML редактора в WordPress 3.3.2

Май 26, 2012

Я использую HTML режим для написания записи в WordPress, т.к. Визуальный редактор сносит некоторые специальные символы.

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

Решение задачи заключается в изменении файла functions.php в папке используемой темы. При использовании темы twentyeleven это папка:
/wp-content/themes/twentyeleven

В любом месте в внутри вставляется следующий код:

add_action( 'admin_print_styles-post.php', 'my_admin_css' );
add_action( 'admin_print_styles-post-new.php', 'my_admin_css' );
function my_admin_css() {
?>
<style type="text/css">
#editorcontainer textarea#content {
	font-size: 130% !important;
}
</style>
<?php
}

Однако, это решение видимо подходит для Визуального редактора, а меня интересует HTML.

Предупреждение! В версии WordPress 3.3.2 данное решение для Визуального редактора не работает. Читайте в блоге, как изменить размер шрифта Визуального редактора в WordPress 3.3.2.

HTML редактору присвоен CSS класс wp-editor-area, поэтому код будет аналогичным, за исключением стилей:

<pre><style type="text/css">
.wp-editor-area {
	font-size: 14px;
}
</style>

Теперь шрифт HTML редактора будет равен 14 пикселей.

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

Tags: , , , , ,
Записано в WordPress, Программирование    |    Постоянная ссылка