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.

Gutenberg Handbookをみんなで読んでみよう

430 views

Published on

#13 WP ZoomUP 「WordPressの新エディターGutenbergをもっと知ろう」 - connpass にてお話したスライドです。

Published in: Internet
  • Be the first to comment

Gutenberg Handbookをみんなで読んでみよう

  1. 1. Gutenberg Handbook
 をみんなで読んでみよう presented by mimi 2019-03-26
  2. 2. About me mimi @miminari web好きなしゅふです。 WordPress歴は10年余。 イラスト描いたりもします。
  3. 3. Gutenberg Handbook とは 公式が書いているGutenbergの教科書
 
 https://wordpress.org/gutenberg/ handbook/
 
 これをGoogle翻訳に突っ込んで読めば 大体わかります。
 
 以上
  4. 4. Gutenberg Handbook とは …なのですが、 かなりボリュームがあって 私もほとんど読めてません。 折角なので今日はちょっとだけ 一緒に読んでみたいと思います。
  5. 5. Theming for Gutenberg 一番取っ掛かりやすそうな
 Gutenbergのためのテーマ作り
 というセクションを読んでみたい
 と思います。 ハンドブックが開ける方は
 https://wordpress.org/gutenberg/handbook/ designers-developers/developers/themes/
 を一緒に御覧くださいね。 既読・ガチ勢はフォローお願いします。
  6. 6. Theming for Gutenberg ココのセクションは “Theme Support” の1ページだけ! この1ページを読めば、
 今使ってるテーマをどうやって Gutenberg対応したら良いか
 が丸わかりです!
  7. 7. Theme Support の5つのコンセプト 1. エディタのカラーパレット 2. エディタのテキストサイズパレット 3. フロントエンドとエディタのスタイル 4. 埋め込み要素のレスポンシブ化 5. ダークモード TT 対応するべき やったほうがいい ケースバイケース mimiのオススメ度別
  8. 8. Editor Color Palette Gutenbergではデフォルトの色の セット(カラーパレット)が提供 されています。 テーマ毎に、
 このカラーパレットへ
 独自の色を登録できます。
  9. 9. Editor Color Palette 公式テーマは対応済みです。
 例えば最新のTwenty Nineteen ではテーマに合わせた右のような
 5色が出るようになっています。 色数は好きな数に設定できます。 たぶん、カバー画像のフィルター 色とかボタンの色とかでの使用頻 度高い気がします。
  10. 10. カラーパレットの設定方法 add_theme_support
 
 の ’editor-color-palette’
 を使います。 functions.php に右のソースを参考 に書き足(コピぺ)して、指定したい 色のname, slug, colorを設定して いけば OK! function mytheme_setup_theme_supported_features() { add_theme_support( 'editor-color-palette', array( array( 'name' => __( 'strong magenta', 'themeLangDomain' ), 'slug' => 'strong-magenta', 'color' => '#a156b4', ), array( 'name' => __( 'light grayish magenta', 'themeLangDomain' ), 'slug' => 'light-grayish-magenta', 'color' => '#d0a5db', ), array( 'name' => __( 'very light gray', 'themeLangDomain' ), 'slug' => 'very-light-gray', 'color' => '#eee', ), array( 'name' => __( 'very dark gray', 'themeLangDomain' ), 'slug' => 'very-dark-gray', 'color' => '#444', ), ) ); } add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' ); Handbookのソースのそのままです。 一色分 ちょっとだけPHP
  11. 11. カラーパレットの設定方法(実例) 試しに Twenty Nineteen の子テーマを作って、
 色を上書きしてみましょう。 3つの色を設定してみました。 function setup_color_pallette_for_19child() { add_theme_support( 'editor-color-palette', array( array( 'name' => 'メインカラー', 'slug' => 'primary', 'color' => '#CE2121', ), array( 'name' => 'サブカラー', 'slug' => 'secondary', 'color' => '#988768', ), array( 'name' => '背景用', 'slug' => 'background', 'color' => '#000', ) ) ); } add_action( 'after_setup_theme', 'setup_color_pallette_for_19child' ,11); priorityを11にするのが唯一の肝。
  12. 12. カラーパレットの設定方法(実例) こんな感じに好きな色に変更 できます!かんたん!
  13. 13. 公開ページ側の設定を忘れずに ただし、
 別途CSSの設定をしないと、
 公開したページには
 色が反映されません
 のでご注意を! /* 
 .has-(設定したスラッグ名)-colorと .has-(設定したスラッグ名)-background-color
 の色を設定する必要があります。 */ 
 .entry .entry-content .has-primary-background-color { background-color: #CE2121; } .entry .entry-content .has-primary-color { color: #CE2121; }
  14. 14. 公開ページ側の設定を忘れずに style.cssに追記することで 公開ページのスタイルにも 反映されます。
  15. 15. Editor Text Size Palette Gutenbergではテキストサイズもいくつ か選択できるようになっています。 これもテーマごとに
 変更できます。 TT
  16. 16. テキストサイズパレットの設定方法 add_theme_support
 
 の ’editor-font-sizes’
 を使います。 functions.php に右のソースを参考 に書き足(コピぺ)して、指定したい 色のname, size, slugを設定してい けば OK! add_theme_support( 'editor-font-sizes', array( array( 'name' => __( 'Small', 'themeLangDomain' ), 'size' => 12, 'slug' => 'small' ), array( 'name' => __( 'Normal', 'themeLangDomain' ), 'size' => 16, 'slug' => 'normal' ), array( 'name' => __( 'Large', 'themeLangDomain' ), 'size' => 36, 'slug' => 'large' ), array( 'name' => __( 'Huge', 'themeLangDomain' ), 'size' => 50, 'slug' => 'huge' ) ) ); TT
  17. 17. 実例で見てみよう 文字のサイズだけでなく 表示名も数も変更できます。 TT
  18. 18. テキストサイズもstyle.cssの設定が必要です style.cssの設定をしないと、
 公開したページには
 フォントサイズが反映されません
 のでご注意を! /* 
 .has-(設定したスラッグ名)-font-size
 のサイズを設定する必要があります。 */ 
 .entry .entry-content .has-large-font-size { font-size: 36px; } TT
  19. 19. テキストサイズの数値指定をオフにする テキストサイズの数値指定も
 オフにできます。 add_theme_support( 'disable-custom-font-sizes' ); TT
  20. 20. Frontend & Editor Styles エディター側のスタイルを
 フロント側(公開されたページ側)に 合わせることが出来ます。 ほぼプレビュー状態で編集できるのは 使い勝手が良くなるのでなるべく対応 したほうが良いです。 まずは実際にCSSを書かなくても良い ので設定だけでもやっておくのをオス スメします。
  21. 21. エディタースタイルの設定方法 テーマに合わせた
 エディタースタイルを設定するには 同様に、functions.phpに add_theme_support。
 そして、add_editor_styleで CSSファイルを指定すればエディター 画面に読み込まれます。 // Add support for editor styles. add_theme_support( 'editor-styles' ); // Enqueue editor styles. add_editor_style( 'style-editor.css' );
  22. 22. 実例で見てみよう フロント側と書体や文字サイズを
 合わせてみました。
  23. 23. That’s all for today! 残りの2つについては 自分で読み解いてみてください! 今回の適当サンプルソースは Twenty Nineteenの子テーマの形で GitHubにアップしていますので 良かったらご参照ください。 https://github.com/miminari/19childja

×