Gutenbergを触ってみよう

Gutenbergを触ってみよう WORDPRESSワークショップ勉強会太田晴信

太田晴信（おおたはるのぶ）自己紹介 • 1995年フィールドエンジニアとして社会人スタート • ソフトウェア会社でSE・プログラマを約9年 • 佐川急便などに仕事を転々 • 2011年イトーヨーカドーに就職
• 2014年フリーのWordPressエンジニアとして、Ｗｅｂサイト制作を開始 • 2017年から社外のＷｅｂ担当者としてＷｅｂサイトの運用代行を開始 • イトーヨーカドーで青果販売員をしながら、Ｗｅｂサイトのコンサルタント・運用代行を行っています WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 2

Gutenbergとは • WordPress5.0から標準掲載予定になっているエディタ（記事入力画面） • 投稿・固定ページ・カスタム投稿タイプの各投稿の仕方がガラリと変わります。 • パラグラフ・ヘディング・エディタ、ウィジェット、ショートコード等々の各要素をブロックという形でくぎりレゴブロックを組み上
げるような感じでWebページを完成させます。 • 現在はプラグイン（Ver 2.1.0 2018年2月9日現在）にて配布。インストール、有効化することで実装可能 WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 3

Gutenbergプラグイン WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 4

Gutenberg使用前 WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 5

Gutenberg使用後 WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 6

Gutenbergのブロックとは • 文章、引用文、画像、動画などの各要素をひとつのブロックとして扱い、レゴブロックを組み上げるように、レイアウトを組みながら記事を作成します。 https://www.webcreatorbox.com/webinfo/gutenberg WORDPRESS COPY RIGHT ワークショップ勉強会
ハルプレス 7

Gutenbergのブロック WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 8

Gutenbergブロック一覧 • https://www.slideshare.net/_onocom_/wordbench-kyoto-osaka-gutenberg-85763064 WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 12

Gutenbergブロック一覧 Embeds https://www.slideshare.net/_onocom_/wordbench-kyoto-osaka-gutenberg-85763064 WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 13

Gutenbergを見てみよう • ヘッダー部 WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 14

Gutenbergを見てみよう（ブロックの選択） WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 15

Gutenbergを見てみよう（リスト構造） i をクリックするとブロックのリスト構造が観られます WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 16

Gutenbergを見てみよう（プレビュー）目のマークはプレビュー。プレビュー画面で表示を確認できます WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 17

Gutenbergを見てみよう（Publish) Publish(公開)は2段階で公開されます WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 18

Gutenbergを見てみよう(Update) Update(更新）は1段階です WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 19

Gutenbergを見てみよう(エディタ変更） WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 20

Gutenbergを見てみよう（Document) WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 21

Gutenbergを見てみよう (カテゴリータグアイキャッチ） WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 22

Gutenbergを見てみよう WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 23

Gutenbergを見てみよう WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 27 Paragraphを選択してみると

Gutenbergを見てみよう WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 29 頻繁に使うブロックは＋をクリックしなくても表示されている

Gutenbergを見てみよう（Paragraph編） WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 30

Gutenbergを見てみよう（Heading編） WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 31

どんなデータで保存されるのか • エディタ部をドラッグコピー WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 32

どんなデータで保存されるのか • コードエディタにペースト WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 33

どんなデータで保存されるのか WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 34 HTMLコメントで編集データは記載されている見やすく色を変えます

出来ないこと課題 • パーマリンクの設定箇所がない • カラムを柔軟に作れない • カスタム投稿タイプで動作させるためには • register_post_typeする際に、ʻshow_in_restʼ
=> true が必要。 https://www.slideshare.net/_onocom_/wordbench-kyoto-osaka-gutenberg-85763064 WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 35

リンク • 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/ https://www.slideshare.net/_onocom_/wordbench-kyoto-osaka-gutenberg-85763064 WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 36

まずはやってみましょう WORDPRESS COPY RIGHT ワークショップ勉強会ハルプレス 37

Gutenbergを触ってみよう

Gutenbergを触ってみよう

More Decks by ootaharunobu

Other Decks in Technology

Featured

Transcript