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

Здравствуйте, уважаемые коллеги!

Хочу в этой статье поведать о том, как вставить html код в статью или на страницу в WordPress. Все это делается просто и без сторонних плагинов! HTML код будет красиво выводится в вашем тексте.

Вставить HTML в статью wordpress

Если вы пишите статьи о программировании или веб-мастерстве, то вы можете столкнуться с проблемой. Как красиво оформить и вывести код html, php или другой. Во-первых, красиво оформленный код лучше воспринимается визуально. Во-вторых, кому нужна путаница — этот код исполняемый или для примера?

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

Что нужно сделать, чтобы вставить код в статью wordpress :

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

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

1. Добавить новую кнопку «Код» в панель редактора WordPress

Эта кнопка выглядит так:

Вставить html код wordpress

Чтобы ее установить, необходимо скачать скрипт в архиве:

Введите ваш email, чтобы получить ссылку на скачивание скрипта

email рассылки Эти данные НЕ передаются третьим лицам и НЕ используются в коммерческих целяхemail рассылки

Скачали?  Отлично, теперь разархивируйте  содержимое и закиньте на хостинг в папку с вашей темой. Путь к скрипту будет такой:

wp-content/themes/papka-s-temoy/code

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

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

Все, проверьте наличие новой кнопки в панели редактирования. Есть? Идем дальше.

2. Задать стили css для оформления кода

Найдите и откройте файл style.css в папке с темой. И вставьте эти стили:

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

.cod { 
color: #124377; border-radius: 5px; 
border: 1px solid #A58888;
background-color: #fff;
width: auto; }

Стили вы можете прописать свои, это лишь пример.

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

В визуальном редакторе wordpress 1. напишите необходимый код, выделите его, 2. Нажмите на кнопку «Код», 3. Продублируйте код в открывшемся окне и нажмите ОК

Как вставить код в статью вордпресс

 

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

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

Код будет выводится красиво уже в визуальном редакторе. Правда круто?!  Как вам такой способ, отпишитесь в комментариях.

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

P.S. Давно хочу избавиться от привычки есть много сладкого. Очень люблю, но понимаю, что это не есть хорошо) Думаю написать статью на эту тему. Поделитесь в комментариях, у вас есть привычки от которых вы избавились и каким образом?

В Новосибирске при подготовке к параду произошло нечто …

 

С уважением
Артем Губтор


2 комментария

  • seoonly.ru

    Спасибо, все вставилось-)

    Май 17, 2016 в 7:59 пп
    Ответить
    • Артем Губтор

      Отлично, я рад!

      Май 17, 2016 в 10:10 пп
      Ответить

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

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

три × четыре =