[wp]welcartの子テーマでwp_enqueue_styleをやっていく方法

「Welcart Basic」を前提とする。

デフォの確認
こんな感じ

デフォの確認

「Welcart Basic」のページの下の方に子テーマの叩きみたいなのがあるので、まずはそれを確認する。

functions.phpがこんな感じになってる。

/**
 * Enqueue Style Function
 *
 * @return void
 */
function welcart_basic_child_enqueue_styles() {

	$parent_dir = get_template_directory_uri();

	wp_enqueue_style( 'parent-style', $parent_dir . '/style.css', array(), '1.0.0' );
	wp_enqueue_style( 'parent_usces_cart', $parent_dir . '/usces_cart.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'welcart_basic_child_enqueue_styles', 9 );

welcart独自の関数が走っているらしく、これと別に一般的なwp_enqueue_styleのためのやつを書くと干渉するのかサイトがぶっ壊れる。まあ読み込み順を調整すれば解消しそうだけど。
あっちこっちで書き込んでも後から見返すのがだるいからそもそも止めておいたほうが良いよね。

ということで、これに追記することになる。

こんな感じ

function welcart_basic_child_enqueue_styles() {

    $parent_dir = get_template_directory_uri();

    wp_enqueue_style( 'parent-style', $parent_dir . '/style.css', array(), '1.0.0' );
    wp_enqueue_style( 'parent-usces_cart', $parent_dir . '/usces_cart.css', array(), '1.0.0' );

//ここから
    $child_dir = get_stylesheet_directory_uri();

    wp_enqueue_style('fontMaterialIcons', 'https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone', array()); 
    wp_enqueue_style('fontGoogle', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap', array()); 
    wp_enqueue_style('child-style', $child_dir. '/style.css', array('parent-style'));
    wp_enqueue_script('child-scripts', $child_dir.'/js/scripts.js', array('jquery-core'), '');

    if(is_page('contact')):
        wp_enqueue_style('child-contact', $child_dir.'/css/contact.css', array());
        wp_enqueue_script('yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), '');
        wp_enqueue_script('autoKana', $child_dir.'/js/jquery.autoKana.js', array('jquery-core'), '');
    endif;
//ここまで
}
add_action( 'wp_enqueue_scripts', 'welcart_basic_child_enqueue_styles', 9 );

該当ページを開いて真っ白になったらぶっ壊れたサインになるのでわかりやすい。

子テーマとして作っていくので、親テーマのディレクトリを引っ張らないように注意する。
パスをあらかじめ変数にしておけば間違えないし、わかりやすいかと思う。
ハンドル名に「child」とかを付けておけば見やすくていいですね。

一番注意すべきは依存関係の指定で、「array()」の部分。
ここに依存先のハンドル名を入れておけば、依存先の後で読み込まれるようになる。
よくあるとことではjQuery用のプラグインとか、今回のケースだと親テーマのstyle.cssとか、地味に順番を間違うとだるいことになる場面がある。

そんな感じで。