Добрый день друзья!

Слышал ли кто-нибудь из вас о плагине wp-syntax? Между прочим, для многих блоггеров этот плагин является незаменимой вещью.

коды wordpress

Я говорю о тех ребятах, которые пишут обучающие посты, требующие для наглядности вставить какой-либо код в текст статьи! Wp-syntax, является отличным помощником в этом деле!

WordPress устроен таким образом, что при вставке какого-либо html, css, php — кода или java — скрипта в визуальном редакторе, вывод его будет выглядеть как обычный текст:

<a id="toTop" href="#"><img src="https://mysait.ru/images/vverh.png"
alt="« align=»absmiddle" border="0" /></a><script type="text/javascript"
src="https://mysait/top.js"></script><script type="text/javascript">// <![CDATA[
$(function() { $("#toTop").scrollToTop(); }); // ]]></script>


А воспользовавшись плагином wp-syntax, наблюдаем вот какую картину:

<a id="toTop" href="#"><img src="https://mysait.ru/images/vverh.png" alt="« align=»absmiddle" border="0" />
</a><script type="text/javascript" src="https://mysait/top.js"></script><script type="text/javascript">//
<![CDATA[ $(function() { $("#toTop").scrollToTop(); }); // ]]></script>


Вы видите, что наш код принял привлекательную оболочку и стал выглядеть намного солиднее, нежели в первом случае. Но это все пустяки! В принципе мне наплевать, как будет выглядеть код, если я смогу его скопировать и он будет рабочим. И все бы хорошо, но есть одно НО!

Бывают таки коды, которые wordpress отображает коряво (неверный код), что приведет к не правильной подаче материала вашим читателям. И может повлечь за собой ваш не профессионализм в глазах вашей аудитории. А порой бывает, что при сохранении, код вообще просто на просто исчезает, в основном при вставке его в HTML редакторе.

Я столкнулся с проблемой вставки кода в статью, когда писал свой пост про кнопку вверх. Мне необходимо было показать вам уважаемые читатели, как вставить ту самую кнопочку, без плагина. Как я тогда намучился, вы просто не представляете. Один из кодов, ну никак не хотел отображаться в правильном виде! Я уже и так и сяк пробовал, не в какую, хоть ты тресни! Уже хотел плюнуть на все это... Но немного под остыв, задался вопросом, что делать? Что-что, искать решение данной проблемы.

Так вот, в поисках информации я отправился в интернет и нашел много чего по этому поводу. Точно уже не припомню, но по моему я перепробовал аж четыре плагина схожей функциональности. Два из них не подошли к теме моего блога. А из двух других я выбрал wp-syntax. Почему именно его? Этот плагин мне показался довольно простым и удобным в использовании, не требующий дополнительных настроек. Сейчас покажу, как он работает.

Wp-syntax

Переходите на страницу плагина и скачиваете архив с плагином себе на ПК (персональный компьютер). Дальше по старой привычной схеме закидываете архив себе на блог, в папку с плагинами и активируете. Настроек никаких не требуется. Для тех, кто не знает куда закинуть плагин, вот путь: админ панель (админка)/плагины/добавить новый/загрузить/активировать. Установили? Замечательно. Теперь, когда вам понадобится вставить какой либо код в текст статьи, просто перейдите в HTML редактор:

wp-syntax

вставьте код в нужном месте и заключите его в  тэг pre, следующим образом:

<pre lang="select language" line="namber">ваш код</pre>

— lang — вместо select language укажите язык программирования (HTML, CSS, PHP, JAVA и т.д.), вставляемого вами кода;

— line — укажите номер строки (при необходимости). Бывают коды, в которых особый акцент нужно сделать на какую-нибудь строчку. В этом случае, можете указать с какой строки показывать нумерацию кода. Будет это выглядеть так:

1
2
3

<a id="toTop" href="#"><img src="https://mysait.ru/images/vverh.png" alt="« align=»absmiddle" border="0" />
</a><script type="text/javascript" src="https://mysait/top.js"></script><script type="text/javascript">//
<![CDATA[$(function() { $("#toTop").scrollToTop(); });// ]]></script>

Но для удобства пользования, существует еще один плагин wp-syntax button, который является дополнением wp-syntax и выводит в панели инструментов, админки вашего блога, маленькую кнопочку «Code»:

вставка кодов wordpress

Теперь когда вы захотите вставить код в блог, вам просто нужно будет его скопировать, вставить в нужное место в визуальном редакторе, выделить с помощью мышки и нажать на кнопку «code»:

коды wordpress

Дальше, как и описано выше выбираете язык программирования, при необходимости номер строки и нажимаете «Insert». Все готово! Сохраните страницу и любуйтесь на ваш правильный, ровненький и красивый код. Вот как легко при помощи замечательного плагина wp-syntax вставлять коды wordpress.

Надеюсь, моя статья была вам полезна. Хотите получать свежие статьи прямо на e-mail? Подпишитесь на обновления. На сегодня у меня все, всем пока и до скорых встреч!

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

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

С уважением, Николай Коротков