Приветствую, друзья!
Сегодня я расскажу, как легко можно вставить html код в статью для сайта без плагина на движке вордпресс. При этом код будет отображаться красиво и добавлять код мы сможем при помощи кнопки, которую мы добавим в панель WordPress.
Ранее за красивый и корректный вывод кода в заметках у меня отвечали 2 плагина, об этом я подробно писал тут:
Плагин Wp-syntax — как вывести HTML, PHP и другой код в статье wordpress
Всё меня устраивало до поры, до времени, пока я не начал анализировать скорость загрузки моего сайта. Как оказалось плагины Wp-syntax и WP-syntax Button в сумме дают около 10% нагрузки от общей нагрузки, создаваемой плагинами, вот взгляните на рисунок:
Как я узнал цифры конкретной нагрузки, можно почитать тут :
Как узнать, какие плагины нагружают сайт?
Поскольку такая нагрузка довольно весомая (по сравнению с другими плагинами), то я начал искать альтернативу данным плагинам, точней сказать, думать, как бы избавится от этих плагинов или заменить их кодом (скриптом).
Перепробовал я несколько вариантов и остановился на том, о котором расскажу ниже. Принцип такой :
- Добавляем в панель WordPress дополнительную кнопку;
- Выводим с ее помощью html код в статье
- Задаем стили в 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 плагинов для вывода синтаксиса, плюс убрал плагин для вывода древовидных комментариев, скоро уберу еще парочку. Чтобы не пропустить самое интересное, рекомендую подписаться на обновления !
Теперь мне еще нужно пройтись по всем заметкам, в которых коды выводились плагином и внести изменения, но это мне не привыкать))
Ведь работа над блогом это титанический труд, и чтобы что-либо заменить приходится потратить своё время.
Сейчас у меня много времени отбирает занятия в автошколе, кроме теории уже и практика началась, через месяц уже и права буду получать. Так, что часто писать заметки не особо получается.
На этом сегодня все, жду ваши вопросы по теме заметки.
До встречи!
Интересные заметки по теме:
Как установить кнопки социальных сетей на сайт
Виджет «Интересные статьи на блоге»
View Comments (48)
Вы совершенно правы, от плагинов нужно избавляться - тем самым ускоряя свой движок WP - сам часто прибегаю к подобным способам.
Вот вам, Юрий, очередной мануал :lol:
Спасибо, ушел в закладки.
Кстати, как подписаться у вас на все публикации полностью? А то получается захожу - вижу что люди комментировали - но уведомления ко мне на почту не пришли... :(
А галочку ставили после того, как писали комментарий, Юрий? Если ставили, то обязательно придет письмо.
Я имею ввиду на все публикации, а не только на те, на которые я оставил комментарий...
На те что комментировал - приходят.
Согласен, отличное решение. Если ради каждой такой фишки плагин ставить, то будет сайт прогружаться до скончания века. Спасибо автору за скрипт, буду использовать
Если подписаться на feed, то можно в конце статьи подписаться на обновления, на rss ленту, то значок справа вверху, а вот форму подписки на рассылку сделаю на днях
Спасибо, теперь понял. Хотя не это я имел ввиду.. Не правильно спрашиваю.
Вот к этой статье приходят сообщения что оставили комментарий. Я же хочу получать сообщения о любом комментарии на блоге, к любой статье... Я так понимаю что это невозможно, придется к каждой статье комментарий прежде оставить.
Так по моему такого нет.Я не на одном блоге не встречал.
Возьму на заметку :grin:
Статья как вставить html код в статью вордпресс без плагина очень полезная даже не только для начинающих. Красиво проиллюстрированна что значительно облегчит в разборе с материалом.
Я бы не отказался почитать статью о том, как с помощью html кода, php и css самому правильно подготовить плагин на продажу.
А с тобой согласен - статья четкая и доходчивая.
Николай, полезно то что вы написали о том, как добавить кнопку в редактор вордпресс. Очень нужная информация.
Спасибо, Александр, действительно очень удобно.
Николай, хорошая стаья! Я что-то об этом и не думал, а мне надо часто будет вставлять коды. Смотрятся удачно, у меня код вставляется в визуальном режиме, но так как у вас, намного лучше.
Кстати, вы оставляли комментарий у меня на сайте, так он попал в спам, пойду смотреть почему.
Спасибо, Егор!
При помощи метода, описанного в статье очень удобно выводить html-код корректно, без плагина еще и при помощи кнопки в панели редактирования вордпресс и займет эта установка всего минут 15-30, рекомендую.
По поводу спаму, если у вас Akismet, то логику тут не ищите, у него иногда такое бывает))
Не 10 минут, а 5 с перекуром :smile: . А если серьезно, то отлично влетела, без косяков. Проверил, работает. То, что нужно. Еще и прокрутка без переноса строки в ней присутствует. Только когда разархивировал, то там оказалась вложенность code папка/code папка/файлы. От одной папки избавился, это заняло у меня 4 минуты и все остальное 2 минуты :roll:. Спасибо!
Пожалуйста, Егор!Получается даже быстрей, чем я думал, это хорошо.
Плагины...плагины...сначала мы учимся их устанавливать и использовать, а затем избавляться от них, потому что они замедляют блог. Спасибо Николай за статью, всё доходчиво и наглядно.
Спасибо огромное! Сделала минут за пять, до этого почти час пробовала разные плагины :)
Приветствую, Жанна. Очень хорошо, что моя информация вам пригодилась.
Ну вот, так хотелось получить кнопку код и избавиться от плагина - видно не судьба.Не получилось :((
У всех ранее получалось, может у вас особенность темы, не знаю даже...
Да, Николай, наверное...всё по пунктам сделала, четко и проверила и еще раз попробовала. Ничего не выходит.
Видимо проблема всё-же была в теме - сейчас на новой теме установила и всё работает, спасибо за статью.