如何在我的wordpress插件中包含CSS和jQuery？

Question

如何在我的wordpress插件中包含CSS和jQuery？

Answer 1

對於風格wp_register_style('namespace', 'http://locationofcss.com/mycss.css');

然後使用：wp_enqueue_style('namespace');不管你想要的CSS加載。

腳本如上，但裝載的jQuery更快的方式就是使用一個初始化加載排隊等待你希望它加載頁面：wp_enqueue_script('jquery');

當然，除非你想使用谷歌的存儲庫jQuery的。

您也可以有條件地加載jQuery庫，你的腳本取決於：

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

更新2017年9月

我前一段時間寫了這個答案。我應該澄清一下，排隊腳本和樣式的最佳位置在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動作會做一些事情，爲「前端」。您可以使用admin_enqueue_scripts操作作爲後端（wp-admin中的任何位置）和登錄頁面的login_enqueue_scripts操作。

Answer 2

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

Answer 3

將它放入您的插件的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'); 

我花了一段時間才找到了（對我來說）這是一個萬無一失的最佳解決方案。

乾杯

Answer 4

爲了在你的插件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'); 
} 

我發現這個偉大的文檔片斷從這個網站How to include jQuery and CSS in WordPress – The WordPress Way

希望有所幫助。

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

Answer 6

只是追加到@ pixeline的回答（嘗試添加一個簡單的評論，但該網站說我需要50聲望）。

如果你正在寫你的管理部分插件，那麼你應該使用：

add_action('admin_enqueue_scripts', "add_my_css_and_my_js_files"); 

的admin_enqueueu_scripts是管理部分的正確鉤，使用wp_enqueue_scripts的前端。

Answer 7

首先，你需要使用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__)); 

在此之後註冊的風格和CSS，你可以調用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/

Answer 8

您可以使用下面的函數來排隊腳本o一個很好的例子風格從插件。

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