クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【WordPress】Gutenbergでコードを1行も書かずにペライチページを作る!

WorPressは更新作業をダッシュボードで完結させることができ、クライアントが自分で自由にコンテンツを更新することができます。そうなってくるとペライチページも同じように更新したくなってきますよね。Gutenbergのブロックを使えば可能なんじゃないか?という気がしたのでやってみた。

【目次】

CMS(WordPress)とペライチページ

ペライチページは更新が大変

CMS(WordPress)の更新はダッシュボードでできます。

  • 投稿と固定ページを追加・編集できる
  • ヘッダー、フッター、サイドバーなどのページを超えた共通パーツもウィジェットで編集できる
  • メニューをカスタムメニューで一気に変更できる
  • 外観のテーマのカスタマイズができる
  • プラグインで機能を追加できる

一方、静的HTMLページの更新は、クライアントにとってハードルが高いです。

  • テキストを一文字変更するにもコードの知識が必要
  • 更新にはFTPソフトでWebサーバのディレクトリにアップする必要がある
  • 複数ページある場合、メニューの変更は全ページに行う必要がある

そのため「ペライチ」や「Wix」「Jimdo」など、コードを書かずにWebサイトを作れるサービスも増えていました。

ただし、若干不安なのはデータがサービス元のサーバ上にあることです(サービス終了になる場合は対処が必要)。

ペライチページをGutenbergのブロック機能で作る!

できれば自前のサーバ上でWordPressのようにダッシュボードでペライチページを更新したいなぁ…。ん?待てよ!

もしかしてだけど、もしかしてだけど、WordPressのGutenbergのブロック機能を使えばペライチページが簡単に作れちゃうんじゃないの??

「ブロック」は以前の記事でも触れたように、積み木のように自由に追加や入れ替えができるパーツです。

f:id:idr_zz:20181204004601j:plain

※参考:Smart Custom Fieldsの繰り返し(グループ)機能の出力タグ一覧 - クモのようにコツコツと

それではさっそくやってみましょう!

テーマの設定変更

テーマはTwenty nineteenで

WordPressの公式テーマ、2年ぶりに「Twenty nineteen」がでましたね!てっきりもう公式テーマが終わるんじゃないかと思ってました。たぶん2018年はGutenberg開発に集中していたんでしょうね。こちらを使っていきましょう。

「外観」の「テーマ」を開く。 f:id:idr_zz:20190409214833j:plain

「Twenty nineteen」を選択。 f:id:idr_zz:20190409214840j:plain

デフォルトのTOPページはこんな感じです。シンプルなテーマですね! f:id:idr_zz:20190409214846j:plain 画面を狭めるとレスポンシブにも対応していることがわかります。

デフォルトではTopページには投稿一覧が表示されています。ペライチはそもそもページが一枚なのでこのレイアウトである必要はないです。さてどうするか。

TOPページを固定ページに変更

Topページの設定はダッシュボードで変えることができます。

「設定」の「表示設定」を開きます。 f:id:idr_zz:20190409214852j:plain 「ホームページ」は「最新の投稿」になっています。

これを「固定ページ」にします。 f:id:idr_zz:20190409214902j:plain プルダウンで「Sample page」を選択。デフォルトで入っている固定ページです。

Topページを表示。先ほどと内容が変わりました! f:id:idr_zz:20190409214908j:plain

先ほど「ホームページ」に指定した「固定ページ」の「Sample page」を見てみます。 f:id:idr_zz:20190409214916j:plain

Topページに表示されたテキストと一致してますね! f:id:idr_zz:20190409214931j:plain Topページがこの固定ページに変更されたということです。

アイキャッチでメインビジュアル設定

このままだと文字だけで寂しいですね。メインビジュアルが欲しいです。Twenty nineteenはアイキャッチがメインビジュアルになります。

固定ページ編集画面のサイドバー「アイキャッチ画像」に画像を指定します。 f:id:idr_zz:20190409214942j:plain

プレビューを見ると、おお!画面いっぱいにアイキャッチが。 f:id:idr_zz:20190409214951j:plain

スクロールすると本文部分の背景は白です。 f:id:idr_zz:20190409215002j:plain メインビジュアルがちょうど画面の高さいっぱいになるようにCSSがheight: 100vhの指定になっているようです。

※参考:もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの?(オマケにvmin、vmaxも) - クモのようにコツコツと

これはあとでCSSで高さを70%や80%などに変更したいですね。

ページのテキストの打ち替え

ページのテキストがデフォルトの英語のままなので打ち替えて見ます。 f:id:idr_zz:20190409214916j:plain

日本語に打ち替えました。 f:id:idr_zz:20190409215010j:plain ブロックの種類を見ると「見出し」「段落」「引用」の三種類でした。

プレビュー画面。テキストが打ち替わりました! f:id:idr_zz:20190409215017j:plain

フッターのウィジェットを削除

画面をさらにスクロールするとフッターにウィジェットがたくさんあります。 f:id:idr_zz:20190409215025j:plain これらはどれも複数ページのサイトで有用なパーツで、今回のペライチページでは不要ですね。。

「外観」の「ウィジェット」を開きます。 f:id:idr_zz:20190409215033j:plain

「Footer」の中にウィジェットがたくさん入ってます。 f:id:idr_zz:20190409215042j:plain

え〜い、全部削除だ!! f:id:idr_zz:20190409215054j:plain

プレビュー画面。ウィジェットが消え去りました! f:id:idr_zz:20190409215102j:plain

カスタムメニュー(今回は不要)

ちなみに同じ「外観」の中に「メニュー」があります。開いてみると… f:id:idr_zz:20190409215110j:plain カスタムメニューです。中身は未設定。

テーマによってはfunctions.phpに追記しないと有効にならない機能ですがTwenty nineteenでは最初から有効です!

まあ今回はページ遷移がないのでこのまま未設定でいきます。

テーマカスタマイズ

次にテーマをカスタマイズしてみましょう。「外観」の「カスタマイズ」を開きます。 f:id:idr_zz:20190409215118j:plain

サイドバー付きのプレビュー画面になります。要素の所々に鉛筆アイコンが。 f:id:idr_zz:20190409215130j:plain クリックするとカスタムできる項目が表示されます。

ロゴ、サイトタイトル、キャッチフレーズを変更。 f:id:idr_zz:20190409215139j:plain プレビュー画面に反映されました!

それにしてもメインビジュアルの青は強いですね。この色の設定は「Primary color」です。 f:id:idr_zz:20190409215148j:plain 「Apply a filter〜」のところのチェックを外すと…

青みが取れました! f:id:idr_zz:20190409215203j:plain それでもまだ濃いいですけどね…。あとでCSSで調整しましょう。

プレビュー画面 f:id:idr_zz:20190409215213j:plain カスタマイズが反映されています!

ブロック編集(基本編)

ここからはブロックを編集していきます。まずは基本編!

画像ブロック

ブロックとブロックの間の「+」アイコンを押すとブロック選択のツールチップが現れます。 f:id:idr_zz:20190409215226j:plain 「画像」ブロックを選択。

画像をアップ、またはメディアから指定できるブロックです。 f:id:idr_zz:20190409215234j:plain

画像を指定 f:id:idr_zz:20190409215244j:plain

プレビュー画面 f:id:idr_zz:20190409215302j:plain 画像が表示されました!

このようにブロックは好きなところに挿入できます。あとからドラッグで入れ替えも可能です!

見出しブロック、段落ブロック

次はテキスト系を追加してみましょう。「見出し」ブロックを選択。 f:id:idr_zz:20190409215313j:plain

見出しにテキストを入力。 f:id:idr_zz:20190409215326j:plain

次に「段落」ブロックを追加。 f:id:idr_zz:20190409215335j:plain

段落にテキストを入力。 f:id:idr_zz:20190409215349j:plain

プレビュー画面。見出しとテキストが追加されました! f:id:idr_zz:20190409215358j:plain

これは最も良く使う機能だと思います!

ギャラリーブロック

画像系、他のも触ってみます。「ギャラリー」ブロックを選択。 f:id:idr_zz:20190409215406j:plain

先ほどの「画像ブロック」と似ているが… f:id:idr_zz:20190409215417j:plain

ギャラリーでは複数枚の画像を選択できる。 f:id:idr_zz:20190409215426j:plain

今回は三枚の画像を選択。 f:id:idr_zz:20190409215439j:plain

プレビュー画面。 f:id:idr_zz:20190409215451j:plain 並び方は単純な縦並びではなく適切に配置してくれるようです!

カバーブロック

次は「カバー」ブロック。なんですかこれは? f:id:idr_zz:20190409215501j:plain

また画像選択ができます。 f:id:idr_zz:20190409215508j:plain

選択すると「タイトルを入力…」と。 f:id:idr_zz:20190409215517j:plain

タイトルを入力してみる。 f:id:idr_zz:20190409215524j:plain

プレビュー画面。背景付きのタイトルに。 f:id:idr_zz:20190409215531j:plain カバー=表紙ということで、大きな章の変わり目に使えるかも。

カラムブロック

ブロックは基本的に積み木のように縦並びですが、横に並べる機能もあります。「カラムブロック」です。 f:id:idr_zz:20190409215542j:plain

選択すると初期は2カラムです。 f:id:idr_zz:20190409215549j:plain サイドメニューの「カラム」が「2」になっています。

カラムを「3」にすると3カラムに! f:id:idr_zz:20190409215558j:plain

カラムの中には文字入力かブロック挿入ができます。 f:id:idr_zz:20190409215606j:plain 「+」アイコンで入れ子でブロック挿入してみしょう。「画像」ブロック。

ミニサイズの画像ブロックが入りました。 f:id:idr_zz:20190409215615j:plain

画像を選択。 f:id:idr_zz:20190409215622j:plain 「キャプション」も加えられそうです。

3カラムにそれぞれ、画像とキャプションを設定。 f:id:idr_zz:20190409215630j:plain

プレビュー画面。3カラムで画像が並びました。 f:id:idr_zz:20190409215644j:plain

このレイアウトもペライチでは良く使いますよね!

リストブロック

次は箇条書きを作ってみます。「リスト」ブロック。 f:id:idr_zz:20190409215652j:plain

中黒(・)でリストが書けます。 f:id:idr_zz:20190409215701j:plain

プレビュー画面。並列で列挙したい説明に使えそうです。 f:id:idr_zz:20190409215708j:plain

テーブルブロック

作表もブロックがあります。「テーブル」ブロックです。 f:id:idr_zz:20190409215715j:plain

まずは行数、列数を指定。初期2行2列です。 f:id:idr_zz:20190409215723j:plain 5行に増やしてみる。

セルにテキストを入力。 f:id:idr_zz:20190409215731j:plain

プレビュー画面。簡単に表が作れた! f:id:idr_zz:20190409215741j:plain

複雑な作表はTablePressなどのプラグインがいいでしょう。プラグインの挿入は「応用編」で後述します。

ブロック編集(応用編)

ここからは応用編です!

埋め込み(Youtube)ブロック

ブロック選択の中にいくつかカテゴリがあって「埋め込み」をみるといろいらな外部のコンテンツを埋め込めそうです。

「YouTube」を埋め込んでみましょう。 f:id:idr_zz:20190409215749j:plain

URLの入力欄。共有タグなどでなくURLだけでいけそうです。 f:id:idr_zz:20190409215757j:plain

動画が埋め込まれました! f:id:idr_zz:20190409215807j:plain

プレビュー画面。動画が表示されてます! f:id:idr_zz:20190409215815j:plain

埋め込み(Twitter)ブロック

同様にSNSを埋め込んでみましょう。「Twitter」を埋め込むケースは多そうですね。 f:id:idr_zz:20190409215821j:plain

こちらも共有ではなくツイート自体のURLでいけそうです。 f:id:idr_zz:20190409215845j:plain

ツイートが埋め込まれた! f:id:idr_zz:20190409215852j:plain

プレビュー画面。ツイートが表示されています。 f:id:idr_zz:20190409215900j:plain

外部コンテンツの埋め込み、めっちゃ簡単ですね!

ショートコードブロック(スライダー)

ブロックは多機能ですが、ブロックにない機能をページに表示したい場合はどうしたらいいでしょう。

「ショートコード」ブロックでプラグインのショートコードを埋め込むことができます!

よく使いそうなスライダーを試してみます。プラグイン「meta slider」のショートコードをコピー。 f:id:idr_zz:20190409215908j:plain

ページの編集画面で「ショートコード」ブロックを選択 f:id:idr_zz:20190409215916j:plain

ショートコードをペースト。 f:id:idr_zz:20190409215923j:plain

プレビュー画面。スライダーが表示されました! f:id:idr_zz:20190409215930j:plain

ショートコードブロック(フォーム)

次はフォームプラグイン。ペライチの最後に問い合わせフォームを表示したいことありますよね。

プラグイン「contact form」のショートコードをコピー f:id:idr_zz:20190409215939j:plain

ページの編集画面。「ショートコード」ブロックにショートコードをペースト。 f:id:idr_zz:20190409215948j:plain

プレビュー画面。フォームが表示されました! f:id:idr_zz:20190409225524j:plain

ショートコードを使えばプラグインとブロックの連携も簡単ですね!!

ブロックは他にもいろんな機能があるので、いろいろ試してみましょう♪

おまけ:コピーライト追加(ウィジェット)

さて、一通りやりたいことは終わったんですが、フッターに何もないのはやはり寂しい。コピーライトを入れますか。

「外観」の「ウィジェット」を開く。 f:id:idr_zz:20190409221758j:plain

先ほど空にした「Footer」に「テキスト」ウィジェットをドラッグ。 f:id:idr_zz:20190409221826j:plain

コピーライトを入力して保存。 f:id:idr_zz:20190409221845j:plain

プレビュー画面。コピーライトが表示された! f:id:idr_zz:20190409221904j:plain

その下に「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という選択肢はありではないでしょうか?それではまた!