このブログの作り方⑦ – 詰まったポイント集（コード編）

実際に詰まったポイント

今回は、ブログ制作時に実際に詰まったポイントを紹介します。

作ってみると、思っている以上に小さな落とし穴が出てきます。

これからWordPressを触る方の参考になれば嬉しいです。

まずは、コード周りで大きく詰まったポイントから。

このレイアウトにしたいのにできない
追加CSS、functions.php
現在ページ取得
モバイル表示の意図しない挙動

順番に説明していきます。

1. このレイアウトにしたいのにできない

作っていると、

「この形にしたいのにできない」
「この動きを再現したいのに分からない」

という瞬間が必ず出てきます。

最初は自分で色々触ってみるのも大事です。
触っているうちに知識は確実に増えていきます。

ただ、詰まり続けると正直しんどいです。
この疲れが、作業速度の低下や中断の原因になります。

なので、分からないと感じたら、早めに調べてしまうのがおすすめです。

YouTubeや生成AI、技術ブログなど、頼れるものはどんどん頼っていいと思っています。

調べて出てきた情報を、そのまま使うのではなく、自分のサイト用に調整していく。
この工程が、少しずつ自分の手札になります。

また、最初の段階では調べ物が多くなりがちなので、1~2時間ほど基礎動画を見るのも効果的です。

私もブロックテーマの基礎を1本見るだけで、制作中の迷いがかなり減りました。

2. 追加CSS、functions.php

ブロックテーマだけでは実現できない表現もあります。
そういう時に使えるのが、追加CSSやfunctions.phpです。

コードをあまり触ったことがない方には、少し抵抗があるかもしれませんが、かなり扱いやすいので、このタイミングにぜひ触ってみることをおすすめします。

追加CSS

個人的には、まず追加CSSをおすすめします。

既存のHTMLに対してスタイルを当てられるため、テーマ本体を大きく触らずに調整できます。

追加したCSSだけを管理できるので、可読性も高く、扱いやすい印象です。
「少し見た目を整えたい」程度であれば、ほとんどこれで対応できます。

functions.php

もう一段踏み込んだ処理をしたいときに使います。

PHPで処理を書けるので、サイト全体に関わる動きを追加できます。
ブロックテーマでは最初から存在しない場合もあるため、新規で作成します。

そして重要なのは、ファイル名。

「functions.php でないと動きません！」

私は「function.php」と s を付け忘れて、20分以上エラーと戦いました。
単純なミスほど、気づきにくいです。

3. 現在ページ取得

ヘッダーで、現在いるページに下線をつける処理に苦戦しました。

固定ページの場合、is-current-custom というクラスが自動で付きます。

なので比較的簡単ですが、カテゴリーページにはそのクラスが付きません。
そのため、別の方法で現在ページを判定する必要がありました。

最終的に、JavaScriptで現在のURLを取得し、ナビゲーションのリンクと比較する方法を使いました。

navigation-current.js を作成し、functions.phpから読み込む形です。

この方法で、現在ページのURLとリンクURLを比較し、一致すればクラスを付与できます。

ここは正直、思ったより時間を使いましたが、仕組みが理解できたのは収穫でした。

具体的なコード

document.addEventListener("DOMContentLoaded", function() {
  // パスを取得して、前処理
  const currentPath = window.location.pathname.replace(/\/+$/, "");
  
  document.querySelectorAll('.wp-block-navigation a').forEach(link => {
    const linkPath = new URL(link.href).pathname.replace(/\/+$/, "");

    // トップページ専用判定
    if (linkPath === "") {
      if (currentPath === "") {
        link.classList.add("is-current-custom");
      }
      return;
    }

    // それ以外
    if (
      currentPath === linkPath ||
      currentPath.startsWith(linkPath + "/")
    ) {
      link.classList.add("is-current-custom");
    }
  });
});