Профессиональное обучение
блоггингу от А до Я

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

как вывести html код в блоге

Привет друзья! В сегодняшней статье я хотел бы рассказать вам об одном очень полезном плагине, точнее двух (второй как дополнение), которые позволят вам красиво выводить различные HTML, PHP, Javascript и т.д. коды в статьях своего блога. Я уверен, что многие ребята пишут статьи и порой возникает необходимость показать какой-то код в статье людям.

 

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

Есть другой вариант, тупо вставить код визуально (не через HTML).

Код wordpress

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="/socializ.js"></script>

или вот так:

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="/socializ.js"></script>

Согласитесь второй вариант куда лучше. Так вот, благодаря какому плагину все это делается?

Wp-syntax — плагин предназначенный для выведения и подсветки различных кодов в статье. Скачать плагин вы можете вот здесь. Устанавливается как обычно. Активируете плагин в админке и теперь если вы хотите вставить какой-то код в статью и подсветить его, то вам нужно перейти в режим HTML в редакторе вставить код, который вы хотите отобразить в посте в нужное вам место и окружить вот этим кодом:

<pre lang="LANGUAGE" line="1"> здесь ваш код </pre>

Вроде бы все просто, но все равно не очень удобно. Здесь на помощь приходит второй плагин (дополнение к wp-syntax), называется он WP-Syntax Button. Скачать можете вот здесь.

WP-Syntax Button — плагин, который добавляет в визуальный редактор дополнительную кнопку code.

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

Теперь для того чтобы добавить код в статью, не обязательно переходить в HTML и окружать код ручками, делается все просто. Вставляете свой код в режиме "Визуально в статью, посе чего выделяете его мышкой и жмете на кнопку «Code».

Вылезет вот такая штука:

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

Select Language — здесь вам нужно выбрать язык вашего кода, который вы будете вставлять (HTML, PHP, Javascript и т.д.)

Line Number — нумерация строки, с какой начать. Вот пример, вставляю свой код, выбрал язык javascript и поставил 7 строку. Жму — Insert.

7
<script type="text/javascript" src="/socializ.js"></script>

Ну что, думаю все понятно объяснил. У меня стоит версия wordpress 3.1 и плагины работают отлично, слышал где-то, что с некоторыми версиями плагин wp-syntax-button не совместим, поэтому если у вас будет что-то не так, то или обновляйте wordpress либо ищите альтернативу. Есть еще и другие плагины, которые позволяют выводить коды в статьях...

Знаю еще вот такие:

SyntaxHighlighter Evolved
CodeCitation

Так. Ну все на этом. Думаю статья была полезна для вас. Желаю успехов!

С уважением, Александр Борисов


Школа блоггеров А.Борисова

Школа дизайна Юлии Первушиной

Школа блоггеров А.Борисова
Этот блог читают уже более 6000 человек
- читай и ТЫ!
комментариев 38
  1. Ксения

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

    в 14:11 | Ответить
  2. Александр Борисов

    Ксения об этом я писал здесь — «Как сделать красивую форму подписки»

    Для этого вам нужен специальный плагин Exec php для wordpress

    в 14:23 | Ответить
  3. Ксения

    Спасибочки большое! 😉

    Помню, что где-то у вас встречала, а сразу найти не смогла =)

    в 19:15 | Ответить
  4. Максим

    Теперь уже кое — что проясняется в голове, так как только недавно начал лезть в эти дебри. Благодарю за описание

    в 12:47 | Ответить
  5. Бабай

    Александр извините я немного не по теме, есть проблема с вордпресс, а именно добавляю какой нибудь виджет, перезагружаюсь а виджета нет, только если сменю тему а потом вернусь опять к старой теме виджет появляется, и счетчик посещений висит. Может подскажите в чем проблема, спасибо зарание.

    в 15:37 | Ответить
    • Александр Борисов

      Не знаю даже. Это наверное шаблон глючит.

      в 17:33 | Ответить
  6. Евгений

    полезная штучка для блога, особенно при проведении конкурсов, описании решений по программированию.

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

    в 12:45 | Ответить
  7. Алексей

    Установил оба плагина! Но при нажатии кнопки Code, выскакивает табличка с надписью: Could not found wp-config.php. Error in path : 🙁  Что это значит???

    в 15:08 | Ответить
    • Александр Борисов

      Вы лучше уберите кнопку это. Руками выводите.

      в 17:34 | Ответить
  8. Санек

    Спасибо конешно за инфу, ну можно пожалуйста все описать о HTML и PHP, просто я новичок, не очень хорошо разбираюсь во всем этом, ижелательно поподробнее, как что куда вставлять, и где их брать вообще, заранее спасибо!

     

    в 19:11 | Ответить
    • Александр Борисов

      Я в этом не разбираюсь Санек.

      в 17:35 | Ответить
  9. Инна

    Столько информации пересмотрела, но нигде как у Вас нет такой доступной и понятной информации... Пошла устанавливать... Спасибо!!! =)

    в 22:35 | Ответить
  10. Анто

    Попробовал поставить 2 плагина. Кнопка не работает, но не в этом суть. У меня резиновый шаблон и, вставив длинный код, он автоматически растягивает шаблон. Как можно закрепить максимальную длину поля вывода кодов?

    в 14:54 | Ответить
  11. Дмитрий

    Спасибо, Александр. Поставил оба плагина, всё работает. Только возникла одна проблема: ставлю примерно такой код:

    (2 строки), выделяю жму кнопку «code» он их объединяет в одну строку. Если в визуальном режиме встать межу строками и нажать «enter», автоматически везде где есть кавычки, он добавляет тег (получается <link rel="icon" и т.д.) Если перейти в html и вставит код между тегами pre lang="abap">, то после возвращения в визуальный код исчезает.

    Подскажите как сделать так, чтобы было 2 строки?

    в 22:58 | Ответить
  12. Никита Рябин

    Cпасибо за плагины, у меня в некоторых блогах как раз нужна подсветка кода!

    в 17:52 | Ответить
  13. Андрей

    У меня чо-то не получется. Наверное шаблон, тема не потдерживает его((

    в 18:26 | Ответить
  14. Надежда

    У меня наоборот другой плагин не работал,а этот установила через поиск плагинов внутри сайта,разобралась,что нужно на плагине код взять и вместо and вставить свой код и все заработало.Здесь есть это объяснение.Для тех кто не знает: подсветка кода это такая опция когда нужно в статье показать для копирования html код,к примеру для обмена баннерами.Но если его скопируешь с визуального варианта он изменится в html варианте и не будет работать если в ручную не переписать. а в html варианте код не показать потому,что вместо кода виден баннер. ;-) ;-)

    в 19:13 | Ответить
  15. Алексей

    Александр, спасибо огромное! Только из Вашей статьи смог узнать про WP-Syntax Button. А вводить все ручками было жутко неудобно! И вообще, спасибо за Ваш блог. :) Давно слежу.

    в 01:15 | Ответить
  16. Александр

    Всё сработала, и кнопка и вставка кода.

    Автор молорик!!!!

    в 20:59 | Ответить
  17. Ростислав

    Надо сделать такую же себе что ли. Спасибо за пост! [good]

    в 16:38 | Ответить
  18. Галина

    Вот он, родимый! Ура! Спасибо, наконец-то я нашла его!

    в 17:00 | Ответить
  19. Людмила Винокурова

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

    в 19:58 | Ответить
  20. Саша

    [star] Здравствуйте. Скажите а как вставить код чтоб он отображался в статье. Когда я ввожу код в виджеты он отображается, подскажите как его вставить в статью? вот код:

    в 15:12 | Ответить
  21. Максим

    Все сделал как положено. Не подскажете как сделать так чтобы код выводился в несколько строк а не в одну?

    в 22:50 | Ответить
  22. Артём

    Плагин супер, как раз искал что-то подобное.

    Шутка в конце вообщем жесть [:-))]

    в 03:36 | Ответить
  23. Артём

    Плагин отличный, сразу поставил и дополнение тоже.

    А шутка жёсткая =))))

    в 14:19 | Ответить
  24. Максим Зборовский

    Вот, вот оно, то что нужно! Когда публикуешь код таким же шрифтом, как и основной текст, то это выглядит не красиво, а вот теперь с этим плагином, всё выглядит гораздо опрятнее. Спасибо!

    в 11:42 | Ответить
  25. Александр Быкадоров

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

    в 11:52 | Ответить
  26. Александр Быкадоров

    Александр, пишу о проделанной работе — установил, на WP версии 3,5,2 — работает нормально !!

    Спасибо !

    в 15:14 | Ответить
  27. Александр

    Хороший плагин — поставил себе на блог.

    в 18:11 | Ответить
  28. Мария

    Надо будет тоже поставить данный плагин на блог

    в 12:44 | Ответить
  29. Ольга

    Отличный плаагин, аналогов даже не видела!!! У себя в блоге тоже используем.

    в 17:44 | Ответить
  30. Георгий

    А про дополнение к плагину не знал. Код помещал в теги ручками, что не очень удобно!!!

    Теперь буду использовать и дополнительный плагин!

    в 17:27 | Ответить
  31. Евгений

    А у меня плагин Wp-syntax не пошёл. Код вроде нормально выводил, но ещё что-то своё туда добавлял. Пришлось поставить альтернативный вариант — SyntaxHighlighter Evolved.

    в 12:39 | Ответить
  32. Александр Васильев

    Предпочитаю плгин "WP-Syntax Editor Integration Plugin". Почти всё то же самое, только код выводит без нумерации. Просто как в цитате.

    в 14:10 | Ответить
  33. Андрей

    Добрый день! Александр! Можно задать вам вопрос? А какой плагин вы используете, что бы получался серый чуть изогнутый фон для надписей, с синей полосой слева? Который есть почти на всех ваших статьях

    в 17:50 | Ответить
    • Жандос Мукатаев

      Здравствуйте! Александр может не увидеть ваш вопрос, так как это давняя статья. Напишите в службу поддержки!

      в 18:12 | Ответить
  34. Ирина

    Плагины Wp-syntax и WP-Syntax Button на официальном сайте пишут, что не обновлялись уже 2 года, все понятно и статья уже не свежая, а какими плагинами лучше всего их заменить?

    в 14:39 | Ответить
Оставить комментарий: (ПРОЧТИ ЭТО!!!)
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]