フルサイト編集で実際にサイトを作ってみよう！

フルサイト編集機能について

  • ブロックエディターでの編集をサイト全体に拡張する機能。
  • コレまでのWordPressではテーマの編集においてはPHPでの作業が不可欠でした。
  • それらがPHPを触らずに、WordPressの管理画面から行えるようなりました。
  • ここでは軽く、フルサイト編集に触れてみます。

イベント中の質問について

  • ひとまずZoomのチャットに質問があればどんどん投げておいて下さい。
  • 折を見て触れるか、最後にまとめてお答えします。

クラシックテーマとブロックテーマとハイブリッドテーマ

  • フルサイト編集という新しい機能が追加された結果、それをわかりやすくするために名称の変更があります。
  • 既存のテーマのことをクラシックテーマと呼ぶようになります。
  • そしてフルサイト編集に対応したテーマをブロックテーマと呼びます。
  • またその中間で、クラシックテーマだがtheme.jsonを含むものはハイブリットテーマと呼ばれています。こちらは非公式かも

テンプレートとしてHTMLファイルが利用されるブロックテーマTwenty Twenty-Threeの紹介

  • ブロックテーマにおいて特徴的なのは構成ファイルの多くがHTMLファイルということです。
  • ファイルの中にはブロックを呼び出すためのコメントが多く含まれます。
  • ではこういったテーマをどのように開発するのか？　こちらを今回はご紹介します。
    • その実、これらを基本的に殆ど管理画面から操作で、テーマを編集します。

theme.jsonについて

Create Block Themeプラグインについて

  • こちらは、ブロックテーマを独自開発するときの鍵となるプラグインです。
  • 名前にTheme（テーマ）が入っているので、わかりにくいですが、プラグインです。
  • このプラグインは、フルサイト編集で加えられた変更をテンプレートファイルとして保存します。
    • この機能がなぜ鍵なのかを説明します。

テーマ編集の保存場所

  • フルサイト編集を実施した際、その変更はDBに保存されます。
  • 一人で作業している分には良いですが、複数人で作業する場合には、常にDBを共有しなければならず手間です。
  • またDB管理ではバージョン管理が実施できません。
    • （フルサイト編集にリビジョン機能がつき、今後も便利になる未来は有りそうですが。）
  • そこで、このCreate Block ThemeはDBに加えられた内容をファイルとして書き出し、既存テーマを上書きします。
  • このため、テーマファイル共有することができ、またバージョン管理が実現できます。

フルサイト編集の実演

色々とお伝えしましたが、やってみるのが一番わかり易いと思います。今回は時間の都合上、私がメインで進めすが、ぜひみなさんもやってみてください。

本日作るサイトの完成形

 テーマ編集前のWordPressの設定共有

  • InstaWPというワンクリックで簡単に開発環境が立ち上がる最近お気に入りのサービスを利用しています。
  • コア
    • WordPress6.3を利用しています。
  • テーマ
    • Create Block Themeで空のテーマを作成し開発を始めます。
    • 外観より、 空テーマを作成を選択
  • プラグイン
    • Create Block Theme
      • 編集データのテーマファイルへの書き出し
    • Disable Comments
      • コメントの一括停止
    • Gutenberg（新しい機能を試したくて入れていますが。なくても大丈夫です）
      • ブロックエディタ
    • Safe SVG
      • SVG画像のアップロードの許容
    • Snow Monkey Block
      • ブロックの拡張
    • Snow Monkey Forms
      • メールフォーム
    • VK Dynamic If Block
      • 条件を利用して、ブロックの表示非表示を実施
    • WordPress Beta Tester
      • WordPressのコア機能についてリリース前のベータ版をテストする
    • Yoast Duplicate Post
      • 記事の複製
    • Yoast SEO
      • OGPなどの設定のために利用

フルサイト編集実演

作業の流れ

まだ私自身も試行錯誤中ですが、現時点ではこの流れが良いかと思っています。

  • サイト全体の設定（theme.json）
  • コンテンツの追加（ナビゲーション設定などもあるため、空でも入れておくとよい）
  • パーツテンプレートの作成（ヘッダー・フッター）
  • テンプレートの作成（簡単なものから）
  • CSSの調整（全体 or ブロック個別）

既存で生きる知識

  • テンプレート階層
    • どのテンプレートがどこで利用されるか
    • どのテンプレートを作るべきか
  • メインクエリとサブクエリ
    • 該当のページで取得できるデータかどうか

現在の状況

  • コンテンツは入っている状態
  • 今回はフルサイト編集の流れを掴んでもらうようなイメージです。

サイト全体の設定

  • 利用フォントの読み込み
    • Google fontsより
      • Zen Old Minchoの 400と600を取得
  • タイポグラフィ
    • フォント
      • textにZen Old Minchoを設定
      • 最上部のテキストにおいてフォントを選ぶと、その他の設定のデフォルトがその設定になります。
      • リンクは下線無し
    • フォントサイズ設定
      • 今回pxでしますが。お好みで。
        • h1 : 32
        • h2 : 24
        • h3 : 20
  • 色
    • 今後使い回すためのカラーパレットを設定します。
    • その色を各種文字に設定
  • レイアウト
    • コンテンツ 1080
    • 幅広 1440
  • この時点で一旦テーマを上書き保存
    • 現時点で、ここまでの設定は、DBにしか有りません。
    • 上書き保存することでテーマファイルとして書き出されます。
    • ここまでの設定がデフォルトの設定となりした。
  • theme.jsonをみてみます。
    • 追加されているのがわかります。

ヘッダー テンプレートパーツ編集

  • サイト名
  • ナビゲーション設定
  • 幅は幅広にする

フッター  テンプレートパーツ編集

  • ３カラムに設定
  • ナビゲーションブロックの活用
  • コピーライトを書き換え
  • 上部に画像の配置

パーツテンプレート（ライブラリ）とテンプレート

  • ベースには次から作っていくテンプレートがあります。
  • WordPressは表示するURLごとに利用するテンプレートが自動的に決定し、そこからパーツテンプレートをさらに呼び出して表示する機能を持っています。
  • この機能はテンプレート階層と呼ばれます。くわしくはこちら
  • パーツテンプレートでは使い回すものと登録します。今回は以下
    • ヘッダー
    • フッター

詳細ページ テンプレート編集

  • index
    • 既存のものはヘッダー・フッター以外削除
    • 全体のフレーム
      • グループを設定しmainとしておく
  • 404
    • 全体のフレームをindexからコピー
    • entry-header
      • 見出し
    • entry-content
      • 段落
  • 固定ページ
    • 全体のフレームをindexからコピー
    • entry-header
      • タイトル
    • 全幅をコンテンツ部では使いたいので
      • コンテンツ幅を使用するインナーブロックのチェックを外します
    • entry-content
      • 投稿コンテンツ
  • 投稿詳細ページ（個別投稿）
    • 全体のフレームをindexからコピー
    • entry-header
      • タイトル
    • entry-content
      • 投稿コンテンツ
    • 投稿一覧へのリンクボタン

一覧ページ

  • すべてのアーカイブ
    • entry-header
      • アーカイブタイトル ← タイトルではない
    • entry-content
      • クエリーループ
        • クエリーループのデフォルトのサンプルより近いものを選んで調整
        • ページネーションも追加する。

トップページ（フロントページ）

  • TOPページ
    • 考えるべきこと
      • ページ編集から対応するか
      • サイト編集から対応するか
    • クライアントのことを考えると
      • テーマ編集は制作サイトが担当し、ページや投稿の編集は運営サイドが担当が良いと考えました。

CSSの追加

  • 後からCSSをあてて調整していきます。
  • body classにslugが入っていたほうが設定しやすかったのでfuncitons.phpに以下を追加しています。
<?php

/**

 * body classにスラッグを追加

 *

 * @param string $classes 追加のクラス名

 */

function add_slug_body_class( $classes ) {

    global $post;

    if ( isset( $post ) ) {

    $classes[] = $post->post_type . '-' . $post->post_name;

    }

    return $classes;

}

add_filter( 'body_class', 'add_slug_body_class' );

まとめ

  • ざっとですが、ほぼ管理画面からだけで、テーマが作れるということがご理解いただけましたでしょうか。
  • ぜひ使ってみてください！