フルサイトエディタ

最近の WordPress はブロックエディタに続き、フルサイトエディタも(おそらく)標準にするようです。
これまでのテーマ編集には専門知識が必要でしたが、少しずつ一般ユーザにも解放されています。

とは言ってもまだ過渡期にあるため専門知識がある方が有利だと思います。ただテーマを選ぶだけでは制作者としてはもの足りないのでカスタマイズしていきましょう。

制作にあたり下記サイトをターゲットにします。
※クライアントさんに掲載許可をいただいています

写真はカメラマンさんの著作物なので使用不可。
また、JavaScript を使用していますがまだ学んでいないということで除外します。
完全再現ではなく、テーマとして雰囲気を再現するのを目標にします。

カラースキーム

サイト全体の印象を決めるカラースキームを設定してみましょう。

サンプルでの指定色 (コピペ用)

ベース: EDEBE6
コントラスト: 1E1E1E
アクセント: 9DA300
アクセント / 2: 8E9302

設定したパレットからテーマに適用していきます。

サンプルの設定例

• テキスト → コントラスト
• 背景 → ベース
• リンク → デフォルト: アクセント, ホバー: アクセント / 2
• ボタン → テキスト: Base/Two, 背景: アクセント
• 見出し → テキスト: アクセント

これで全体的なカラースキームが設定完了、保存します。
この状態で一度サイトを確認してみましょう。

タイポグラフィ

つぎは文字フォントを設定します。
ひとつ前のバージョンからフォントの管理ができるようになりました。(今年の4月)

日本語の場合、フリーで使える Noto Sans JP がよく使われます。
Noto Sans Japanese – Google Fonts

基本的に装飾的な文字以外はゴシック系が読みやすいため採用されます。

※参考サイトでは印象優先で明朝系フォントを採用しており、Noto Serif JP を例に進めます

日本語フォントはデータが大きいので入れすぎないように

インストールが終わったらフォントライブラリを閉じます。

保存してサイトを確認します。
細かい設定はとりあえずここでは置いときます。

ヘッダロゴ

次にヘッダやフッタなどの共通パーツの設定をしていきます。
サイト全体を通して繰り返し使用するものは「パターン」を利用します。

パターンを変更すればサイト全体で使用しているパーツが一括更新されます。

ヘッダをロゴのみの表示に変更してみます。

サンプルで使用したロゴ (ダウンロード用)

いったん保存、確認します。

グローバルナビゲーション

グローバルナビゲーション(メインとなるメニュー)を変更します。
今度はテーマエディタから「ナビゲーション」へ移動します。

現時点ではページが他にないのでグローバルナビゲーションはいったん保存。
変更をサイトで確認しましょう。

キービジュアル

スライドは JavaScript 必須なので簡易的に固定のビジュアルを入れてみます。
ページの一番上になるようにブロックを追加します。

段落ブロックに /cover と入力して「カバー画像」ブロックに変換します。

キービジュアル (ダウンロード用)

とりあえず講座名を入れてみます。

群馬県フロントエンドエンジニア育成講座
MAITSURU project 2024

外部リンク URL (コピペ用)

https://digijyo.gunma.jp/

いったん保存してページを確認します。

CSS

いよいよ学んだことを活かしていきましょう。

注意

提供した環境では追加 CSS が使えませんでした。
プラグインを導入していますので、そちらを利用してください。

ここに直接記述していくのはさすがに不安なので、Visual Studio Code などのテキストエディタで制作していくのがいいと思います。
(うっかりブラウザを閉じたらと考えると…)

画面共有の都合上、講座ではブラウザに直接追記していきます

ヘッダを重ねる (CSS)

キービジュアルにヘッダを重ねます。
サイトを検証して、<header> タグ、カバー画像に z-index: 1 が指定されていることを確認。

プレビュー画面で検証しないように注意(タグの構造が変わるため)

header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100;
}

ヘッダの背景色はテーマで指定してあるようなので「パターン」から編集します。

ヘッダについてはここまででいったん保存して確認。

グローバルナビゲーション (CSS)

グローバルナビゲーションのリンクについては他のスタイルが優先されてしまうようなので、上書きする。
ついでにホバーの時に下線を消す指定も入れておきます。
ここでの header のスタイルは下記のようになりました。

header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 2;

    .wp-block-navigation .wp-block-navigation-item a {
        color: white;

        &:hover {
            color: var(--wp--preset--color--accent);
            text-decoration: none;
        }
    }
}

スクロールで背景を黒くするのは JavaScript が必要
mix-blend-mode: difference; でアレンジしてもよいかも

キービジュアルのサイズ (CSS)

常時画面いっぱいにしたいので先ほど指定したクラスを使って vw, vh で指定。

.key-visual {
    width: 100vw;
    height: 100vh;
}

保存して確認。

文字サイズ

既にテーマでスタイルが設定してあるので、スタイルの優先度に注意しながら上書きしていきます。
(既存のテーマをベースにするので試行錯誤が必要)

大きい見出しは important 指定されてるので、CSS から上書きせずにテーマの設定を使います。
(公式のテーマだからといってお行儀が良いとは限らない)

参考サイトのキャッチは font-size: 2.6rem で指定、root の font-size は 16px、今回のベーステーマの twenty twenty-four の root のフォントも 16px なので、rem なら同じ指定で良さそうです

大きな見出しの部分はセンタリング指定になっているので左寄せにしておく。

小さい方のテキストは参考サイトでは下記のようなスタイルが指定してあります。
CSS から指定しやすいようにクラス属性をつけておきます。

font-family: "Libre Baskerville", serif;
font-size: 1.3rem;
font-style:italic
color: #f3f0f0;

小さいテキストの見出しを選択した状態で設定パネル(歯車アイコン)を開き、下部にある高度な設定でクラス属性が指定できます

「スタイル」の管理画面へ移動して「タイポグラフィ」から小さい見出し用のフォントを追加インストールします。

Libre baskerville で検索

リードテキスト (CSS)

WordPress 管理画面からはこの部分だけピンポイントでフォント指定できないので、CSS でスタイルを指定します。
(先の CSS に追記)

あわせてテキストが折り返さないようにします。

.key-visual {
    width: 100vw;
    height: 100vh;
    text-wrap: nowrap;

    .sub-lead-text {
        font-family: 'Libre Baskerville', serif;
        font-size: 1.3rem;
        font-style: italic;
        color: #f3f0f0;
    }
}

ただ、このままだとモバイルではみ出てしまいます。

参考サイトと文字数も異なり、フォントサイズを小さくしても読みにくい。

本来はデザイン段階で検討されているはずですが、今回は実装で対応します。
モバイルのときは改行をいれることで位置調整することにします。

対応方法は諸説あるので参考までに

テーマエディタに戻りテンプレートから大きい見出しを HTML に切り替えて修正します。

大きい見出しをビジュアル編集に戻して記事を保存します。

テキスト折り返し (CSS)

CSS に下記を追加します。
先ほど追記した <span> タグを display: block; にすることで意図した位置に改行を入れます。

ついでにサブリードのテキストを少し小さくします。

.key-visual {
    width: 100vw;
    height: 100vh;
    text-wrap: nowrap;

    .wp-block-cover__inner-container p:first-child span {
        display: block;
    }

    .sub-lead-text {
        font-family: 'Libre Baskerville', serif;
        font-size: 1rem;
        font-style: italic;
        color: #f3f0f0;
    }
}

p:first-child よりも管理画面からクラス属性を追加したほうがわかりやすい場合はそれでもOKです

パソコンのときは元の見栄えのほうが良いという場合はブレイクポイントで分けてもよいです。
(このために inline 要素である <span> を使用しました)

Twenty twnety-four のブレイクポイントが謎の 600px になっているので、それに合わせてみます。

ブレイクポイントは 640px, 766px, 1200px といった数値のほうがよく見かけます

.key-visual {
    width: 100vw;
    height: 100vh;
    text-wrap: nowrap;

    .wp-block-cover__inner-container p:first-child span {
        display: block;

        @media screen and (min-width: 600px) {
            display: inline;
        }
    }

    .sub-lead-text {
        font-family: 'Libre Baskerville', serif;
        font-size: 1rem;
        font-style: italic;
        color: #f3f0f0;

        @media screen and (min-width: 600px) {
            font-size: 1.3rem;
        }
    }
}

こんな感じで WordPress にスタイルを適用して、テーマだけでは実現できない独自デザインのサイトを構築していきます。

テンプレートと投稿の使い分け

ここまではテンプレートを編集してきました。
できればクライアントさんにはさわってほしくないものや特殊な構成でレイアウトが崩れてしまいそうなものはこちらに入れておいても良いと思います。

頻繁に更新する内容やクライアントさんが更新したい項目は、WordPress の投稿や固定ページにある方がお互いに都合が良いです。

テンプレートと投稿の棲み分けを少しだけふれておきます。

狙った場所にブロックを追加するのは難しいので「ドキュメント概観」やフッタの「パンくずリスト」をうまく使ってください

つかされた段落ブロックで /content と入力、または「+」ボタンから「コンテンツブロック」を追加します。

いったんテンプレートは保存して固定ページに移動します。

固定ページはダッシュボードからも編集できます。
運用時はこちらから操作するほうがメインになります。

固定ページにもテンプレートと同じ内容が登録されているので、調整していきます。
投稿のリスト表示はお知らせなどに使えるのでこれだけ残してあとは削除します。

下から２番目のブロックだけ残してあとは削除します。

お知らせの上に YouTube 動画を貼り付けてみます。

YouTube URL (コピペ用)

サンプルで使用した URL はこちら。

https://youtu.be/b0I62zVZwL4?si=4lFyNqEL1FCGnpLr

URL はボタンを押して確定してから情報を取りに行くことに注意。
リンクなども確定しないと保存できないことがよくあります。

パソコンサイズでは大きくなりがちなので CSS で調整します。

YouTube の幅を調整 (CSS)

埋め込みにはちょうど is-provider-youtube クラス属性がついているので、それを利用します。

.is-provider-youtube {
    max-width: 800px;
}

このような感じでもとからあるブロックをうまく使いながら、ポイントでカスタマイズしてサイトを構築していきます。

他にも色んな機能がありますが、今回の講座ではここまでとします。

おまけ

途中まで用意していたので、スライドの参考までに。
JavaScript はできることが増えるのでぜひ習得してください！
プログラムはルールが全く異なるのでみんな習得に時間がかかります、しぶとく続けましょう。

スライドショー (ライブラリとサンプル画像)

動きを入れるには JavaScript が必要になりますが、ライブラリを使って簡略化します。
プログラマであれば違うアプローチになりますが、PHP を使用しない方法で実現してみます。(多少強引ではありますが)

Getting Started With Swiper

スライド用画像をダウンロード

デフォルトで段落ブロックになります。
ズレた場合はドキュメント概観から Drag & Drop で移動可能です。

Swiper の設定をカスタムHTMLブロックへコピペします。
まずは CSS と JavaScript の読み込み。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

つづいてスライド本体となる画像を Swiper の指定に従い記述。
カスタム HTML ブロックへ先程の続きに追記。

div.swiper > div.swiper-wrapper > div.swiper-slide の階層構造になるように記述

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://sp-hp.com/wp-content/uploads/2024/10/slide-01.jpg"></div>
    <div class="swiper-slide"><img src="https://sp-hp.com/wp-content/uploads/2024/10/slide-02.jpg"></div>
    <div class="swiper-slide"><img src="https://sp-hp.com/wp-content/uploads/2024/10/slide-03.jpg"></div>
    <div class="swiper-slide"><img src="https://sp-hp.com/wp-content/uploads/2024/10/slide-04.jpg"></div>
    <div class="swiper-slide"><img src="https://sp-hp.com/wp-content/uploads/2024/10/slide-05.jpg"></div>
  </div>
</div>

画像は各自アップロードした URL に変えます。

最後に Swiper を実行する JavaScript を追記します。

<script>
const swiper = new Swiper('.swiper', {
  loop: true,
  effect: 'fade',
  speed: 2000,
  allowTouchMove: false,
  autoplay: {
    delay: 2500,
  },
});
</script>

<script>
const swiper = new Swiper('.swiper', {
  loop: true,
  effect: 'creative',
  speed: 2000,
  allowTouchMove: false,
  autoplay: {
    delay: 2500,
  },
  creativeEffect: {
    prev: {
      opacity: 0,
      scale: 1.2,
    },
    next: {
      opacity: 0,
    },
  }
});
</script>

参考

WordPressフルサイト編集の使用方法（徹底解説） ｜ Kinsta