![[WordCamp Osaka 2018] Gutenbergで作るランディングページ 改定版](https://i0.wp.com/onocom.net/blog/wp-content/uploads/2018/06/cddd3f0f60b2f023d6baf9c7cdcc7122.png?resize=825%2C510)
今日、2018年6月2日に開催されるWordCamp Osaka 2018にWordPressの次期エディターであるGutenbergのお話で登壇しました。
WordBench Osaka & Kyotoでお話した内容と基本同じではあるのですが、半年経つとGutenbergのテーマサポートなどの方法が変更されていたりと、大幅な改定を行いました（大変でしたっ）。
使用したスライド
Gutenbergってなんだ？
GutenbergとはWordPressの5.0からコアに搭載予定のエディターになります。
エディターインターフェースといったほうがしっくり来るかも。
今までエディタとは大きく異なり、ブロックと呼ばれるコンテンツのまとまりを組み上げることによってページを作成するのが大きな特徴です。
パブリッシングプラットフォームであるWordPressのパブリッシングを大きく変える壮大なプロジェクトで、このエディターの導入には大きな苦労が伴うと思われます。
WixやJimdoなど、最近は誰でも簡単に編集ができるプラットフォームが多くなってきました。
そういった環境の変化にユーザーは敏感です。より簡単な方に流れていくのは人の真理でもあります。
今はWordPressのシェアは世界一ですが、そのようなユーザーのことを思うと、未来はどうなっているかは誰にもわかりません。
その未来を見据えたプロジェクトがGutenbergエディターだと私は感じています。
Gutenbergの使い方
当日は、デモサイトを利用して参加者に触っていただく機会を設けました。
Gutenberg 対応のテーマの作り方
ここが半年前と大きく異なる部分でした。
add_theme_support の gutenberg がなくなり、それぞれがテーマサポートとして独立しました。
1 2 3 | // Gutenberg Wide Alignment // https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#wide-alignment add_theme_support( 'align-wide' ); |
1 2 3 | // Gutenberg custom colors disable // https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#disabling-custom-colors-in-block-color-palettes add_theme_support( 'disable-custom-colors' ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Gutenberg color palette // https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes add_theme_support( 'editor-color-palette', array( 'name' => 'Blue', 'color' => '#21759b', ), array( 'name' => 'Orange', 'color' => '#d54e21', ), array( 'name' => 'Gray', 'color' => '#464646', ), array( 'name' => 'White', 'color' => '#ffffff', ) ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /** * カラーパレットの背景色を定義 * https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes */ .has-blue-background-color { background-color: #21759b; } .has-blue-color { color: #21759b; } .has-orange-background-color { background-color: #d54e21; } .has-orange-color { color: #d54e21; } .has-gray-background-color { background-color: #464646; } .has-gray-color { color: #464646; } .has-white-background-color { background-color: #ffffff; } .has-white-color { color: #ffffff; } |
GutenbergChallenge
Gutenbergを利用して、指定されたデザインのランディングページを作るワークショップも実施しました。
実際に、参加者が頑張って作ってくれたページは以下のURLの最下部よりご確認いただけます！
GutenbergChallengeの説明ページ用のプラグインも作りました。GitHubで公開しています。
https://github.com/onocom/gutenberg-challenge-introduction
感想
ワークショップ盛り上がってすごく嬉しかったです！
WordCamp Osaka 2018最高でした！
![[WordPress] Gutenbergで作るランディングページ！Gutenbergの使い方やテーマ対応方法！](https://i0.wp.com/onocom.net/blog/wp-content/uploads/2018/01/712eb8331ac104b030b694821893b0ef.png?resize=825%2C510)
