web-dev-qa-db-ja.com

javascriptファイルとCSSファイルをWordPressに含める方法

新しいプラグインを作成しているので、JavaスクリプトファイルとCSSファイルを追加する必要があります。

これらは私のJavaScriptファイルです

  1. jquery.min.js
  2. jquery-1.3.2.min.js
  3. jquery.tabify.js

Cssファイル：

  1. newstyle.css
plugin-developmentcssjavascript
1
SANS780730

WordPressはすでにjQueryを同梱しています。テーマに含める必要はありません。

ジャバスクリプト

テーマのjquery.tabify.jsファイルが/js/jquery.tabify.jsにあるとしましょう。 functions.phpファイルに次のコードを含めます。

function jquery_tabify() {
    wp_enqueue_script(
        'jquery-tabify',
        get_template_directory_uri() . '/js/jquery.tabify.js',
        array( 'jquery' )
    );
}
add_action( 'wp_enqueue_scripts', 'jquery_tabify' );

これにはスクリプト と jQueryが含まれます。 jQueryは依存関係としてマークされているので、最初にロードされます。

ファイルが別のサーバーでホストされている場合は、http://site.com/jquery.tabify.jsとし、代わりにパスとして指定します（get_template_directory_uri()を省略）。

function jquery_tabify() {
    wp_enqueue_script(
        'jquery-tabify',
        'http://site.com/jquery.tabify.js',
        array( 'jquery' )
    );
}
add_action( 'wp_enqueue_scripts', 'jquery_tabify' );

CSS

スタイルを同じ方法で登録します。ファイルが/css/newstyle.cssにあると仮定して、functions.phpファイルに次のコードを追加します。

function add_newstyle_stylesheet() {
    wp_register_style(
        'newstyle',
        get_template_directory_uri() . '/css/newstyle.css'
    );
    wp_enqueue_style( 'newstyle' );
}
add_action( 'wp_enqueue_scripts', 'add_newstyle_stylesheet' );
6
EAMann