WordPressでJavascriptとCSSをロードする方法

Wordpressでは、適切な方法で自分のjavascriptとcssファイルをロードする必要があります.簡単にすべてのjavascriptとcssファイルをheaderにロードすればいいわけではありません.javascript/cssが他のプラグインのjavascript/cssと衝突する可能性があります.他のテーマを研究したことがある場合は、この関数wp_enqueue_script()を使用すると、javascript/cssファイルを時間通りにオンデマンドでロードできます.Dashboradだけが必要な場合は、Dashboardにロードさせます.postのリリースページだけが必要な場合は、postパブリケーションページにのみロードします.
自分のjavascriptファイルをWordpressにjavascriptファイルを登録する必要があることを伝えます.このようにWordpressはあなたがどのファイルを使用する必要があるかを知っています.私たちは次の関数を使用します.

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

関数の具体的な使い方はWordPress Codexを参照してパラメータに注意してください  $ver、なぜこのパラメータを使用しますか?ブラウザにはキャッシュメカニズムがあり、あるサイトからダウンロードしたjavascriptとcssファイルがキャッシュされることはよく知られていますが、ブラウザがjavascriptまたはcssファイルのurlが変化したことを検出すると、再ダウンロードします.
Javascriptの登録をロードしたら、javascriptをロードする必要があります.次の例は、ロード方法を簡単に示しています.

function custom_scripts_basic()  
{  
    //        javascript: 
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );  
 
    //     javascript: 
    wp_enqueue_script( 'custom-script' );  
}  
add_action( 'wp_enqueue_scripts', 'custom_scripts_basic' );

コードがjQueryなどのライブラリに依存している場合は、jQueryをロードしてjavascriptをロードする必要があります.WordPressには最新バージョンのjQueryが付属しているので、別途登録する必要はありません.コードを変更します.

function custom_scripts_basic()  
{  
    //        javascript: 
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery' ) );  
 
    //     javascript: 
    wp_enqueue_script( 'custom-script' );  
}  
add_action( 'wp_enqueue_scripts', 'custom_scripts_basic' );

Wordpressがカスタムjavascriptをロードする前に、どのjavascriptをロードするかを示す簡単な配列しか必要ありません.jQueryUIを事前にロードする必要がある場合は、このような配列array( 'jquery', 'jquery-ui-core' )を使用して、headerから出力されるjavascriptを見てみましょう.

<script type='text/javascript' src='http://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>  
<script type='text/javascript' src='http://yourdomain.com/wp-content/plugins/yourplugin/js/custom-script.js?ver=3.3.1'></script>

バックグラウンドでjavascriptをロードする上の例はフロントでロードするだけで、Wordpressのバックグラウンドでロードするわけではありません.バックグラウンドでロードするのも簡単です.方法は基本的に同じですが、異なるactionを使用しているだけで、add_action( 'admin_enqueue_scripts', 'custom_scripts_basic' )を使う必要があります.フロントとバックグラウンドのロードを区別する必要があります.Javascriptは指定したページにロードする必要がある場合があります.カスタムCSSをロードjavascriptをロードするには、カスタムcssをロードする必要があります.方法は似ていますが、関数も使用しています.

wp_register_style( $handle, $src, $deps, $ver, $media );

具体的な例はWordpress公式に参照するか、javascriptの例を参照してください.この方法でロードしなければなりませんか答えはもちろんです.これは多くのWordpress開発者が共同で使用し、推奨している方法で、すべてのテーマとプラグインファイルの直接的な衝突をできるだけ減らすことができます.headerやfooterでロードすることができますが、どれだけ衝突するかを見てみましょう.最も一般的なのはjQueryライブラリの繰り返しロードです.WordPressは成熟したシステムで、少なくともDrupalよりずっと成熟しています.WordPressはこのような開発方式を提供した以上、熟考と長期的な検証を経たに違いありません.