Uploaded bytakashi ono
WordBench三重 2018年7月22日「Gutenbergで作るランディングページ」
WordBench三重で発表をした「Gutenbergで作るランディングページ」
![WordPress名古屋コミュニティの進化[WordBench Nagoya 2017年3月勉強会]](https://cdn.slidesharecdn.com/ss_thumbnails/wordbenchnagoya201703-170313012341-thumbnail.jpg?width=640&height=640&fit=bounds)
![ライバルに差をつけろ！ 真夏のカスタム○○○猛特訓ゼミ！[ WordFes Nagoya 2013 ]](https://cdn.slidesharecdn.com/ss_thumbnails/wordfesnagoya2013workshop-130904043227--thumbnail.jpg?width=640&height=640&fit=bounds)
![WordPressプラグイン超入門ワークショップ[ WordFes Nagoya 2014 ]](https://cdn.slidesharecdn.com/ss_thumbnails/wordpress-140830035141-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
WordBench三重 2018年7月22日「Gutenbergで作るランディングページ」
- 1.
- 2. WordBench三重 自己紹介 WordPressとわたし WordBench Nagoya コミュニティ幹事(2010～2013年) WordCampNagoya 2010 実行委員 WordBeach 2011 実行委員長 WordBeach 2012 実行委員長 WordFes Nagoya 2013 副実行委員長 WordFes Nagoya 2014 実行委員 WordFes Nagoya 2015 実行委員 WordFes Nagoya 2016 副実行委員長 WordFes Nagoya 2017 副実行委員長 小野 隆士 onocom 3
- 3.
- 4. WordBench三重 Index • Gutenberg って何だ！？ •編集画面を見てみよう！ • テーマを対応させよう！ • ランディングページを作ってみよう！ • カスタムブロックを作ってみよう！ 5
- 5.
- 6.
- 7.
- 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
- 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
- 10.
- 11.
- 12. WordBench三重 Gutenbergの目指すもの 現在の WordPress エディターは一つのオープンテキストウィンドウです。これは、文章を書くためにはす ばらしい空白のキャンバスであったのですが、画像、マルチメディア、ソーシャルメディアからの埋め込み コンテンツ、投票、その他の要素を含む投稿やページを作成する場合は、必ずしも直感的ではないさまざま なアプローチの組み合わせを必要としていました。 •画像を挿入するための HTML やメディアライブラリー、マルチメディアや許可されたファイルの挿入。 • 埋め込み用リンクの貼り付け。 • ある種のプラグインで用意されたショートコード。 • 投稿や固定ページの上部に表示されるアイキャッチ画像。 • 小見出しのための抜粋。 • ページの横にあるコンテンツのためのウィジェット。 これらの利用について、すぐにわかる一貫性のあるものにする方法を考え、私たちは「ブロック」というコ ンセプトを採用し始めました。上記の項目はすべてブロックである可能性があります。すぐに見つけること ができ理解しやすくブロックのコンセプトは非常に強力です。設計を慎重におこなえば、すぐれた編集とパ ブリッシングの体験が得られます。 https://ja.wordpress.org/gutenberg/ 13
- 13.
- 14.
- 15. 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 より引用
- 16.
- 17. WordBench三重 Gutenbergの存在意義 － あるブログでのやり取り >既存のすべてのウェブサイトの29％がすでに存在しています：既存 のWordPressの概念に精通していて、満足しています。 現状を維持するのは正当な理由ですか？既存のユーザーのために新し いユーザーにとってより簡単にするべきではありませんか？既存の ユーザーには適応するのが難しいため、変更を避けるべきですか？ 私はあなたの痛みを感じ、それは簡単な変更ではありませんが、 WordPressの未来を気にする必要があります。明日のWordPressの ユーザーは今日と同じではなく、より単純な選択肢を見つけたら、そ れらを使うだけです。WordPressがこれらの新しい課題に対応できな い場合、既存のユーザーでも切り替わります。 18 https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/#comment-597 より引用
- 18.
- 19.
- 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
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. WordBench三重 編集データはHTMLコメントで記載されている 背景画像のURL 配置 ブロックの識別文字列（ wp:block-nameor wp:namespace/block-name ） https://wordpress.org/gutenberg/handbook/block-api/#register-block-type 29 コアブロックの場合 コアブロック以外の場合
- 29.
- 30.
- 31.
- 32. WordBench三重 style.css － シンプルなスタイル 33 コンテンツ幅970px テーマ名はGutenberg Challenge 以降WordPressのコアスタイルをコピペ https://codex.wordpress.org/CSS
- 33. WordBench三重 functions.php － Gutenberg用テーマ設定 テ ー マ サ ポ ー ト 設 定 ス タ イ ル 読 み 込 み 34 Gutenberg用カスタムスタイルの読込 幅広・全幅選択肢の追加 カラーパレットの色を定義 カスタムカラー選択の無効化 デフォルトブロックスタイルの読込
- 34. WordBench三重 functions.php － Gutenberg用カスタムスタイルの読込 https://wordpress.org/gutenberg/handbook/extensibility/theme-support/ 35 Gutenberg編集画面へのブロックスタイルの読み込み フロントエンド側へのブロックスタイルの読み込み
- 35.
- 36.
- 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' ) 有り
- 38. WordBench三重 functions.php － カラーパレットの色を定義 カラーパレットに 色が追加される！ 39 色の名前、スラッグ、 カラーコードを指定 …必要な色数分arrayを追加する（以下省略） …
- 39.
- 40.
- 41.
- 42.
- 43. WordBench三重 今回作る ランディングページの構成 ロゴ＆キャッチコピー (全幅・背景画像) ポイント１ ポイント２ポイント３ 動画 動画 画像 （幅広） 利用者の声 問い合わせフォーム CODE IS POETRY 44
- 44.
- 45.
- 46.
- 47.
- 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
- 49.
- 50. WordBench三重 参考資料/コード • Gutenberg HandbookCreating 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
- 51. WordBench三重 初期設定 1. Gutenberg Exampleリポジトリをダウンロード https://github.com/WordPress/gutenberg- examples/ 2. プラグインとしてインストール インストールできたらいろんなブロックが 追加されているはず。 52
- 52. WordBench三重 謎のWorningが出るけど放っておこう Warning: filemtime(): statfailed 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
- 53. WordBench三重 Lesson01 動作確認とカスタマイズ Writing YourFirst 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
- 54. WordBench三重 Lesson02 動作確認とカスタマイズ Writing YourFirst 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
- 55. WordBench三重 Lesson03 動作確認とカスタマイズ Writing YourFirst 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
- 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/
- 57.