Плагин 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

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

[note]

Помните!

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

[/note]

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

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

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

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

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

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

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

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

До встречи!

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

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

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

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

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

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

 

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

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

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

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

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

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

  1. Денис:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
      1. Денис:

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

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

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

  2. Михед:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
  3. Denis:

    Николай попробуйте 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. Denis:

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

    2. Denis:

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

      Ответить
      1. Рита:

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

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

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

  13. orenkomp.ru:

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

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

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

    Ответить
    1. Николай Вилков:

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

      Ответить
  15. Василий Цубера:

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

    Ответить
    1. Николай Вилков:

      Василий, удачи вам в развитии сайта))

      Ответить

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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