Блог Мудрого Кота
Советы и уроки для вебмастера, монетизация сайта и немного о SEO
Главная - Сайтостроение - Как добавить новые кнопки в WordPress

Как добавить новые кнопки в WordPress

новые кнопки в WordPress

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

Случалось ли вам испытывать неудобства из-за нехватки кнопок на панели добавления статьи в 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!

Вы заметили, что я всё чаще говорю о том, что блокнот убивает WordPress?
Это правда! Обязательно подпишитесь на RSS иначе вы можете
пропустить статью в которой я объясню как спасти свой блог
от такой угрозы как блокнот!
Статья выйдет очень-очень скоро!

Отпускаемся в самый низ файла 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, который ведет Евгений Ткачук.

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

Подпишись и получай новые записи первым!

Подписаться вы можете с помощью или , но самый удобный способ это:

Ещё по теме:
Какие права на файлы и папки нужно поставить, чтобы не было беды (WordPress)
Блокнот убивает WordPress
Отслеживаем неправильные (битые) ссылки при помощи плагина и избавляемся от них
Что делать если не работает загрузчик изображений в wordpress
Работаем с комментариями WordPress: включаем, отключаем редактируем
Информация о статье:
Опубликовано: 4 января 2012, в рубрику Сайтостроение.
Теги: .

Поделись статьёй с друзьями:

Оставляя комментарий - вы автоматически принимаете участие в конкурсе комментаторов, и имеете возможность выиграть очень, классные призы!
I место - Сквозняк!
II место - Заметка!
III место - 200 Рублей!
Подробнее о конкурсе тут.

Оставь коммент, не будь бякой!

  • Pavluha.Net
    04.01.2012

    Круто замутил с кнопочками, полезная тема! Ладно, я скажу..

    У меня почему-то твой сайт так тормоозит.. Пишу текст, и он только через несколько секунд появляется. Проц загружен ~100%. Стоит только переключиться в другую прогу или на другую вкладку браузера — всё ок. С момента появления снега такое заметил, вроде. Всё хотел тебе сказать, но.. Я бы чаще не был бякой и оставлял комменты, если бы не наблюдал, как буквы появляются иногда даже с задержкой 20 секунд. Браузер FF 8.0.1

    [Ответить]

  • 04.01.2012

    Хорошо, что сказал. Я заходил с нескольких компов, но нигде подобной проблемы не было. Сейчас отключу кое-какие плагины и поставлю кеш. :arrow:
    Если проблема всё равно будет, то напиши, буду благодарен.

    [Ответить]

  • Юрий
    04.01.2012

    видюшка шикарная, спасибо! Очень полезные знания.

    [Ответить]

  • 04.01.2012

    Юрий, всё-таки мой первый видео-урок… старался :oops:

    [Ответить]

  • Небудий Бякин
    04.01.2012

    Павлухаточканет, у тэбе дрова на видео и само видео тормозят. У меня на встроенной видюхе тоже всё в даун стремится на этих снежинках, это нормально. Кеш и движок вордпресса тут не причём, особенно на глюках с клинтской стороны.
    Насчёт видеоурока чётко. Наконец-то темы пошли про js.
    зы: Я вот сижу и смотрю, на сизифов труд коте «scroll to top»… Жестоко однако.

    [Ответить]

  • 04.01.2012

    Пусть пашет… не всёж ему молоко попивать :arrow:

    [Ответить]

  • kladez-zolota
    05.01.2012

    А можно для чайнико: что такое див-класс?

    [Ответить]

  • 05.01.2012

    Это когда в файле стилей перед названием класса стоит . , а не # Если по простому)

    [Ответить]

  • kladez-zolota
    05.01.2012

    Все равно не поняла. Хотя уже у кого-то пыталась выяснить, про эту же функцию. И пока бесполезно.

    [Ответить]

  • 05.01.2012

    Попробуем так:

    это css код заключённый между { }, имя это то что стоит перед первой {
    Пример:
    .name{

    Перед именем всегда ставится либо # либо точка
    Если стоит точка, то вызов идёт вот так:

    div class=’name’

    Если стоит # то так:

    div id=’name’

    :lol:

    [Ответить]

  • kladez-zolota
    05.01.2012

    А все действо нужно производить в папке: (comments.php) ?

    [Ответить]

  • 05.01.2012

    Непонял вопроса :?:

    [Ответить]

  • kladez-zolota
    05.01.2012

    Где весь этот код прописывается, в какой папке?

    [Ответить]

  • 05.01.2012

    kladez-zolota, css код описывается в css файле вашей темы.
    А вот где прописываеться код для кнопок я указал выше, там даже видео есть :wink:

    [Ответить]

  • kladez-zolota
    05.01.2012

    ну вот такая я внимательная )))))))))))

    [Ответить]

  • 05.01.2012

    kladez-zolota, бывает)

    [Ответить]

  • alextm594
    06.01.2012

    Хм, очень приятная статья, бонус в виде видео порадовал. Парень, у тебя талант преподавания! :wink:

    [Ответить]



:wink: :twisted: :roll: :oops: :lol: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

*


Подпишись на обновления блога:

RSS    twitter    e-mail


118 подписчиков

102 фолловера


Подробно:

Как создать сайт с онлайн фильмами
Как создать сайт с онлайн фильмами
Создание

Раскрутка

Монетизация



Как создать шаблон и дизайн для сайта
Как создать шаблон и дизайн для сайта
Макет

Разметка

Вёрстка


  • Лучшее
  • Советую
  • Новое

Я читаю:

Записки ночного блогера
Blogger.omg-linux