株式会社HAMWORKS
☝️

WordPressのサイトエディターで何ができるのかみていく【大項目】

2025/01/27に公開

バージョンが上がるごとにできることが増えていっている印象のサイトエディター。
実際どういうものが設定できるのかじっくり見てみました。

今回はサイトエディターに遷移したときに表示される

  • ナビゲーション
  • スタイル
  • 固定ページ
  • テンプレート
  • パターン

に触れます。一部の項目は別の記事で詳しく深掘りする予定です。

なお、この検証はWordPress 6.7.1 (Twenty Twenty-Five テーマ)で行っています。

サイトエディタートップ

[外観]->[エディター]をクリックすると表示される画面です。

左のメニューをクリックすれば各設定画面に遷移し、右のプレビューをクリックするとフロントページのテンプレートの変更画面に遷移します。

右のサイト表示のテンプレートはフロントページで固定なの?

これはTT-5を使っているのでフロントページのテンプレートに遷移していますが、TT-4だとブログホームのテンプレートが選択されていました。Create Block Themeで空のテーマを入れた場合はインデックスのテンプレートだったので、ここはトップページに適用されるテンプレートの変更画面になるみたいですね。


空テーマの場合

ナビゲーション

左メニューの上から順番に見ていきます。

ナビゲーションを選択すると、現在サイトで作成済みのナビゲーションが表示されます。
なお、この画面から新規にナビゲーションを作成することはできないようです。

任意のナビゲーションをクリックすると、そのナビゲーションの変更画面に遷移します。
左のメニュー名の横の縦ドット(何て言うんだろうこれ)をクリックすると、ナビゲーションの名前を変えたり削除したりするメニューが出ます。

右のナビゲーションのプレビューをクリックすると、見慣れたブロック編集画面になります。ここで項目の変更やデザインの調整ができます。


文字サイズを変えてみた例

固定ページリスト

固定ページリストを出した状態でメニューの項目をクリックするとこのような項目が出ます。

このナビゲーションメニューはサイトのページを表示します。編集することで、ページを追加、削除、並び替えできます。ただし、新規ページは自動的に追加されなくなりました。

これで「編集」をクリックすると、固定ページリストが解除されます。

あえて固定ページリストで一旦挿入->解除で項目並べ替えたり消したりっていうメニューの編集の仕方もできそうですね。メニューに入れる固定ページの数が多ければ多いほど有用かも。

スタイル

スタイルバリエーションが設定されている場合

スタイルバリエーションがテーマで実装されている場合に表示されます。

https://developer.wordpress.org/themes/global-settings-and-styles/style-variations/

TT-5ではこのように用意されているようです。

https://github.com/WordPress/twentytwentyfive/tree/trunk/styles

一番上がプリセットになっているようで、選択するとパレットとタイポグラフィ両方が変更されます。

パレットとタイポグラフィを別々に選択して、ちょっと雰囲気を変えることもできます。

このパレットとタイポグラフィもやろうと思ったら別途用意が必要です。これはTT-5のリポジトリがかなり参考になると思います。(さすがデフォルトテーマ!)

さらに詳しくスタイルを調整したい場合は、左メニューの「スタイル」という文字の横にあるえんぴつマークから遷移できます。


慣れてないと見落としがち

実際私はあまりスタイルバリエーションを作ることがなくて右のサイトプレビュークリックしたらスタイル調整画面にいくんだろう、と思ったらそうじゃなかったのでちょっと混乱しました。

ちなみに、えんぴつマークの左にある目のマークをクリックするとスタイルブックが表示されます。


ブロックにどんなスタイルがあたっているのかが見れる画面になる

スタイルブックを表示した状態で右のプレビューをクリックすると、えんぴつマークと同様スタイル調整画面に遷移します。

スタイルバリエーションが設定されていない場合

スタイルをクリックすると以下の画面に遷移します。

右のパネルにタイポグラフィや色、背景、影、レイアウトなどが表示されます。スタイルバリエーションよりひとつここにアクセスするための工程が短くなる感じですね。

スタイルに関しては冒頭でも触れましたが項目がかなりあるので別のブログ記事に分けて触れていく予定です。

固定ページ

WPの管理画面にある固定ページと同じものです。

真ん中のメニュー(という表現でいいかな?)の固定ページをクリックするとプレビューが切り替わります。

切り替えた状態で右のプレビューをクリックすると、固定ページの編集画面に遷移します。
選択していないとフロントページのテンプレート編集画面に遷移するので注意してください。

この画面はスタイルの編集でもテンプレートの編集でもありません。完全に固定ページの編集画面です。
ちなみに下の画像はいつもの固定ページの編集画面です。

ヘッダーフッターがなくてコンテンツに集中できそうなのはこっちですかね?サイト構築中でもなければエディターからアクセスすることは(少なくとも今のバージョンでは)なさそう。

テンプレート

いわゆるテーマファイルです。プレビューに表示されているのは、作成済みのテンプレート一覧です。
テンプレートをクリックすることでテンプレートの編集画面に遷移します。


404の編集画面

右上の[新規テンプレートを追加]から、新しいテンプレートを作ることもできます。
いちいち手元でhtmlファイルを作らなくていいので便利ですね。

テンプレートも別のブログでもう少し深掘りしてみようと思っています。

パターン

投稿や固定ページで使えるデザインパターンを管理するページです。
テーマ側で用意されているものはロックされて管理画面から編集できません。

自分でWP上で作成したものに限り編集等が可能です。テーマ側で用意されているものは複製のみが可能な状態です。

ちなみに、テンプレートパーツもこちらに含まれます。(いつもテンプレートと勘違いして「ないなー」ってなってしまう)

テンプレートパーツに関してはどこで作成されていても編集可能です。

株式会社HAMWORKS
株式会社HAMWORKS

Discussion