Как включить CSS и JQuery в мой плагин WordPress?

52

Как включить CSS и jQuery в мой плагин wordpress?

Теги:
wordpress-plugin

10 ответов

51
Лучший ответ

Для стилей wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );

Затем используйте: wp_enqueue_style('namespace'); везде, где вы хотите загрузить css.

Скрипты такие же, как и выше, но более быстрый способ загрузки jquery - просто использовать enqueue, загруженный в init для страницы, на которую вы хотите загрузить: wp_enqueue_script('jquery');

Если вы, конечно, не хотите использовать репозиторий google для jQuery.

Вы также можете условно загрузить библиотеку jquery, которая зависит от вашего script:

wp_enqueue_script('namespaceformyscript', 'http://locationofscript.com/myscript.js', array('jquery'));

Обновление от 2017 года

Я написал этот ответ некоторое время назад. Я должен уточнить, что лучшее место для размещения ваших сценариев и стилей находится в пределах wp_enqueue_scripts. Так, например:

add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
    wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );
    wp_enqueue_style( 'namespace' );
    wp_enqueue_script( 'namespaceformyscript', 'http://locationofscript.com/myscript.js', array( 'jquery' ) );
}

Действие wp_enqueue_scripts изменит настройки для "frontend". Вы можете использовать действие admin_enqueue_scripts для бэкэнд (в любом месте wp-admin) и действие login_enqueue_scripts для страницы входа.

  • 0
    Для тех из нас, кто впервые в разработке плагинов, не могли бы вы уточнить, "где вы когда-нибудь хотите загрузить CSS?" Нужно ли создавать шаблоны страниц для каждой страницы, где мы хотим, чтобы это вызывалось, а затем вызывать его вручную в заголовке?
  • 0
    @ user658182 use add_action('init', 'function_name'); где имя_функции - это функция, которая ставит в очередь ресурсы.
Показать ещё 3 комментария
47

Поместите его в функцию init() для вашего плагина.

function your_namespace() {
    wp_register_style('your_namespace', plugins_url('style.css',__FILE__ ));
    wp_enqueue_style('your_namespace');
    wp_register_script( 'your_namespace', plugins_url('your_script.js',__FILE__ ));
    wp_enqueue_script('your_namespace');
}

add_action( 'admin_init','your_namespace');

Мне потребовалось еще некоторое время, прежде чем я нашел лучшее для меня решение, которое является безупречным imho.

Приветствия

  • 0
    Куда идет этот код? functions.php? Plugin.php?
  • 1
    @ user658182 Ваш плагин WordPress, вероятно, должен иметь свой собственный .php файл или папку в wp-content / plugins /
16

Включить CSS и jQuery в ваш плагин просто, попробуйте это:

// register jquery and style on initialization
add_action('init', 'register_script');
function register_script() {
    wp_register_script( 'custom_jquery', plugins_url('/js/custom-jquery.js', __FILE__), array('jquery'), '2.5.1' );

    wp_register_style( 'new_style', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
}

// use the registered jquery and style above
add_action('wp_enqueue_scripts', 'enqueue_style');

function enqueue_style(){
   wp_enqueue_script('custom_jquery');

   wp_enqueue_style( 'new_style' );
}

Я нашел этот отличный отрывок с этого сайта Как включить jQuery и CSS в WordPress - путь WordPress

Надеюсь, это поможет.

7

Просто добавьте в @pixeline ответ (попробовал добавить простой комментарий, но сайт сказал, что мне нужна репутация 50).

Если вы пишете свой плагин для раздела admin, вы должны использовать:

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");

admin_enqueueu_scripts - правильный крючок для раздела admin, используйте wp_enqueue_scripts для переднего конца.

7

Смотрите http://codex.wordpress.org/Function_Reference/wp_enqueue_script

пример

<?php
function my_init_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
}    

add_action('init', 'my_init_method');
?> 
  • 0
    Как включить CSS файлы?
  • 0
    @faressoft - увидеть принятый ответ
5

Сначала вам нужно зарегистрировать стиль и CSS с помощью функций wp_register_script() и wp_register_style()

 //registering javascript and css
 wp_register_script ( 'mysample', plugins_url ( 'js/myjs.js', __FILE__ ) );
 wp_register_style ( 'mysample', plugins_url ( 'css/mystyle.css', __FILE__ ) );

После этого вы можете вызвать функции wp_enqueue_script() и wp_enqueue_style() для загрузки js и css на нужную страницу

wp_enqueue_script('mysample');
wp_enqueue_style('mysample');

Я нашел хороший пример здесь http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/

5

Принятый ответ является неполным. Вы должны использовать правый крючок: wp_enqueue_scripts

Пример:

    function add_my_css_and_my_js_files(){
        wp_enqueue_script('your-script-name', $this->urlpath  . '/your-script-filename.js', array('jquery'), '1.2.3', true);
        wp_enqueue_style( 'your-stylesheet-name', plugins_url('/css/new-style.css', __FILE__), false, '1.0.0', 'all');
    }
    add_action('wp_enqueue_scripts', "add_my_css_and_my_js_files");
1

Очень просто:

Добавление JS/CSS в интерфейс:

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');

Добавление JS/CSS в WP Admin Area:

function enqueue_related_pages_scripts_and_styles(){
        wp_enqueue_style('related-pages-admin-styles',  get_stylesheet_directory_uri() . '/admin-related-pages-styles.css');
        wp_enqueue_script('releated-pages-admin-script', plugins_url( '/js/custom.js' , __FILE__ ), array('jquery','jquery-ui-droppable','jquery-ui-draggable', 'jquery-ui-sortable'));
    }
add_action('admin_enqueue_scripts','enqueue_related_pages_scripts_and_styles');
1

Вы можете использовать следующую функцию, чтобы поставить в очередь скрипт или стиль из плагина.

function my_enqueued_assets() {
    wp_enqueue_script('my-js-file', plugin_dir_url(__FILE__) . '/js/script.js', '', time());
    wp_enqueue_style('my-css-file', plugin_dir_url(__FILE__) . '/css/style.css', '', time());
}
add_action('wp_enqueue_scripts', 'my_enqueued_assets');
0

Вы можете добавить сценарии и CSS в бэкэнд и фронтэнд с помощью следующего кода: Это простой класс, и функции вызываются объектно-ориентированным способом.

class AtiBlogTest {
function register(){
    //for backend
    add_action( 'admin_enqueue_scripts', array($this,'backendEnqueue'));
    //for frontend
    add_action( 'wp_enqueue_scripts', array($this,'frontendEnqueue'));
}
function backendEnqueue(){
    wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/admin_mystyle.css', __FILE__ ));
    wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/admin_myscript.js', __FILE__ ));
}
function frontendEnqueue(){
    wp_enqueue_style( 'AtiBlogTestStyle', plugins_url( '/assets/css/front_mystyle.css', __FILE__ ));
    wp_enqueue_script( 'AtiBlogTestScript', plugins_url( '/assets/js/front_myscript.js', __FILE__ ));
}
}

if(class_exists('AtiBlogTest')){
$atiblogtest=new AtiBlogTest();
$atiblogtest->register();
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню