Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,187 views

Published on

WordBench三重で発表をした「Gutenbergで作るランディングページ」

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

  1. 1. WordBench三重 Gutenbergで作る ランディングページ
  2. 2. 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
  3. 3. WordBench三重 はじめに 2018年7月17日時点の 各種プラグインやテーマ 私が調べた情報を基に構成しました 指摘やツッコミ大歓迎です! 一緒に理解を深めましょう! 4
  4. 4. WordBench三重 Index • Gutenberg って何だ!? • 編集画面を見てみよう! • テーマを対応させよう! • ランディングページを作ってみよう! • カスタムブロックを作ってみよう! 5
  5. 5. WordBench三重 Gutenberg って何だ!? 6
  6. 6. WordBench三重 Gutenberg基本情報 https://ja.wordpress.org/plugins/gutenberg/ 7
  7. 7. WordBench三重 Gutenberg基本情報 https://ja.wikipedia.org/wiki/ヨハネス・グーテンベルク 活版印刷技術の発明者 ヨハネス・グーテンベルクさん 8
  8. 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. 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. 10. WordBench三重 Gutenbergの目指すもの https://wordpress.org/gutenberg/ WordPress の新たなパブリッシング体験を準備中です。つまり、コードを 全く必要とせず、あなたの言葉、写真、レイアウトを、頭の中で思い描く のと同様に画面上でも見栄えの良いものにする準備をしています。 https://ja.wordpress.org/gutenberg/ 11
  11. 11. WordBench三重 Gutenbergの目指すもの https://wordpress.org/gutenberg/ 12
  12. 12. WordBench三重 Gutenbergの目指すもの 現在の WordPress エディターは一つのオープンテキストウィンドウです。これは、文章を書くためにはす ばらしい空白のキャンバスであったのですが、画像、マルチメディア、ソーシャルメディアからの埋め込み コンテンツ、投票、その他の要素を含む投稿やページを作成する場合は、必ずしも直感的ではないさまざま なアプローチの組み合わせを必要としていました。 • 画像を挿入するための HTML やメディアライブラリー、マルチメディアや許可されたファイルの挿入。 • 埋め込み用リンクの貼り付け。 • ある種のプラグインで用意されたショートコード。 • 投稿や固定ページの上部に表示されるアイキャッチ画像。 • 小見出しのための抜粋。 • ページの横にあるコンテンツのためのウィジェット。 これらの利用について、すぐにわかる一貫性のあるものにする方法を考え、私たちは「ブロック」というコ ンセプトを採用し始めました。上記の項目はすべてブロックである可能性があります。すぐに見つけること ができ理解しやすくブロックのコンセプトは非常に強力です。設計を慎重におこなえば、すぐれた編集とパ ブリッシングの体験が得られます。 https://ja.wordpress.org/gutenberg/ 13
  13. 13. WordBench三重 Gutenbergの目指すもの 単にエディターを置き換えるだけでなく コンテンツに関わる機能がGutenbergに集約される ウィジェット ショートコード 埋め込みリンク メタボックス (カスタムフィールド) エディター カスタム投稿タイプ 14
  14. 14. WordBench三重 Gutenbergの存在意義 - あるブログでのやり取り https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/#comment-597 より引用 15 https://riad.blog/
  15. 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. 16. WordBench三重 Gutenbergの存在意義 - あるブログでのやり取り 17 https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/#comment-597 より引用
  17. 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. 18. WordBench三重 Gutenbergの存在意義 WordPressを未来に繋げる そのために Gutenberg がある 19
  19. 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
  20. 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. 21. WordBench三重 Gutenberg の 編集画面を見てみよう! 22
  22. 22. WordBench三重 Gutenberg編集画面 23
  23. 23. WordBench三重 Gutenberg編集画面 24 エディターツールバー エディター 設定 エディターコンテンツ 各エリア名称は編集画面HTMLのaria-labelより引用
  24. 24. WordBench三重 実際に操作してみよう • ブロックの追加・編集 • 記事公開・確認 25 wb.onocom.net
  25. 25. WordBench三重 ブロック一覧 26
  26. 26. WordBench三重 ブロック一覧 - Embeds 27
  27. 27. WordBench三重 編集データはHTMLコメントで記載されている 28
  28. 28. WordBench三重 編集データはHTMLコメントで記載されている 背景画像のURL 配置 ブロックの識別文字列( wp:block-name or wp:namespace/block-name ) https://wordpress.org/gutenberg/handbook/block-api/#register-block-type 29 コアブロックの場合 コアブロック以外の場合
  29. 29. WordBench三重 Gutenberg に テーマを対応させよう! 30
  30. 30. WordBench三重 シンプルなテーマを作ってみた Gutenbergの動作を確認するためにシンプルなテーマ を作りました。 https://github.com/onocom/gutenberg-challenge/ 31 ブロックで使用するスタイルを定義 Gutenberg用のテーマ設定を定義 メッセージループのみのテンプレート 基本スタイルの定義
  31. 31. WordBench三重 index.php- テンプレートはこれだけ 32 メッセージループのみ
  32. 32. WordBench三重 style.css - シンプルなスタイル 33 コンテンツ幅970px テーマ名は Gutenberg Challenge 以降WordPressのコアスタイルをコピペ https://codex.wordpress.org/CSS
  33. 33. WordBench三重 functions.php - Gutenberg用テーマ設定 テ ー マ サ ポ ー ト 設 定 ス タ イ ル 読 み 込 み 34 Gutenberg 用カスタムスタイルの読込 幅広・全幅選択肢の追加 カラーパレットの色を定義 カスタムカラー選択の無効化 デフォルトブロックスタイルの読込
  34. 34. WordBench三重 functions.php - Gutenberg用 カスタムスタイルの読込 https://wordpress.org/gutenberg/handbook/extensibility/theme-support/ 35 Gutenberg編集画面へのブロックスタイルの読み込み フロントエンド側へのブロックスタイルの読み込み
  35. 35. WordBench三重 functions.php -幅広・全幅選択肢の追加 幅広、全幅の 選択肢を追加 36
  36. 36. WordBench三重 functions.php - カスタムカラー選択の有効・無効 カスタムカラー選択を無効化 37
  37. 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. 38. WordBench三重 functions.php - カラーパレットの色を定義 カラーパレットに 色が追加される! 39 色の名前、スラッグ、 カラーコードを指定 … 必要な色数分arrayを追加する(以下省略) …
  39. 39. WordBench三重 blocks.css - カラーパレットのスタイルを定義 40 .has-スラッグ-background-color .has-スラッグ-color
  40. 40. WordBench三重 blocks.css - 幅広・全幅用のスタイルを定義 参考程度にご覧ください。 テーマによってスタイルの指定は異なると思います。 41
  41. 41. WordBench三重 Gutenberg で ランディングページを 作ってみよう! 「コードを全く必要とせず、あなたの言葉、写真、レイアウトを、頭の中で思い描 くのと同様に画面上でも見栄えの良いものにする」ことはできるだろうか!? 簡単なランディングページを作ることで体験してみよう! 42
  42. 42. Gutenberg Challenge
  43. 43. WordBench三重 今回作る ランディングページの構成 ロゴ&キャッチコピー (全幅・背景画像) ポイント1 ポイント2 ポイント3 動画 動画 画像 (幅広) 利用者の声 問い合わせフォーム CODE IS POETRY 44
  44. 44. WordBench三重 完成イメージ wb.onocom.net 45
  45. 45. LETS TRY 5min. wb.onocom.net
  46. 46. RESULTS wb.onocom.net
  47. 47. WordBench三重 現在のGutenbergの状況 複雑なレイアウトやスタイルは難しい 誰でも簡単に・・・。 という状況では(今の所)無さそう。 ただ、徐々に改善されつつある!!! 48
  48. 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. 49. WordBench三重 カスタムブロックを 作ってみよう! ぶっつけ本番!みんなで調べながらモクモクしましょう! 50
  50. 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
  51. 51. WordBench三重 初期設定 1. Gutenberg Example リポジトリをダウンロード https://github.com/WordPress/gutenberg- examples/ 2. プラグインとしてインストール インストールできたらいろんなブロックが 追加されているはず。 52
  52. 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
  53. 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
  54. 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
  55. 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
  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. 57. 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

×