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

 

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

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

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

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

Snap 2014-05-07 at 14.57.11

 Согласитесь, не весьма красиво и довольно не удобно копировать код в таком виде, а если учесть, что любой лишний знак или пробел, может создать проблемы на блоге, то и необходимо установить плагин, о котором пойдёт речь. Для чего необходим плагин 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” по желанию можно поставить цифру, с которой будет начинаться нумерация в выводимом коде.

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

Snap 2014-05-08 at 00.18.44

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

Помните!

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

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

[ads2]

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

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

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

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

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

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

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

До встречи!

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

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

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

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

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

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

 

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

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

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

Получать новости первым!

Получать обновления блога на Email

Обсуждение: 37 комментариев

  1. Хороший плагин, всегда им пользуюсь при нужде. Хотя раньше думал что такие вещи с помощью какого-то кода специального выыводятся.

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

      Ответить
      1. охохо, да, это не легко 🙂 особенно когда не одна сотня статей уже набежала. 🙂 Ну, ничего, мы это тоже проходили 🙂

      2. Денис, на самом деле постов с кодами 10-15 не больше у меня и корректировать не сложно: выделить уже опубликованный код в редакторе и нажать кнопку «code», да кнопку «обновить пост».
        Думаю, мне сложней будет из 120 отыскать те, в которых были коды опубликованы. 😯

  2. Хороший плагин, только валидность немного портит, ну ничего, зато код выводиться 🙂

    Ответить
    1. Привет, Александр!
      Валидность идеальной никогда не будет, да и мнения не однозначные про значение валидности и количество ошибок.

      Ответить
  3. Николай попробуйте WP SyntaxHighlighter он совмещает в себе эти два плагина, и напорядок удобней.

    Ответить
    1. Спасибо за совет, Денис. Займусь изучением и почитаю отзывы, возможно и установлю вместо двух предыдущих.

      Ответить
  4. С помощью плагинов, и правда, можно всем статьям придавать красивый и удобный вид.
    Пока мне не приходилось писать статьи с использованием кодов, но как придётся — обязательно воспользуюсь данным плагином, чтобы было аккуратнее.

    Ответить
  5. Павел:

    Хорошо написано, ничего не скажешь, спасибо за прозрение!)

    Ответить
    1. Пожалуйста, Павел!

      Ответить
  6. Vlad:

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

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

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

      Ответить
      1. Vlad:

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

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

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

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

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

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

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

    Ответить
  9. Андрей:

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

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

    Ответить
    1. Андрей, привет!
      Вот ссылка заметки от 17 сентября, где я подробно всё описал, очень удобно можно выводить html- код без использования плагина
      Уверен, у вас получится это реализовать.

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

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

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

  11. Рита:

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

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

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

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

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

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

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

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

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

      Ответить
      1. Спасибо, Денис. Я посмотрю.

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

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

    Ответить
  14. Игнат:

    Хочу быть модером в группе)

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

      Ответить

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

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

© 2017 Блог Николая Вилкова | Записки блогера // Дизайн и поддержка: GoodwinPress.ru