web-dev-qa-db-ja.com

投稿内の高度なカスタムフィールドに基づくJavaScriptの条件付きロード

私は、ACFの柔軟なコンテンツフィールドを使って投稿コンテンツがモジュール方式で（大部分ではあるが排他的ではない）作成されるサイト/テーマを構築しています。これらのフィールドには、パブリックフロントエンドでJavaScript機能が付加されている可能性があります。たとえば、画像のアップロードに視差が適用されている場合や、クリックまたはホバーアニメーションが適用されているテキストブロックの場合があります。私は、この機能を動かす可能性があるさまざまなJavaScriptライブラリを条件付きでロードするための最も有用な方法を決定しようとしています（投稿では、一般大衆がそれを見て、私は管理者側について話していません）。具体的には、常にすべてをロードすることを避けようとしています。代わりに、投稿に実際に存在するフィールドに基づいて特定のライブラリをロードすることを望みます。最初にフィールドをチェックし、次に後でそれらを表示するためにコンテンツを複数回ループするというブルートフォース方式以外の確立された方法はありますか？

phptheme-developmentjavascriptadvanced-custom-fieldsperformance
2
jshwlkr

ACFは、ロードされたときに、フィールドに対してきめ細かい filters を持ちます。

add_action( 'wp_enqueue_scripts', 'register_my_scripts', 5 );
function register_my_scripts() {
    wp_register_script( 'my-script', 'path-to/my-script.js', array(), 'version', true );
}

add_filter('acf/load_field/name=my_field_name', 'load_field_my_field_name');
function load_field_my_field_name( $field ) {
    wp_enqueue_script( 'my-script' );
    return $field;
}

通常、すべてのスクリプトはwp_enqueue_scriptsフックに入れられるべきです。ですから、スクリプトとその依存関係（まだロードされていないもの）がフッターにロードできることを確認する必要があります。このように、コンテンツ内のフィールドにアクセスすると、スクリプトはエンキューされます。

3
JHoffmann

参照しているスクリプトをロードする必要があるかどうかを判断するには、ACFでTrue/Falseを使用することをお勧めします。そして、それらの特定のスクリプトが "True"の場合にそれらをロードするための関数を作成します。このようなもの...

<?php

  if( get_field('true_false_field') ) { 
    add_action( 'wp_enqueue_scripts', 'enqueue_the_script' );
  }

  function enqueue_the_script() {
    wp_enqueue_script( 'my-js', 'filename.js', false );
  }

?>
2
lavekyl