web-dev-qa-db-ja.com

特定のページにJavaScriptファイルを含めるためのバックエンドオプション

私は、同僚がコンテンツを作成するために使用するテンプレートに取り組んでいます。一部のページにはスライダーまたは複数のスライダーがありますが、他のページにはありません。このため、Pagesバックエンドに必要に応じてスライダースクリプトを含めることができるオプション(おそらくチェックボックスなど)を作成したいと思います。

スクリプトは特定のページIDでしかエンキューできませんでしたが、それらはこれらのページの多くを作成するので、毎回追加してページIDを追加するのではなく、自動的にJavascriptを含める方法があります彼らはJavascriptを使った新しいページを作ります。

また、可能であれば1ページのテンプレートのみを使用したいと思います。

これについて最善の方法は何でしょうか。

ありがとうございます。

2
APAD1

これを行う最善の方法は、 メタボックス を[ページの追加と編集]ダッシュボードに追加することです。

次に、スクリプトをエンキューするときに、その投稿のメタデータを確認し、設定されている場合はスクリプトをエンキューすることができます。

注:ここには動くものがたくさんあります。私はそれを消化可能な塊に分解しようとします。

サンプルコード注 - functions.phpに挿入し、あなたの特定のテーマに合わせて微調整する必要があります。

まず、メタボックスが表示されるように登録しましょう

function slider_script_add_meta_box() {
    add_meta_box(
        'do_script_sectionid',
        'Include Slider Script',
        'slider_script_meta_box',
        'page'
    );
}

add_action( 'add_meta_boxes', 'slider_script_add_meta_box' );

それではメタボックスオプションを表示しましょう

function slider_script_meta_box( $post ) {
    // Add an nonce field so we can check for it later.
    wp_nonce_field( 'slider_script_action_name', 'slider_script_meta_box_nonce' );
    // Get existing value if set
    $value = get_post_meta( $post->ID, '_do_slider_script', true );
    $checked = ($value) ? ' checked' : '';
    echo '<label for="myplugin_new_field">';
    echo 'Include Slider Script:';
    echo '</label> ';
    echo '<input type="checkbox" id="do_slider_script" name="do_slider_script"' . $checked . ' />';
} 

次に、データが確実に保存されるようにページ保存をフックします

function myplugin_save_meta_box_data( $post_id ) {
    // Check if our nonce is set and verifies.
    if ( ! isset( $_POST['slider_script_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['slider_script_meta_box_nonce'], 'slider_script_action_name' ) ) {
        return;
    }

    // If this is an autosave, our form has not been submitted, so we don't want to do anything.
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return;
    }

    // Check the user's permissions.
    if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {
        if ( ! current_user_can( 'edit_page', $post_id ) ) {
            return;
        }
    }

    // Finally! Safe for us to save the data now.
    // Sanitize user input.
    $do_script = (isset($_POST['do_slider_script'])) ? 1 : 0;
    // Update the meta field in the database.
    update_post_meta( $post_id, '_do_slider_script', $do_script );
}

add_action( 'save_post', 'myplugin_save_meta_box_data' );

最後に、このセクションを追加して、関連するページに実際にスクリプトを登録/エンキューする

function enqueue_slider_scripts() {
    global $post;
    $do_script = get_post_meta($post->ID, '_do_slider_script', true);
    if ($do_script) {
        // Alter the path to your script as needed
        wp_enqueue_script('slider_script', get_template_directory_uri() . '/js/example.js');
    }
}

add_action( 'wp_enqueue_scripts', 'enqueue_slider_scripts' );

繰り返しますが、これらすべてをあなたのfunctions.phpファイルに貼り付けることができます。あるいは、もっと組織的な方法は、テーマフォルダに新しいphpファイルを作成してそれを関数ファイルに含めることです。これにより、ファイルにわかりやすい名前を付け、コードを関連するグループに「整理」しておくことができます。

3
cale_b