A3 Code Note

11/15/2022

#7 Theme Development | enqueue scripts & screenshot.png

enqueue scripts

wp-enqueue_script();
スクリプトを読み込ませる
wp-enqueue_script」で検索すると詳しく出てきます。

function テーマ名_enqueue_scripts() {
    wp_enqueue_style( 'style-css', get_stylesheet_uri(), [], filemtime( get_template_directory() . '/style.css'), 'all' );
    wp_enqueue_script ( 'main-js', get_template_directory_uri() . '/assets/main.js', [], filemtime( get_template_directory() . '/assets/main.js' ));
}

add_action( 'wp_enqueue_scripts', 'テーマ名_enqueue_scripts' );

「assets」ディレクトリを作成し、中に「main.js」作成

assets/main.js

console.warn( 'hello' );

コンソールログのwarnを確認し、動いているか確認

ただ、今後、ページによって読み込ませたり読み込ませなくするため以下のように
register と enqueue を使用して読み込ませるようにします。

function note_enqueue_scripts() {
    wp_register_style( 'style-css', get_stylesheet_uri(), [], filemtime( get_template_directory() . '/style.css'), 'all' );
    wp_register_script( 'main-js', get_template_directory_uri() . '/assets/main.js', [], filemtime( get_template_directory() . '/assets/main.js' ));

    wp_enqueue_style( 'style-css' );
    wp_enqueue_script( 'main-js' );

}

add_action( 'wp_enqueue_scripts', 'note_enqueue_scripts' );

Thumbnail

screenshot.png をテーマディレクトリの直下に置くとテーマのサムネになります。
サイズ:1200 × 900