WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru WPmentor - Ищем топовых специалистов по WordPress, чтобы помочь вам заработать

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>.

Quicktags API

WordPress Quicktags API - с версии 3.3. WP позволяет вставлять кнопки через API - это просто. На этом способе и основан мой простенький плагин.

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

Kama Quicktags V2.2
Преобразовывает спецсимволы и добавляет кнопки в HTML редактор.
Скачано: 678, размер: 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 );

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

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

48 комментов
Полезные 1 Вопросы 1 Все
  • Stargot findyourself.info

    спасибо, очень нужная вещь

    Ответить14.Май.2010 в 13:03 #
    • Kama7682

      Мне тоже нравится, что получилось smile А самое главное, ничего лишнего. Видел плагины-самосвалы для добавления кнопок.

      Ответить14.Май.2010 в 14:29 #
  • Ю.Б. blog.portal.kharkov.ua

    Вставка PRE - во втором ряду кнопок виз.редактора: формат->отформатированный. H1-H6 там же.

    Ответить19.Май.2010 в 11:32 #
    • Kama7682

      Там по-левому вставляется, а именно, если есть переносы строк, то каждая строка обрамляется тегом PRE. По крайней мере у меня так smile

      Из визуалки код нормально сунуть в PRE не получится.

      Ответить19.Май.2010 в 12:44 #
  • Allpa allpa.ru

    Забрала! И даже получилось соорудить собственную кнопку smile Спасибо!
    Два вопроса.

    1. Не оффтоп кагбе: а вот у Вас что за поле, в котором находится код? Тоже такое хочу..
    2. Оффтоп: а вот как у вас сделана кнопочка "наверх", которая внизу страницы? Да ещё эдак плавненько перебрасывает.. тоже хочу.. wink

    ПыСы. Не хватает смущённого смайлика в Вашем списке smile

    Ответить19.Янв.2011 в 13:51 #
    • Kama7682

      С настройкой кода возьни много, в частности с полем, и вообще, устарелый этот скрипт раскраски кода, просто я его так перековырял, что теперь жалко другой ставить.

      Как сделана кнопка "наверх" могу ответить статьей, только позже. Статья то получится не по WordPress, поэтому я не думаю о её публикации всерьез, но судя по многочисленным просьбам, зря smile

      На твои вопросы отреагирую более продуктивно, как время появится.

      П.С. не люблю, когда из-за меня кто-то смущается...

      Ответить19.Янв.2011 в 14:23 #
  • Allpa allpa.ru

    С настройкой кода возьни много

    Не нуна тогда, бог с ним. Буду юзать textarea smile

    На твои вопросы отреагирую более продуктивно, как время появится

    Вот-вот, и я со своим рассказом о тех, благодаря кому я настраивала и настраиваю блог (помню, я усё помню!), тоже всё время не выцарапаю сесть-написать.. sad

    А смущённый смайлик был у меня самый любимый в Квипе..

    Ответить19.Янв.2011 в 15:54 #
  • Дмитрий times.fireg.ru

    А получается этот плагин только преобразовывает теги? И работает только совместно с плагином например SyntaxHighlighter? Или отдельно тоже можно как-то сделать, чтобы он выводил код в статьях?

    Ответить27.Янв.2011 в 01:08 #
    • Kama7682

      Код будет выводиться и без подсветки SyntaxHighlighter (это только подсветка/раскраска ведь).

      Этот плагин нужен, чтобы удобно было менять HTML сущности на спецсимволы, без такой замены нормально код вставить в пост не получится.

      Ответить28.Янв.2011 в 00:36 #
  • @ masterpro

    Приличный плагин для вставки кнопок в редактор WordPress - Post Editor Button
    Чудеса можно делать с этим плагином, добавляя short code для любого случая! good

    Ответить04.Апр.2011 в 09:34 #
    • Kama7682

      Спасибо за наводку!
      Плагин 2011, тогда когда он мне нужен был, его еще не существовало. Принцип работы такой же как и у плагина с этой статьи. Удобно то, что можно кнопки добавлять через опции, но мне это не нужно и то, что плагин простой и не грузовой вообще.

      Плагин из этой статьи умеет конвертировать HTML код в пригодный для публикации, именно это мне и нужно было, добавление кнопок это как бы побочный эффект smile

      Ответить04.Апр.2011 в 13:32 #
  • Fmblogm

    Замечательный плагин, я его использую и другого не хочу. Новые кнопки нужно добавлять в код, кому-то это может не понравиться, но зато эти кнопки никуда не денутся, если плагин деактивировать!

    Ответить18.Авг.2011 в 09:47 #
    • Kama7682

      Да я сам им пользуюсь до сих пор и очень им доволен — все в меру удобно и гибко настраивается (нужно только немножко разобраться) и можно легко, без лишних разбирательств дополнить плагин своими, уникальными кнопками.

      Ответить21.Авг.2011 в 14:12 #
  • Garri studio-gost.ru

    А подскажите как сделать подсветку основного кода(php,css,html,Java Script,SQL). с этим плагином что бы не громоздко было.

    Ответить13.Дек.2011 в 20:42 #
    • Kama7682

      Это не так просто и с этим кодом не получится. Для подсветки кодов все довольно громоздко...

      Ответить15.Дек.2011 в 23:43 #
    • Suvitruf suvitruf.ru

      Для подсветки именно кода лучше плагин юзать готовый. Тот же SyntaxHighlighter Plus

      Ответить28.Дек.2011 в 20:30 #
  • Suvitruf suvitruf.ru

    Если интересно, вот метод, позволяющий добавить новый кнопки. Помимо html вставок можно новый тэги добавлять.
    http://suvitruf.ru/2011/12/28/844/

    Ответить28.Дек.2011 в 17:09 #
    • Kama7682

      Ссылка на 404 страницу ведет почему-то.

      Ответить29.Дек.2011 в 12:09 #
      • Suvitruf suvitruf.ru

        Почему-то у вас движок в конец ссылки "r" дописывает) Уберите, заработает.

        Ответить29.Дек.2011 в 12:20 #
    • Kama7682

      Ну оооочень похоже на плагин из этой статьи. Полезная ссылка может быть для кого-то. Притом кажется с версии 3.3. этот плагин не создает кнопку перевода в спецсимволы. Надо бы поправить smile

      Спасибо за ссылку!

      Ответить29.Дек.2011 в 12:30 #
      • Suvitruf suvitruf.ru

        Хм. Только что на 3.3 проверял, работает. Или вы имеете ввиду более поздние версии?
        Возможно что-то в функциях движка поменяли. Надо посмотреть, как время будет)

        Ответить29.Дек.2011 в 13:17 #