Плагины        05 декабря 2012        311         20

Как вывести код в статье блога на wordpress?

Добрый день друзья!

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

коды wordpress

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

WordPress устроен таким образом, что при вставке какого-либо html, css, php — кода или java — скрипта в визуальном редакторе, вывод его будет выглядеть как обычный текст:

<a id="toTop" href="#"><img src="http://mysait.ru/images/vverh.png"
alt="« align=»absmiddle" border="0" /></a><script type="text/javascript"
src="http://mysait/top.js"></script><script type="text/javascript">// <![CDATA[
$(function() { $("#toTop").scrollToTop(); }); // ]]></script>


А воспользовавшись плагином wp-syntax, наблюдаем вот какую картину:

<a id="toTop" href="#"><img src="http://mysait.ru/images/vverh.png" alt="« align=»absmiddle" border="0" />
</a><script type="text/javascript" src="http://mysait/top.js"></script><script type="text/javascript">//
<![CDATA[ $(function() { $("#toTop").scrollToTop(); }); // ]]></script>


Вы видите, что наш код принял привлекательную оболочку и стал выглядеть намного солиднее, нежели в первом случае. Но это все пустяки! В принципе мне наплевать, как будет выглядеть код, если я смогу его скопировать и он будет рабочим. И все бы хорошо, но есть одно НО!

Бывают таки коды, которые wordpress отображает коряво (неверный код), что приведет к не правильной подаче материала вашим читателям. И может повлечь за собой ваш не профессионализм в глазах вашей аудитории. А порой бывает, что при сохранении, код вообще просто на просто исчезает, в основном при вставке его в HTML редакторе.

Я столкнулся с проблемой вставки кода в статью, когда писал свой пост про кнопку вверх. Мне необходимо было показать вам уважаемые читатели, как вставить ту самую кнопочку, без плагина. Как я тогда намучился, вы просто не представляете. Один из кодов, ну никак не хотел отображаться в правильном виде! Я уже и так и сяк пробовал, не в какую, хоть ты тресни! Уже хотел плюнуть на все это… Но немного под остыв, задался вопросом, что делать? Что-что, искать решение данной проблемы.

Так вот, в поисках информации я отправился в интернет и нашел много чего по этому поводу. Точно уже не припомню, но по моему я перепробовал аж четыре плагина схожей функциональности. Два из них не подошли к теме моего блога. А из двух других я выбрал wp-syntax. Почему именно его? Этот плагин мне показался довольно простым и удобным в использовании, не требующий дополнительных настроек. Сейчас покажу, как он работает.

Wp-syntax

Переходите на страницу плагина и скачиваете архив с плагином себе на ПК (персональный компьютер). Дальше по старой привычной схеме закидываете архив себе на блог, в папку с плагинами и активируете. Настроек никаких не требуется. Для тех, кто не знает куда закинуть плагин, вот путь: админ панель (админка)/плагины/добавить новый/загрузить/активировать. Установили? Замечательно. Теперь, когда вам понадобится вставить какой либо код в текст статьи, просто перейдите в HTML редактор:

wp-syntax

вставьте код в нужном месте и заключите его в  тэг pre, следующим образом:

<pre lang=»select language» line=»namber»>ваш код</pre>

— lang — вместо select language укажите язык программирования (HTML, CSS, PHP, JAVA и т.д.), вставляемого вами кода;

— line — укажите номер строки (при необходимости). Бывают коды, в которых особый акцент нужно сделать на какую-нибудь строчку. В этом случае, можете указать с какой строки показывать нумерацию кода. Будет это выглядеть так:

<a id="toTop" href="#"><img src="http://mysait.ru/images/vverh.png" alt="« align=»absmiddle" border="0" />
</a><script type="text/javascript" src="http://mysait/top.js"></script><script type="text/javascript">//
<![CDATA[$(function() { $("#toTop").scrollToTop(); });// ]]></script>

Но для удобства пользования, существует еще один плагин wp-syntax button, который является дополнением wp-syntax и выводит в панели инструментов, админки вашего блога, маленькую кнопочку «Code»:

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

Теперь когда вы захотите вставить код в блог, вам просто нужно будет его скопировать, вставить в нужное место в визуальном редакторе, выделить с помощью мышки и нажать на кнопку «code»:

коды wordpress

Дальше, как и описано выше выбираете язык программирования, при необходимости номер строки и нажимаете «Insert». Все готово! Сохраните страницу и любуйтесь на ваш правильный, ровненький и красивый код. Вот как легко при помощи замечательного плагина wp-syntax вставлять коды wordpress.

Надеюсь, моя статья была вам полезна. Хотите получать свежие статьи прямо на e-mail? Подпишитесь на обновления. На сегодня у меня все, всем пока и до скорых встреч!

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

А какие плагины вы используете для вставки кода? Может быть, вы знаете другие способы? Поделитесь со всеми в комментариях.

С уважением, Николай Коротков

Обсуждение: 20 комментариев
  1. Александр:

    Подробненьнко так написал. Спасибо Коля. Теперь жду от Тебя информацию о замене некоторых нужных плагинов кодом. Надо немного разгрузить свой блог. Было бы неплохо, если бы Ты написал серию статей об этом.

    [Ответить]

    Николай Коротков

    Александр
    Ты меня не перестаешь удивлять! Вот не вру, следующие свои два поста планирую написать, как раз на тему оптимизации wordpress. Совсем недавно получил письмо от хостера, что среднесуточная нагрузка моего ресурса превышает порог допустимого. Изучив данную проблему, мне удалось снизить нагрузку в несколько раз. Как раз на эту тему и планирую написать посты. Первый выйдет через пару-тройку дней, на тему ускорения блога, а второй чуть позже. В нем я подробно расскажу, как заменить около 7 плагинов на коды!

    [Ответить]

    Ответить
  2. Александр:

    Вот это правильно. Мне пожалуйста прямое извещение на почту о дате выхода.

    [Ответить]

    Николай Коротков

    Александр
    Как скажешь! Обязательно вышлю!=)

    [Ответить]

    Ответить
  3. Привет! А можно как нибудь этот плагин заменить кодом? Чтобы было меньше нагрузки. 🙂

    [Ответить]

    Николай Коротков

    Томский школьник
    Привет! Искал по этому поводу информацию, пока так и не нашел! Поэтому использую данный плагин. Если найду решение по замени его на код, обязательно напишу отдельный пост!

    [Ответить]

    Ответить
  4. Установила плагин wp-syntax, очень удобно

    [Ответить]

    Николай Коротков

    Евгения
    Плагин удобный, особенно когда часто пишешь посты, в которых требуется вывести коды.

    [Ответить]

    Ответить
  5. У меня правильно работает, если код вставить в визуальный редактор, а уже потом перейти в html

    [Ответить]

    Николай Коротков

    Евгения
    Все правильно. Так и должно быть.

    [Ответить]

    Ответить
  6. Установил оба плагина. Потом wp-syntax отключил. Кнопка осталась. Будет ли код корректно работать без одного плагина?
    А то как раз собираюсь пост писать про установку ТОПа комментаторов без плагина, а там такие коды, что в блокноте у меня и то корявятся! 🙂
    Не хотелось бы кому-то геморрой с функциями темы устроить…

    [Ответить]

    Николай Коротков

    Сергей, без wp-syntax button точно будет работать корректно, только нужно будет заключать код в теги pre в ручную. А вот без wp-syntax, я конечно не пробовал, но думаю, что не будет работать, так как wp-syntax button предназначен лишь для вывода кнопки «code», которая создает определенные удобства веб мастерам.

    [Ответить]

    Ответить
  7. Этот плагин могут использовать те, кто проводит конкурсы на своем блоге. 😯

    [Ответить]

    Ответить
  8. Александр:

    А есть замена кодом этого плагина? Два плагина я не выдержу. Было бы хорошо использовать код. Или тег можно использовать и без плагина?

    [Ответить]

    Николай Коротков

    Александр
    Возможно и есть замена, но я не знаю о ней. Можно не устанавливать второй плагин wp-syntax button. Вместо него, как написано в статье, заключить необходимый вам код в теги pre и все будет как надо. А вот как обойтись без обоих плагинов, я пока не нашел решение.

    [Ответить]

    Александр

    Если появятся альтернативы, буду рад о них узнать от Вас!

    [Ответить]

    Николай Коротков

    Александр
    Если появятся, обязательно поделюсь со всеми!

    [Ответить]

    Ответить
  9. А на меня само слово «код» всегда уже наводит страх и ужас. Но, прочитав Вашу статью, подумала, что вроде как не так страшен чёрт, как его малюют и пора углубиться в изучение дотоле пугающего материала.

    [Ответить]

    Ответить
  10. Давно использую этот плагин, а вот сегодня заметил что при выводе PHP он создает лишний пробел, ищу как решить этот вопрос.

    [Ответить]

    Ответить
  11. Умная голова сто голов кормит, а худая и себя не прокормит. Спасибо за умные советы и полезную статью.

    [Ответить]

    Ответить

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

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

Поиск по блогу
Подписка на обновления

Введите Ваш e-mail:

rss

twitter

 google

Интересная информация
Хостинг от Макхост

ВОСПОЛЬЗУЙТЕСЬ ПРИ РЕГИСТРАЦИИ КУПОНОМ "blogiseo" И ПОЛУЧИТЕ 3 МЕС. БЕСПЛАТНОГО ИСПОЛЬЗОВАНИЯ ХОСТИНГА ПО ТАРИФУ МАК-10.