Здравствуйте мои дорогие читатели!

Случалось ли вам испытывать неудобства из-за нехватки кнопок на панели добавления статьи в WordPress? Я думаю, что случалось.
Вот и мне однажды понадобилось добавить парочку кнопок на эту панель. Я с этой задачей справился, а теперь пришло время научить этому вас.
Но обо всё по порядку.

Зачем это нужно?

На блоге Вовки в конце постов автор вставляет анекдот, который выглядит вот так:

Достаточно красиво и креативно. Если порыться в коде, то мы увидим следующее:

<div class="off_post">
Дед Мороз долго объяснял 12 летнему Вовочке, что хоть тот и вел себя хорошо в этом 
году, но он не может сделать так, чтобы химичка сдохла.
</div>

Тоесть открывается div-класс, в этот div-класс вводится текст, и div-класс закрывается. Ну а текст приобретает желаемые очертания, фон, рамку и т.д.
Сам div-класс прописывается в CSS файле.

Но вот тут встаёт вопрос:
каким образом Вовка вызывает этот div-класс?
И существует два варианта ответа:

- он каждый раз прописывает его в статье вручную;
- он уже реализовал то о чём сейчас пойдёт речь;

Если вариант ответа №2 то он молодец, а если №1, то ему тоже будет полезно почитать.

Итак, допустим мы решили сделать себе такой же креативный div-класс и выводить его в конце поста, вставляй в него анекдоты, сказки или что-то типа того.
С чего начать?
Разумеется с самого div-класса. Для этого идём в CSS файл вашей темы, и начинаем создавать этот класс.

В конец CSS файла вставьте следующий код:

.anekdot{
background: url(http://blog-kota.ru/primeri/smile.jpg) no-repeat;
background-position:493px 5px;
width: 588px;
padding: 5px;
background-color: #CCFFFF;
color: #000;
border: 1px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
}

Нажмите сюда, чтобы посмотреть демонстрацию того что у нас получилось.

p.s. я сделал всего лишь небольшой набросок, если вы хотите сделать что-то более красивое то почитайте мою статью: фон для сайта.

Ну, а теперь давайте посмотрим, что этот код из себя представляет:

.anekdot – имя нового класса;
background: url(http://blog-kota.ru/primeri/smile.jpg) no-repeat; — картинка;
background-position:493px 5px; — позиция картинки;
width: 588px; — ширина формы;
padding: 5px; — отступы текста (чтобы не сливался с гранями);
background-color: #CCFFFF; — цвет фона;
color: #000; — цвет текста;
border: 1px solid #000; — размер и цвет обводки;
border-radius: 10px; — закругление (во всех трёх пунктах одинаковое значение);
-moz-border-radius: 10px; — закругление (во всех трёх пунктах одинаковое значение);
-khtml-border-radius: 10px; — закругление (во всех трёх пунктах одинаковое значение);

Итак, мы создали div-класс и теперь можем вызвать его в любом месте нашей статьи, для этого нам нужно вставить в статью вот этот код:

<div class="anekdot">
тут текст
</div>

А вот теперь подумайте:
Готово ли вы каждый раз заново вручную набирать названия этих классов? Тоесть в каждой статье вам придётся вручную открывать и закрывать этот div-класс. Мне кажется, что это очень надоедливо, долго и немножко глупо.

Поэтому сейчас мы будем вставлять на панель редактирования статьи новую кнопку, при нажатии на которую div-класс будет вставлен в вашу статью автоматически!

Как это сделать?

Кстати я даже видео-урок впервые записал, чтобы вы всё своими глазами увидели:

Но видео уроки — видео уроками, а написать пошаговые действия всё равно придётся.
Перейдите в панель добавления записи и посмотрите на кнопки:

Итак, первым делом мы должны, решить какую кнопку мы будем заменять.
Лично я решил заменить кнопочку «del» так как я ею не пользуюсь.
Итак, теперь заходи в наш ftp менеджер, и заходим в папку, в которой лежит ваш сайт. Далее следуем в папку wp-includes, а затем в папку js ищем в этой папку файл quicktags.dev.js и скачиваем его.
Далее открываем его при помощи какого-либо html редактора.
Важно!
Не редактируйте файлы движка в блокноте! Блокнот – убивает WordPress!

Отпускаемся в самый низ файла quicktags.dev.js, и видим вот такой вот список функций которые отвечают за кнопки:

Кликните по картинке, чтобы посмотреть скриншот в полном размере.

Итак, так как мы решили заменять кнопку «del», то находим отрезок, который отвечает за эту кнопку и заменяем его вот таким образом:

edButtons[50] = new qt.TagButton('anekdot','anekdot','<div class="anekdot">','</div>','a'),

Я думаю, вы понимаете, какие именно части мы заменили, образаю ваше внимание только на то, что в последних кавычках лучше всего написать первую букву кнопки, в данном случае я написал:

'a'

Сохраняем изменения в нашем файле, а затем меняем имя файла с quicktags.dev.js на quicktags.js и загружаем обратно на сервер при этом, заменяя quicktags.js который лежит на сервере.
Идём в редактор записи и обновляем страничку.
Теперь у нас есть новая кнопка!

Ну, вот и всё, я научил вас, как добавить новее кнопки в редактор статьи, объяснил, зачем это нужно, а так же показал, как добавлять новые div-классы.
Если есть вопросы, то пишите их в комментариях.
А у меня на этом всё.
Всегда ваш Мудрый Кот.

Кстати!
Если вам интересно следить за творчеством дизайнеров и читать их записи о дизайне и бытейской суете, то предлагаю подписаться на блог о дизайне designfire.ru, который ведет Евгений Ткачук.

Напоследок у меня видео о топовых блогерах из ЖЖ, посмотрите — вам понравится!