Вставка кодов в статьи с плагином Wp syntax

Здравствуйте, друзья!

Сегодня поговорим об одном элементе качественного оформления статей на сайте.

Речь пойдет о вставке кодов в статьи. Это очень важно, так как каждый элемент в контенте должен выделяться. Обычный контентный текст - это и есть текст, картинки также имеют свойство притягивать внимание посетителей. Тоже самое и с кодами, если вы их размещаете. Они должны привлекать внимание, и что еще немаловажно - код не должен сливаться с общим контентом, то есть с текстом.

Как правило, потребность размещать коды в статьях имеется только на сайтах технической тематики.

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

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

Чтобы реализовать вариант, описанный выше, я использую плагин Wp syntax, который прекрасно выделяет код из простого текста и дает возможность объяснить сам код посетителям, указав при этом на определенные строчки. Вот пример такого оформления кода с плагином Wp syntax.

Примеры ниже не актуальны. Я теперь использую другой плагин, который считаю более удобным и лучшим. Читаем подробнее в статье про Crayon Syntax Highlighter.



Так оформляется php код. А ниже покажу, как оформляются CSS стили.

Также можно вставлять и другие коды различных языков программирования. И каждый из них будет оформляться по разному (различные коды будут иметь разные цвета).

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

В общем, сейчас мы с вами это все быстро и рассмотрим.

Инструкция по плагину

Для начала устанавливаем Wp syntax. Скачиваем плагин с официальной страницы.

После его установки он уже будет работать. Настроек он не требует.

Как работать далее с кодом вы можете посмотреть в видео-уроке, где я также объяснил все нюансы работы с этим плагином. Ну, а ниже текстовое объяснение.

При вставке кода в статью, его нужно будет оборачивать в теги <pre></pre>. Делается это в текстовом (html) редакторе, а не в визуальном. Первый тег <pre> мы размещаем  перед кодом, а второй (закрывающий - </pre>) после кода.

Только, чтобы задать коду соответствующее оформления, нумерацию строк, нужно в открывающем теге дописать некоторый синтаксис. В итоге, вставка кода будет реализовываться следующим образом - <pre lang="php" escaped="true" line="1">тут находится код</pre>.

Проследите, чтобы при оборачивании кода данными тегами, кавычки вида " отображались в текстовом редакторе в виде двойных верхних кавычек.

Проблем с этим в текстовом редакторе быть не должно, но все же.

Немного растолкую, что же внутри открывающего тега и, какие значения там можно выставлять.

  • lang="php" - в данной настройке выставляем язык программирования. В соответствии с выставленным языком, код будет принимать должное оформление.

Языком программирования огромнейшее количество. Наиболее используемые языки для настройки этого параметра - php, html, css. Их мне всегда хватало для грамотного оформления кода в статье. Если же вас интересуют другие языки, то ниже можете их посмотреть.

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

  • escaped="true" - перевод символов из исходного кода в нормальные. Когда мы вставляем некоторые символы в статью, то они в исходном коде имеют своеобразный вид. Например, скобки <> имеют вид &lt;&gt;. Открывающий тег представлен в виде &lt;, а закрывающий - &gt;.

Если убрать эту настройку, то в тексте код будет отображаться также непонятными символами. Поэтому, данную настройку оставляем.

  • line="1" - функция включает нумерацию строк в коде. Если посмотрите, на коды, которые я приводил в пример выше, то каждая строка нумеруется. За это и отвечает данная настройка. Между скобками мы указываем номер строки, с которой будет происходить нумерация. Если она не нужна, то можно эту функцию удалить из открывающего тега.

В конечном итоге, вставленный код в статью с плагином Wp syntax будет иметь вид. Показываю 2 кода с начала этой статьи.

Красными рамками я выделил открывающий и закрывающие теги, которыми необходимо обернуть вставленные коды.

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

Первую сторону медали разобрали. Пойдем дальше.

Если не хотите оборачивать код нужными тегами в ручном режиме, то можно установить дополнительный плагин к Wp syntax, который будет добавлять в визуальный редактор специальную кнопку. Затем просто нужно будет выделить нужную часть кода в тексте и нажать на кнопку, затем выбрать язык для оформления кода и все будет сделано. Необходимость оборачивать код в теги руками отпадает.

Плагин называется wp-syntax-button. Скачать его можно также с официальной страницы. После его установки должна появиться кнопка "Code" в редакторе.

Чтобы ей воспользоваться, выделяем код в визуальном редакторе, затем жмем на эту кнопку и появляется маленькое окошко, где нужно выбрать язык кода (Select language) и выставить значения строки, с которой будет выводиться нумерация. Если нумерация не нужна, то поле оставляем пустым. После этого нажать на кнопку "Insert", то есть "Вставить".

У меня данная кнопка почему-то не работает. Поэтому, мне приходится каждый раз оборачивать коды нужными тегами ручками. Занимает конечно пару секунд времени, но это довольно просто. Правда, когда статья очень большая и кодов много, то иногда можно запутаться и прописать теги в неверном месте, что приводит к перекосу всего материала статьи. Тогда приходится помучиться и вернуть все в прежнее состояние.

У вас также может данная кнопка не работать. Я не знаю, с чем это связано. Может она уже вообще не работает ни у кого, так как не обновляется очень долгое время. А Wp syntax все таки обновлялся. Поэтому, может по несовместимости версий, кнопка вам не потребуется в связи с неработоспособностью последнего плагина. А может и с новыми версиями WordPress она несовместима.

Кстати, в комментариях напишите, работает ли у вас кнопка. Если работает, то какая у вас версия движка WordPress?

Также хотелось бы услышать какие-то варианты других плагинов для вставки кодов в статьи. Видел довольно интересные варианты, когда присутствует все то же самое, что и в Wp syntax, но можно еще помимо этого кликать на кнопки для копирования кода в буфер, не выделяя при этом сам код. Также очень удобная фишка. Может кто знает названия этих плагинов. Буду благодарен, если подскажите в комментах.

А на этом я статью буду заканчивать. До встречи в следующем посте.

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 2
  • Спасибо. Реально пригодилась статья. Не знал про дополнительные параметры escaped и line, а без них здесь вообще никуда =)
    А плагин с кнопкой установился, кнопка появилась, но не работает. Придется всё руками прописывать

  • Спасибо, Константин! Очень полезная и грамотная статья. Аналогов, или чего либо лучше пока не нашел, пришлось делать все руками ) . Установил второй плагин с кнопкой - тоже не работает, WordPress 4.3.1.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *