【WordPress ブロックテーマ自作⑩】完結編「テーマを仕上げる」

総仕上げのステップです。

テーマの「身分証」と「顔を整える」

AD – 読み進める前のひとやすみ

テーマの「身分証」を整える(style.css)

テーマの名前や作者情報を定義します。管理画面に表示されます。

/*
Theme Name: my-theme ← テーマ名
Author: kk ← あなたの名前
Description: Simple blog theme
Version: 1.0
License: GNU General Public License v2 or later
*/

※ License:「自由に使っていいけど、同じ自由を次の人にも渡してね」というライセンスです。

テーマの「顔」を作る(screenshot.png)

管理画面の「テーマ」で表示される画像です。

自分のサイトをブラウザで表示して、スクリーンショットを撮るだけでOK。ファイル名を間違えないようにしましょう。

ファイル名 screenshot.png
推奨サイズ 1200 × 900 px
保存場所 テーマフォルダの直下(ルート)
My Theme
1200 x 900

theme.json で定義する 4つの場所(おすすめ)

AD – 読み進める前のひとやすみ

theme.json に書いておけば、テーマをインストールした瞬間にサイトの基本設定が出来上がった状態になります。

settings/typography/(フォントサイズ)

フォントサイズが13px → 20px → 36px → 42pxでは使い勝手がわるいので"defaultFontSizes": falseで使わない設定にして、実用的なサイズに変更します。

"typography": {
  "defaultFontSizes": false,   
  "fontSizes": [
     { "slug": "small", "size": "14px", "name": "小" },
     { "slug": "medium", "size": "17px", "name": "中" },
     { "slug": "large", "size": "20px", "name": "大" },
     { "slug": "x-large", "size": "24px", "name": "特大" }
  ] 
}

settings/typography/(フォント)

なにも指定しないと、ブラウザ任せになるので、最低限のセリフ(明朝体)とサンセリフ(ゴシック体)を定義しておきましょう。
フォントを変えたい「段落」や「見出し」ブロックをクリックしてそこだけ変更もできます。

"typography": {
   "fontFamilies": [
      {
        "fontFamily": "\"Noto Sans JP\", sans-serif",
        "name": "ゴシック体",
        "slug": "sans-serif"
      },
      {
        "fontFamily": "\"Noto Serif JP\", serif",
        "name": "明朝体",
        "slug": "serif"
      }
    ]
  }

styles/(背景色・フォント)

サイト全体のテキストの色と背景色を指定します。薄いグレーを指定すると高級感が出ます。
フォントのデフォルトは、ゴシック体にしています。

"styles": { 
  "color": {   
    "background": "var(--wp--preset--color--gray-light)" ,
    "text": "var(--wp--preset--color--base)" 
   },
  "typography": {
      "fontFamily": "var(--wp--preset--font-family--sans-serif)"
    }
 }

styles/elements/(リンクの色)

パレットで決めた「サブカラー」などをリンクに適用して、ホバー時のエフェクトも追加しておきます。

 "elements": {
    "link": {
      "color": {
        "text": "var(--wp--preset--color--secondary)"
      },
      "typography": {
        "textDecoration": "none"
      },
      ":hover": {
        "color": {
          "text": "var(--wp--preset--color--accent)"
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
    }
  }
上書き用(全体のコードです)
{
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    },
    "color": {
      "defaultPalette": false,
      "palette": [
        { "slug": "primary",    "color": "#4a7c7e", "name": "メイン" },
        { "slug": "secondary",  "color": "#c8956c", "name": "サブ" },
        { "slug": "accent",     "color": "#e8b4a0", "name": "アクセント" },
        { "slug": "base",       "color": "#333333", "name": "ベーステキスト" },
        { "slug": "white",      "color": "#ffffff", "name": "白" },
        { "slug": "gray-light", "color": "#f8f9fa", "name": "薄灰(背景)" },
        { "slug": "gray-medium","color": "#e9ecef", "name": "中灰(枠線)" },
        { "slug": "ui-info",    "color": "#eef7f8", "name": "情報" },
        { "slug": "ui-success", "color": "#eff3ef", "name": "おすすめ" },
        { "slug": "ui-warning", "color": "#fcf8ed", "name": "注意" },
        { "slug": "ui-danger",  "color": "#f9efee", "name": "危険" }
      ]
    },
    "typography": {
      "defaultFontSizes": false,
      "fontSizes": [
        { "slug": "small", "size": "14px", "name": "小" },
        { "slug": "medium", "size": "17px", "name": "中" },
        { "slug": "large", "size": "20px", "name": "大" },
        { "slug": "x-large", "size": "24px", "name": "特大" }
      ],
      "fontFamilies": [
        {
          "fontFamily": "\"Noto Sans JP\", sans-serif",
          "name": "ゴシック体",
          "slug": "sans-serif"
        },
        {
          "fontFamily": "\"Noto Serif JP\", serif",
          "name": "明朝体",
          "slug": "serif"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--gray-light)",
      "text": "var(--wp--preset--color--base)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--sans-serif)"
    },
    "spacing": {
      "padding": {
        "top": "0px",
        "right": "20px",
        "bottom": "0px",
        "left": "20px"
      }
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--secondary)"
        },
        "typography": {
          "textDecoration": "none"
        },
        ":hover": {
          "color": {
            "text": "var(--wp--preset--color--accent)"
          },
          "typography": {
            "textDecoration": "underline"
          }
        }
      }
    }
  },
  "templateParts": [
    { "name": "header", "title": "ヘッダー", "area": "header" },
    { "name": "footer", "title": "フッター", "area": "footer" },
    { "name": "sidebar", "title": "サイドバー", "area": "uncategorized" }
  ]
}

アーカイブ・フロントページ・404ページについて

AD – 読み進める前のひとやすみ
archive.html アーカイブ(記事一覧)

index.html のコードをそのまま流用して作ってみましょう。クエリループブロックさえ入っていれば、あとは自分の好きなデザインで一覧を表示させるだけでOKです。

front-page.html フロントページ(サイトの看板)

ここはサイトの顔です。通常の投稿ページを表示させず(コンテンツブロックを入れず)、大きなバナー画像や、特定のカテゴリーだけを集めたカスタムクエリループを並べるなど、自由な発想で構成できます。

404.html 404ページ(迷子センター)

「ページが見つかりません」の時に出る場所です。検索ブロックを置いて「こっちで探してみてね」と案内したり、ちょっと遊び心のあるイラストを置いたりと、読者をガッカリさせない演出を考えてみましょう。

これらのファイルがなくても index.html が身代わりになってくれるので、サイトが壊れることはありません。こだわりたくなった時に1つずつ追加して、ゆっくり自分のサイトを育ててみてください。

💡 AI × HTMLブロック活用術
ブロックだけではどうしても実現できない「ちょっと凝ったデザイン」や「特殊な動き」を加えたい時、最強の味方になるのが「カスタムHTMLブロック」です。CSSもJavaScriptも埋め込めるので思いのままです。

🛠 カスタムHTMLブロックの使い方イメージ

  1. AIに「WordPressで使えるおしゃれな404ページ用のHTMLとCSSを書いて」と頼む
  2. 生成されたコードをコピーする
  3. エディターで「カスタムHTMLブロック」を追加して貼り付ける
  4. 「プレビュー」を押して、動いたら完成!

本番前のチェック

AD – 読み進める前のひとやすみ

手元のバックアップ

テーマフォルダはFTPを使ってダウンロード、または手元ファイルにコピペしておくと安心です。

テスト投稿の整理

不要な「Hello World!」などのテスト記事を削除または下書きにしましょう。

ログイン制限の解除

functions.phpに書いたコードを削除して、一般ユーザーがサイトをみられるようにする。

<?php

ナビゲーションの整備

読者がサイトを歩き回れるように「地図(メニュー)」を整備しましょう。

WordPressナビゲーションブロック攻略|UIの変化に惑わされない「考え方」の基本 目次ナビゲーションブロックは「中身が入れ替わる箱」と考えるメニュー選択:2つの組み立てルート「リスト」と「リンク」の違いスマホ表示(オーバーレイ)の正体コラム:「メニュー選択」はどこ? WordPressのバージョンによ […]

CSSを一行も書かずに、ブロックテーマが完成しました。でもこれは「完成」であり「スタート」です。記事を書きながら、少しずつ自分好みに育てていってください😊

最後まで読んでいただき、ありがとうございました。
おつかれさまでした 🍵

スポンサーリンク