Плагин WP: Печать javascript в заголовке

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Определите уникальный слаг для вашей страницы
Шаг 2: Используйте хук admin_head с вашим слагом
Шаг 3: Убедитесь, что ваши функции подключаются
Заключение

Вопрос или проблема

[Я новичок в программировании на WordPress.]

Я разрабатываю плагин. Плагину нужен Javascript-код в заголовке. Чтобы напечатать код только в заголовке страницы настроек плагина. Я не могу этого сделать. Я обратился к инструкциям здесь

Плагин работает нормально, если Javascript выдается с помощью этого плагина

Я также попытался добавить код в теле (после div) следующим образом….

include( plugin_dir_path( __FILE__ ) . 'ipn/javascript.php');

Но это тоже не сработало.

Проверьте код плагина….

add_action( 'admin_enqueue_scripts', 'my_enqueued_assets' );

function my_enqueued_assets() {
wp_enqueue_script('Google_jquery', 'http://code.jquery.com/jquery-2.2.4.min.js');

}

add_action('admin_menu', 'my_plugin_menu');
function my_plugin_menu() {
add_menu_page('Настройки моего плагина', 'Настройки плагина', 'administrator', 'my-plugin-settings', 'my_plugin_settings_page', 'dashicons-admin-generic');
}

function my_plugin_settings_page() {
global $my_plugin_settings;

echo 'HTML код формы здесь';
add_action( "admin_head-{$my_plugin_settings}", 'my_admin_head_script' );
}
function my_admin_head_script() { ?>

// javascript код, который я хочу вывести в заголовке

<script type="text/javascript">$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 1;

$(document).on('click','#addScnt', function() {
        $('html code here').appendTo(scntDiv);
        i++;
        return false;
});

$(document).on('click','#remScnt', function() { 
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
});
});</script>
// конец javascript кода

<?php }
add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
echo 'CSS стиль здесь';
}

Чтобы вставить код только в секцию заголовка в административной области на отдельных страницах плагина, вам нужно изменить вашу add_action() функцию.

add_action('admin_head-pageof_thisplugin/thisplugin', 'thisplugin_adminhead');

function thisplugin_adminhead() {
    // здесь ваш контент
    echo '<script>'
         .'/* ... */'
         .'</script>';
}

где pageof_thisplugin/thisplugin является хук-слугом, который возвращает из функции, создающей вашу страницу, такой как add_submenu_page(), add_options_pageилиadd_management_page`.

Источник и дополнительные детали в WordPress Codex

Ответ или решение

Как добавить JavaScript в заголовок страницы настроек плагина WordPress

Работа с плагинами в WordPress может стать настоящим вызовом для новичка. Ваша задача — внедрить JavaScript в заголовок страницы настроек плагина. Это может быть полезно, если вы хотите, чтобы ваш JavaScript работал только на специфической странице админ-панели. Давайте разберемся, как это правильно сделать.

Шаг 1: Определите уникальный слаг для вашей страницы

Каждая страница настроек плагина имеет свой уникальный "slug" (идентификатор), который можно использовать для привязки вашего скрипта к определенной странице. Например, если вы используете функцию add_menu_page, то слагом будет то, что вы передали в качестве четвертого параметра.

add_menu_page('My Plugin Settings', 'Plugin Settings', 'administrator', 'my-plugin-settings', 'my_plugin_settings_page', 'dashicons-admin-generic');

В этом случае слаг — my-plugin-settings.

Шаг 2: Используйте хук `admin_head` с вашим слагом

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

add_action('admin_head-page_my-plugin-settings', 'custom_admin_head_script');

function custom_admin_head_script() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $(document).on('click', '#addScnt', function() {
            $('<p>Новый элемент <input type="text" name="my_textbox[]"/></p>').appendTo(scntDiv);
            i++;
            return false;
        });

        $(document).on('click', '#remScnt', function() {
            if(i > 2) {
                $(this).parents('p').remove();
                i--;
            }
            return false;
        });
    });
    </script>
    <?php
}

Шаг 3: Убедитесь, что ваши функции подключаются

Не забудьте подключить ваши страницы админки с помощью add_action, как показано выше. Убедитесь, что вы используете правильный слаг в функции add_action.

add_action('admin_menu', 'my_plugin_menu');

function my_plugin_menu() {
    add_menu_page('My Plugin Settings', 'Plugin Settings', 'administrator', 'my-plugin-settings', 'my_plugin_settings_page', 'dashicons-admin-generic');
}

Заключение

Теперь ваш JavaScript будет загружен только на странице настроек вашего плагина, и вы избежите конфликтов с другими частями админ-панели WordPress. Следуя приведённым шагам, вы можете легко расширить функционал вашего плагина и сделать его более удобным для пользователя. Это позволит вашим скриптам работать только там, где это действительно необходимо, что в свою очередь поможет оптимизировать производительность вашего сайта.

Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться к сообществу разработчиков WordPress или проверять документацию, доступную на WordPress Codex.