Как добавить свои иконки с функционалом в панель инструментов редактирование записей/страниц

Ответ

Код работоспособный, но появляется маленькая проблема, дело в том, что любая из кнопок открывает первый Collapse, так как там идет обращение по ID,  нужно вставить какой-нибудь счетчик.

добавьте параметр id в ваш код для кнопки.
а в шорткоде пропишите:

 function sh_collapse($atts, $content = null) {
 // переменные которые приходят
 extract(shortcode_atts(array(
 "title" => 'Title', // значение заголовка по умолчанию
 "id" => 1
 ), $atts));
 // выводим hrml с переменными полученными из шорткода
 return '<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample'.$id.'" aria-expanded="false" aria-controls="collapseExample'.$id.'">
 ' . $title . '
 </button>
 <div class="collapse" id="collapseExample'.$id.'">
 <div class="well">
 ' . $content . '
 </div>
 </div>';
 }
 add_shortcode('collapse', 'sh_collapse');
 

теперь можно указывать id что бы открывался нужный.

в 11.11.2015.
Добавить Комментарий

Не понимаю что вы имеете ввиду под словом «настройки», мне просто нужно чтобы была кнопочка  в панели инструментов при нажатии на которую можна было сделать, к примеру, таб или  collapse, а желательно и то и другое.

Если вы имеете ввиду настройки стилей, то нет.

Например берем таб:
http://getbootstrap.com/javascript/#tabs

Как мы видим у него есть заголовок и поле контента. Так вот, первый вариант без настроек, это будет примерно так:
1. в редакторе есть кнопка, нажимаем ее.
2. в область с нашим контентом вставляется шорткод, например: [tabs][block title=»Заголовок 1″]Контент 1[/block][block title=»Заголовок 2″]Контент 2[/block][/tabs]
3. Пользователь сам в редакторе не в визуальном режиме меняет Заголовок 1 и Контент 1, а так же количество блоков: [block title=»Заголовок 2″]Контент 2[/block]
4. Соответственно на сайте уже будут табы

Второй вариант, с настройками.
Нам еще не известно сколько будет вкладок у пользователя, поэтому нужно и это учесть.
1. В редакторе есть кнопка, нажимаешь ее.
2. Всплывает окно, в котором можно выбрать количество вкладок.
3. Появляются поля с заголовком и поля текста нужного колличество(в всплывающем окне)
4. пользователь заполняет их и нажимает вставить
5. Генерируется шорткод как в примере выше — автоматически.
6. Соответственно на сайте уже будут табы

в 02.11.2015.
Добавить Комментарий

С настройками или просто?

Добавить Комментарий

просто это 2 разных решения.

Добавить Комментарий

Ну это понятно, я не знаю как добавить эту кнопку в редактор и что там писать, сам бутстрап я знаю 🙂
было бы круто с Collapse, поможешь?

Сделать я смогу)). Но моя задача тут натолкнуть на правильно решение. Если вам интересно я приведу примеры кода как добавить кнопку в редактор(которая будет создавать шорткод) и пример того как сделать обработчик шорткода. Этого будет достаточно что бы реализовать вашу задачу.

в 03.11.2015.
Добавить Комментарий

да, мне этого будет достаточно я думаю, смогу ли я в этой теме дальше консультироваться если что-то будет мне не понятно?

Добавить Комментарий

Для начала нужно добавить шорткод, который будет создавать пользователь в редакторе wp, и который будет преобразовываться в код на сайте.
Можете посмотреть похожие вопросы как по шорткодам:
Как сделать шорткод в вордпресс?
Как выполнить шорткод в php на cms wordpress?
Почему не работают шорткоды?
Как в WordPress проверить, что на странице есть шорткод и подключить свой скрипт на JS

Приведу пример шорткода для случая с collapse.
Код нужно добавить в файл functions.php, который расположен в папке с шаблоном вашей темы.
Если его нет, то нужно создать.
Код шорткода:

 function sh_collapse($atts, $content = null) {
 // переменные которые приходят
 extract(shortcode_atts(array(
 "title" => 'Title' // значение заголовка по умолчанию
 ), $atts));
 // выводим hrml с переменными полученными из шорткода
 return '<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
 ' . $title . '
 </button>
 <div class="collapse" id="collapseExample">
 <div class="well">
 ' . $content . '
 </div>
 </div>';
 }
add_shortcode('collapse', 'sh_collapse');
 

Теперь, если у вас подключены все нужные js и css, вы сможете сделать collapse если в редакторе wp при создании поста вставите следующий шорткод:

 [collapse title="Заголовок кнопки"]Тут скрытый текст....[/collapse]
 

Проверьте работоспособность кода, если все ok, я расскажу как добавить кнопку в редактор вордпресс-:)

Добавить Комментарий

add_action( 'admin_print_footer_scripts', 'add_sheensay_quicktags' );

function add_sheensay_quicktags() {

//Проверка, определен ли в wordpress скрипт quicktags

if (wp_script_is('quicktags')) :

?>

<script type="text/javascript">

if (QTags) {

QTags.addButton('sheens_collapse', 'Collapse', '[collapse title="Заголовок кнопки"]', 'Тут скрытый текст....[/collapse]', '', 'Collapse', 1);

}

</script>

<?php endif;

}

Кнопку добавил через эту функцию которую добавил в файл functions.php

Добавить Комментарий

Ваш ответ

Размещая свой ответ, вы соглашаетесь с правилами сайта.