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

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


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

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

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

<script> ...кусок кода... </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);

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

Читайте также:  Кому нужен социальный замок - SocialLocker бесплатно? Конкурс!

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

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

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

Смотри !

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

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

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

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

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

1
2
3
4
5
<!--?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

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

Читайте также:  Граватар, что такое Gravatar? Инструкция по созданию Аватара.

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

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

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

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

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

подсветка кода на страницах

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

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

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

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

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


Мой подарок подписчикам

Подписывайтесь на новости блога и получите подарок - книгу "Как заработать 1000$ в первый месяц". В ней я рассказал свои наблюдения исходя из своего опыта. Я выделил всего ТРИ метода для заработка.

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

12 комментариев

по хронологии
по рейтингу сначала новые по хронологии
Екатерина Худякова

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

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

Автор

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

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

Спасибо за желание помочь) Но я уже свою кнопку сделала, чтобы код вручную не вводить постоянно)

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

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

Автор

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

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

Просто лишние языки я не использую. Мне хватает и небольшого набора.

Дополнительный плагин для кнопки Wp Syntax Button раньше тоже устанавливал, но как у Кати, у меня эта кнопка тоже не работала.

Автор

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

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

Автор

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

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

Автор

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