ブロックエディター(Gutenberg)をもっと活用しよう! Aichi WordPress Meetup #5

64b9a826057b29b0990f6d5511ddbe1c?s=47 RyoUozumi
February 16, 2019

ブロックエディター(Gutenberg)をもっと活用しよう! Aichi WordPress Meetup #5

カスタムブロック編
Aichi WordPress meetup #5
2019/02/16

64b9a826057b29b0990f6d5511ddbe1c?s=128

RyoUozumi

February 16, 2019
Tweet

Transcript

  1. ブロックエディター (Gutenberg)をもっと活用し よう! Aichi WordPress Meetup #5 2018/2/16 カスタムブロック編

  2. 自己紹介 • 魚住諒(24歳になりたて) • 愛知産業短期大学通信教育学部国際コミュニケーション学科を今年度卒業決定 • ジャズトランペットとガジェットと Web が好き •

    2013年8月29日より現 ryo.nagoya で WordPress デビュー • Web 関連 のアルバイト探しに難航中 • Twitter:@ryoraspp • Facebook: https://www.facebook.com/blog.ryoraspp/ (今は太ってる)
  3. アジェンダ • ブロックエディター(Gutenberg)とは何か • 5.0以上にアップデートする人が怖い人へ • カスタムブロック関連の注意事項 • カスタムブロックの凄さを伝えたい •

    番外編 • さようなら Duplicate Post or Duplicator • まとめ
  4. • ブロックエディター(Gutenberg)とは何か • WordPress 5.0 からエディターが技術革新した • JavaScriptライブラリであるReactの技術を採用 • とにかく触って見た方はこちら→https://

    ja.wordpress.org/gutenberg/ • 公式 FAQ はこちら→https://ja.wordpress.org/ gutenberg-handbook/faq/
  5. • 5.0以上にアップデートする人が怖い人へ • リストアまで試した上でのバックアップ • Classic Editor を予め入れてからのアップデート •          

    • 2021年まで Classic Editor はサポートされるがその後は検討(2022 年になった時) • 参考(https://wordpress.org/support/wordpress-version/ version-5-0/ https://torounit.com/blog/2018/12/10/5421/)
  6. 注意事項 • 今回紹介するプラグインにはテーマに対するカスタム ブロックをプラグインで追加している場合があり、 テーマとプラグインをセットで運用するのが一番で す。 • カスタムブロックを作った後そのプラグインを無効に しないように気をつけましょう。 •

    また事前検証してから本番環境で使う癖も身につけま しょう
  7. 準備 • 自分の使っているテーマがブロックエディター (Gutenberg)に対応しているかは、 • プラグイン(Block Unit Test for Gutenberg)

    • で、本番環境以外で試すのも一つの手です。
  8. • 紹介したいカスタムブロックを追加するプラグ イン一覧 • Nishiki Blocks(beta) • VK Blocks •

    Snow Monkey Blocks • Advanced Archive Blocks • Code Editor Blocks • Jetpack • Block Gallery – Photo Gallery Gutenberg Blocks • Kadence Blocks – Gutenberg Page Builder Toolkit • WooCommerce Products Block • Advanced Gutenberg
  9. • Nishiki Blocks(beta) • フキダシ • フレーム • セクション https://support.animagate.com/wp-nishiki-gutenberg-blocks/

    https://github.com/s56bouya/nishiki-blocks 有料テーマ「Nishiki Pro」がおすすめ!
  10. • VK Blocks • Outer • アラート • 質問と回答 •

    吹き出し • フロー • ボタン • PR Blocks • PR Content https://www.vektor-inc.co.jp/service/products/wordpress-plugins/vk-blocks/
  11. • Snow Monkey Blocks • アラート • 吹き出し • ボックス

    • ボタンボックス(Button with microcopy) • FAQ • アイコンリスト • 価格表 • レーティングボックス • ステップ • お客様の声 • Items • スライダー • パネル • メディアと文章 • サムネイルギャラリー • 最近の投稿 (Can be used only with Snow Monkey) • ピックアップスライダー (Can be used only with Snow Monkey) • カテゴリー一覧 • 目次 (Can be used only with Snow Monkey) • 星評価 • このページの子ページ (Can be used only with Snow Monkey) • アコーディオン
  12. • Advanced Archive Blocks • Add Archive Block support Yearly,

    Monthly, Daily, Weekly and Post Type.
  13. • Code Editor Blocks • Custom HTML Block filtered script

    tag. • Code Block.
  14. • Jetpack • Payment Buttons • Forms • Maps •

    Markdown ※WordPress.comのアカウントが必要 ローカル環境のため今回 実演出来ません m(_ _)m
  15. • Block Gallery – Photo Gallery Gutenberg Blocks • Masonry

    Gallery – (demo) • Fullscreen Stacked Gallery – (demo) • Carousel Slider – (demo) • More in the works! — (subscribe for updates)
  16. • Kadence Blocks – Gutenberg Page Builder Toolkit • Row

    Layout • Advanced Heading • Advanced Button • Tabs • Icon • Spacer / Divider • Info Box http://demo.kadencethemes.com/kadence-blocks/
  17. • Advanced Gutenberg • Latest post slider and latest post

    slider • Latest WooCommerce product slider and latest product slider • Advanced Button block: create button with tons of styles • Contact form block: get user messages and export messages • Advanced List block: create list with list icon, icon color • Map block: load a Google map position with zoom, icon, tooltip, color… • Advanced Table block: create tables with style like color, border • Accordion block: display content in a fully configurable accordion • Tabs block: display content in a fully tabbed UX • Testimonial block: define avatar, title, text, colors, slider • Contact Form block: get email and export contact form data • Email Opt-In block: get email and export data • Counter block: display numbers in a dynamic, fun and engaging way • Advanced Image block: hover text,
  18. • Advanced Gutenberg • 最新の投稿スライダーと最新の投稿スライ ダー • 最新のWooCommerce製品スライダと最新 の製品スライダ •

    Advanced Buttonブロック:たくさんの スタイルでボタンを作成する • 連絡フォームブロック:ユーザメッセージ の取得とメッセージのエクスポート • アドバンスドリストブロック:リストアイ コン、アイコンカラーでリストを作成 • 地図ブロック:ズーム、アイコン、ツール チップ、色でGoogleの地図位置をロード します。 • 高度なテーブルブロック:色、ボーダーな どのスタイルでテーブルを作成 • アコーディオンブロック:完全に設定可能 なアコーディオンでコンテンツを表示する • タブブロック:タブ付きの完全なUXでコ ンテンツを表示する • 紹介文ブロック:アバター、タイトル、テ キスト、色、スライダーを定義する • Contact Formブロック:Eメールを受信 し、連絡先フォームのデータをエクスポー トする • 電子メールオプトインブロック:電子メー ルを取得してデータをエクスポートする ※Google翻訳
  19. • WooCommerce Products Block • Products by Attribute Block •

    注目の商品ブロック • 厳選商品ブロック • ベストセラー商品ブロック • 高評価の商品ブロック • 最新の商品ブロック • セール商品ブロック • カテゴリーブロック別商品
  20. 番外編 難しいと思ったら聞き逃そう!

  21. • Autocomplete • 段落ブロックを追加 • 「/」を入力 • 例:「/html 」 IUUQTXPSEQSFTTPSHHVUFOCFSHIBOECPPL

    EFTJHOFSTEFWFMPQFSTEFWFMPQFSTDPNQPOFOUT BVUPDPNQMFUF
  22. • Block Lab • カスタムブロックを作る第一歩が WordPress の 管理画面から作れるプラグイン • 5.0以降にはまだ対応してないため対応を待ちま

    しょう
  23. さようなら Duplicate Post or Duplicator • 記事などを複製するのは、また同じ様なことを 書いたりするのに便利である • しかし、ブロックエディターから増えた、再利

    用可能ブロックで代替する方法があるのである • と言っても本音、 Duplicate Post or Duplicator も便利ですなぁ・・・
  24. • ①再利用可能ブロックを作る • 再利用したいブロックをまずは作成 • 「再利用ブロックに追加」をする • ②へ進む

  25. • ②再利用可能ブロックの名前を決めて保存

  26. • ③すべての再利用ブロックを管理 • すべての再利用ブロックを管理をクリック • wp-admin/edit.php?post_type=wp_block へと飛ばされる

  27. • ④ブロックの管理画面が出てくる

  28. • ⑤再利用ブロックの中でまたブロックを追加できる

  29. • ⑥再利用可能ブロックに複数ブロックを追加して 保存!

  30. 実は再利用可能ブロックは 複数のブロックを追加できるの です! هࣄෳ੡Έ͍ͨͳ͜ͱ΋Ͱ͖·͢ɻ ͋ͳͨ͸ͲͪΒΛબͼ·͔͢ʁ

  31. まとめ • WordPress 5.0 からブロックエディターになることで沢山の人が良くな い評価を出していました。 • しかし、Reactによる技術革新のおかげで、こんなにもカスタムブロック で拡張したりできて、ノンコーディングで作れる感が更に増えて僕は嬉し いです。

    • 今回のセッションで、「このプラグイン使って見たいな」と一つでも思っ ていただけたら嬉しい限りです。 • 以上、お粗末なスライドと実演ですみませんでした。 • そして、これから僕は自分が使いたいブロックをまず作る側になれる様、 自己研鑽して行きます。
  32. ご清聴ありがとうござ いました!