WordPress

’рубрика’

Изменяем форму входа в WordPress

Ноябрь 3, 2012

Решил немного изменить форму авторизации: вставить свой логотип и поменять стандартную ссылку, ведущую на сайт WordPress, на свою.

Изменения минималистичны и затрагивают только файл functions.php в используемой теме. Я добавил 3 новые функции:

/* cay 5 - Start
 * Изменяем вывод формы Входа
 **/
function cay_login_site_url_title() {
	return get_bloginfo( 'title', 'display' );
}
add_filter( 'login_headertitle', 'cay_login_site_url_title' );

function cay_login_site_url() {
	return home_url( '/' );
}
add_filter( 'login_headerurl', 'cay_login_site_url' );

function cay_login_head_part() {
?>
<style type="text/css">
body.login {
	background-color: #FFF;
}
#login {
	padding-top: 71px;
}
.login h1 a {
	background: url( '<?php echo get_bloginfo( 'template_url' ); ?>/images/logo.gif' ) no-repeat 0 0;
	width: 75px;
	height: 110px;
	margin: 0 auto;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'cay_login_head_part' );
/* cay 5 - End */

Форму входа можно посмотреть здесь:

Ссылки по теме

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

Как создать шаблон ссылок в теме 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, Программирование    |    Постоянная ссылка

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

Июнь 4, 2012

После того, как я добавил Альтернативный Полноэкранный режим редактора TinyMCE и стал использовать его вместо Стандартного WordPress, единственное, чего мне не хватало, это отображение того, что Черновик текущей записи сохраняется и самой кнопки Сохранения.

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

Что же касается Альтернативного Полноэкранного режима TinyMCE, то я проверял, что автосохранение при написании записи успешно запускается, но понять это визуально никак нельзя.

О чем запись

Я расскажу, как добавить кнопку сохранения к Альтернативному Полноэкранному режиму TinyMCE, сделаю, чтобы эта кнопка затемнялась при автосохранении и добавлю в нижней части индикатор со временем последнего сохранения Черновика. Сохранение также будет доступно при использовании сочетания горячих клавиш Ctrl+S без перезагрузки страницы.

Подключаем дополнительный плагин TinyMCE

К данной задаче меня подтолкнула другая необходимость, которая возникла ранее: хотел добавить на панель с кнопками редактора TinyMCE кнопку вставки в запись текущего времени. В поисках наткнулся на эту страницу:

С нее все и началось. Сверху я увидел ссылку на стандартные плагины TinyMCE и понял, что их довольно много и что к редактору WordPress подключена лишь часть:

Стал смотреть все по очереди и случайно увидел плагин "Save":

Скачать все плагины можно со следующей страницы:

После загрузки "Full Package" распаковываем архив и перемещаемся в следующую папку:

/tinymce/jscripts/tiny_mce/plugins

После этого копируем папку "save" на хостинг в папку:

/wp-includes/js/tinymce/plugins

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

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

function my_mce_before_init( $init ) {
	$init['theme_advanced_buttons3'] .= ',save';
	$init['plugins'] .= ',save';
	return $init;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

Графическая кнопка "Сохранение" появится в 3-й сверху строчке Визуального редактора. Для того, чтобы она была в 1-й достаточно поменять порядковый номер в "theme_advanced_buttons3" на "theme_advanced_buttons1", думаю это понятно.

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

После нажатия на кнопку запись обновляется и страница перезагружается.

В описании к плагину "save" по ссылке выше видно, что в плагине можно задавать дополнительные параметры. К примеру, можно сделать, чтобы кнопка Сохранения была неактивна до тех пор, пока в запись не будут внесены изменения. За это отвечает параметр "save_enablewhendirty".

Для добавления в настройки TinyMCE нового параметра перед вызовом tinyMCE.init(), дополняем код, который добавили в functions.php:

function my_mce_before_init( $init ) {
	$init['theme_advanced_buttons3'] .= ',save';
	$init['plugins'] .= ',save';
	$init['save_enablewhendirty'] = true;
	return $init;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');

В 4-й строке в массив был добавлен желаемый параметр и значение установлено в "true". При первоначальном открытии записи на редактирование кнопка Сохранения будет неактивна.

Отключаем горячие клавиши в плагине save

В дополнительном плагине "save" для TinyMCE задаются горячие клавиши для сохранения записи "Ctrl+S". К сожалению, они переопределяют горячие клавиши редактора, заданные в WordPress и вместо автосохранения без перезагрузки страницы, вызывается обновление записи с перезагрузкой.

Для решения этой проблемы идем в папку:

/wp-includes/js/tinymce/plugins/save

И открываем на редактирование файл "editor_plugin.js". Находим следующий текст:

a.addShortcut("ctrl+s",a.getLang("save.save_desc"),"mceSave")

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

/* cay 1 a.addShortcut("ctrl+s",a.getLang("save.save_desc"),"mceSave")*/

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

Выводим сообщение о последнем сохранении

В нижней части Альтернативного Полноэкранного режима редактора TinyMCE есть "Путь". Я решил в этот путь справа добавить выводимое в обычном редакторе сообщение "Черновик сохраняется..." и "Черновик сохранён в ...".

Из папки:

/wp-includes/js

открываем файл autosave.js. Находим следующий текст:

function autosave_loading(){

и заменяем его (дополняем) на:

function autosave_loading(){if(!jQuery('#save-message').length){jQuery('#mce_fullscreen_tbl .mceStatusbar').append('<div id="save-message"></div>');}

Как видно я просто добавил новый элемент div с id равным save-message с помощью JQuery, если его ранее не существовало.

Теперь добавим запись в созданный элемент сообщения о результате сохранения Черновика. В том же файле находим следующий текст:

jQuery(".autosave-message").html(autosaveL10n.savingText)

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

jQuery(".autosave-message, #save-message").html(autosaveL10n.savingText)

Видно, что я просто добавил новый элемент #save-message к выборке JQuery.

Далее находим:

if(e){jQuery(".autosave-message").html(e)}else{if(autosaveOldMessage&&d){jQuery(".autosave-message").html(autosaveOldMessage)}

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

if(e){jQuery(".autosave-message, #save-message").html(e)}else{if(autosaveOldMessage&&d){jQuery(".autosave-message, #save-message").html(autosaveOldMessage)}

Сохраняем файл autosave.js и загружаем его обратно на сервер. Теперь при автосохранении в Альтернативной версии Полноэкранного режима в самом низу появится желаемое – вывод сообщения "Сохранение черновика..." и "Черновик сохранен в ...".

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

function fullscreen_editor_styles() {
	global $user_level;
	// только для администратора
	if ($user_level > 9) {
		echo '<style type="text/css">
#save-message {
	float: right;
	margin-right: 8px;
}
</style>';
	}
}
add_action('admin_head', 'fullscreen_editor_styles');

Сохраняем файл и смотрим редактор в Полноэкранном режиме. Теперь сообщение о статусе сохранения Черновика отображается как надо.

Затемнение кнопки сохранения

Осталась последняя нереализованная задача – для наглядности затемнять кнопку "Сохранение" на панели Визуального редактора при автосохранении и выводить из затемнения после завершения автосохранения.

Возвращаемся к редактированию файла autosave.js. Находим следующий текст:

function autosave_enable_buttons(){setTimeout(function(){jQuery(":button, :submit","#submitpost").removeAttr("disabled");jQuery(".ajax-loading").css("visibility","hidden")},500)}function autosave_disable_buttons(){jQuery(":button, :submit","#submitpost").prop("disabled",true);setTimeout(autosave_enable_buttons,5000)}

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

function autosave_enable_buttons(){setTimeout(function(){jQuery(":button, :submit","#submitpost").removeAttr("disabled");jQuery(".ajax-loading").css("visibility","hidden");jQuery("#content_save, #mce_fullscreen_save").removeClass("mceButtonDisabled").addClass("mceButtonEnabled");},500)}function autosave_disable_buttons(){jQuery("#content_save, #mce_fullscreen_save").removeClass("mceButtonEnabled").addClass("mceButtonDisabled");jQuery(":button, :submit","#submitpost").prop("disabled",true);setTimeout(autosave_enable_buttons,5000)}

Я сделал вставки кода, содержащие "#content_save, #mce_fullscreen_save". С помощью JQuery для кнопки сохранения в Обычном режиме и для кнопки сохранения в Полноэкранном режиме в зависимости от ситуации либо добавляю класс mceButtonEnabled и удаляю mceButtonDisabled, либо наоборот. После сохранения файла все кнопка должна затемняться. Можно попробовать с помощью горячих клавиш "Ctrl+S".

Для справки

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

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

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

if ( 'mceFullScreen' == cmd ) {

Также не могу не отметить, что в папке:

/wp-includes/js/tinymce/plugins

есть две интересные подпапки:

  • fullscreen
  • wpfullscreen

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

Думаю, это может пригодиться.

Примечание

Изменения, которые вносится в данной статье с новым обновлением WordPress (текущая версия 3.3.2) нужно будет проходить заново. Поэтому если после обновления что-то не работает, об этом нужно помнить в первую очередь.

Ошибки сохранения

В ходе написания данной записи я решил нажать на саму кнопку "Сохранить", чтобы вызовет перезагрузку страницы естественно. Все успешно сохранилось, но за исключением форматирования исходного кода, который я добавил в запись в тегах <pre></pre>. Слетел переход на новую строчку.

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

Возвращаюсь в папку:

/wp-includes/js/tinymce/plugins/save

и редактирую файл editor_plugin.js. Находим следующий код:

if(a.onsubmit==null||a.onsubmit()!=false){a.submit()}c.nodeChanged()}

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

if(a.onsubmit==null||a.onsubmit()!=false){/* cay 2 a.submit() */}c.nodeChanged()}

Теперь кнопка при нажатии не сработает и будет служить исключительно, как индикатор автосохранения.

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, Программирование    |    Постоянная ссылка

« Старые Записи