Как вывести HTML-код в постах блога на WordPress?

Воскресенье, 27 марта 2011 4:18

Здравствуйте, друзья. Сегодня я хочу рассмотреть один момент в публикации постов на WordPress, который может изрядно подпортить нервы кому угодно, а именно, публикацию примеров HTML-кодов в записях блога. При написании поста о размещении рекламных блоков в phpBB я успел на своей шкуре прочувствовать всю прелесть данной процедуры.

Все дело в том, что встроенный в WP визуальный редактор TinyMCE имеет свой собственный взгляд на то, какие коды оставлять в тексте поста и безжалостно вырезает все лишнее с его точки зрения из текста при переключении между отображением в виде HTML и визуальным редактором. С одной стороны, обойти это можно заменяя знаки ‘<’ и ‘>’ в примерах кода на их мнемоники ‘&lt;’ и ‘&gt;’ и поместив пример кода внутрь блока <code></code>, но, к сожалению, если вы захотите оформить все красиво, например, выделить теги и комментарии другим цветом, то придется изрядно попотеть задавая стили вручную.

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

Предварительная подготовка

  1. Устанавливаем плагин WP-Syntax, который позволяет выводить участки кода используя подсветку синтаксиса с помощью GeSHi. Поддерживается огромное количество языков (о некоторых из них я вообще впервые узнал, а ведь программист как никак). Для использования плагина достаточно в HTML-редакторе заключить участок кода в блок <pre lang=”ID языка”></pre>, где параметр lang определяет язык кода.
  2. Устанавливаем плагин WP-Syntax Button, который реализует две вещи – добавляет на панель TinyMCE кнопку для упрощенной вставки блока <pre></pre> с выбором языка из выпадающего списка и реализует автоматическое преобразование мнемоник HTML в их символьное представление при переключении редакторов и публикации поста.

К сожалению для второго плагина заявлена совместимость с WordPress только до версии 2.8, но у меня он без проблем заработал и на 2.9.x. С версией 3.x, увы, проверить не удалось, буду премного благодарен если вы протестируете и отпишитесь в комментариях. ;-)

Вставка фрагмента кода с рюшечками

  1. В режиме визуального редактора жмем кнопку , выбираем подходящий язык из шикарного списка и номер строки с которого начать нумерацию (чтобы опустить номера строк, оставьте поле пустым) и жмем Insert.
  2. Теперь переходим в HTML редактор и вставляем наш код внутрь блока <pre></pre>.
  3. Если пример вашего кода включает в себя HTML-теги, то не выходя из HTML-редактора, заменяем в них символ ‘<’ на его мнемонику ‘&lt;’ (о парных символах ‘>’ можно не беспокоиться, после переключения в режим визуального редактора они заменятся автоматом).
  4. Вот и все, ради эксперимента, можно смело попереключаться между редакторами и посмотреть как будет выглядеть код при публикации. :-)

З.Ы. Один маленький нюанс напоследок, при использовании предложенного мной метода вы можете столкнуться с проблемой вывода в примерах HTML-кода HTML-мнемоник, ведь они будут автоматом преобразовываться в их символьный вид. Решается эта проблема элементарно, просто замените символ ‘&’ в мнемонике на его мнемонику ‘&amp;’. Во загнул, но ведь работает :-)

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

Связанные записи

Вы можете оставить отзыв или трекбек со своего сайта.

Отзывов: 14 на «Как вывести HTML-код в постах блога на WordPress?»

  1. community-seo.ru пишет:

    27 марта 2011 в 16:42

    Как вывести HTML-код в постах блога на WordPress? | TiamatInc.ru…

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

  2. Олег Л (4 комм.) пишет:

    27 марта 2011 в 23:54

    Особенно понравилось выражение – “уменьшает танцы с бубном до минимума”.
    За статью спасибо.

  3. TiamatInc (581 комм.) пишет:

    28 марта 2011 в 3:02

    Олег Л, увы, чтобы полностью избавиться от танцев с бубном, придется полностью отказаться от визуального редактора. Знаю, что многие так поступают, но для меня этот вариант неприемлем. Вот и пришлось искать иной способ.
    Благодарю за отзыв, надеюсь статья окажется полезной. ;-)

  4. bekass (1 комм.) пишет:

    30 марта 2011 в 3:38

    Спасибо за плагины, действительно выручили по совету доброго человека.
    В версии 3.0.3 WP-Syntax Button работает! :)

  5. SEOblondinka (24 комм.) пишет:

    31 марта 2011 в 22:52

    Спасибо за плагинчик)
    З.Ы. Давненько у тебя не была – как всегда масса интересного и полезного! )

  6. BloggerMen (14 комм.) пишет:

    06 Апр 2011 в 1:48

    “придется полностью отказаться от визуального редактора” – а вот это правильно. Сколько я намучился с ним, а стал писать посты в html большинство проблем отпали сами собой.

  7. onjee (1 комм.) пишет:

    13 Апр 2011 в 12:26

    Добрый день Степан…   Я обновил блог….))) наконецто

  8. takprosto (1 комм.) пишет:

    13 Апр 2011 в 21:14

    Буквально вчера ваял такой же плагин. http://www.takprosto.tk/125 тут демка плагина.
    Плагин работает. Пока не получается прикрепить кнопку в редактор.

  9. pasha (1 комм.) пишет:

    23 Апр 2011 в 7:25

    Работает в версии 3.1.1 можно и на коротке сделать в принципе все работает все пишет выбрал три языка php mxml и css вставил кнопки в html редактор плагином WP-Quicktag и без лишнего гемора пишешь хош переключился хош нет. благодарю за статью ))) полезненько.

  10. TiamatInc (581 комм.) пишет:

    29 июня 2011 в 0:27

    bekass, благодарю за информацию о поддержке версии 3.0.3, рад что смог помочь.
    SEOblondinka, от твоих комплиментов я прям краснею. :-)
    BloggerMen, я все никак не могу от него отвыкнуть, дурная привычка.
    onjee, жаль не успел посмотреть, сочувствую из-за случившегося.
    takprosto, что-то по вашей ссылке вовсе не демка плагина открывается.
    pasha, и вам огромное спасибо за отзыв. ;-)

  11. Сеошник (1 комм.) пишет:

    10 Сен 2011 в 3:12

    Спасибо за плагины, давно искал!

  12. TiamatInc (85 комм.) пишет:

    10 Сен 2011 в 11:43

    Сеошник, всегда пожалуйста. ;-)

  13. Николай (1 комм.) пишет:

    02 Ноя 2011 в 16:58

    Большое спасибо, но у меня другой вопрос: можно ли как-нибудь сделать публикацию новостей на своем сайте то-есть: что-бы я зашел как админ и мог постить всю ту информация на своем сайте?!если не сложно можете написать весь код?

  14. TiamatInc (85 комм.) пишет:

    03 Ноя 2011 в 12:17

    Николай, вы меня прям в ступор поставили. :-) Наверное будет проще поставить себе любую CMS, которая позволяет редактировать новости в административной панели, тот же WordPress, например.

Ваш отзыв