Как вывести HTML-код в постах блога на WordPress?
Воскресенье, 27 марта 2011 4:18Здравствуйте, друзья. Сегодня я хочу рассмотреть один момент в публикации постов на WordPress, который может изрядно подпортить нервы кому угодно, а именно, публикацию примеров HTML-кодов в записях блога. При написании поста о размещении рекламных блоков в phpBB я успел на своей шкуре прочувствовать всю прелесть данной процедуры.
Все дело в том, что встроенный в WP визуальный редактор TinyMCE имеет свой собственный взгляд на то, какие коды оставлять в тексте поста и безжалостно вырезает все лишнее с его точки зрения из текста при переключении между отображением в виде HTML и визуальным редактором. С одной стороны, обойти это можно заменяя знаки ‘<’ и ‘>’ в примерах кода на их мнемоники ‘<’ и ‘>’ и поместив пример кода внутрь блока <code></code>, но, к сожалению, если вы захотите оформить все красиво, например, выделить теги и комментарии другим цветом, то придется изрядно попотеть задавая стили вручную.
Мне же хотелось найти способ выводить примеры кода в симпатичном оформлении и чтобы при этом можно было спокойно переключаться между визуальным редактором и HTML представлением поста, не боясь, что TinyMCE бессовестно порежет все, что ему не по нраву. Потратив несколько часов, я нашел относительно неплохое решение, которое уменьшает танцы с бубном до минимума, рассмотрим его по пунктам:
Предварительная подготовка
- Устанавливаем плагин WP-Syntax, который позволяет выводить участки кода используя подсветку синтаксиса с помощью GeSHi. Поддерживается огромное количество языков (о некоторых из них я вообще впервые узнал, а ведь программист как никак). Для использования плагина достаточно в HTML-редакторе заключить участок кода в блок <pre lang=”ID языка”></pre>, где параметр lang определяет язык кода.
- Устанавливаем плагин WP-Syntax Button, который реализует две вещи – добавляет на панель TinyMCE кнопку для упрощенной вставки блока <pre></pre> с выбором языка из выпадающего списка и реализует автоматическое преобразование мнемоник HTML в их символьное представление при переключении редакторов и публикации поста.
К сожалению для второго плагина заявлена совместимость с WordPress только до версии 2.8, но у меня он без проблем заработал и на 2.9.x. С версией 3.x, увы, проверить не удалось, буду премного благодарен если вы протестируете и отпишитесь в комментариях.
Вставка фрагмента кода с рюшечками
- В режиме визуального редактора жмем кнопку
, выбираем подходящий язык из шикарного списка и номер строки с которого начать нумерацию (чтобы опустить номера строк, оставьте поле пустым) и жмем Insert.
- Теперь переходим в HTML редактор и вставляем наш код внутрь блока <pre></pre>.
- Если пример вашего кода включает в себя HTML-теги, то не выходя из HTML-редактора, заменяем в них символ ‘<’ на его мнемонику ‘<’ (о парных символах ‘>’ можно не беспокоиться, после переключения в режим визуального редактора они заменятся автоматом).
- Вот и все, ради эксперимента, можно смело попереключаться между редакторами и посмотреть как будет выглядеть код при публикации.
З.Ы. Один маленький нюанс напоследок, при использовании предложенного мной метода вы можете столкнуться с проблемой вывода в примерах HTML-кода HTML-мнемоник, ведь они будут автоматом преобразовываться в их символьный вид. Решается эта проблема элементарно, просто замените символ ‘&’ в мнемонике на его мнемонику ‘&’. Во загнул, но ведь работает
community-seo.ru пишет:
27 марта 2011 в 16:42
Как вывести HTML-код в постах блога на WordPress? | TiamatInc.ru…
Здравствуйте, дорогие читатели. Сегодня я хочу представить вам методику о том как можно без танцев с бубном выводить в постах WordPress фрагменты HTML-кода с использованием подсветки синтаксиса. Кто хоть раз пытался это сделать, знает, что встроенный в…
Олег Л (4 комм.) пишет:
27 марта 2011 в 23:54
Особенно понравилось выражение – “уменьшает танцы с бубном до минимума”.
За статью спасибо.
TiamatInc (581 комм.) пишет:
28 марта 2011 в 3:02
Олег Л, увы, чтобы полностью избавиться от танцев с бубном, придется полностью отказаться от визуального редактора. Знаю, что многие так поступают, но для меня этот вариант неприемлем. Вот и пришлось искать иной способ.
Благодарю за отзыв, надеюсь статья окажется полезной.
bekass (1 комм.) пишет:
30 марта 2011 в 3:38
Спасибо за плагины, действительно выручили по совету доброго человека.
В версии 3.0.3 WP-Syntax Button работает!
SEOblondinka (24 комм.) пишет:
31 марта 2011 в 22:52
Спасибо за плагинчик)
З.Ы. Давненько у тебя не была – как всегда масса интересного и полезного! )
BloggerMen (14 комм.) пишет:
06 Апр 2011 в 1:48
“придется полностью отказаться от визуального редактора” – а вот это правильно. Сколько я намучился с ним, а стал писать посты в html большинство проблем отпали сами собой.
onjee (1 комм.) пишет:
13 Апр 2011 в 12:26
Добрый день Степан… Я обновил блог….))) наконецто
takprosto (1 комм.) пишет:
13 Апр 2011 в 21:14
Буквально вчера ваял такой же плагин. http://www.takprosto.tk/125 тут демка плагина.
Плагин работает. Пока не получается прикрепить кнопку в редактор.
pasha (1 комм.) пишет:
23 Апр 2011 в 7:25
Работает в версии 3.1.1 можно и на коротке сделать в принципе все работает все пишет выбрал три языка php mxml и css вставил кнопки в html редактор плагином WP-Quicktag и без лишнего гемора пишешь хош переключился хош нет. благодарю за статью ))) полезненько.
TiamatInc (581 комм.) пишет:
29 июня 2011 в 0:27
bekass, благодарю за информацию о поддержке версии 3.0.3, рад что смог помочь.
SEOblondinka, от твоих комплиментов я прям краснею.
BloggerMen, я все никак не могу от него отвыкнуть, дурная привычка.
onjee, жаль не успел посмотреть, сочувствую из-за случившегося.
takprosto, что-то по вашей ссылке вовсе не демка плагина открывается.
pasha, и вам огромное спасибо за отзыв.
Сеошник (1 комм.) пишет:
10 Сен 2011 в 3:12
Спасибо за плагины, давно искал!
TiamatInc (85 комм.) пишет:
10 Сен 2011 в 11:43
Сеошник, всегда пожалуйста.
Николай (1 комм.) пишет:
02 Ноя 2011 в 16:58
Большое спасибо, но у меня другой вопрос: можно ли как-нибудь сделать публикацию новостей на своем сайте то-есть: что-бы я зашел как админ и мог постить всю ту информация на своем сайте?!если не сложно можете написать весь код?
TiamatInc (85 комм.) пишет:
03 Ноя 2011 в 12:17
Николай, вы меня прям в ступор поставили.
Наверное будет проще поставить себе любую CMS, которая позволяет редактировать новости в административной панели, тот же WordPress, например.