Как вставить код в статью WordPress?
Всем привет, с вами на связи Евгений и буду говорить о том как вставить код в статью на WordPress, например php, css, html, скрипт и так дальше. Много где встречал на блогах, где люди пишут в обучающих статьях, где нужно какой то вставить код стилей либо скрипт в статью, и знаете что они используют ?
Скажу что я смеялся долго, но честно это не смешно и не профессионально как то, да и не красиво, вообщем вставляют этот код в выделенную цитату, это ужас !!! Ну думаю что такому человеку, просто наплевать на своих читателей и на свой блог, как что выглядит.
Вообщем долго рассказывать не буду, приступим к делу, я буду использовать в статье такой плагин как WP Syntax, я использую его он мне очень нравится, я рекомендую, также к нему есть еще дополнение, то есть еще один плагин который обеспечивает вам легкость во вставке кода на блог, это WP Syntax Button, скажу вам что второй плагин я не использую, который добавляет дополнительную кнопку «Code» в панель инструментов вашего редактора.
Давайте разберем эти два плагина поподробнее.
Как вставить код в статью. Плагин WP Syntax
Нам нужно установить плагин WP Syntax, установили и активировали, в нем настроек никаких нет, переходим в записи, и чтобы нам вставить код php в статью, в редакторе выбираем «Текст» и вставляем следующее:
<pre lang="php" line="1">ВАШ КОД</pre>
Теперь давайте разберем этот код:
lang — перевод на наш, это язык;
«php» — в кавычках я поставил php, то есть тем самым я говорю что буду вставлять код php, как я и сказал выше, в эти кавычки вам необходимо вставлять язык программирование, то есть какой код вставляете то и прописываете.
Например (php, css, html, java, javascript, code) вот в принципе я вам дам 6 основных языков программирование, думаю что этого достаточно и принцип понятен как добавлять.
У вас наверное возник вопрос, а зачем мне каждый раз прописывать разные языки программирование, если вы хотите чтоб ваш код красиво подсвечивался вам необходимо это делать, иначе он будет просто выглядеть как текст.
line="1" - это номер с какого числа нужно начать нумерацию.
ВАШ КОД - ну соответственно вставляете свой код.
Теперь небольшой пример как это будет выглядеть у вас на сайте, если вы все правильно сделаете:
1 2 3 4 5 | active { border: 1px solid #DADADA; border-bottom: 1px solid #FFFFFF; border-top-left-radius: 5px; border-top-right-radius: 5px; |
Ну вот и разобрались, но как я уже выше сказал, что мы рассмотрим 2 плагина, то разберем сразу и второй.
Также устанавливаем как и первый, плагин называется WP Syntax Button, зачем еще и этот плагин, он для тех кто не желает вставлять код вручную, а хочет использовать кнопку в редакторе вот такую:
Вставляем код выделяем жмем кнопку и в открытом окне выбираете все те функции которые я в принципе прописал выше )
Вот и все готово, красиво и удобно.
У некоторых могут возникнуть проблемы с совместимостью плагина который добавляет кнопку в редактор, может все выводится но код не вставляться, как что если вы установили второй плагин и кнопка не работает, то вам придется вставлять код своими ручками, как делаю это и я )) Все всем пока, пишите что непонятно, задавайте вопросы.
С уважением Евгений Смецкий
10 комментариев
А я раньше цитатой тоже делала( Стыдно, но я была новичком, читала один блог и там сказали, что не надо заморачиваться, делайте цитатой. Было некрасиво, да и еще он постоянно портился, символы левые выскакивали за пределы цитаты. Кошмар, что было. Надо будет переделать эту статью, она у меня еще осталась ведь.
Я также использую данный плагин. На старом блоге вставлял код, заключая его в блок, который оформлял стилями. Но потом все же пришел к этому плагину, т.к. очень удобно объяснять, если посетителю требуется как-то отредактировать код под себя.
Кнопка также у меня не работает. Поэтому придется делать все руками)
Хотя я видел более интересные варианты вставки кодов на блог, когда имеется кнопка для копирования кода одним кликом.
Я тоже сначала думал просто вставлять код в статью так, но не всегда удобно, пришлось использовать плагин
Какие варианты есть без плагинов? 2 плагина ставить дополнительная нагрузка.
Зачем два, можно все делать с помощью одного плагина
Тоже установлен этот плагин (нравится именно этот вид кода). Но у меня почему-то WP-Syntax Button коряво работает, нажимаю на кнопку, а эффекта нет)) Пришлось удалить, и создать свою кнопку на этот код, немного неудобно правда, так как отображается она в html-редакторе. Но уж лучше так, чем никак...
Вот и у меня проблемы как раз с этим плагином. Проблемы начались после обновления плагина
Думал и себе этот плагин поставить, но посмотрел комментарии, все говорят, что кнопка не работает. тогда ещё подумаю.
Я использую другой плагин, сначала показался удобным, но после обновления все время какие то проблемы, буду менять однозначно
А тебя какой плагин? Может просто не обновлять его.