Главная » Wordpress » Добавляем кнопки в редактор WordPress
добавить кнопку в редактор wordpress

Добавляем кнопки в редактор WordPress

Здравствуйте уважаемые читатели блога history-of-blog.ru. В прошлой статье мы рассмотрели как добавить css стиль для текста в наш шаблон, который позволил нам красиво выделять какие-либо заметки или цитаты. Эту статью можно считать продолжением, так как сейчас мы добавим кнопку в редактор WordPress, к которой привяжем стиль, созданный в прошлой статье.добавить кнопку в редактор wordpress

Кнопки в редакторе WordPress – что это и зачем они нужны.

Кнопки в редакторе WordPress позволяют быстро и без особых трудностей разнообразить текст: например сделать шрифт жирным, выделить курсивом или же вообще показать какой-либо абзац как цитату.

В WordPress предусмотрено два редактора:

  • Визуальный редактор:

визуальный редактор wordpress

  • HTML редактор:

html редактор wordpress

Добавляем кнопку в HTML редактор WordPress.

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

У нас уже имеется css стиль из прошлой статьи, который делает кусочек текста вот таким: с рамочкой и фоном :)

Теперь перейдем непосредственно к установки кнопки для этого стиля:

1. Через ftp или прямо из панели управления хостингом “свяжитесь” с Вашим блогом – я выбрал второй вариант. Откройте папку /public_html/wp-includes/js. В этой папке находите файл quicktags.js и удаляете его! Не бойтесь, ничего страшного не произойдет, хотя я сам на всякий случай сохранил его на компьютер (можете сделать тоже самое).

действия

2. Теперь находим файл quicktags.dev.js и переименовываем его в quicktags.js.

Пояснение:
На блоге Владимира Жданова я узнал, что эти файлы на самом деле идентичны, только файл quicktags.js для обычных пользователей, то есть со стандартным набором кнопок, а файл quicktags.dev.js - для разработчиков. Тем самым оставляя один файл мы можем прописать в нем свои дополнительные кнопочки – и мы уже будем разработчиками ;)

3. Окрываем только что переименованный файл quicktags.js через редактор, либо же прямо из панели управления хостингом (я все еще придерживаюсь второго варианта) и прокручиваем файл до конца. В самом конце находим следующие строки:

edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>','b');
edButtons[20] = new qt.TagButton('em','i','<em>','</em>','i'),
edButtons[30] = new qt.LinkButton(), // special case
edButtons[40] = new qt.TagButton('block','b-quote','\n\n<blockquote>','</blockquote>\n\n','q'),
edButtons[50] = new qt.TagButton('del','del','<del datetime="' + _datetime + '">','</del>','d'),
edButtons[60] = new qt.TagButton('ins','ins','<ins datetime="' + _datetime + '">','</ins>','s'),
edButtons[70] = new qt.ImgButton(), // special case
edButtons[80] = new qt.TagButton('ul','ul','<ul>\n','</ul>\n\n','u'),
edButtons[90] = new qt.TagButton('ol','ol','<ol>\n','</ol>\n\n','o'),
edButtons[100] = new qt.TagButton('li','li','\t<li>','</li>\n','l'),
edButtons[110] = new qt.TagButton('code','code','<code>','</code>','c'),
edButtons[120] = new qt.TagButton('more','more','<!--more-->','','t'),
edButtons[130] = new qt.SpellButton(),
edButtons[140] = new qt.CloseButton()

Каждая строчка отвечает за кнопку в HTML редакторе.

Наша цель добавить в файл еще одну строчку, чтобы в редакторе появилась новая кнопка. Для этого в указанных местах:добавляем кнопку в редактор

  1. 1. Ставим запятую.
  2. 2. Добавляем строчку:
 edButtons[150] = new qt.TagButton('rmka','rmka','<div class="po-statiya">','</div>','rmka');

rmka (1,2 и 5 параметр) – это название нашей кнопки. 3 и 4 параметры – это те теги, в которые будет заключен наш текст после нажатия кнопки.

Жмем сохранить.

Все! Теперь переключившись в HTML редактор можно наблюдать новую кнопку:рамка

Для того чтобы ей воспользоваться просто выделите текст и нажмите на кнопку и стили автоматически применяться к нему:задаем стиль кнопкой

Кстати, пока писал эту статью, сделал еще один css класс для различного рода примечаний и создал для него кнопочку:Для примечаний
Комментировать через ВКонтакте:
Отзывов к посту "Добавляем кнопки в редактор WordPress" уже 17:
  • Владимир Жданов | 26.04.2012 в 15:03

    Класс! Прям зачитался ;-) :smile: Отлично получилось. WordPress, оказывается, очень прост! :smile: Теперь надо научиться добавлять новые кнопки в визуальные редактор!

    • admin | 26.04.2012 в 15:05

      Да мне и Html с головой хватит. К тому же через html редактор можно добавить все тоже что и через визуальный и много больше, ну ты и сам знаешь :smile:

      • Владимир Жданов | 26.04.2012 в 15:08

        Я-то знаю ) Кому-то проще пользоваться визуальным редактором. Мне например :x

        • admin | 26.04.2012 в 15:28

          Какая смешная статья получилась,однако

          • Владимир Жданов | 26.04.2012 в 15:31

            Я минут 40 плакал!

          • Евгений | 26.04.2012 в 15:31

            Антон, статья класс, то что надо и все понятно.
            Это просто комментаторы чудят, “неправильные” комментарии тебе тут оставляют.

    • BG | 27.06.2012 в 15:21

      Визуальный редактор не всегда ведет себя корректно. Приходится работать и, главное опубликовывать в редакторе html, иначе бывают неожиданные правки кода на странице.

      • admin | 27.06.2012 в 15:38

        Да бывает такое. Вроде написал статью, оформил- смотришь на предпросмотре, а там косячки есть небольшие.
        Открываешь html редактор и видишь допустим лишний код (частенько, открывающиеся и закрывающиеся элементы списка попадаются)

  • Владимир Жданов | 26.04.2012 в 15:05

    Порадовало ….и мы уже будем разработчиками

  • Евгений | 26.04.2012 в 15:29

    Антон, как раз то что надо, сейчас закончу свой мега пост и начну разбираться. :idea:

  • Владимир Жданов | 26.04.2012 в 15:39

    А у меня вроде депрессия кончилась. Снова могу писАть :lol:

  • Olenkac | 28.11.2012 в 23:35

    что такое невезёт и как с этим бороться…

    и куда я опять не посмотрела, что у меня от всего проделанного никакой реакции?!)))

    • admin | 28.11.2012 в 23:43

      Ой не знаю :)
      как можно определить где человек сделал ошибку, если нельзя посмотреть его действий)
      В принципе кнопки не обязательны – они созданы просто для большего удобства – для совсем ленивых так сказать)) (таких как я)

      • Olenkac | 28.11.2012 в 23:55

        да это понятно. в данном случае меня сам процесс познания и постижения увлекает)))

        в визуальный редактор по рецепту дружественного вам блога кнопки вставила, но и тут без косяка не обошлось… распрыгались по всей панели и попрятали часть родных кнопок)
        а в хтмл ну никак не хочет проявляться… уже стопиццот раз переделывала, и в разных редакторах открывала – тишина…

        и тем не менее, спасибо за вашу работу! надо полазить, мож ещё чего интересного откопаю)))

  • fgsggs | 29.05.2016 в 8:47

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: