WordBench三重
Gutenbergで作る
ランディングページ
WordBench三重
自己紹介
WordPressとわたし
WordBench Nagoya コミュニティ幹事(2010~2013年)
WordCamp Nagoya 2010 実行委員
WordBeach 2011 実行委員長
WordBeach 2012 実行委員長
WordFes Nagoya 2013 副実行委員長
WordFes Nagoya 2014 実行委員
WordFes Nagoya 2015 実行委員
WordFes Nagoya 2016 副実行委員長
WordFes Nagoya 2017 副実行委員長
小野 隆士
onocom
3
WordBench三重
はじめに
2018年7月17日時点の
各種プラグインやテーマ
私が調べた情報を基に構成しました
指摘やツッコミ大歓迎です!
一緒に理解を深めましょう!
4
WordBench三重
Index
• Gutenberg って何だ!?
• 編集画面を見てみよう!
• テーマを対応させよう!
• ランディングページを作ってみよう!
• カスタムブロックを作ってみよう!
5
WordBench三重
Gutenberg って何だ!?
6
WordBench三重
Gutenberg基本情報
https://ja.wordpress.org/plugins/gutenberg/
7
WordBench三重
Gutenberg基本情報
https://ja.wikipedia.org/wiki/ヨハネス・グーテンベルク
活版印刷技術の発明者
ヨハネス・グーテンベルクさん
8
WordBench三重
Gutenberg基本情報
• WordPressの新しいエディターインターフェース
パブリッシング体験全体に影響を与えるプロジェクト
• “ブロック”を積み上げて記事作成
ブロック:エディター、ウィジェット、ショートコード … 等々
• WordPress 5.0 からコアに搭載予定
現在はプラグイン形式(Ver3.2.0)で配布中
https://wordpress.org/gutenberg/
https://ja.wordpress.org/gutenberg/
https://ja.wordpress.org/plugins/gutenberg/
9
WordBench三重
WordPress5.0リリース予定日
WordPress 5.0 は早ければ8月にリリース
Gutenberg 最新情報
https://ja.wordpress.org/2018/07/13/update-on-gutenberg/
Gutenberg 機能一覧
https://github.com/WordPress/gutenberg/issues/4894
WordPress 5.0 Development Cycle
https://make.wordpress.org/core/5-0/
Gutenberg のリリーススケジュール。WordCamp Europeでの発表内容まとめ
https://capitalp.jp/2018/06/20/gutenberg-release-schedule/
10
WordBench三重
Gutenbergの目指すもの
https://wordpress.org/gutenberg/
WordPress の新たなパブリッシング体験を準備中です。つまり、コードを
全く必要とせず、あなたの言葉、写真、レイアウトを、頭の中で思い描く
のと同様に画面上でも見栄えの良いものにする準備をしています。
https://ja.wordpress.org/gutenberg/
11
WordBench三重
Gutenbergの目指すもの
https://wordpress.org/gutenberg/
12
WordBench三重
Gutenbergの目指すもの
現在の WordPress エディターは一つのオープンテキストウィンドウです。これは、文章を書くためにはす
ばらしい空白のキャンバスであったのですが、画像、マルチメディア、ソーシャルメディアからの埋め込み
コンテンツ、投票、その他の要素を含む投稿やページを作成する場合は、必ずしも直感的ではないさまざま
なアプローチの組み合わせを必要としていました。
• 画像を挿入するための HTML やメディアライブラリー、マルチメディアや許可されたファイルの挿入。
• 埋め込み用リンクの貼り付け。
• ある種のプラグインで用意されたショートコード。
• 投稿や固定ページの上部に表示されるアイキャッチ画像。
• 小見出しのための抜粋。
• ページの横にあるコンテンツのためのウィジェット。
これらの利用について、すぐにわかる一貫性のあるものにする方法を考え、私たちは「ブロック」というコ
ンセプトを採用し始めました。上記の項目はすべてブロックである可能性があります。すぐに見つけること
ができ理解しやすくブロックのコンセプトは非常に強力です。設計を慎重におこなえば、すぐれた編集とパ
ブリッシングの体験が得られます。
https://ja.wordpress.org/gutenberg/
13
WordBench三重
Gutenbergの目指すもの
単にエディターを置き換えるだけでなく
コンテンツに関わる機能がGutenbergに集約される
ウィジェット
ショートコード
埋め込みリンク
メタボックス
(カスタムフィールド)
エディター
カスタム投稿タイプ
14
WordBench三重
Gutenbergの存在意義 - あるブログでのやり取り
https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/#comment-597 より引用
15
https://riad.blog/
WordBench三重
Gutenbergの存在意義 - あるブログでのやり取り
> 最終ユーザは、ショートコード、ウィジェット、メニュー、TinyMCE、
メタボックスなど、WordPressのコンテンツの作成方法や編集方法を理
解するために、これらの概念すべてを学ぶ必要はありません。すでに
WordPressに精通している人にとっては自然かもしれません。
既存のすべてのウェブサイトの29%以上が既に存在しています:既存の
WordPressの概念に精通し、満足しています。
これらの何百万人ものユーザーは、馴染みのないことをやりとりするよ
うな新しいエディタを望んでおらず、時間、お金、そして幸福を犠牲に
するでしょう。
そしてそれがコアのグーテンベルクが悪い考えである理由です。それは
斬新なコンセプトなので、wordpress.comのようなホスティング会社に
プレインストールされていても、プラグインとして提供されるはずです。
16
https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/#comment-597 より引用
WordBench三重
Gutenbergの存在意義 - あるブログでのやり取り
17
https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/#comment-597 より引用
WordBench三重
Gutenbergの存在意義 - あるブログでのやり取り
> 既存のすべてのウェブサイトの29%がすでに存在しています:既存
のWordPressの概念に精通していて、満足しています。
現状を維持するのは正当な理由ですか?既存のユーザーのために新し
いユーザーにとってより簡単にするべきではありませんか?既存の
ユーザーには適応するのが難しいため、変更を避けるべきですか?
私はあなたの痛みを感じ、それは簡単な変更ではありませんが、
WordPressの未来を気にする必要があります。明日のWordPressの
ユーザーは今日と同じではなく、より単純な選択肢を見つけたら、そ
れらを使うだけです。WordPressがこれらの新しい課題に対応できな
い場合、既存のユーザーでも切り替わります。
18
https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/#comment-597 より引用
WordBench三重
Gutenbergの存在意義
WordPressを未来に繋げる
そのために Gutenberg がある
19
WordBench三重
Gutenbergが怖いという方へ
Gutenbergを利用したくない。
という方のためのプラグインが用意されるかもしれません。
(対応方法については検討中の模様)
https://wordpress.org/gutenberg/handbook/reference/faq/#will-i-be-able-to-opt-out-of-gutenberg-for-my-site
https://wordpress.org/plugins/classic-editor/
20
WordBench三重
Gutenberg参考リンク
• Gutenbergプラグイン
https://ja.wordpress.org/plugins/gutenberg/
https://github.com/WordPress/gutenberg
• 対応テーマ(テーマ名:Gutenberg)
https://github.com/WordPress/gutenberg-starter-theme
• ドキュメント
https://github.com/WordPress/gutenberg/tree/master/docs
https://wordpress.org/gutenberg/handbook/
21
WordBench三重
Gutenberg の
編集画面を見てみよう!
22
WordBench三重
Gutenberg編集画面
23
WordBench三重
Gutenberg編集画面
24
エディターツールバー
エディター
設定
エディターコンテンツ
各エリア名称は編集画面HTMLのaria-labelより引用
WordBench三重
実際に操作してみよう
• ブロックの追加・編集
• 記事公開・確認
25
wb.onocom.net
WordBench三重
ブロック一覧
26
WordBench三重
ブロック一覧 - Embeds
27
WordBench三重
編集データはHTMLコメントで記載されている
28
WordBench三重
編集データはHTMLコメントで記載されている
背景画像のURL 配置
ブロックの識別文字列( wp:block-name or wp:namespace/block-name )
https://wordpress.org/gutenberg/handbook/block-api/#register-block-type
29
コアブロックの場合 コアブロック以外の場合
WordBench三重
Gutenberg に
テーマを対応させよう!
30
WordBench三重
シンプルなテーマを作ってみた
Gutenbergの動作を確認するためにシンプルなテーマ
を作りました。
https://github.com/onocom/gutenberg-challenge/
31
ブロックで使用するスタイルを定義
Gutenberg用のテーマ設定を定義
メッセージループのみのテンプレート
基本スタイルの定義
WordBench三重
index.php- テンプレートはこれだけ
32
メッセージループのみ
WordBench三重
style.css - シンプルなスタイル
33
コンテンツ幅970px
テーマ名は Gutenberg Challenge
以降WordPressのコアスタイルをコピペ
https://codex.wordpress.org/CSS
WordBench三重
functions.php - Gutenberg用テーマ設定
テ
ー
マ
サ
ポ
ー
ト
設
定
ス
タ
イ
ル
読
み
込
み
34
Gutenberg 用カスタムスタイルの読込
幅広・全幅選択肢の追加
カラーパレットの色を定義
カスタムカラー選択の無効化
デフォルトブロックスタイルの読込
WordBench三重
functions.php - Gutenberg用 カスタムスタイルの読込
https://wordpress.org/gutenberg/handbook/extensibility/theme-support/
35
Gutenberg編集画面へのブロックスタイルの読み込み
フロントエンド側へのブロックスタイルの読み込み
WordBench三重
functions.php -幅広・全幅選択肢の追加
幅広、全幅の
選択肢を追加
36
WordBench三重
functions.php - カスタムカラー選択の有効・無効
カスタムカラー選択を無効化
37
WordBench三重
functions.php -デフォルトブロックスタイルの読込
<link rel='stylesheet' id='wp-core-blocks-theme-css' href='http://wb.onocom.net/
wp-content/plugins/gutenberg/build/core-blocks/theme.css?ver=1530925227'
type='text/css' media='all' />
38
デフォルトブロックスタイルの読込
add_theme_support( 'wp-block-styles' ); 無し
add_theme_support( 'wp-block-styles' ) 有り
WordBench三重
functions.php - カラーパレットの色を定義
カラーパレットに
色が追加される!
39
色の名前、スラッグ、
カラーコードを指定
… 必要な色数分arrayを追加する(以下省略) …
WordBench三重
blocks.css - カラーパレットのスタイルを定義
40
.has-スラッグ-background-color
.has-スラッグ-color
WordBench三重
blocks.css - 幅広・全幅用のスタイルを定義
参考程度にご覧ください。
テーマによってスタイルの指定は異なると思います。
41
WordBench三重
Gutenberg で
ランディングページを
作ってみよう!
「コードを全く必要とせず、あなたの言葉、写真、レイアウトを、頭の中で思い描
くのと同様に画面上でも見栄えの良いものにする」ことはできるだろうか!?
簡単なランディングページを作ることで体験してみよう!
42
Gutenberg
Challenge
WordBench三重
今回作る ランディングページの構成
ロゴ&キャッチコピー
(全幅・背景画像)
ポイント1 ポイント2 ポイント3
動画 動画
画像
(幅広)
利用者の声
問い合わせフォーム
CODE IS POETRY
44
WordBench三重
完成イメージ
wb.onocom.net
45
LETS TRY
5min.
wb.onocom.net
RESULTS
wb.onocom.net
WordBench三重
現在のGutenbergの状況
複雑なレイアウトやスタイルは難しい
誰でも簡単に・・・。
という状況では(今の所)無さそう。
ただ、徐々に改善されつつある!!!
48
WordBench三重
みんなで力を合わせよう
使いやすくするために、貢献できそうなことから貢献しよう!
• Gutenbergプラグイン
https://ja.wordpress.org/plugins/gutenberg/
https://github.com/WordPress/gutenberg
• 対応テーマ(テーマ名:Gutenberg)
https://github.com/WordPress/gutenberg-starter-theme
• ドキュメント
https://github.com/WordPress/gutenberg/tree/master/docs
https://wordpress.org/gutenberg/handbook/
49
WordBench三重
カスタムブロックを
作ってみよう!
ぶっつけ本番!みんなで調べながらモクモクしましょう!
50
WordBench三重
参考資料/コード
• Gutenberg Handbook Creating Block Types
https://wordpress.org/gutenberg/handbook/blocks/
• Gutenberg Block API
https://wordpress.org/gutenberg/handbook/block-api/
• Gutenberg Example
https://github.com/WordPress/gutenberg-examples/
51
WordBench三重
初期設定
1. Gutenberg Example リポジトリをダウンロード
https://github.com/WordPress/gutenberg-
examples/
2. プラグインとしてインストール
インストールできたらいろんなブロックが
追加されているはず。
52
WordBench三重
謎のWorningが出るけど放っておこう
Warning: filemtime(): stat failed for /usr/home/aa10000abc/html/wp-content/plugins/gutenberg-
examples/01-basic-esnext/block.build.js in /usr/home/aa10000abc/html/wp-
content/plugins/gutenberg-examples/01-basic-esnext/index.php on line 12
Warning: filemtime(): stat failed for /usr/home/aa10000abc/html/wp-content/plugins/gutenberg-
examples/03-editable-esnext/block.build.js in /usr/home/aa10000abc/html/wp-
content/plugins/gutenberg-examples/03-editable-esnext/index.php on line 12
Warning: filemtime(): stat failed for /usr/home/aa10000abc/html/wp-content/plugins/gutenberg-
examples/04-controls-esnext/block.build.js in /usr/home/aa10000abc/html/wp-
content/plugins/gutenberg-examples/04-controls-esnext/index.php on line 12
Warning: filemtime(): stat failed for /usr/home/aa10000abc/html/wp-content/plugins/gutenberg-
examples/05-recipe-card-esnext/block.build.js in /usr/home/aa10000abc/html/wp-
content/plugins/gutenberg-examples/05-recipe-card-esnext/index.php on line 12
ESNextが関係してそうだけど放っておこう。放っておこう。。。
53
WordBench三重
Lesson01 動作確認とカスタマイズ
Writing Your First Block Type
https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type/
Code
https://github.com/WordPress/gutenberg-examples/tree/master/01-basic
Display - Editor
Display - FrontEnd
Do it!
背景色を緑色に変えてみよう
54
WordBench三重
Lesson02 動作確認とカスタマイズ
Writing Your First Block Type
https://wordpress.org/gutenberg/handbook/blocks/applying-styles-with-stylesheets/
Code
https://github.com/WordPress/gutenberg-examples/tree/master/02-stylesheets
Display - Editor
Display - FrontEnd
Do it!
編集画面のアイコンを別のアイコンに変えてみよう
https://developer.wordpress.org/resource/dashicons/
55
WordBench三重
Lesson03 動作確認とカスタマイズ
Writing Your First Block Type
https://wordpress.org/gutenberg/handbook/blocks/introducing-attributes-and-editable-fields/
Code
https://github.com/WordPress/gutenberg-examples/tree/master/03-editable
Do it!
ブロックが表示されないので、表示されるように修正しよう!
56
WordBench三重
結論
“Learn JavaScript, deeply.”
57
https://wordpress.tv/2015/12/07/matt-mullenweg-state-of-the-word-2015/ (59分7秒あたり)
https://ja.naoko.cc/2015/12/19/state-of-the-word-2015/
WordBench三重
ありがとうございました
WordBench Nagoyaにも遊びに来てね
https://wbnagoya.doorkeeper.jp
http://onocom.net/blog/
https://www.slideshare.net/_onocom_/
https://github.com/onocom/gutenberg-challenge/
今日の内容はSlideShare、GitHubで公開します
58

WordBench三重 2018年7月22日「Gutenbergで作るランディングページ」