Hướng dẫn how to add css in wordpress plugin - cách thêm css vào plugin wordpress

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

Hướng dẫn how to add css in wordpress plugin - cách thêm css vào plugin wordpress

Maxime

8.2904 Huy hiệu vàng49 Huy hiệu bạc53 Huy hiệu Đồng4 gold badges49 silver badges53 bronze badges

Hỏi ngày 21 tháng 9 năm 2010 lúc 12:24Sep 21, 2010 at 12:24

Faressoftfaressoftfaressoft

Phù vàng 18.6K42 Huy hiệu vàng 101 Huy hiệu đồng42 gold badges101 silver badges144 bronze badges

Cho phong cách

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

Sau đó, sử dụng:

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');
3 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ỉ sử dụng enqueue được tải trong một init cho trang bạn muốn nó tải trê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');
4

Tất nhiên trừ khi bạn muốn sử dụng kho lưu trữ Google cho jQuery.

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

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

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

Tôi đã viết câu trả lời này một thời gian trước. Tôi nên làm rõ rằng nơi tốt nhất để ngăn chặn các tập lệnh và kiểu dáng của bạn nằm trong móc

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

Hành động

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');
6 sẽ thiết lập mọi thứ cho "Frontend". Bạn có thể sử dụng hành động
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');
8 cho phần phụ trợ (bất cứ nơi nào trong WP-admin) và hành động
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');
9 cho trang đăng nhập.

Đã trả lời ngày 21 tháng 9 năm 2010 lúc 13:26Sep 21, 2010 at 13:26

6

Đặt nó vào chức năng

// 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' );
}
0 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ôi tìm thấy giải pháp tốt nhất (đối với tôi) đó là IMHO không thể đánh bại.

Chúc mừng

Đã trả lời ngày 29 tháng 1 năm 2012 lúc 19:23Jan 29, 2012 at 19:23

CalimerocalimeroCalimero

6515 Huy hiệu bạc4 Huy hiệu đồng5 silver badges4 bronze badges

2

Để bao gồm CSS và jQuery trong plugin của bạn rất dễ dàng, hãy thử điều 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 từ trang web này làm thế nào để bao gồm jQuery và CSS trong WordPress - cách WordPress

Hy vọng điều đó sẽ giúp.

Đã trả lời ngày 19 tháng 7 năm 2012 lúc 10:06Jul 19, 2012 at 10:06

Ryan Sryan sRyan S

5,8081 Huy hiệu vàng19 Huy hiệu bạc14 Huy hiệu đồng1 gold badge19 silver badges14 bronze badges

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

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

Example:

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

Đã trả lời ngày 15 tháng 1 năm 2014 lúc 23:32Jan 15, 2014 at 23:32

Hướng dẫn how to add css in wordpress plugin - cách thêm css vào plugin wordpress

PixelinePixelinepixeline

17.5K11 Huy hiệu vàng81 Huy hiệu bạc109 Huy hiệu đồng11 gold badges81 silver badges109 bronze badges

1

Chỉ cần nối 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 cho biết 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ị viên 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ị viên, sử dụng wp_enqueue_scripts cho mặt trước.

Đã trả lời ngày 16 tháng 1 năm 2014 lúc 18:52Jan 16, 2014 at 18:52

John Tjohn tJohn T

1.0303 Huy hiệu vàng13 Huy hiệu bạc28 Huy hiệu đồng3 gold badges13 silver badges28 bronze badges

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

Thí dụ

 

Đã trả lời ngày 21 tháng 9 năm 2010 lúc 12:28Sep 21, 2010 at 12:28

POWTACPOWTACpowtac

39,9K27 Huy hiệu vàng115 Huy hiệu bạc167 Huy hiệu đồng27 gold badges115 silver badges167 bronze badges

0

Đầu tiên bạn cần đăng ký kiểu và CSS bằng 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 các 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 Fount một ví dụ tốt đẹp ở đây http://wiki.workassis.com/wordpress-create-advanced-custom-plugin-using-oop/

Đã trả lời ngày 27 tháng 6 năm 2016 lúc 9:38Jun 27, 2016 at 9:38

Hướng dẫn how to add css in wordpress plugin - cách thêm css vào plugin wordpress

Bikesh Mbikesh mBikesh M

7.9136 Huy hiệu vàng38 Huy hiệu bạc52 Huy hiệu đồng6 gold badges38 silver badges52 bronze badges

Rất đơn giản:

Thêm JS/CSS ở mặt trước: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: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');

Đã trả lời ngày 15 tháng 7 năm 2018 lúc 5:16Jul 15, 2018 at 5:16

Hướng dẫn how to add css in wordpress plugin - cách thêm css vào plugin wordpress

Bạn có thể sử dụng chức năng sau để tập lệnh Enqueue hoặc kiểu từ plugin.

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

Đã trả lời ngày 8 tháng 2 năm 2018 lúc 6:58Feb 8, 2018 at 6:58

Hướng dẫn how to add css in wordpress plugin - cách thêm css vào plugin wordpress

Ông HKMR. HKMr. HK

2.1611 Huy hiệu vàng17 Huy hiệu bạc28 Huy hiệu đồng1 gold badge17 silver badges28 bronze badges

Bạn có thể thêm các tập lệnh và CSS ở phía sau và đầu phía trước với mã sau đây: Đây là lớp đơn giản và các hàm được gọi theo cách định hướng đối tượng.

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

Đã trả lời ngày 2 tháng 11 năm 2018 lúc 8:29Nov 2, 2018 at 8:29