web-dev-qa-db-ja.com

子供のテーマのJquery

私はWordpressの初心者なので、自分のjqueryを子テーマに統合するための支援が必要です。

私はうまくいくこのjqueryツールチップを持っていますが、私はそれを私のwordpressの子テーマに含めたいです。

このソースコードを見てください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/jquery.balloon.js"></script>

    <script>
    $(document).ready(function() {
    $('.sample').balloon({ position: "left" })  
    });
    </script>

ツールチップを機能させるために、これらすべてを子テーマに含めるにはどうすればよいですか。ありがとう

themesjqueryjavascriptchild-themetooltip
3
Finerwhite

まず第一に、jqueryはおそらくメインテーマによって既にエンキューされています。そうでなければ、正しい方法は、アクションフックwp_enqueue_scriptsのための関数でwp_enqueue_script('jquery')を呼び出すことです。

例：

function enqueue_jquery() {
   wp_enqueue_script('jquery');
}

add_action('wp_enqueue_scripts', 'enqueue_jquery').

このコードはあなたの子供のテーマのためにfunctions.phpファイルに追加される必要があるでしょう。

ワードプレスに付属しているもの、またはメインテーマに付属しているものとは異なるバージョンのjqueryをロードしたい場合は、wp_enqueue_scriptにファイル名のみを指定します。そして、wp_deregister_script('jquery')を使用して、すでにロードされているすべてのバージョンのjqueryを最初にアンロードする必要があります。新しいバージョンをロードする前に、すでにロードされているバージョンの登録を解除しないと、競合が発生します（同じjquery関数が2回定義されています...）。

それから、あなたのjquery.balloon.jsファイルに対して、同じ発言で、wp_enqueue_script（そしてアクションhook wp_enqueue_scripts）を使ってください。相対URLも使用しないでください。あなたがjquery.balloon.jsファイルをあなたの子供のテーマのための "js"ディレクトリの下に置くと仮定すると、WordPressの標準は以下の行に沿ってコードを使うことでしょう：

wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);

get_stylesheet_directory_uri関数はあなたの子供テーマディレクトリへのフルパスURLを返します。

_ edit _ （バルーン効果の有効化を含めるのを忘れていました）

アクティベーション部分（$(document).ready(...);コード）にとって、物事を行うための最も標準的なWordPressの方法（およびメインと子のテーマの関係において混乱の可能性が最も低い方法）は、jsファイルを作成することです。 "balloonactivate.js"をクリックして、そのファイルをあなたの子供用の "js"フォルダに置きます。

あなたの子供のテーマが "maintheme"と呼ばれるテーマのためであるとしましょう。それからあなたの子供のテーマは "maintheme-child"と呼ばれるフォルダ（すなわちwp-content/themes/maintheme-child）にあるべきです。その下の "js"フォルダ（すでに存在する、または "jquey.balloon.js"ファイルを置くために作成する）に、 "** strong text ** balloonactivate.js"ファイルを置きます。あとはjqueryおよびjquery.balloon.jsスクリプトのようにエンキューするだけです。

だから、あなたのために働くことができる完全なコードは以下の通りです：

function enqueue_jquery_balloon() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);
   wp_enqueue_script('activate-balloon', get_stylesheet_directory_uri().'/js/balloonactivate.js', array('jquery-balloon'), false, false);
}

add_action('wp_enqueue_scripts', 'enqueue_jquery_balloon').

このコードはあなたの子供のテーマのディレクトリのfunctions.phpファイルに追加されるべきです。

バルーン効果を有効にするために、$(document).ready(...);コードをchild-theme footer.phpファイルの最後にインラインで追加することもできます（child-themeにメインテーマとは異なるフッターが必要な場合）。しかし、メインテーマのフッターで十分であれば、バルーンスクリプトのためだけに子テーマでfooter.phpを作成するのは残念です（したがって、 の「混乱を最小限に抑える」影響についての上記のコメントballoonactivate.jsfile）.

あなたのケースではjqueryのエンキューはおそらく必要ではありませんが、それを再度エンキューすることは問題ではありません。問題となるのは、あるバージョンのjqueryがすでにロードされていて、2番目のバージョンをロードしたことです。

お役に立てれば。

2
Phil R.