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

Присоздании плагина WordPress есть необходимость добавления JavaScript — скриптов и стилей, причем, для скриптов иногда есть необходимость добавления атрибутов, таких, как defer или async. Также необходимо учитывать, чтобы скрипты отдельно исполнялись как в админской части, так и на клиентской.

Код добавления скритов и стилей в дминской части плагина WordPress

...
//Сначала формируем обработчик со списком нужных стилей и скриптов и задаем им пространство имен
function your_namespace() {
    wp_register_style('your_namespace', plugins_url('/admin/build/static/css/main.073c9b0a.css',__FILE__ ));
    wp_enqueue_style('your_namespace');
    wp_register_script( 'your_namespace', plugins_url('/admin/build/static/js/main.2651a1e1.js',__FILE__ ));
    wp_enqueue_script('your_namespace');
}
add_action( 'admin_init','your_namespace');//Подключаем и инициализируем, когда админская часть будет подгружена
//add_action( 'admin_enqueue_scripts','your_namespace');//Можно и так

//Если есть необходимость добавить атрибут async или defer, то используем такой код
function add_async_attribute($tag, $handle) {
    if ( 'your_namespace' !== $handle )
        return $tag;
    return str_replace( ' src', ' defer="defer" src', $tag );
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);
...

Код добавления скритов и стилей в клиентской части плагина WordPress

function enqueue_related_pages_scripts_and_styles(){
        wp_enqueue_style('related-styles', plugins_url('/css/bootstrap.min.css', __FILE__));
        wp_enqueue_script('releated-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
    }
add_action('wp_enqueue_scripts','enqueue_related_pages_scripts_and_styles');

Пожалуйста, оцените материал

WebSofter

Web - технологии