WordPress

’tag’

Как создать шаблон ссылок в теме WordPress

Август 23, 2012

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

Для начала через FTP переходим в папку с темой. В моем случае:

/wp-content/themes/wp-notes

Далее создаем новый файл для нового шаблона страницы. Например:

links.php

Открываем файл на редактирование и вставляем в него содержимое стандартного шаблона страницы. У меня стандартный шаблон страницы был в файле index.php.

После находим место вывода содержимого страницы:

<?php the_content(...); ?>

И вставляем строчкой ниже следующий код:

<?php wp_list_bookmarks(); ?>

Для того, чтобы файл определился как шаблон страницы, вставляем 1-й строчкой следующее содержание:

<?php
/*
Template Name: Links
*/
?>

Сохраняем файл и загружаем его на сервер.

Теперь создаем новую страницу и на вкладке "Атрибуты страницы" выбираем "Шаблон" - "Links".

После публикации на странице после содержимого должен быть список ссылок, как у меня на странице Ссылки.

Что мне помогло

Спасибо автору данной статьи:

Про функцию wp_list_bookmarks() можно почитать на официальном сайте WordPress:

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

Лечим SyntaxHighlighter Evolved от удаления новой строки при смене редактора в WordPress 3.3.2

Июнь 5, 2012

Вчера, после того, как я добавил кнопку сохранения на панель Альтернативного Полноэкранного редактора TinyMCE, я отметил, что после сохранения в тегах <pre></pre>, которые по сути даже не должны форматироваться, удаляются новые строки и многострочный код выводится в последствии в одну строку.

Проблема, как я выяснил, заключается в плагине SyntaxHighlighter Evolved, а именно в замене им стандартной функции WordPress pre_wpautop на pre_wpautop2. Происходит это в следующем файле:

/wp-content/plugins/syntaxhighlighter/syntaxhighlighter_mce.js

В самом конце файла находится:

switchEditors._pre_wpautop = switchEditors.pre_wpautop;
switchEditors._wpautop = switchEditors.wpautop;
switchEditors.pre_wpautop = pre_wpautop2;
switchEditors.wpautop = wpautop2;

Нас интересует 1-я и 3-я строки, в которых происходит замена функции. Однако, взглянем на нее, она находится в том же файле:

var syntaxHLlast = 0;
function pre_wpautop2(content) {
	var d = new Date(), time = d.getTime();

	if ( time - syntaxHLlast < 500 )
		return content;

	syntaxHLlast = time;

	content = content.replace(new RegExp('<pre>\\s*\\[(' + syntaxHLcodes + ')', 'gi'), '[$1');
	content = content.replace(new RegExp('\\[\\/(' + syntaxHLcodes + ')\\]\\s*<\\/pre>', 'gi'), '[/$1]');

	content = this._pre_wpautop(content);

	content = content.replace(new RegExp('\\[(' + syntaxHLcodes + ')[^\\]]*\\][\\s\\S]+?\\[\\/\\1\\]', 'gi'),
	function(a) {
		return a.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/<%%KEEPWHITESPACE%%>/g, '');
	});

	return content;
}

Казалось бы не происходит ничего особенного. Я пытался вернуть из функции сразу после вызова переменную content, но это ничего не дало.

Для того, чтобы решить проблему неверного форматирования кода в тегах <pre></pre> достаточно заменить переопределение. Возвращаемся к 4-м строкам, показанным ранее и заменяем их на:

// cay 1 switchEditors._pre_wpautop = switchEditors.pre_wpautop;
switchEditors._wpautop = switchEditors.wpautop;
// cay 2 switchEditors.pre_wpautop = pre_wpautop2;
switchEditors.wpautop = wpautop2;

Теперь при работе и сохранении в Альтернативном Полноэкранном режиме редактора TinyMCE, форматирование кода сохраняется.

Примечание

В своих поисках я пришел к изучению следующего файла:

/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js

При сохранении в Полноэкранном режиме срабатывает следующий код:

ed.onSaveContent.add(function(ed, o) {
	if ( ed.getParam('wpautop', true) && typeof(switchEditors) == 'object' ) {z
		if ( ed.isHidden() )
			o.content = o.element.value;
		else
			o.content = switchEditors.pre_wpautop(o.content);
	}
});

Несмотря на мои попытки внести изменения в эту функцию, код все равно форматировался неверно.

При сохранении, чтобы было понятно, исполняется данная строчка:

o.content = switchEditors.pre_wpautop(o.content);

Удивительно то, что если округлить эту строку в с помощью функции alert(), чтобы посмотреть на содержание переменной o.content до и после ее вызова, то видно, как неправильно форматируется текст. Однако, сам код в последствии имеет верное форматирование. Это скорее всего связано с тем, что добавляется задержка перед сохранением файла. Видимо TinyMCE не успевает проверить и изменить код до начала сохранения.

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

Добавляем список с CSS классами на панель Визуального редактора в WordPress 3.3.2

Июнь 3, 2012

Понадобился функционал в редакторе TinyMCE для добавления заданного класса к текущему параграфу. Нужной кнопки на панели Визуального редактора не оказалось, поэтому начал искать решение.

Задача состоит в том, чтобы после выделения параграфа был доступен список с классами, из которого я бы выбрал необходимый. Главное не переключаться в HTML режим. Например, текущий текст:

<p>Текст параграфа.</p>

после выбора класса "stars" становится следующим:

<p class="stars">Текст параграфа.</p>

Думаю, что идея и ранее была понятна.

Мне помогла следующая статья:

Для добавления списка с классами требуется открыть в Закрытой части блога "Внешний вид", затем "Редактор" и файл functions.php.

Решением задачи становится добавление следующего кода в файл:

function my_mce_before_init( $init ) {
	$init['theme_advanced_buttons2'] .= ',styleselect';
	$init['theme_advanced_styles'] = 'Stars=stars';
	return $init;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

Можно добавить сразу несколько классов, разделив их с помощью ";". Это список в конце концов. Для меня это было не нужно.

Автор указанной выше статьи предлагал использовать следующую строчку вместо моей 2-й:

$init['theme_advanced_buttons2_add'] = 'styleselect';

Хотя метод и рабочий, но мой вариант мне более нравится.

Также есть еще одно решение в официальной документации по WordPress:

Код выглядит так:

// Add the Style selectbox to the second row of MCE buttons
function my_mce_buttons_2($buttons)
{
	array_unshift($buttons, 'styleselect');
	return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function my_mce_before_init($init_array)
{
	// add classes using a ; separated values
	$init_array['theme_advanced_styles'] = "First Class=first-class;Other class=other-class";
	return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

Получается, что 2 раза вызывается функция add_filter(). Возможно это сделано для демонстрации возможностей. Я предпочту опять же свой вариант.

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

Правильный robots.txt для WordPress 3.3.2

Июнь 1, 2012

Свой блог я установил недавно и совсем забыл про файл robots.txt. К мысли исправить его меня подтолкнул просмотр выдачи проиндексированных страниц моего сайта в выдаче Google. Там по непонятной причине оказались страницы с метками (тегами), который от индексации я закрыл.

Но оставлю вопрос с метками. Я вспомнил про robots.txt, посмотрел его через File Editor плагина SEO Ultimate.

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

После поиска в Интернете и просмотров плагинов для редактирования и создания файла robots.txt я остановился на следующей комбинации:

# Added by SEO Ultimate's Link Mask Generator module
User-agent: *
Disallow: /go/
# End Link Mask Generator output

# cay
Disallow: /*?
Disallow: /wp-
Disallow: /wp-*
Disallow: /*.js$
Disallow: /*.inc$
Disallow: /*.css$
Disallow: /*.php$
Disallow: /*.gz$
Disallow: /*.wmv$
Disallow: /*.cgi$
Disallow: /*.xhtml$
Disallow: /*.txt$
Disallow: /feed/
Disallow: /author
Disallow: /cgi-bin/
Disallow: /archive/
Disallow: /wp-admin/
Disallow: /trackback/
Disallow: /wp-content/
Disallow: /wp-content/uploads/*.txt
Disallow: /wp-includes/
Disallow: /wp-login.php
Disallow: */trackback/
Disallow: */comments/
Disallow: /*/feed
Disallow: */feed/
Disallow: /*rurl=*
Disallow: /readme.html
Disallow: /license.txt
Disallow: /search/
Allow: /?p=
Allow: /wp-content/uploads/
Host: ya.samposebe.ru
# cay
Sitemap: https://ya.samposebe.ru/sitemap.xml

Директивы, что обведены комментарием "# cay", мои. Думаю, что теперь все точно хорошо настроено.

Многие директивы взял, как и сказал, из других плагинов. Со своей стороны добавил:

  • Disallow: /wp-content/uploads/*.txt
  • Allow: /?p=
  • Allow: /wp-content/uploads/
  • Host: ya.samposebe.ru

1-я моя директива явно повторяет ту, что ранее обозначена: Disallow: /*.txt$ – но это на всякий случай.

Позволяю индексировать страницы /?p= специально, чтобы робот переходил по коротким ссылкам, которые я использую их для связи записей вместо длинных SEF-ссылок. Все равно срабатывает перенаправление, поэтому какую ссылку использовать не имеет значения в плане передачи веса страницы.

Папка wp-content закрыта от индексации, а вложения, например, графические, которые буду загружать, хочу индексировать, поэтому открываю директорию /wp-content/uploads/.

Самым главным считаю прописывать ссылку на файл sitemap.xml и главное зеркало, с помощью директивы Host.

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

Делаем постоянной рамку поля редактирования текста в Полноэкранной версии редактора в WordPress 3.3.2

Май 31, 2012

Речь идет о пунктирной линии, которая окружает поля редактирования текста записи и поле названия в Полноэкранном режиме редактора.

Аналогично тому, как была зафиксирована видимость панели с кнопками в редакторе, делаем постоянным отображение рамки.

Сначала посмотрим следующий файл:

/wp-admin/js/wp-fullscreen.dev.js

Я пришел к выводу, что за скрытие пунктирной рамки отвечает следующая строчка:

$('#wp-fullscreen-body').removeClass('wp-fullscreen-focus');

Для постоянного отображения рамки полей редактора достаточно строчку закомментировать. Но нас интересуют изменения в используемом в системе WordPress файле:

/wp-admin/js/wp-fullscreen.js

Находим следующий текст:

c("#wp-fullscreen-body").removeClass("wp-fullscreen-focus")

и заменяем его на:

/* cay 2 c("#wp-fullscreen-body").removeClass("wp-fullscreen-focus")*/

Сохраняем, не забываем очистить кэш браузера и проверяем. Рамка должна постоянно отображаться.

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

Альтернативный Полноэкранный режим Визуального редактора со всеми кнопками в WordPress 3.3.2

Май 31, 2012

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

Скажу сразу, что решение скорее в конце записи, а в начале история моих поисков.

Начал я как всегда с Интернета в на этот раз ничего не нашел вовсе. Более того, о том, как добавить альтернативные кнопки на панель Редактора в Полноэкранном режиме еще писали, но этот вопрос так никто и не ответил, да и не рассматривал.

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

Сначала я открыл следующий файл:

/wp-admin/js/wp-fullscreen.dev.js

И в конце функции init:

init: function() {

добавил следующий код:

$('#wp-fullscreen-central-toolbar').html($('#content_toolbargroup').clone());

Однако, после перехода в Полноэкранный режим вместо всех кнопок на панели появлялся лишь текст "Абзац".

Примечание: после внесения изменений я скопировал содержимое файла wp-fullscreen.dev.js в wp-fullscreen.js, так как только последний файл используется системой WordPress.

Как я ни пытался изменить код, ничего не выходило. Более того, я потратил на это несколько часов.

После неудачных попыток я перешел к файлу:

/wp-includes/class-wp-editor.php

Меня интересовало, почему для Обычного режима в Визуальном редакторе кнопки задаются так:

$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 );

А для Полноэкранной версии по-другому:

$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',

Далее я разбирался, зачем используется переменная dfw массива $set. Возьмем строчку с описанием:

'dfw' => false, // replace the default fullscreen with DFW (needs specific DOM elements and css)

В комментарии сказано, что переменная dwf позволяет заменить стандартный Полноэкранный режим с помощью DFW. Что же такое DFW я так и не понял.

Тогда я внес следующее изменение:

$set = wp_parse_args( $settings,  array(
	'wpautop' => true, // use wpautop?
	'media_buttons' => true, // show insert/upload button(s)
	'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
	'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
	'tabindex' => '',
	'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".
	'editor_class' => '', // add extra class(es) to the editor textarea
	'teeny' => false, // output the minimal editor config used in Press This
	'dfw' => false, // replace the default fullscreen with DFW (needs specific DOM elements and css)
	'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
	'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
) );
$set['dfw'] = true;

Это изменение мне ничего не дало и я его удалил.

После этого я разозлился и стал комментировать все, что было связано с переменной $set['dfw'] и $mce_buttons. Каждое изменение просматривал. Кнопка "Полноэкранный режим" то исчезала, то не работала. Но в один момент запустился редактор во всю ширину экрана с основной и дополнительной панелями и всеми кнопками, как в обычном режиме.

Включаем альтернативный Полноэкранный режим TinyMCE

А сделал я следующее. Закомментировал одну строчку. Меняем следующий код:

if ( $set['dfw'] ) {
	// replace the first 'fullscreen' with 'wp_fullscreen'
	if ( ($key = array_search('fullscreen', $mce_buttons)) !== false )
		$mce_buttons[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_2)) !== false )
		$mce_buttons_2[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_3)) !== false )
		$mce_buttons_3[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_4)) !== false )
		$mce_buttons_4[$key] = 'wp_fullscreen';
}

на этот:

if ( $set['dfw'] ) {
	// replace the first 'fullscreen' with 'wp_fullscreen'
	/* cay 1
	if ( ($key = array_search('fullscreen', $mce_buttons)) !== false )
		$mce_buttons[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_2)) !== false )
		$mce_buttons_2[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_3)) !== false )
		$mce_buttons_3[$key] = 'wp_fullscreen';
	elseif ( ($key = array_search('fullscreen', $mce_buttons_4)) !== false )
		$mce_buttons_4[$key] = 'wp_fullscreen';
	cay 1 # */
}

Теперь вместо Полноэкранного режима Визуального редактора WordPress версии отобразится видимо версия TinyMCE.

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

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

Сначала открываем "Внешний вид", затем "Редактор" и вносим изменение в файл functions.php. Добавляем сверху:

/* cay 2:
 * Альтернативные стили для Визуального редактора
 * Полноэкранный режим (FullScreen) - неофициальная версия, TinyMCE
 */
function fullscreen_editor_styles() {
	global $user_level;
	// только для администратора
	if ($user_level > 9) {
		// ширина 855 (на сайте 820)
		// 840 + 15 пикселей прокрутка
		// 820 + 10 * 2 отступ по бокам
		echo '<style type="text/css">
#mce_fullscreen_toolbargroup, #mce_fullscreen_ifr {
	width: 855px !important;
	margin: 0 auto;
}
#mce_fullscreen_ifr {
	border-left: 1px solid #DFDFDF;
	border-right: 1px solid #DFDFDF;
}
</style>';
	}
}
add_action('admin_head', 'fullscreen_editor_styles');
/* cay 2 # */

Этот код всего лишь добавит вывод на экран в Закрытой части WordPress дополнительно заданных стилей. Данный Полноэкранный режим выводится не в отдельном IFrame, а в том же документе, поэтому здесь не подходит изменение стиля редактора editor-style.css.

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

Замеченные проблемы

Однако, пока я печатал прошлую запись, используя браузер Google Chrome, страница с Визуальным редактором и 2-я, которая была просто открыта со страницей блога, вдруг "упали". Я скопировал строку браузера и открыл на редактирования ту же запись, не закрывая 1-е окно. Все было сохранено. После этого я перезагрузил основную страницу.

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

Я не использую ревизий, но теперь включил, чтобы редактор хранил хотя бы одну для записи.

Кстати, что касается автосохранения, то оно отлично работает с заданным интервалом. Единственное, нет кнопки, по которой видно, что запись в настоящий момент сохраняется. Поэтому печатать бывает страшно.

Также два раза уже отметил, что если гулять в Chrome по соседним вкладкам, то высота окна редактирования увеличивается и вернуть ее к исходному размеру невозможно.

Примечание

Опять же изменение касается внутреннего файла WordPress, что означает, что после обновления системы до новой версии, вносить поправку в файл class-wp-editor.php придется заново.

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

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

Май 31, 2012

После перехода в Полноэкранный режим редактирования записи, верхняя панель с кнопками то появляется, то исчезает. Делает она это плавно, с затуханием. Меня это отвлекает, а со временем раздражает. Хочется комфортной работы. Если бы в Microsoft Office Word постоянно что-то менялось в интерфейсе, то его использование было бы невыносимо.

Я не люблю спецэффекты на страницах в Интернете, особенно в Интерфейсе. Когда приходится ждать, пока, например, меню отобразится или скроется, то я считаю это тратой своего времени. Считаю уместным применения различных эффектов, когда подгружаются данные, тогда понятно, что загрузиться мгновенно они не могут.

Сейчас объясню, как в одно изменение заставить верхнюю панель с кнопками TinyMCE быть всегда видимой. Однако, данные изменения будут стерты следующим обновлением WordPress и их снова придется вносить. Это так, потому что решение не идеальное и я сам его сейчас не использую, так как нашел лучший для себя вариант, который опишу в следующих записях.

Фиксируем панель

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

/wp-admin/js/wp-fullscreen.js

Но сейчас нас будет интересовать "версия для разработчика" данного файла:

/wp-admin/js/wp-fullscreen.dev.js

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

ps.subscribe( 'hideToolbar', function() {
	s.toolbars.removeClass('fade-300').addClass('fade-1000');
	api.fade.Out( s.toolbars, 1000, function(){ ps.publish('toolbarHidden'); }, true );
	$('#wp-fullscreen-body').removeClass('wp-fullscreen-focus');
});

Я закомментировал всего одну строчку:

ps.subscribe( 'hideToolbar', function() {
	s.toolbars.removeClass('fade-300').addClass('fade-1000');
	/* cay 1 api.fade.Out( s.toolbars, 1000, function(){ ps.publish('toolbarHidden'); }, true ); */
	$('#wp-fullscreen-body').removeClass('wp-fullscreen-focus');
});

Если скопировать содержимое файла wp-fullscreen.dev.js в wp-fullscreen.js, то верхняя панель с кнопками более не будет исчезать. Но это не до конца верное решение.

В файле нужно закомментировать следующий текст:

b.fade.Out(a.toolbars,1000,function(){e.publish("toolbarHidden")},true);

Т.е. заменить его на:

/* cay 1 b.fade.Out(a.toolbars,1000,function(){e.publish("toolbarHidden")},true);*/

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

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

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

Добавление кнопок на панель Визуального редактора в Полноэкранном режиме в 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

Май 29, 2012

Нашел хороший плагин к блогу на WordPress, который добавляет на панель Визуального редактора WYSIWYG (MCE или TinyMCE) новую строку с кнопками для создания и редактирования Таблиц без переключения в режим HTML.

Плагин называется MCE Table Buttons.

Версия, которую я установил: 1.5.

Пока не увидел в нем недостатков, хотя только один раз пользовался.

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

Добавление горячих клавиш к плагину WYSIWYG Inline Code Command

Май 29, 2012

Речь пойдет об изменении плагина WYSIWYG Inline Code Command, который я добавил ранее, чтобы иметь возможность выделять отдельные части текста с помощью тега <code>.

В прошлой записи я писал, как добавить горячие клавиши к кнопке плагина NoFollow.

В отличие от плагина NoFollow, плагин WYSIWYG Inline Code Command по-умолчанию уже имеет комбинацию клавиш:

ed.addShortcut ('alt+shift+c', 'Inline Code', 'mceWICC');

Как я и говорил в предыдущей записи, если используется комбинация с вхождением клавиши Shift, то следующий за ним символ, если это буква, должен быть большим. В связи с этим комбинация alt+shift+c не работает, т.к. символ "c" маленький.

Вносим изменения в следующий файл:
/wp-content/plugins/wysiwyg-inline-code-command/wicc-mce-plugin.php

Находим указанную выше строку и заменяем на:

ed.addShortcut ('alt+shift+C', 'Inline Code', 'mceWICC');

Сохраняем файл.

Заключение

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

Если горячие клавиши вдруг не работают, то стоит очистить кэш браузера.

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