X
    Categories: Создание сайта

Плагин Wp-syntax — как вывести HTML, PHP и другой код в статье wordpress?

Приветствую, друзья!

Сегодня короткий пост о том, как красиво выводить Javascript,  PHP и Html код в теле заметки, чтобы это выглядело красиво и читатели легко его могли скопировать и использовать для своих целей. Для вебмастеров, которые пишут о создании и раскрутке блога,  плагин Wp-syntax является очень полезным.

Ранее я без него мог обходиться, теперь в постах приходится часто отображать коды и удобство для читателей выходит на первый план, я поискал лучшее решение и нашёл его – это установка плагина Wp-syntax и дополнения к нему WP-Syntax Button.

Все дело в том, что при помощи редактора WordPress (“Текст” или “Html”) код опубликовать не получится, его при публикации просто не будет. Если же напечатать код в “визуальном редакторе”, то  подача кода к тексте заметки будет следующая:

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

Выводим PHP и HTML код в тексте страницы с помощью плагина Wp-syntax

Скачать плагин можно с официального сайта по ссылке , после этого заходите в адинку блога => Плагины=>  Добавить новый => Загрузить и указываете путь к архиву, который вы загрузили ранее. После этого плагин необходимо активировать и можно красиво подавать коды в заметках, вот как это выглядит:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>

При этом есть одно маленькое “но”…Для вывода кода его необходимо отображать следующим образом, перейдя в редакторе в режим HTML (обязательно!):

<pre lang="LANGUAGE" line="1"> тут ваш код </pre>

Где, соответственно,

– вместо фразы  “тут ваш код” вы вставляете свой фрагмент кода html, php или иной;

Line – возможность добавления строк;

– нумерация строк начинается с единицы – 1.

Для тех, кому это делать не сложно, оставляйте всё как есть и пользуйтесь плагином Wp-syntax.

Если хотите еще облегчить себе задачу, то вам необходимо установить еще один плагин Wp-syntax button ( скачать по ссылке ). Он выводит кнопку “Code” в визуальный редактор, вот так:

Если вы установите Wp-syntax button, то в этом случае вам не нужно переходить в Html редактор для выделения кода в тексте.

Просто в визуальном редакторе выделяете код, требующий выделения и нажимаете “code”, после этого вы можете увидеть вот такую табличку:

Далее вам нужно выбрать в категории “Select Language” язык программирования, к которому принадлежит код, который вы хотите отобразить красиво при помощи плагина.

Далее в графе “Line Number” по желанию можно поставить цифру, с которой будет начинаться нумерация в выводимом коде.

Например, вот так:

В завершении маленький, но очень важный совет:

Помните!

Чем больше плагинов вы используете, тем больше нагрузку ваш сайт дает на сервер. Обязательно взвесьте все “за” и “против”, прежде, чем установить еще один плагин на свой блог.

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

Надеюсь,  данная статья будет вам полезной и поможет красиво оформлять материал в заметке.

Напоминаю, что скоро на блоге стартует новый марафон кроссвордов “Эрудит – 4”, чтобы не пропустить его , подпишитесь на рассылку (сверху справа введите свое имя и e-mail) или на новости блога . Жду ваши пожелания, предложения, темы для кроссвордов, варианты призов.

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

На днях я подкорректировал свою RSS – ленту, теперь проверяю старые посты, изменяю, улучшаю и на новые заметки совсем мало времени остается, но я стараюсь. На днях начну изменять перелинковку в постах, поскольку показатель PR упорно не хочет сдвигаться с нолика, буду с этим бороться.

Если вы знаете, как можно без плагина выводить коды в постах, напишите, будет интересно почитать, я это реализовал так:

вставить html код в статью вордпресс без плагина

Я сторонник минимального количества плагинов на блоге, с удовольствием почитаю, делитесь опытом. На этом буду заканчивать.

До встречи!

Интересные статьи по данной теме:

Плагин “заплати лайком”, установка, настройка, использование

Как провести опрос на блоге без плагина

Создаем меню автозапуска при помощи AutoPlay Media Studio

Работа в интернете без вложений – моя правда

Как правильно брать интервью

 

С уважением, Вилков Николай

Хотите в числе первых узнавать о новых статьях и курсах?

Подпишитесь на обновления моего блога и мой канал на YouTube
Если статья вам понравилась, поделитесь с друзьями в социальных сетях. Спасибо!

Николай Вилков :

View Comments (39)

  • Когда-то тоже искал себе плагин для вывода кода и выбрал - Crayon Syntax Highlighter!

    Из всех его описывали как самый лучший и он меня не разочаровал! ;-)

    • Каждому нравится свой вариант, хорошо, когда есть выбор плагинов с одним функционалом и достойные конкуренты :)

      • Все же советую вам попробовать! Очень удобный, простой и многофункциональный!

        И не нужно ставить два плагина!

        А еще в Crayon Syntax Highlighter есть целый набор различной подсветки кода!

        • Меня Syntax полностью устраивает, я уже под него все коды переделал в постах, опять копаться неделю нет никакого желания. Спасибо за совет, если бы я искал плагин такого рода, может выбрал бы и предложенный вариант :)

  • Я сначала им пользовался, потом подумал. А зачем. Код теперь при помощи специальных цитат вывожу. Все таки людям только скопировать, а не программировать :smile: . Ну а вообще если бы вез плагина, то я бы обязательно примерил! :smile:

    • Я также сейчас хочу уйти от этих двух плагинов и выделять коды при помощи html тегов, скоро напишу про это.

  • Отличный плагин.
    С этим плагином, всё выглядит гораздо опрятнее. Спасибо!

  • "Я также сейчас хочу уйти от этих двух плагинов и выделять коды при помощи html тегов, скоро напишу про это."

    Напишите пожалуйста, ждем )

  • Привет Николай.
    Подскажи пожалуйста,с помощью какого плагина или скрипта у тебя на блоге,при кликанье на статью,открывается статья и картинка делается большой.

    • Игорь, привет!
      Я довольно редко это использую, но без плагина. Для этого я загружаю полное изображение (таблицу, график, большой скрин) и его уменьшенную копию. Уменьшенную копию вставляю в заметку, а в чекбоксе "Ссылка" выставляю URL большого изображения оригинального, ниже скрин где вставлять

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

      • Спасибо за информацию Николай.Я понял,у меня был такой шаблон.
        Но мне с помощью плагина подсказали.

  • Привет! Плагин 2 года не обновляется. видимо устарел. у меня ничего не получилось.

    • Рита, в конце заметки есть ссылка на статью, в которой подробно рассказываю, как можно реализовать вывод синтаксиса при помощи кнопки, очень удобно

    • Рита, я данный плагин уже не использую, кодом вывожу синтаксис с кодами.
      По поводу плагинов в вордпресс, сейчас многие плагины проблематично даже найти из админки для установки, не знаю с чем это связано. Я на новый сайт устанавливал пакет плагинов и некоторых даже на официальном сайте вордпресс не смог найти.

  • Здравствуйте. Я читала эту статью. С плагином все получается. А я хотела без плагина. В этой статье, что вы прислали еще один плагин добавляется. Кроме того, эти плагины Wp-syntax и Wp-syntax button устарели для новых версий wordpress. Вопрос остался открытым. Жаль конечно, что со скриптом не получается, а плагинов у меня уже много. Я стараюсь пользоваться скриптами где это возможно. Сейчас есть новый плагин wp-syntaxhighlighter.1.7.3 и даже есть версия 3.0 и 3.8, но они у меня с моей версией wordpress не работают. Спасибо вам за ответ. :roll:

    • Рита если хотите совсем без плагина то советую посмотреть на Highlight.js Это не плагин, это обычный скрипт который не составит труда подключить на свой сайт.

      • Спасибо за помощь, Денис. Что-то ты совсем свой блог забросил, редко пишешь :(

    • Рита, Ещё раз повторюсь, что в статье есть способ вывода кода при помощи кнопки, которая отображается в панели редактирования вордпресс, это НЕ ПЛАГИН, как вы мне несколько раз пишите. Если вам этот способ также кажется плагином, то я тогда бессилен вам что либо доказывать.

      • Рита, шаблон тут не причем.Изначально для выделения кода есть теги PRE и CODE которые работают в любом шаблоне.А плагины для подсветки ко всему прочему каждую строчку кода заключает в тег SPAN тем самым раскрашивая построчно весь код.Ко всему прочему у плагинов идет своя таблица стилей которая преопределяет цветовую гамму раскраски кода. Как то так. Думаю тема раскрыта. ;-)

      • Николай, я же не говорю что у всех не получается. У меня не получается. Видимо особенности моего шаблона.

        • Возможно, это особенность шаблона, не могу гарантировать, что для всех шаблонов это подойдет))

  • А как сделать так, чтобы в середину статьи можно было вставить html (php) код, который будет отображать на сайте, например, форму подписки?

    • Игнат, напишите мне в личку на почту admin@rabotaiuspeh.com, обсудим. Какую социальную сеть вы предпочитаете, что готовы делать для развития группы и так далее..

  • Спасибо автору за понятную подробную статью! Искал решение с кодом для себя, это в самый раз! Удачи вам в развитии вашего блога!