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

Решено

Верстаю на bootstrap, хочу добавить такие возможности как collapse, tab и тд в панель инструментов, как это можно организовать без плагина

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

    Код работоспособный, но появляется маленькая проблема, дело в том, что любая из кнопок открывает первый 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

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

    Ваш ответ

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