Красивый тег pre в WordPress или как вставить код в статью

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

Почти каждый начинающий вебмастер находит много нового для себя в PHP и HTML администрировании. причем чаще всего случаи действительно уникальны, ведь каждый человек разный, а значит и видения дизайна сайта у него отличное от остальных. Поэтому стандартный шаблон который он скачал и поставил на свой сайт вот так вот сразу не подходит. Значит надо его исправить. После того как мы поколупались в коде, поняли как решить ту или иную проблему, первое что мы сделаем это конечно же побежим на свой блог описывать как у нас это вышло. Как я сказал выше, мы сегодня будем рассматривать как без проблем вставлять код в статью WordPress.

Итак, для начала нам надо поставить два плагина. Для этого:

  1. Заходим в админ панель вашего блога
  2. В левом меню перейдите в Плагины->Добавить новый
  3. В поиске введите Wp-syntax. Не думайте что поскольку у Wp-syntax 4 звезды, а у плагина ниже WP-Syntax Editor Integration Plugin пять звезд, то он лучше. Ставьте именно Wp-syntax. как показано на картинке нижеWp-syntax установка
  4. Когда вам предложат активировать плагин, сделайте это.
  5. Снова зайдите в Плагины->Добавить новый
  6. Найдите и установите WP-Syntax Button

WP-Syntax Button установкаВсе. На этом установка и настройка плагина закончилась. Теперь осталось самое главное. Посмотреть как он работает.

Как вставить код в статью WordPress

Если вы уже вставляли ранее код в статью  с помощью встроенного в WordPress тега pre то у вас все выделенные коды останутся на месте, только у них поменяется дизайн, на такой как на картинке ниже:

новый pre в wordpress

 

Чтобы вставить код, вместо того чтобы переключатся на HTML редактирование, находить нужный участок текста, и вставлять в него pre вам надо всего лишь:

    1. Вставить в статью код
    2. Выделить его мышкой
    3. Нажать на кнопку «code» которая у вас появилась рядом с палитрой цветов
      вставляем в wordpress
    4. Выберите один из многих языков программирования, к примеру PHP, и номер с которого будет начинаться нумерование строк

вставляем код в wordpress

Нумерованние нужно для тех кто точно знает какой номер строчки в php коде. Но в большинстве своем все опытные программисты ставят или 1 или вообще пропускают. Почему? Потому что в 95% случаев у вас номер строчки которую нужно редактировать будет отличаться от номера строчки у читателей вашего блога, потому что файлы в разных шаблонах разные, а значит и строчки там совершенно разные. Также, если пользователь ранее редактировал этот файл, то конечно же строчки сместились.  Поэтому чтобы не вводить людей в заблуждение возьмите за правило ставить или 1 или вообще ничего.

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

Что делать если если плагин WP-Syntax Button не работает

Статья уже давно была законечна и я активно пользовался этими плагинами, до тех пор пока не обновился WordPress.  После обновления данный плагин перестал работать и мне пришлось искать решения чтобы снова восстановить его работу. Итак, нам надо установить плагин WP-Syntax Editor Integration Plugin, а старый деактивировать и удалить. Для этого:

  1. Заходим в Плагины ->Установленные
  2. Нажимаем под плагином WP-Syntax Button кнопку «Деактивировать», а затем «Удалить»
  3. Переходим в Плагины ->Добавить новый
  4. Найдите и установите WP-Syntax Editor Integration Plugin

Работает данный плагин так же самое как старый, но только проще. По умолчания в нем язык PHP, и вам не надо из огромного списка выбирать необходимый вам язык.

Если у вас остались какие-то вопросы — напишите в комментариях, попробую вам помочь.

загрузка...

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

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