WordPress、子テーマスタイルの適用について #2/2

スタイル適応の優先度

スタイル適応の優先度では、WordPress、子テーマスタイルの適用について #2/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

function wpqw_register_style_child()
{
    wp_register_style('top-swiper', get_stylesheet_directory_uri() . '/scss/css/hero.min.css', null);
    wp_register_style('content', get_stylesheet_directory_uri() . '/scss/css/contact.min.css', null);
    wp_register_style('originScss', get_stylesheet_directory_uri() . '/scss/css/orign.min.css', null);
    wp_register_style('indexScss', get_stylesheet_directory_uri() . '/scss/css/index.min.css', null);
    wp_register_style('tailwindCss', get_stylesheet_directory_uri() . '/tailwind/output.css', null);
}

function wpqw_add_stylesheet_child()
{
    wpqw_register_style_child();
    wp_enqueue_style('originScss');


    if (is_front_page()) {
        wp_enqueue_style('top-swiper');
    } elseif (is_single(1411)) {
        wp_enqueue_style('tailwindCss');
        wp_enqueue_style('content');
        wp_enqueue_style('indexScss');
        
    } elseif (is_category() || is_archive() || is_single() || is_page() || is_search()) {
        wp_enqueue_style('content');
        wp_enqueue_style('indexScss');
    }
}
add_action('wp_enqueue_scripts', 'wpqw_add_stylesheet_child', 11);

スタイル適応の優先度で押さえたいポイント

スタイル適応の優先度は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

add_action関数の特徴

add_action関数の特徴では、WordPress、子テーマスタイルの適用について #2/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

add_action()関数の第3引数は「優先度」として知られています。これは、特定のアクションフック（この場合はwp_enqueue_scripts）が発火したときに、複数の関数がそのアクションに関連付けられている場合、どの関数を先に実行するかを決定するためのものです。 優先度のデフォルト値は10です。この数字が小さいほど、関数は早く実行されます。つまり、優先度が10の関数は優先度が11の関数よりも先に実行されます。 優先度が10の場合 blog-childのスタイルシートが上に記述されていることがわかります。 優先度が11の場合 blog-childのスタイルシートが親テーマの下に配置されて、優先的に適応されることがわかります。

add_action関数の特徴で押さえたいポイント

add_action関数の特徴は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

add_action関数の特徴の確認方法

ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。

実装前に確認しておきたいこと

ここでは、WordPress、子テーマスタイルの適用についてを実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。 サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

WordPress、子テーマスタイルの適用についてが期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。

まとめ