Мой основной проект: Боевые искусства в кинематографе! (fight-films.info)

Свеженькое
Благодарю за мат.помощь:
Реакция публики
Облако пометок

Как вставить блок с кодом в WordPress?

HTMLВы когда-нибудь пробовали вставить код в WordPress? Нет, начну по-другому: зачем в редакторе WordPress существует кнопка "CODE"? Я наивно думал что она необходима для вставки кода в запись. Я оказался слишком наивным...

Попытки вставить код в свою запись с помощью тега <> увенчаются сначала удивлением, а затем - разочарованием... На самом деле, в данном случае вопрос "Зачем этот тег?" очень даже уместен.

Все потому что заботливые разработчики WordPress в качестве редактора публикаций по умолчанию предлагают нам использовать TinyMCE, а он так же по умолчанию не поддерживает включение кода для его отображения в посте. Повторюсь: А зачем тогда в редакторе есть кнопка, добавляющая тег <code> ?

Завернув код в теги <code>, мы в итоге получим просто выполнение кода прямо в записи, будь то HTML или даже PHP. Интересно, а что получится если такой же код вдолбить в запись без оборачивания тегами <code> ? Удивительно, то же самое! Тогда, спрашивается, а зачем платить больше? А, главное, зачем в редактор вставлять бесполезную кнопку? Ну ладно уже с этим TinyMCE, будем надеяться что в будущем разработчики это поправят.

Решение проблемы

Что мы получим в ответ от Google\Yandex на запрос: "Вставить код в WordPress"? Несколько миллионов ответов, начиная с тех, что абсолютно не касаются нашей темы (по типу "Как вставить код SAPE в WordPress"), заканчивая ноющими новичками на форумах и рекламой разных плагинов. В общем, я достаточно нагуглился с этим вопросом и нашел для себя только 3 ответа.

Номер раз

Редактировать каждый тег, для отображения. Заменять все символы < и > на &lt; и &gt;, соответственно. Плюс в том, что код не будет сжираться как если использовать нормальные символы, а вот минусы в том, что это надоедает. Если код большой, то необходимо уже в редакторе делать глобальные замены...зачем этот геморрой? Ну, как вариант, в общем.

Номер два

Если в админке WordPress зайти в "Параметры - Написание", там в пункте "Форматирование" есть параметр "WordPress должен исправлять некорректный XHTML-код автоматически" . Вот если снять галочку с этого параметра, то по идее тег <code> будет работать как должен, но, вопрос: почему? А еще - кто может со 100%-ной вероятностью ответить что после этого будет твориться с сайтом? Утверждать ничего не буду, с таким решением проблемы я просто не уверен.

Номер три

Пожалуй, самый правильный способ. Использовать . Хоть я и не любитель подключать что-то "левое", но тут уже без этого не обойтись. А вот фанаты плагинов приятно удивятся, когда начнут искать на офсайте инфу по метке "code" . Предостаточно! От мега-монстров, которые просто удивляют даже своими маразматическими размерами дистрибутивов в 3mb, до мелких скриптов, которые проделывают то, что написано в первом варианте, только автоматически.

Перерыл я полностью все. Мне хотелось чего-нибудь "легкого", простого и чтоб работало нормально. Много плагинов работают криво, некоторые совсем убивали сайт, некоторые загружали его на столько, что иногда страница вообще не прогружалась, еще куча просто не работала. Мелкие плагины, которые просто делают автозамену символов чреваты тем, что при копировании кода в итоге придется вручную перебивать все кавычки, они вставляются как-то неправильно (кстати, это также касается первого варианта). Короче говоря, когда я закончил с поиском, меня корзина спросила: "Вы действительно хотите безвозвратно удалить эти объекты (28шт) ?"

Но в конечном счете мне удалось найти ложку меда в этой бочке дегтя! Это плагин wp-highlight.js, Игоря Кальницкого. Просто замечательное решение. Он очень легкий, простой и функциональный. Поддерживает практически все языки, автоматически их определяет и подсвечивает код. А стиль подсветки кода можно выбрать в админке.

Использование очень простое: пишем код, выделяем его и нажимаем ту самую кнопку <code>, затем обрамляем все это дело тегом <pre>.

Малюсенькими недостатками хотелось бы отметить то, что окно с кодом по умолчанию получается, во-первых, на всю доступную ширину, т.е. 100%, а высота тянется бесконечно на весь код. Это решается обычным выставлением ширины (если не желаем на 100%) параметром "width" и максимальную длинну свойством "max-height" в css. Также, если строка кода по длине превышает ширину окошка, то она обрезается и становится видимой не полностью. Это тоже решается очень просто: добавим "overflow:scroll" в тот же css и все. В общем, можно вот такой маленький фикс в ваш style.css добавить:

code{overflow:scroll;width:500px;max-height:500px;}

Таким образом, все, что не влезет в окошко будет просто скроллиться. Ну и, само собой, 500px - редактируемо, а ширину и максимальную высоту можно вообще не выставлять.

Скачать плагин wp-highlight.js можно отсюда→. Русский язык там присутствует, установка быстрая и понятная. Спасибо, Игорь!

PS: Для вставки кода можно еще использовать визуальный редактор, но я этот вариант вообще не рассматриваю, не люблю это убожество...

UPD: Не срослось у меня с этим плагином. Почему-то от балды он начал вставлять свои символы, от чего все дохнет...что-то окончательно мне сломал, т.к. у меня просто перестал выполняться код если он вставлен именно для этого, а не для отображения...после отключения он продолжает работать...и это только то, что я заметил. В общем, все решается удалением плагина. Вместо него я нашел офигенное решени: Qoate Simple Code Snippets. Это мастхев для тех, кто не хочет нагружать движок и иногда показывать выдержки кода. В общем, здесь все.

Всего комментариев: 6
  1. mr.Spok:

    wp-highlight.js у меня работает нормально и никаких проблем нет. Только вставил css как ты написал. А вот «Qoate Simple Code Snippets» вообще какой-то убогий…подсветки кода нет.

    • BarSug:

      Ну, может я чего криво сделал с wp-highlight.js, не важно, не угодил он мне, короче :)
      А по поводу подсветки кода…действительно, если подсветки нет, то и плагин использовать не обязательно. Нашел тут (в комментариях) интересней решение. И теперь WordPress просто понимает обычный тег code.

  2. Дмитрий:

    А есть ли еще подобные плагины? А то, кто нить проверял? А то хочу кнопки на сайт сделать, а рядом код для вставки в блоги, пока не могу придумать как сделать. Этот плагин не нравится тем, что вставляет под кнопкой, а мне б слева например

    • BarSug:

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

  3. Володя:

    Блин, тебе никто не говорил, что очень трудно, практически невозможно читать текст, хочется почитать статью, интересная, напрягаешь глаза и ничего не получается, буквы сливаются. Сделай штрифт побольше белым и пожирнее, ну ничего ж не прочитать

    • barsug:

      Поверь, куча вариантов уже была. Белый шрифт вообще выест глаза. По размеру….ну может сделаю потом как-нибудь. Так то, я вообще на сайт забил.