Код на страницах вашего сайта. Как я решил эту проблему

Не могу сказать, что я еще дилетант в WordPress, но первая, проблема с которой я столкнулся, когда делал этот сайт, это вставка PHP, Css, HTML или другого кода в текст поста и конечно его подсветка (про подсветку напишу позже). Несмотря на то, что я знаком с WordPress уже больше полугода, коды в посты вставлять не приходилось.

Вставка кода не требует особых усилий - необходимо всего-то, заменить HTML сущности на спецсимволы (например: это < на < или  & на &), это легко можно сделать с помощью небезызвестного нам notepad++, однако постоянно преобразовывать код очень неудобно, мне хотелось, чтобы такое преобразование можно было делать прямо в редакторе WordPress.

Чтобы не изобретать велосипед я пошел искать плагин, немного погуглив нашел пару претендентов, но как оказалось они меняют символы на спецсимволы при просмотре страницы, т.е. при генерации страницы находят теги <code> </code> или <pre> </pre> и все что внутри преобразовывают. Такой подход мне сразу не понравился из-за, того, что идет нагрузка на сервер (ведь именно сервер выполняет операции по поиску и замене, притом каждый раз когда генерируется страница).

Просвещенные люди скажут, WordPress сам делает такую замену, если вставить код в визуальный редактор и перейти в НTML редактор или просто сохранить страницу с визуального редактора и они будут правы, но вместе с преобразованием WordPress удалит все лишние пробелы и табы, которые необходимы для наглядности кода, чтобы полностью сохранить структуру кода его нужно заключить в теги <pre> </pre>, но заключить текст в определенные теги, можно только с HTML редактора, а если вставить код в HTML редактор, то WordPress никаких преобразований над символами в коде делать не будет и еще хуже, он вырежет различные теги, при переходе в визуальный редактор. Во как все запутано . Кто пробовал вставить код наверняка знают о чем я говорю.

В общем, единственно правильно было заменить все HTML символы на спецсимволы в блокноте, вставить получившийся код в HTML редактор WordPress и заключить этот код в теги <pre> </pre>.

Так же мне не хватало кнопок для быстрой вставки тегов в HTML редакторе, как минимум нужна была кнопка, для вставки <pre> </pre>.

Не найдя подходящего плагина для преобразования символов, я временно смерился с использованием notepad++ для вставки кода. И пошел искать простенький плагин для вставки кнопок в HTML редактор. Пару плагинов мне не подошли из-за излишней грузоватости, попробовав специфический плагин my-quicktags от (Thomas'a Norberg'a), который добавляет всего 2 кнопки для быстрой вставки embed кодов для видео и аудио и  в котором нет настроек в админ панели,  я остановился именно на нем. Удалил в коде кнопки которые он добавляет и добавил туда те, которые мне нужны, плюс к этому у меня получилось добавить "чудо кнопку" в HTML редактор - выделяешь в поле текст жмешь на кнопку и все HTML символы в выделенном тексте меняются на соответствующие спецсимволы.

Собственно, моей модификацией этого плагина я и хочу с вами поделиться.  Версия WP нужна выше 2,5.

Скачать плагин

Для быстрого преобразования спецсимволов + дополнительные кнопки в ХТМЛ редакторе.(kama-quicktags-v1.1.zip)Размер: 1.99 KB / дата: 14.Мар.2011

Установка:

• 1. Загрузите папку из архива (kama-quicktags) в каталог плагинов (wp-content/plugins)
• 2. Активируйте плагин

После активации плагина у вас в HTML редакторе появятся 3 кнопки, чтобы добавить свои кнопки, откройте файл kama-custom-quicktags.js и по аналогии добавьте свои:

edButtons[edButtons.length] =
new edButton('ID' , 'Название кнопки' , 'начальный тег' , 'закрывающий тег' );

Например, чтобы добавить кнопку H1 нужно вставить такой код:

edButtons[edButtons.length] =
new edButton('h1' , 'H1' , '<h1>' , '</h1>' );

А как вы вставляете код в ваши блоги?