Добавление jQuery функции в админ-панель WordPress

Question

Добавление jQuery функции в админ-панель WordPress

27 июл. 2011 г., 20:17:46

Просмотры: 13.5K

Голосов: 3

Мне нужно добавить jQuery код для работы с редакторами записей и страниц в админ-панели. Я модифицирую старый плагин, который добавляет текстовое поле на страницу редактора и обрабатывает вставку этого текста в файлы шаблона, но текстовый ввод только HTML; эта функция добавляет класс mceEditor к текстовому полю. Код работает, когда я вручную добавляю его в admin-header.php, но так делать нельзя.

Не думаю, что мне нужно регистрировать его через enqueue, так как это не библиотека. Или нужно? Каковы плюсы и минусы разных способов добавления?

Как правильно подключить этот код через хуки или другими способами в редакторы записей/страниц в админке? Код должен быть в файле плагина, а не в functions.php темы.

<script type="text/javascript">

jQuery(document).ready( function () { 
    jQuery("#dt-additional-info").addClass("mceEditor"); 
    if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
        jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
        tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
    }
});

</script>

markratledge

8.74K

разработка плагинов wp admin jquery

Все ответы на вопрос

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

function admin_js() { ?>
    <script type="text/javascript">

        jQuery(document).ready( function () { 
           jQuery("#dt-additional-info").addClass("mceEditor"); 
           if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
               jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
               tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
        });

    </script>
<?php }
add_action('admin_head', 'admin_js');

В то время я просто подключил его к действию admin_head, теперь я знаю, что существует множество других действий. Возможно, в этом случае лучше подключить его к действию admin_print_scripts:

add_action('admin_print_scripts', 'admin_js');

Примечание: Это выведет скрипт на странице, если вы хотите оставить его во внешнем файле, вам нужно добавить его в очередь:

function admin_js() {
    wp_register_script('admin_js', plugins_url( .'/yourplugin/admin-js.js' . ),  array('jquery'));
    wp_enqueue_script('admin_js');
}
add_action('admin_enqueue_scripts', 'admin_js');

И в вашем файле admin-js.js JavaScript:

    jQuery(document).ready( function () { 
       jQuery("#dt-additional-info").addClass("mceEditor"); 
       if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {
           jQuery("#dt-additional-info").wrap( "<div id='editorcontainer'></div>" ); 
           tinyMCE.execCommand("mceAddControl", false, "dt-additional-info");
         }
    });

Я использую оба этих метода на страницах настроек, и оба работают без проблем.

Mario

413

27 июл. 2011 г. 20:31:51

Комментарии

Правильный хук для вывода скриптов — это admin_print_scripts для всех страниц или динамический admin_print_scripts-$hook_suffix для конкретной страницы.

Rarst

27 июл. 2011 г. 20:52:10

@Rarst, для jQuery я предпочитаю использовать admin_footer, потому что в admin_print_scripts jQuery не всегда работает корректно.

Ewout

26 авг. 2015 г. 12:08:00

Комментарии

Хорошие замечания, я так и сделаю. И ты редактируешь кого-то другого по имени Марк Дункан, или это другой твой аккаунт? :)

markratledge

4 авг. 2011 г. 01:48:50

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

t31os

4 авг. 2011 г. 23:22:48

t31os 18.7K · Accepted Answer · 2011-07-27T21:09:48Z

Я бы рекомендовал просто сделать одноразовую очередь загрузки (enqueue) и закончить с этим..

Это означает, что вам нужно управлять дополнительным файлом (JS-файлом), но при написании кода обычно хорошей практикой является создание некоторой организации ваших файлов (или хотя бы привычка делать так), например, javascript/jquery в одной папке, css в другой, а PHP и HTML в основных файлах вашего плагина.

Так что мое предложение - перенести jQuery в js-файл, затем запустить очередь загрузки, указав jQuery как зависимость, но без необходимости регистрировать его для одноразового вызова.

Достаточно много вариантов с хуками, но лично я бы выбрал..

function yournamespace_enqueue_scripts( $hook ) {

    if( !in_array( $hook, array( 'post.php', 'post-new.php' ) ) )
        return;

    wp_enqueue_script( 
        'your_script_handle',                         // Название скрипта (handle)
        plugins_url( '/yourfilename.js', __FILE__ ),  // Путь к файлу
        array( 'jquery' )                             // Зависимости
    );
}
add_action( 'admin_enqueue_scripts', 'yournamespace_enqueue_scripts', 2000 );

Просто настройте страницы, на которых вам нужно запускать очередь загрузки - в вызове in_array().