Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Вставка html кода в статью WordPress без применения плагинов

Приветствую вас на abrek-ad-abra.ru сегодня, как я и обещал мы с вами рассмотрим самый простой вариант вставки кода в тело статьи без применения спец-плагинов.

Как вы наверное помните прошлая статья на «Progress-project» у нас с вами была о том, как узнать какой плагин больше всего тормозит наш блог и тогда же мы выяснили, что львиная доля от общего употребляемого времени на загрузку плагинов на «Progress-project» приходится в основном на два плагина, первым из которых является: «All in One SEO», он расходует более 60% от общего времени и это несмотря на то, что на блоге с его помощью реализован только вывод мета-тега «description» с описанием и «keywords» ключевыми словами исключительно на главной странице. А так же файла: «sitemap.xml» карта сайта для ПС.

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

Вторым плагином который тормозил блог был: «SyntaxHighlighter» с его помощью на блоге осуществлялся вывод и подсветка html кода в теле статьи и брал он на себя более 25% от общего времени уходящего на загрузку всех плагинов. От данного плагина я уже благополучно избавился заменив его на кодовый вариант о котором сегодня и планирую вам рассказать.

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

Итак, первое, что вам нужно сделать для осуществления на своём сайте или блоге вывода html кода в теле статьи без плагина.

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

  • Ваш_сайт/wp-content/themes/Название_темы/

Дальше там же в папке с темой находим и открываем для редактирования файл: «function.php», опускаемся в самый низ и добавляем перед «?>» следующую строчку:

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

Данной строкой мы только что, добавили специальную иконку в стандартный редактор WP для более комфортной вставке html кода в статью.
Сохраняем внесённые в файл «function.php» изменения и открываем для редактирования какую либо статью блога дабы убедиться в правильности наших действий.

Если всё было сделано правильно то в вашем редакторе появится вот такая иконка:

Далее мы с вами можем немного приукрасить внешний вид нашего кода, открываем файл темы: «style.css» где в самом низу вставляем:

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

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

Как я уже говорил это самый простой и лёгкий способ вставки кода в статью без применения каких либо спец-плагинов. Но есть и более продвинутые с нумерацией строк, подсветкой синтексов и кнопкой выделения и их реализация уже требует определённых знаний к тому же они располагают достаточно большим объёмом «css» и несколькими «javascript», что опять же пусть даже и уже не такую большую, как плагин но всё же несёт нагрузку. В дальнейшем мы с вами обязательно разберём один из подобных вариантов. А на сегодня у меня всё, всего доброго и до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-19

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог