Làm thế nào để Bao gồm CSS và jQuery trong plugin WordPress của tôi?

Question 1

Question 2

Đối với phong cách wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' );

Sau đó sử dụng: wp_enqueue_style('namespace'); bất cứ nơi nào bạn muốn css tải.

Các tập lệnh như trên nhưng cách nhanh hơn để tải jquery chỉ là sử dụng hàng đợi được tải trong một init cho trang bạn muốn nó tải trên đó: wp_enqueue_script('jquery');

Tất nhiên, trừ khi bạn muốn sử dụng kho lưu trữ của google cho jquery.

Bạn cũng có thể tải có điều kiện thư viện jquery mà tập lệnh của bạn phụ thuộc vào:

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

Cập nhật tháng 9 năm 2017

Tôi đã viết câu trả lời này một lúc trước. Tôi nên làm rõ rằng nơi tốt nhất để sắp xếp các tập lệnh và kiểu của bạn là trong wp_enqueue_scriptshook. Ví dụ:

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

Các wp_enqueue_scriptshành động sẽ thiết lập những điều cho "lối vào". Bạn có thể sử dụng admin_enqueue_scriptshành động cho phần phụ trợ (bất cứ nơi nào trong wp-admin) và login_enqueue_scriptshành động cho trang đăng nhập.

Question 3

Đặt nó vào init()chức năng cho plugin của bạn.

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

Tôi cũng đã mất một thời gian trước khi tìm ra giải pháp tốt nhất (đối với tôi) đó là imho tuyệt vời.

Chúc mừng

Question 4

Để đưa CSS và jQuery vào plugin của bạn thật dễ dàng, hãy thử cách này:

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

Tôi tìm thấy điều tuyệt vời này được cắt ra từ trang web này Cách bao gồm jQuery và CSS trong WordPress - The WordPress Way

Hy vọng rằng sẽ giúp.

Question 5

Câu trả lời được chấp nhận là không đầy đủ. Bạn nên sử dụng đúng móc:wp_enqueue_scripts

Thí dụ:

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

Question 6

Xem http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Thí dụ

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

Question 7

Chỉ để thêm vào câu trả lời của @ pixeline (đã cố gắng thêm một nhận xét đơn giản nhưng trang web nói rằng tôi cần 50 danh tiếng).

Nếu bạn đang viết plugin của mình cho phần quản trị thì bạn nên sử dụng:

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files");

Admin_enqueueu_scripts là hook chính xác cho phần quản trị, hãy sử dụng wp_enqueue_scripts cho giao diện người dùng.

Question 8

Đầu tiên, bạn cần đăng ký style và css bằng các hàm wp_register_script () và 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__ ) );

Sau đó, bạn có thể gọi hàm wp_enqueue_script () và wp_enqueue_style () để tải js và css trong trang bắt buộc

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

Tôi nêu một ví dụ hay ở đây http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/

Question 9

Rất đơn giản:

Thêm JS / CSS trong Front End :

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

Thêm JS / CSS trong Khu vực quản trị WP :

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

Question 10

Bạn có thể sử dụng hàm sau để sắp xếp tập lệnh hoặc kiểu từ plugin.

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

Question 11

Bạn có thể thêm script và css vào back end và front end bằng đoạn mã sau: Đây là lớp đơn giản và các hàm được gọi theo cách hướng đối tượng.

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();
}