#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