X
    Categories: Создание сайта

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

Приветствую, друзья!

Сегодня я расскажу, как легко можно вставить html код в статью для сайта без плагина на движке вордпресс. При этом код будет отображаться красиво и добавлять код мы сможем при помощи кнопки, которую мы добавим в панель WordPress.

Ранее за красивый и корректный вывод кода в заметках у меня отвечали 2 плагина, об этом я подробно писал тут:

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

Всё меня устраивало до поры, до времени, пока я не начал анализировать скорость загрузки моего сайта. Как оказалось плагины Wp-syntax и WP-syntax Button в сумме дают около 10% нагрузки от общей нагрузки, создаваемой плагинами, вот взгляните на рисунок:

Как я узнал цифры конкретной нагрузки, можно почитать тут :

Как узнать, какие плагины нагружают сайт?

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

Перепробовал я несколько вариантов и остановился на том, о котором расскажу ниже. Принцип такой :

  1.  Добавляем в панель WordPress дополнительную кнопку;
  2. Выводим с ее помощью html код в статье
  3. Задаем стили в style css для красивого выделения кода в статье

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

Для этого нужно выполнить 3 простых шага:

1. Добавляем кнопку «Код» в панель вордпресс

Выглядит кнопка вставки «Код» так:

Для начала пройдите по ссылке  и скачайте архив.

Далее разархивируйте  данный архив и получите папку «code», которую вам необходимо закинуть на хостинг в папку с темой:

wp-content/themes/vashatema/code

Далее находим в теме, которую используете файл function.php и добавляете следующий код:

require_once(TEMPLATEPATH . '/code/code.php');

Теперь проверяем наличие кнопки «Код» в панели для редактирования, как на рисунке выше. Всё в порядке? Замечательно

2. Задаем стили для выводимого кода

Для этого копируем следующий код, который слегка приукрасит наши html, php и другие файлы в заметках:

.cod { width: auto;
 background-color: whitesmoke;
 border: 1px solid #C7C3C3;
 border-radius: 5px;
 color: #167dec; }

Вставить этот код нужно в файл style.css вашей темы (у меня это style.php), если вам нужно можете сделать цвет любым, хоть желтым))

3. Выводим html код в статье

Чтобы вставить  код необходимо  просто написать его в визуальном редакторе (вкладка «Визуально!»),

затем выделить ( 1 на рисунке),

нажать на кнопку «код» в панели вордпресс (2 на рисунке)

затем вставить скопированный код в поле (3 на рисунке), жмем на «ОК».

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

Вот таким образом можно вывести html код в статьях на блогах, созданных на движке вордпресс, сделать это корректно и красиво подать.

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

Вот для сравнения картинки, где показано как выглядит код без плагина, выделенный тегами <pre>  и внизу код, выделенный при помощи кода, который я установил:

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

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

Теперь мне еще нужно пройтись по всем заметкам, в которых коды выводились плагином и внести изменения, но это мне не привыкать))

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

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

На этом сегодня все, жду ваши вопросы по теме заметки.

До встречи!

Интересные заметки по теме:

 ТОП комментаторов без плагина

Как установить кнопки социальных сетей на сайт

Виджет «Интересные статьи на блоге»

Как создать рекламный баннер

 

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