WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru WPmentor - Ищем топовых специалистов по WordPress, чтобы помочь вам заработать

Kama Quicktags: код на страницах вашего сайта

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

Вставка кода не требует особых усилий - необходимо всего-то, заменить HTML сущности на спецсимволы (например: это < на &lt; или  & на &amp;), это легко можно сделать с помощью небезызвестного нам notepad++, однако постоянно преобразовывать код очень неудобно, мне хотелось, чтобы такое преобразование можно было делать прямо в редакторе WordPress.

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

Просвещенные люди скажут, WordPress сам делает такую замену, если вставить код в визуальный редактор и перейти в НTML редактор или просто сохранить страницу с визуального редактора и они будут правы, но вместе с преобразованием WordPress удалит все лишние пробелы и табы, которые необходимы для наглядности кода, чтобы полностью сохранить структуру кода его нужно заключить в теги <pre> </pre>, но заключить текст в определенные теги, можно только с HTML редактора, а если вставить код в HTML редактор, то WordPress никаких преобразований над символами в коде делать не будет, а хуже - он вырежет различные теги, при переходе в визуальный редактор. Во как все сложно. Если вы пробовали вставлять код, то наверняка знаете о чем я.

В общем, единственно правильно было заменить все HTML символы на спецсимволы в блокноте, вставить получившийся код в HTML редактор WordPress и заключить этот код в теги <pre> </pre>.

Также мне не хватало кнопок для быстрой вставки тегов в HTML редакторе, как минимум нужна была кнопка, для вставки <pre> </pre>.

Quicktags API

WordPress Quicktags API - с версии 3.3. WP позволяет вставлять кнопки через API - это просто. На этом способе и основан мой простенький плагин.

Скачать плагин

Kama Quicktags V2.2
Преобразовывает спецсимволы и добавляет кнопки в HTML редактор.
Скачано: 678, размер: 1.7 KB

Установка:

  1. Загрузите папку из архива (kama-quicktags) в каталог плагинов (wp-content/plugins);

  2. Активируйте плагин.

После активации плагина у вас в HTML редакторе появятся разные кнопки, чтобы убрать или добавить свои откройте файл kamaquicktags.php и по описанию внутри файла добавьте свои:

QTags.addButton( 'идентификатор' , 'название', '<открывающий тег>', '</закрывающий тег>', 'v', 'описание', позиция(число) );

Например, чтобы добавить кнопку H3 нужно вставить такой код:

QTags.addButton( 'h3','H3','<h3>','</h3>', 'p', '', 999 );

Напомню, файл плагина можно отредактировать прям из админ-панели: Плагины -> Редактор

А как вы вставляете код в ваши блоги?

48 комментов
Полезные 1 Вопросы 1 Все
  • @ RaftKorn raftkorn.com

    Да, на 3.3.1 не работает кнопка в хтмл.

    Ответить01.Фев.2012 в 23:45 #
  • Николай

    Не могу найти как мне сделать такое:
    В панель редактора добавляется кнопка, при нажатии на которую выполняется какая-то функция php (в частности надо открыть окно и в нём форма, из которой введенные данные вставляются в поле редактора).

    Ответить21.Фев.2012 в 22:24 #
    • Suvitruf suvitruf.ru

      При чём здесь php?

      Ответить22.Фев.2012 в 20:23 #
    • Аналогичная проблема.. Нашел как вызывать функцию, но вот как получить, а потом заменить выделенный текст - тут застрял(

      Ответить03.Янв.2014 в 14:42 #
      • Kama7682

        Попробуйте в коде плагина моего разобраться, там есть ответ на ваш вопрос. Я над ним сидел как-то.

        Ответить04.Янв.2014 в 00:26 #
        • Да, действительно в плагине есть решение проблемы, разобрался, плагин работает, спасибо!

          Ответить04.Янв.2014 в 00:59 #
  • Николай

    А при том, что мне надо по нажатию кнопки выполнить скрипт на php

    Ответить22.Фев.2012 в 21:23 #
    • Suvitruf suvitruf.ru

      зачем php, если можно обойтись js? Если вы хотите юзать php скрипт, то нужен аякс запрос.

      Ответить22.Фев.2012 в 23:09 #
      • Николай

        Да, нужен php и надо будет через аякс посылать запрос.
        Но пока мне нужно принцип понять.

        Ответить22.Фев.2012 в 23:13 #
  • @ Алексей

    Отличный плагин, спасибо! Понадобилось вставить в редактор тег noindex, каких только вариантов не перепробовал. С этим же плагином всё получилось и заняло менее 5 минут!

    Ответить30.Май.2012 в 16:41 #
  • Александр avglearnit.com

    Здравствуйте, Kama.
    Ознакомился с Вашей статьей и решил поделиться кодом, найденным в просторах великого интенета.Код встаяляется в funcions.php темы и редактируется под себя. И добавляйте кнопки, какие хотите. А главное - БЕЗ плагина. С уважением, Александр.

    //Разрешаем использование в редакторе дополнительных HTML тегов
    function htm_change_mce_options($initArray) {
    	$ext = 'li[name|class|style],div[name|id],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', 'htm_change_mce_options');
    //Добавляем кнопки в HTML редактор
    add_action('admin_footer', 'htm_eg_quicktags');
    function htm_eg_quicktags(){
    	?>
    	<script type="text/javascript">
    		jQuery(document).ready(function(){
    			if(typeof(QTags) !== 'undefined'){
    				QTags.addButton( 'demo-block', 'demo', '<div class="demo-block"><a href="#" target="_blank">Demo</a><a href="#" target="_blank">Source</a>', '</div>' );
    				QTags.addButton( 'left-arrow', '«', '«');
    				QTags.addButton( 'right-arrow', '»', '»');
    				QTags.addButton( 'defis', '—', '—');
    				QTags.addButton( 'paragraf-all', '<p></p>', '<p></p>');
    				QTags.addButton( 'paragraf-start', 'Параграф отступ 25 по ширине', '<p style="text-indent:25px;text-align:justify">');
    				QTags.addButton( 'paragraf-end', '</p>', '</p>');
    				QTags.addButton( 'clearfix', '<clearfix>', '<div style="clear:left;"></div>');
    				QTags.addButton( 'php-insert', '[php][/php]', '[php][/php]');                               
    			}
    		});
    	</script>
    	<?php 
    }
    
    //Устанавливаем HTML редактор статей по умолчанию
    add_filter( 'wp_default_editor', create_function('', 'return "html";') );
    Ответить24.Авг.2012 в 00:32 #
  • Денис www.disko-fleh.ru

    все зделал как описано в статьи но все настройки по прежнему мой движок Версия 3.4.2

    Ответить09.Ноя.2012 в 12:26 #
  • Допустим, инкогнито

    Есть много уже готовых плагинов для этой цели. Они сами выполняют всю работу и поддерживают много языков программирования, причем достаточно красочно и правильно подсвечивают синтаксис. Многие пользуются Syntax Highlight Evolved. Но я предпочитаю WP-Syntax.

    Ответить06.Мар.2014 в 15:56 #
    • Kama7682

      Спасибо за коммент. Эта моя первая статья на этом блоге smile Ну и иногда готовые решения не совсем подходят или в них недостает чего-то, тогда у любознательных начинают чесаться руки... gamer

      Ответить06.Мар.2014 в 22:44 #
  • Александр www.newbizinfo.ru

    Доброго дня! А что вы используете на это сайте для показа кода.

    Ответить17.Окт.2014 в 19:40 #
  • @ Сергей
    /** Преобразуем хтмл символы  < > в спецсимволы при отправке комментария ЮЗЕРОМ  **/
    function kama_html_replace_char_pre ($matches){
    		$out = str_replace (array ('<'   ,'>'),   array ('<','>'),          $matches[2] );
    		return "<pre>".$out."</pre>";
    	}
    	function kama_html_replace_char_code ($matches){
    		$out = str_replace (array (''), array (''), $matches[2] );
    		return "<code>".$out."</code>";
    	}
    	function kama_convert_html ($comment_text){ // готавит контент комментатора
    		$comment_text = preg_replace_callback ('!<pre>]*)>(.*?)</pre>!ims', 'kama_html_replace_char_pre', $comment_text);
    		$comment_text = preg_replace_callback ('!<code>]*)>(.*?)</code>!ims', 'kama_html_replace_char_code', $comment_text);
    		return $comment_text;
    	}
    add_filter ('pre_comment_content','kama_convert_html');
    //add_filter ('content_save_pre', 'kama_convert_html'); 

    Здравствуйте Тимур... я не совсем в тему, но приблизительно)

    Значит, хочу сделать чтобы отправленный код юзером доходил до меня не кастрированный WP - где-то нашёл вот такой ваш код, но !! - всё работает, ОднакО - если им пользоваться, то в статье пропадает (что естественно) возможность использовать скрипт подсветки //highlightjs.org/

    <code> ... к примеру, преобразуется... ну Вы поняли...

    Убрал от отработки последнюю строку кода: теперь работает... но сколь это правильно и твёрдо в плане последующих обнов wp - думаю...
    Вот интересно, что бы вы сказали на этот мой гениальный подход??

    Может что посоветуете? или этот код безнадёжно устарел...

    Ответить27.Сен.2016 в 18:11 #
    • Kama7682

      Тут есть более новая версия этого кода: http://wp-kama.ru/id_24/menyaem-simvolyi-html-na-spetssimvolyi-pri-kommentirovanii.html

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

      Ответить28.Сен.2016 в 18:04 #
      • @ Сергей ATs mihalica.ru

        Да, спасибо, Тимур! (мой недогляд) ...я уже вчерась увидел ту статью, но: "её" код почему-то у меня отказался более менее работать! 1 - финальное
        return - выдавал ошибку двойных кавычек - заменил на апострофы...
        Мож что неверно делал, но - не заработал. Дальше ковырять не стал.

        А с удалением строки, проблема такая: если использовать скрипт highlightjs (он же завёртывает в code) - тогда, коли не убрать энту строку - code превращается в текст при ответе комментатору! эффекта подсветки - нуль-ноль, естественно.

        В общем, меня плаг wp-syntax устраивает (под себя переделанный) НО!! после недавнего времени заметил что на Опере-мини мудрит его js - кое-где показанный код увеличивается в размере. Это конеш - фигня! но - тревожусь когда чего-то не понимаю...

        Вот - копаю...

        Спасибо!!! сайт у Вас в плане идей - полезный!!! и работа Ваша самоотверженная) - говорю это без всяких подковёрных игрищЪ, но потому что нужно сказать, ибо людей дОлжно хвалить, и особливо если они этого заслуживают: зачастую бывает наоборот. Последнее печалит и тревожит! больше чем кодонепонимание... ))

        1
        Ответить28.Сен.2016 в 19:05 #