WordPress как на ладони
wordpress jino

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

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

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

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

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

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

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

С Версии 3.3. WP позволяет вставлять кнопки очень просто, на этом способе и основан мой простенький плагин.

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

Kama Quicktags V2.2
Преобразовывает спецсимволы и добавляет кнопки в HTML редактор.
Скачано: 428, размер: 1.7 KB, дата: год назад

Установка:

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

  2. Активируйте плагин.

После активации плагина у вас в HTML редакторе появятся разные кнопки, чтобы убрать или добавить свои откройте файл kamaquicktags.php и по описанию внутри файла добавьте свои:

QTags.addButton( 'идентификатор' , 'название', '<открывающий тег>', '</закрывающий тег>', 'v', 'описание', позиция(число) );

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

QTags.addButton( 'h3','H3','<h3>','</h3>', 'p', '', 999 );

Напомню, файл плагина можно отредактировать прям из админ-панели: Плагины -> Редактор

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

Плагин Kama Quicktags: код на страницах вашего сайта. Как я решил эту проблему 45 комментариев
Полезные 1 Все
  • Марк cайт: advokatsimf.ru

    Спасибо тебе, добрый человек за плагин. Разобрался минут за 7 и настроил пару кнопок. Без лишней ерунды возможность задавать стили для редактора очень важна. Удачи в делах и стремлениях тебе.

    Ответитьгод назад #

Здравствуйте, !

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