見出し画像

【WordPress Tips】the_category関数の引数$separatorが空だとul>liの入れ子が増える

実は需要が多い「WordPressを使ったWebサイト作成」案件。
そのタイプの案件受注を目指して、WordPressテーマの作り方を学んでいました。

※今回の前提知識:PHP…というかプログラム言語の超基本を知っていること。知らないと「変数とか関数、引数(ひきすう)って何者よ!?」となる可能性があります。

さて、学習のため「WordPressで企業サイトを作ってみよう!」というサイトで実際にテーマを作っている時、the_category関数の引数でつまづきました。

まさか、引数を入れる'(シングルクォーテーション:文字列を渡そうとしている)で囲まれた部分が空かどうかで挙動が変わるとは…🙀

the_category('');←シングルクォーテーションで囲まれてる部分の正体=引数$separator

実は、この引数$separatorで渡す値=シングルクォーテーションで囲まれた部分=を使って、出力したカテゴリを区切ることになっています(正確には渡せる引数が3つありますが、1つだけだと最初の引数である区切り文字$separatorだけ設定したことになるため)。

ここで不思議な事に気づきました。
シングルクォーテーションの間に何も入れない場合と入れた場合で、出力されるHTMLタグが明確に異なっていたのです。

引数$separatorに渡した値が半角スペースの場合

<テーマに記載したコード>
記事内容を出力するためのループ処理内にthe_category関数を記載

<?php while( have_posts() ): the_post(); ?>
    <li>
        <time class="post-news-time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time>
        <?php the_category(' '); ?>
// シングルクォーテーションの中に半角スペースが入っている
        <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    </li>
<?php endwhile; ?>

<実際に出力されるコード>

<li>
    <time class="post-news-time" datetime="2020-01-13">2020年1月13日</time>
    <a href="カテゴリへのリンク" rel="category">カテゴリ+半角スペース</a>
    <a href="記事のpermalink">記事のタイトル</a>
</li>

引数$separatorが空=シングルクォーテーションの間になにもない場合

ただ、the_category関数の引数が空(the_category('');)になっただけなのに…。

<li>
    <time class="post-news-time" datetime="2020-01-13">2020年1月13日</time>
    <ul class="post-categories">
        <li>
            <a href="カテゴリへのリンク" rel="category">カテゴリ</a>
        </li>
    </ul>
    <a href="記事のpermalink">記事のタイトル</a>
</li>

なんと、中にulタグの入れ子が作られてしまいます。

謎の入れ子が作られる理由

the_category関数の処理がそうなっているからです。

the_category関数を含んでいるコードファイル「category-template.php」の157行目に「$thelist」という変数が設定されています。

$separatorが空の場合に設定される内容が158行目以降に書かれていて、それがまさに前述のコードそのまんまです。

この$thelist変数の中身をthe_category関数が使って書き出しています。
ちなみに$separatorに何か値(文字列)が入っているときはul&liタグを出力しません。

これに気づかなかったせいで、指示通りに作ったつもりでも想定されるクラスが適用されませんでした。
まさかシングルクォーテーションの中に空白を入れ忘れただけでul>liタグの入れ子が1つ増えてるとは思わなかった…。

頂いたサポートはチャオちゅーる購入…じゃなくて、営業活動など仕事で必要なものに使わせていただきます。 フリーランスの仕事が軌道に乗ってきたら、母親になにかプレゼントでもします。あるいは猫様をお迎えするか。