БАЗА подписчиков за 1 месяц! (Секретная технология)minimazer

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


как вывести html код на странице

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

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

<script>// <![CDATA[
 ...кусок кода... 
// ]]></script>

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

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

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

как вывести код на странице 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);
Читайте также:  Как отключить и удалить редакции (ревизии) в WordPress

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

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

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

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

Смотри !

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

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

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

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

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

1
<!--?php function in4wp() { echo "Hello World!\\n"; } ?-->

Java — вот так:

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

Ruby вот так:

1
2
3
4
5
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 кода на странице — будем коллекцию собирать. Пиши каменты и подписывайтесь на мой блог.

Читайте также:  Как быстро удалить все комментарии в wordpress?

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

Понравилась статья? Расскажи друзьям:


Реалити-шоу по продвижению крупного проекта

Как профессионал шаг за шагом продвигает самый разные страницы и запросы в ТОП. За год посещаемость выросла с 1000 человек до 7000 человек в сутки. Это возможно.

Перейти по ссылке.


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

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

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

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

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

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

Оставить комментарий