イイダリョウのブログ。【WordPress】Gutenbergでコードを1行も書かずにペライチページを作る!2019-04-10【WordPress】Gutenbergでコードを1行も書かずにペライチページを作る!PHPWorPressは更新作業をダッシュボードで完結させることができ、クライアントが自分で自由にコンテンツを更新することができます。なってくるとペライチページも同じように更新したくなってきますよね。Gutenbergのブロックを使えば可能なんじゃないか?という気がしたのでやってみた。nineteenでTOPページを固定ページに変更アイキャッチでメインビジュアル設定ページのテキストの打ち替えフッターのウィジェットを削除カスタムメニュー(今回は不要)テーマカスタマイズブロック編集(基本編)画像ブロック見出しブロック、段落ブロックギャラリーブロックカバーブロックカラムブロックリストブロックテーブルブロックブロック編集(応用編)埋め込み(Youtube)ブロック埋め込み(Twitter)ブロックショートコードブロック(スライダー)ショートコードブロック(フォーム)おまけ:コピーライト追加(ウィジェット)最後に:さあ、あとはCSSだ!!!CMS(WordPress)とペライチページペライチページは更新が大変CMS(WordPress)の更新はダッシュボードでできます。投稿と固定ページを追加・編集できるヘッダー、フッター、サイドバーなどのページを超えた共通パーツもウィジェットで編集できるメニューをカスタムメニューで一気に変更できる外観のテーマのカスタマイズができるプラグインで機能を追加できる一方、静的HTMLページの更新は、クライアントにとってハードルが高いです。更新にはFTPソフトでWebサーバのディレクトリにアップする必要がある複数ページある場合、メニューの変更は全ページに行う必要があるそのため「ペライチ」や「Wix」「Jimdo」など、コードを書かずにWebサイトを作れるサービスも増えていました。若干不安なのはデータがサービス元のサーバ上にあることです(サービス終了になる場合は対処が必要)。ペライチページをGutenbergのブロック機能で作る!できれば自前のサーバ上でWordPressのようにダッシュボードでペライチページを更新したいなぁ...。ん?待てよ!もしかしてだけど、もしかしてだけど、WordPressのGutenbergのブロック機能を使えばペライチページが簡単に作れちゃうんじゃないの??「ブロック」は以前の記事でも触れたように、積み木のように自由に追加や入れ替えができるパーツです。nineteen」がでましたね!てっきりもう公式テーマが終わるんじゃないかと思ってました。2018年はGutenberg開発に集中していたんでしょうね。こちらを使っていきましょう。「外観」の「テーマ」を開く。nineteen」を選択。デフォルトのTOPページはこんな感じです。画面を狭めるとレスポンシブにも対応していることがわかります。デフォルトではTopページには投稿一覧が表示されています。ペライチはそもそもページが一枚なのでこのレイアウトである必要はないです。TOPページを固定ページに変更Topページの設定はダッシュボードで変えることができます。「設定」の「表示設定」を開きます。「ホームページ」は「最新の投稿」になっています。これを「固定ページ」にします。デフォルトで入っている固定ページです。page」を見てみます。Topページがこの固定ページに変更されたということです。アイキャッチでメインビジュアル設定このままだと文字だけで寂しいですね。メインビジュアルが欲しいです。nineteenはアイキャッチがメインビジュアルになります。固定ページ編集画面のサイドバー「アイキャッチ画像」に画像を指定します。プレビューを見ると、おお!画面いっぱいにアイキャッチが。スクロールすると本文部分の背景は白です。100vhの指定になっているようです。クモのようにコツコツとこれはあとでCSSで高さを70%や80%などに変更したいですね。ページのテキストの打ち替えページのテキストがデフォルトの英語のままなので打ち替えて見ます。日本語に打ち替えました。