Как вывести HTML, PHP и другой код в статье wordpress?

как вывести html код на странице CMS Wordpress
Здравствуй, дорогой друг! Совсем недавно меня спросили о том как вывести html, php код в статье - на что я ответил "Плагином". Да, речь сейчас пойдет о плагине. Но вот о всех его настройках знают далеко не все. Кто уже догадался в чем подвох - можно не читать.

Здравствуй, дорогой друг! Совсем недавно меня спросили о том как вывести html, php код в статье — на что я ответил «Плагином». Да, речь сейчас пойдет о плагине. Но вот о всех его настройках знают далеко не все. Кто уже догадался в чем подвох — можно не читать.

Так вот. Как оказалось — далеко не все блоги вообще пытаются выводить код на своих страницах. А почему? Да потому что блоггеры, когда пытаются вставить код в статью — получают не совсем то что хотели. Ну, ты понимаешь. Ты хочешь вставить код типа

А браузер понимает это по другому, он думает что этот кусок кода надо исполнять, а не показывать текстом. И пытается его выполнить или в лучшем случае выведет криво.

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

Может быть тебе уже приходилось сталкиваться с подобным? Расскажи в каментах.

как вывести код на странице wordpress
Есть конечно еще один вариант, вставить код в визуальный редактор. Я то обычно пользуюсь HTML редактором. А вот в визуальном редакторе можно вставить код и да — он покажется просто как код. Но вот смотрится как он показывается

<script> …кусок кода… </script>

Как-то не красиво, правда? Просто и очень сухо. Гораздо красивее вот так:

    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
    body_element.appendChild(newdiv);

Даже с подсветкой. Видишь?

Все это благодаря одному несложному плагину — WP-SYNTAX.
Скачать плагин

Скачиваем, устанавливаем, активируем.

Теперь нам активна возможность вставлять код в страницу. Чтобы этот код показывался каждому читателю. Осталось только разобраться как это сделать.

Смотри !

<pre lang="LANGUAGE" line="1"> ...кусок кода... </pre>

Теперь по порядку:
Вместо LANGUAGE — можно вставить любой язык, который хочешь, например php, css, java и т.п.

Цифра возле слова «line» — означает с какого числа будет начинаться отсчет строк. В нашем случае первая строка будет под номером «1». Некоторые начинаются с нулевой строки. Некоторые хотят показать кусок середины кода и начинают, скажем, с 132 строки и т.д. Этот параметр не обязательный.

Можно Line вообще не указывать — в этом случае строки будут просто без нумерации.

Ну вот пару примеров, например, PHP будет выглядеть так:


Java — вот так:

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

Ruby вот так:

class Example
  def example(arg1)
    return "Hello: " + arg1.to_s
  end
end

Языков, синтаксисов, на самом деле оооочень много. Вот лишь список самых популярных:

abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit, avisynth, bash, bf, bibtex, blitzbasic, bnf, boo, c, 
c_mac, caddcl, cadlisp, cil, cfdg, cfm, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, 
fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, 
javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc,
 modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief,
 php, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, 
scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, 
visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, z80

Даже если тебя не устраивает подсветка языка — ты можешь самостоятельно настроить её. Конечно, если есть определенные навыки.

Нужно всего лишь самостоятельно поменять цвета в .php файле нужного языка в папке /wp-syntax/geshi/geshi/. Если у тебя есть желание, но нет навыков — не беда. Обращайся ко мне, в поддержку читателя.

Чтобы тебе особо не заморачиваться с ручным написанием этих примочек-настроек — есть дополнительный плагин, называется — WP Syntax Button.
Скачать плагин

Цель плагина — упростить работу с кодом новичку. А именно, уже в визуальном редакторе этот плагин добавляет кнопку для вывода кода с подсветкой на странице твоей статьи.

вывод php кода с подсветкой
После нажатия на эту кнопку — останется лишь выбрать язык (параметр LANGUAGE)

вывод кода в подсветкой синтаксиса
Потом указать цифру, с которой начинать нумерацию строк, и начинать ли нумерацию вообще. Можно не указывать — нумерации не будет. И жмем INSERT.

подсветка кода на страницах
Вот в принципе и всего делов-то. Проверял я эти штуки на WordPress версии 4.01 — все работает. Единственный касяк — это окошко в визуальном редакторе не до конца раскрвается. Ну, на скринах это видно. Интересно, может это только у меня такая проблема? Если у тебя тоже такая фигня — напиши об этом.

Пользуясь случаем, хочу объявить о том, что у меня есть БЕСПЛАТНЫЙ курс по созданию блога с нуля — ПОЛУЧИТЬ КУРС. Помогаю новичкам в развитии.

А также прошу отозваться всех, кто знает другие плагины для вывода html, php кода на странице — будем коллекцию собирать. Пиши каменты и [urlspan]подписывайтесь[/urlspan] на мой блог.

С уважением, Денис Тумилович.

Читайте также:  Easy Vkontakte Connect - Кросспостинг статей в группу Вконтакте
Оцените статью
Добавить комментарий для Денис Тумилович Отменить ответ

  1. Екатерина Худякова

    Тоже этот плагин использую))) Кстати, пыталась когда-то установить и кнопку Wp Syntax Button, но она почему-то не заработала у меня ):

    Ответить
    1. Очень странно, а какая версия вордпресс? Когда пыталась установить кнопку? Давай посмотрю может?

      Ответить
      1. Екатерина Худякова

        Спасибо за желание помочь) Но я уже свою кнопку сделала, чтобы код вручную не вводить постоянно)
        А версия 4.0 была на тот момент, но в принципе, я слышала, что у многих такая проблема с плагином возникает, наверное, из-за того, что его все-таки давно не обновляли((

        Ответить
    2. Александр

      У меня такое же было, причиной оказался конфликт с другим установленным на блоге плагином. Просто по очереди деактивировал плагины и проверял работу

      Ответить
  2. Диана Ефимова

    А я пока не использую плагины.) Точнее еще не приходилось коды в статье выводить.) Я переживаю каждый раз устанавливая новый плагин. Он не сильно блог нагружает?)

    Ответить
    1. Дык тут вроде и нагружать нечему. Это просто дополнительная стилизация. Тоже самое если ты в CSS стилях правила пропишешь — эффект тот же.

      Ответить
  3. Сергей

    Плагин WP-SYNTAX хорош в плане кода. В нем очень большой выбор языков. Однако не смотря на это, я решил пока использовать другой, более легкий удобный плагин. Если что, у меня на главной сейчас висит статья про него.
    Просто лишние языки я не использую. Мне хватает и небольшого набора.
    Дополнительный плагин для кнопки Wp Syntax Button раньше тоже устанавливал, но как у Кати, у меня эта кнопка тоже не работала.

    Ответить
    1. Заинтересовал, если честно. Обязательно попробую.

      Ответить
  4. Евгения Куварина

    Я раньше тоже плагин использовала, но так как код выводила всего лишь в нескольких статьях, отказалась от плагина.

    Ответить
    1. Я прошу прощения, Евгения, а как тогда в этих статьях был код выведен?

      Ответить
      1. Александр

        Денис, а ведь есть хаки благодаря которым можно выводит хмтл и другой код в статье без плагина, почему бы не использовать его?

        Ответить
        1. Потому что это тоже самое будет что код плагина засунуть в файл functions.php — смысл?

          Ответить