web-dev-qa-db-ja.com

私のWordPressテーマにJavaScriptとCSSを含める正しい方法

私は正しい方法で私自身のWordpressテーマを構築しようとしています。しかし...

私が最初に見つけた問題は、cssとjsを「正しい方法で」追加する方法です。

その方法をいくつかのチュートリアルで見つけました。例： http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402（これは "2014年6月30日"からです）そしてこれ http://code.tutsplus.com/articles/how-あなたのワードプレスのテーマとプラグインにインクルードjavascriptとcss - wp-24321（これは "2月14日からです-2012 "）彼らは同じように説明しています。

また、私はテーマ「二十五十一」を見て、別の方法があります。

コードで説明しましょう。

"tutsplus"の2つのチュートリアルに従ってcssとjsを追加すると、次のようになります。

<?php

function scripts() {
    wp_register_style(
        'bootstrap', 
        get_template_directory_uri() . '/css/bootstrap.min.css',
        '3.3.1',
    );
    wp_enqueue_style( 'bootstrap' );
}

function mytheme_enqueue_style() {
    wp_enqueue_style( 'bootstrap', get_stylesheet_uri() ); 
    }
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

?>

私が「二十五」のテーマでどのように作られているかの方法に従えば私のコードはこのようになります：

<?php
function scripts() {

    // Load bootstrap.
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', '3.3.1' );

add_action( 'wp_enqueue_scripts', 'scripts' );
?>

私はこの最後のものが好きです。コードが少なく明確であるからです。しかし、「正しい方法」かどうかはわかりません。

もちろん、私はCODEXを読みました、しかし、私にとっては、両方の例があるので、それはすべて明らかではありません。また、私は同様の質問を見つけましたが、私の質問には答えません。 jQueryおよびJavaScriptファイルを正しい方法でインクルードする および Wordpress TwentyTenテーマにファイルをインクルードするための正しい方法jqueryスクリプトとCSS？

WPの専門家でも専門家でもない人が私のお役に立てばと思っています。

ありがとうございました！ :)

csswp-enqueue-stylewp-register-style
2
andresgl

かなり簡単な答えは両方とも正しいです。最初の方法では、2つのステップでプロセスを分割しています。スクリプトをいくつか登録したいが、後でそれらを条件付きでロードしたい場合に必要です。たとえば、2番目のスクリプトにこの最初のスクリプトが必要な場合にのみ、そのスクリプトをロードしたい場合があります。この場合は、最初のスクリプトを単純に登録し、2番目のスクリプトをエンキューしながら、最初のスクリプトのハンドルを依存関係として指定できます。

これを説明するより明確な方法はjqueryだと思います。 Wordpressはデフォルトであなたのためにそれを登録します。あなたのサイトでjqueryを使いたいのなら、単純にそれをエンキューするか、jQueryに依存する別のスクリプトをエンキューすることができます。

あなたがすぐにあなたのスクリプトを使いたいのなら、他の方法はかなり短くてきれいです。

2
Varun Kumar

私はプロジェクト目的のために私自身のテーマを開発しました。フロントエンドディスプレイではなく管理領域のみに必要なすべてのjsファイルおよびcssファイルを呼び出すには、別のファイルを使用することをお勧めします。

あなたのテーマfunction.phpに、のように与えてください

require get_template_directory() . '/inc/adminscripts.php';

テーマフォルダで、フォルダ 'inc'を作成し、ここにファイル 'adminscripts.php'を含めます。

// adminscripts.php //

function theme_admin_scripts() {

global $typenow;
    if( $typenow == 'post' ) {
        wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
    }  // to include a style in posts only
 wp_enqueue_script( 'custom_script_includes', get_template_directory_uri() . '/inc/js/custom_javascript_file.js', array(), '1.0.0', true );
}

add_action('admin_enqueue_scripts', 'theme_admin_scripts');

incフォルダー内にcssおよびjsのような2つのフォルダーを作成し、ファイルをアップロードします。ここに

0
Asha Krishna