![[WordPress] Gutenbergで作るランディングページ！Gutenbergの使い方やテーマ対応方法！](https://i0.wp.com/onocom.net/blog/wp-content/uploads/2018/01/712eb8331ac104b030b694821893b0ef.png?resize=825%2C510)
WordPressの次期エディタ「Gutenberg」について学ぼう
あけましておめでとうございます。今年もよろしくお願いします！
新年開けてすぐの今日、WordBench京都&大阪でWordPressの次期エディタである「Gutenberg（グーテンベルク）」のお話をさせていただきました。
このポストは、WordBench京都&大阪の振り返りポストです。
WordBench京都&大阪 1月 WordPressとWebマーケティングことはじめ
https://wb-kyoto.connpass.com/event/70848/
大阪のたこ焼き美味しかったです！
セッションスライド
当日利用したスライドです。
※ デモサイトは停止しました。Gutenbergを使ってみたい方は以下を読み進めてくださいな。
Gutenbergってなんだ？
Gutenberg（グーテンベルク）とはWordPressのバージョン5.0に搭載予定の次期エディタのことです。活版印刷技術の発明家「ヨハネス・グーテンベルク」にちなんで命名されたようです。
現在のWordPressのエディタはこのブログのように単純な投稿には適していますが、ちょっと複雑なことをやろうとすると、極端に難しくなりますよね。
Gutenbergでは、ブロックと言う単位でコンテンツを構成します。
ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。
Gutenbergを試してみたい！
Gutenbergは現在プラグイン形式で開発中です。
Gutenbergを試してみたい方は、以下のURLからダウンロードするか、WordPressのプラグインインストール画面から「Gutenberg」と入力してインストールし、有効化してください。
※ 鋭意開発中なので本番環境などで使わない方がいいです。
Gutenberg Plugin
Gutenbergを無効化したい！
Gutenbergの導入は怖い！Gutenbergを利用したくない！無効化したい！
という方のために、今まで通りのエディタを使う為のプラグインも開発されています。カスタムフィールドをゴリゴリ使っているサイトはちょっと心配ですもんね。
※ 現在鋭意開発中なので本番環境などで使わない方がいいです。
Classic Editor Plugin
Gutenbergの使い方を知りたい
Gutenbergを有効化すると、管理画面のサイドバーに「Gutenberg」メニューが現れます。
そちらにカーソルを合わせて「デモ」を選択すると、Gutenbergのデモ記事が生成されます。
画面キャプチャを交えて簡単に使い方を紹介します。
編集画面
編集画面上部
上部左側には、ブロックの追加ボタン、リドゥ・アンドゥボタンが配置されています。
上部右上には、プレビューボタン、公開ボタン、右サイドバーの表示切り替え、エディタ切り替え（グーテンベルクとクラシックエディタを切り替えるボタン）が配置されています。
右サイドバー
右サイドバーには、DocumentタブとBlockタブがあります。
Documentタブでは、記事のカテゴリやアイキャッチ画像、抜粋が設定できます。
Blockタブでは、選択中のブロック固有のスタイルやCSS ID・クラスの設定等ができます。
コンテンツエリア
見慣れないですが、画像やテキストは別々のブロックとしてあつかわれています。
左上、もしくはブロックとブロックの間にカーソルを合わせると出て来るブロック追加ボタン（プラスボタン）を押してブロックを追加していきます。
どんなブロックが存在するの？
デフォルトでは、以下のブロックが定義されています。
多く見えますが、実際に使おうと思うとまだまだ開発段階ということが分かるかと。
カラムレイアウト（3列や4列）には現在非対応で、5.0のタイミングには対応されないかもしれません。早く対応して欲しい！
数多くの埋め込みにも対応しています。
ブロックのデータはどうやって保存されるの？
各ブロックの情報は、HTMLコメント形式でwp_postsテーブルに保存されます。
表示の際には、HTMLコメントが解釈されて動画や画像が埋め込まれたりします。
これから改善されていくところやメモなど
パーマリンクの設定箇所がない
投稿一覧クイック編集から編集するしかなさそう。
この件について、Githubで議論されている。
https://github.com/WordPress/gutenberg/pull/3418
カラムを柔軟に作れない
今のところ柔軟なカラム設定出来ない。
https://github.com/WordPress/gutenberg/issues/219
カスタム投稿タイプで動作させるためには
register_post_typeする際に、‘show_in_rest’ => true が必要。
編集画面が真っ白になることがある
ローカル環境にGutenbergをインストールして記事を新規作成したところ、なぜか画面が真っ白になった。
管理画面の設定→パーマリンク設定
画面を開いて、「変更を保存」ボタンを押すことで正常に動作するようになった。
テーマをGutenbergに対応させるには
以下の作業は必須ではありませんが、functions.phpやstyle.cssに記述しておくとGutenbergの機能を活用できると思います。
functions.php の編集
add_theme_supportに’gutenberg’を指定します。
wide-imagesは、左寄せ・右寄せ・中央寄せの他に「ワイド幅」や「全幅」を追加するためのオプションです。
colorsは、Gutenbergのテキストブロック等で指定する色を予め設定しておくオプションです。サイトのキーカラー等を設定しておくとごちゃごちゃせずに良さそうですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?php /** * Theme Support */ function lp_setup_theme() { // Gutenberg support add_theme_support( 'gutenberg', array( 'wide-images' => true, 'colors' => array( '#21759b', /* WordPress Blue */ '#d54e21', /* WordPress Orange */ '#464646', /* WordPress Grey */ '#ffffff' /* White */ ) ) ); } add_action( 'after_setup_theme', 'lp_setup_theme' ); |
style.css の編集
add_theme_supportでwide-imagesオプションを設定し、ブロックに対してワイド幅や全幅を指定すると、.alignwideや.alignfullというクラスが付加されます。
そのクラスに対してテーマとしての振る舞いを定義します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /** * ワイド幅、全幅のスタイル定義 */ .alignwide { width: calc(100% + 200px); margin: 0 0 1rem -100px; } .alignfull { width: calc(100% + 100vw); margin: 0 0 1rem -50vw; } .alignfull img { display: block; margin: 0 auto; max-width: 100vw; height: auto; } |
Gutenbergについて理解を深めたい！
Gutenbergについて理解を深めるには、実際に使ってみるのが一番！
Gutenberg Challenge
ということで、WordBench京都&大阪では、「Gutenberg Challenge」と題して、Gutenbergでランディングページを作ってもらうという簡易のワークショップを行いました。
これからGutenbergを触って見ようかな！と思っている方、以下のリポジトリからGutenberg Challengeに挑戦してみてください！
https://github.com/onocom/gutenberg-challenge
