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

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

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. ご清聴ありがとうござ いました！