WorPressは更新作業をダッシュボードで完結させることができ、クライアントが自分で自由にコンテンツを更新することができます。そうなってくるとペライチページも同じように更新したくなってきますよね。Gutenbergのブロックを使えば可能なんじゃないか？という気がしたのでやってみた。
【目次】
CMS（WordPress）とペライチページ
ペライチページは更新が大変
CMS（WordPress）の更新はダッシュボードでできます。
- 投稿と固定ページを追加・編集できる
- ヘッダー、フッター、サイドバーなどのページを超えた共通パーツもウィジェットで編集できる
- メニューをカスタムメニューで一気に変更できる
- 外観のテーマのカスタマイズができる
- プラグインで機能を追加できる
一方、静的HTMLページの更新は、クライアントにとってハードルが高いです。
- テキストを一文字変更するにもコードの知識が必要
- 更新にはFTPソフトでWebサーバのディレクトリにアップする必要がある
- 複数ページある場合、メニューの変更は全ページに行う必要がある
そのため「ペライチ」や「Wix」「Jimdo」など、コードを書かずにWebサイトを作れるサービスも増えていました。
ただし、若干不安なのはデータがサービス元のサーバ上にあることです（サービス終了になる場合は対処が必要）。
ペライチページをGutenbergのブロック機能で作る！
できれば自前のサーバ上でWordPressのようにダッシュボードでペライチページを更新したいなぁ…。ん？待てよ！
もしかしてだけど、もしかしてだけど、WordPressのGutenbergのブロック機能を使えばペライチページが簡単に作れちゃうんじゃないの？？
「ブロック」は以前の記事でも触れたように、積み木のように自由に追加や入れ替えができるパーツです。
※参考：Smart Custom Fieldsの繰り返し（グループ）機能の出力タグ一覧 - クモのようにコツコツと
それではさっそくやってみましょう！
テーマの設定変更
テーマはTwenty nineteenで
WordPressの公式テーマ、2年ぶりに「Twenty nineteen」がでましたね！てっきりもう公式テーマが終わるんじゃないかと思ってました。たぶん2018年はGutenberg開発に集中していたんでしょうね。こちらを使っていきましょう。
「外観」の「テーマ」を開く。
「Twenty nineteen」を選択。
デフォルトのTOPページはこんな感じです。シンプルなテーマですね！
画面を狭めるとレスポンシブにも対応していることがわかります。
デフォルトではTopページには投稿一覧が表示されています。ペライチはそもそもページが一枚なのでこのレイアウトである必要はないです。さてどうするか。
TOPページを固定ページに変更
Topページの設定はダッシュボードで変えることができます。
「設定」の「表示設定」を開きます。
「ホームページ」は「最新の投稿」になっています。
これを「固定ページ」にします。
プルダウンで「Sample page」を選択。デフォルトで入っている固定ページです。
Topページを表示。先ほどと内容が変わりました！
先ほど「ホームページ」に指定した「固定ページ」の「Sample page」を見てみます。
Topページに表示されたテキストと一致してますね！
Topページがこの固定ページに変更されたということです。
アイキャッチでメインビジュアル設定
このままだと文字だけで寂しいですね。メインビジュアルが欲しいです。Twenty nineteenはアイキャッチがメインビジュアルになります。
固定ページ編集画面のサイドバー「アイキャッチ画像」に画像を指定します。
プレビューを見ると、おお！画面いっぱいにアイキャッチが。
スクロールすると本文部分の背景は白です。
メインビジュアルがちょうど画面の高さいっぱいになるようにCSSがheight: 100vhの指定になっているようです。
※参考：もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの？（オマケにvmin、vmaxも） - クモのようにコツコツと
これはあとでCSSで高さを70%や80%などに変更したいですね。
ページのテキストの打ち替え
ページのテキストがデフォルトの英語のままなので打ち替えて見ます。
日本語に打ち替えました。
ブロックの種類を見ると「見出し」「段落」「引用」の三種類でした。
プレビュー画面。テキストが打ち替わりました！
フッターのウィジェットを削除
画面をさらにスクロールするとフッターにウィジェットがたくさんあります。
これらはどれも複数ページのサイトで有用なパーツで、今回のペライチページでは不要ですね。。
「外観」の「ウィジェット」を開きます。
「Footer」の中にウィジェットがたくさん入ってます。
え〜い、全部削除だ！！
プレビュー画面。ウィジェットが消え去りました！
カスタムメニュー（今回は不要）
ちなみに同じ「外観」の中に「メニュー」があります。開いてみると…
カスタムメニューです。中身は未設定。
テーマによってはfunctions.phpに追記しないと有効にならない機能ですがTwenty nineteenでは最初から有効です！
まあ今回はページ遷移がないのでこのまま未設定でいきます。
テーマカスタマイズ
次にテーマをカスタマイズしてみましょう。「外観」の「カスタマイズ」を開きます。
サイドバー付きのプレビュー画面になります。要素の所々に鉛筆アイコンが。
クリックするとカスタムできる項目が表示されます。
ロゴ、サイトタイトル、キャッチフレーズを変更。
プレビュー画面に反映されました！
それにしてもメインビジュアルの青は強いですね。この色の設定は「Primary color」です。
「Apply a filter〜」のところのチェックを外すと…
青みが取れました！
それでもまだ濃いいですけどね…。あとでCSSで調整しましょう。
プレビュー画面
カスタマイズが反映されています！
ブロック編集（基本編）
ここからはブロックを編集していきます。まずは基本編！
画像ブロック
ブロックとブロックの間の「＋」アイコンを押すとブロック選択のツールチップが現れます。
「画像」ブロックを選択。
画像をアップ、またはメディアから指定できるブロックです。
画像を指定
プレビュー画面
画像が表示されました！
このようにブロックは好きなところに挿入できます。あとからドラッグで入れ替えも可能です！
見出しブロック、段落ブロック
次はテキスト系を追加してみましょう。「見出し」ブロックを選択。
見出しにテキストを入力。
次に「段落」ブロックを追加。
段落にテキストを入力。
プレビュー画面。見出しとテキストが追加されました！
これは最も良く使う機能だと思います！
ギャラリーブロック
画像系、他のも触ってみます。「ギャラリー」ブロックを選択。
先ほどの「画像ブロック」と似ているが…
ギャラリーでは複数枚の画像を選択できる。
今回は三枚の画像を選択。
プレビュー画面。
並び方は単純な縦並びではなく適切に配置してくれるようです！
カバーブロック
次は「カバー」ブロック。なんですかこれは？
また画像選択ができます。
選択すると「タイトルを入力…」と。
タイトルを入力してみる。
プレビュー画面。背景付きのタイトルに。
カバー＝表紙ということで、大きな章の変わり目に使えるかも。
カラムブロック
ブロックは基本的に積み木のように縦並びですが、横に並べる機能もあります。「カラムブロック」です。
選択すると初期は2カラムです。
サイドメニューの「カラム」が「2」になっています。
カラムを「3」にすると3カラムに！
カラムの中には文字入力かブロック挿入ができます。
「＋」アイコンで入れ子でブロック挿入してみしょう。「画像」ブロック。
ミニサイズの画像ブロックが入りました。
画像を選択。
「キャプション」も加えられそうです。
3カラムにそれぞれ、画像とキャプションを設定。
プレビュー画面。3カラムで画像が並びました。
このレイアウトもペライチでは良く使いますよね！
リストブロック
次は箇条書きを作ってみます。「リスト」ブロック。
中黒（・）でリストが書けます。
プレビュー画面。並列で列挙したい説明に使えそうです。
テーブルブロック
作表もブロックがあります。「テーブル」ブロックです。
まずは行数、列数を指定。初期2行2列です。
5行に増やしてみる。
セルにテキストを入力。
プレビュー画面。簡単に表が作れた！
複雑な作表はTablePressなどのプラグインがいいでしょう。プラグインの挿入は「応用編」で後述します。
ブロック編集（応用編）
ここからは応用編です！
埋め込み（Youtube）ブロック
ブロック選択の中にいくつかカテゴリがあって「埋め込み」をみるといろいらな外部のコンテンツを埋め込めそうです。
「YouTube」を埋め込んでみましょう。
URLの入力欄。共有タグなどでなくURLだけでいけそうです。
動画が埋め込まれました！
プレビュー画面。動画が表示されてます！
埋め込み（Twitter）ブロック
同様にSNSを埋め込んでみましょう。「Twitter」を埋め込むケースは多そうですね。
こちらも共有ではなくツイート自体のURLでいけそうです。
ツイートが埋め込まれた！
プレビュー画面。ツイートが表示されています。
外部コンテンツの埋め込み、めっちゃ簡単ですね！
ショートコードブロック（スライダー）
ブロックは多機能ですが、ブロックにない機能をページに表示したい場合はどうしたらいいでしょう。
「ショートコード」ブロックでプラグインのショートコードを埋め込むことができます！
よく使いそうなスライダーを試してみます。プラグイン「meta slider」のショートコードをコピー。
ページの編集画面で「ショートコード」ブロックを選択
ショートコードをペースト。
プレビュー画面。スライダーが表示されました！
ショートコードブロック（フォーム）
次はフォームプラグイン。ペライチの最後に問い合わせフォームを表示したいことありますよね。
プラグイン「contact form」のショートコードをコピー
ページの編集画面。「ショートコード」ブロックにショートコードをペースト。
プレビュー画面。フォームが表示されました！
ショートコードを使えばプラグインとブロックの連携も簡単ですね！！
ブロックは他にもいろんな機能があるので、いろいろ試してみましょう♪
おまけ：コピーライト追加（ウィジェット）
さて、一通りやりたいことは終わったんですが、フッターに何もないのはやはり寂しい。コピーライトを入れますか。
「外観」の「ウィジェット」を開く。
先ほど空にした「Footer」に「テキスト」ウィジェットをドラッグ。
コピーライトを入力して保存。
プレビュー画面。コピーライトが表示された！
その下に「WordPress云々」という行が…この行の設定はダッシュボードで変えられなそう。テーマフォルダのphpを編集するかCSSで非表示ですね。
※2019/11/18追記
SCF作者のキタジマさんがカスタムブロックのプラグインを作られています！こちらを使うとテーマのPHPファイルにコーディングすることなくブロックの機能を拡張できます♪
※参考：Snow Monkey Blocks – WordPress テーマ Snow Monkey
最後に：さあ、あとはCSSだ！！！
こうして、ペライチの主要素をブロックだけて完結できました。コードは一行も書いてません！更新もすべてダッシュボードで完結します！
- ホームページを固定ページに
- テーマのカスタマイズ
- 固定ページのブロック編集で作る
- 外部コンテンツの埋め込みもブロックで
- プラグインの連携もブロックで
残るはページの見た目ですが、これはテーマフォルダのCSSでいかようにも変えられます！テーマフォルダの場所についてはこちら。
※参考：ざっくりWordPress：PHP書式とテンプレートタグの識別-前編 - クモのようにコツコツと
CSS以外のページ構造がダッシュボードで完結するのはやはり手軽ですね。あとな思う存分CSSに集中しましょう♪
※参考：【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 - クモのようにコツコツと
これからはペライチページ作るにもWordPressという選択肢はありではないでしょうか？それではまた！
