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

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

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

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

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

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

Известно, что в WordPress, для того чтобы вывести пример исходного кода в статье достаточно при наборе статьи из визуального редактора перейти в тестовый и заключить нужный код в теги

<pre>Ваш код</pre>

Но такой код будет слабо выделяться в основной массе текста вашей статьи. И поэтому можно внести несколько стилей, скажем, цвет фона, шрифта, рамку и так далее. Так Ваш код будет наиболее наглядно представлен в виде примера.

Как изменить вид отображаемого кода

Сделать это достаточно просто.

Вариант 1

Вы можете присвоить тегу <pre> класс, к примеру, class=”cod” и задать нужные стили в файле style.css.

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

Вариант 2

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

<pre style="width: auto; background-color: whitesmoke; border: 1px solid #C7C3C3; border-radius: 5px; color: #167dec;">Ваш код</pre>

И в первом и втором примере, если вставленный код вылезет за пределы статьи, следует добавить свойство overflow: auto; что позволит управлять блочным элементом.

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

Как добавить кнопку «Вставка кода» в панель редактирования WordPress

А облегчит этот процесс простая кнопка в панели редактирования WordPress. И выглядит она вот так.

Если вы захотите поставить такую кнопку себе, то Вам потребуется несколько минут времени и несколько файлов от меня. Итак, приступим.

Шаг 1.

Скачайте с моего Яндекс.Диска архив с нужными файлами. Скачать архив.

Шаг 2.

Распакуйте архив. У вас будет папка code с тремя файлами. Эту папку нужно скопировать на ваш сервер в папку вашей темы:

http://vashdomen.ru/wp-content/themes/vashatema/code

Шаг 3.

Открываем административную панель вордпесс > «Внешний вид» > «Редактор» > «Функции темы (functions.php)» и вставляем в него такой код:

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

Вот и всё готово. Можно пользоваться кнопкой, и вставлять примеры кода в статьи. И при этом, абсолютно не нагружая сервер.

Как пользоваться кнопкой «Вставка кода»

Вставьте нужный код в статью – выделите этот код – нажмите кнопку «Вставка кода» — во всплывающее окно введите любое значение.

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

Если написал не очень понятно, смотрите видеоурок – возможно там всё более понятно показал и рассказал.

Ну что ж, на этом у меня сегодня всё. Теперь вы знаете, как простым способом вывести код в статьях. И что немало важно, теперь вы знаете, как добавить кнопку в редактор WordPress. Кто знает, как вы можете использовать эти знания.

Друзья, желаю вам удачи. До встречи в следующих статьях.

Ах да, если будут вопросы, пишите в комментариях, буду рад помочь.

С уважением, Максим Зайцев.