KAMA QUICKTAGS: КОД НА СТРАНИЦАХ ВАШЕГО САЙТА

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

Вставка кода не требует особых усилий — нужно всего лишь заменить HTML-сущности на специальные символы (например, изменить < на < или & на &). Это можно сделать с помощью известной программы Notepad++. Однако постоянная конвертация кода оказывается очень неудобной. Я хотел бы, чтобы эту конвертацию можно было делать прямо в редакторе WordPress.

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

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

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

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

QUICKTAGS API

API Quicktags WordPress

С версии 3.3 WordPress позволяет вставлять кнопки через API, и это довольно просто. Мой простой плагин основан на этом методе.

СКАЧАТЬ ПЛАГИН

Загрузить: kama-quicktags-v2.2

Этот плагин преобразует специальные символы и добавляет кнопки в HTML-редактор.
Загружено: 26, размер: 1.7 KB

Установка:

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

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

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

   QTags.addButton( 'identifier', 'name', '', '', 'v', 'description', position(number) );

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

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

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

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