WordPress как на ладони
Очень Удобный и Быстрый Хостинг для сайтов на 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 редактор.
Скачано: 883, размер: 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 );

--

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

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

45 комментариев
Полезные 1 Все
    Войти