テーマがGutenbergに対応していないと、画像挿入時に設定できる「幅広」と「全幅」が出てきません。せっかく便利な機能なので、Gutenbergを利用するのであればこれらの機能も使いたいですよね。元からテーマ側で対応してくれていれば良いのですが…
そんなわけで、今回はGutenbergで画像を挿入した時に、「幅広」と「全幅」を表示させて使えるようにする方法をご紹介いたします。
WordPressテーマをGutenbergの「幅広」と「全幅」に対応させる方法
ステップ1. functions.phpへのコードの追加
適用しているテーマのfunctions.phpに以下を追加します。
01 02 03 04 05 06 07 08 09 10 | function gutenberg_support_setup() { //Gutenberg用スタイルの読み込み add_theme_support( 'wp-block-styles' ); //「幅広」と「全幅」に対応 add_theme_support( 'align-wide' ); } add_action( 'after_setup_theme' , 'gutenberg_support_setup' ); |
コピペでOKです。
すでにafter_setup_themeを使ってadd_theme_supportを定義している場合は、既存の関数内に「add_theme_support( ‘wp-block-styles’ );」と「add_theme_support( ‘align-wide’ );」を追加しましょう。
「add_theme_support( ‘wp-block-styles’ );」を追加することで、Gutenberg用のスタイル”/wp-includes/css/dist/block-library/theme.min.css”を追加読み込みします。そのうえで、「add_theme_support( ‘align-wide’ );」によって、幅広と全幅に対応させています。
ステップ2. CSSによる表示の調整
functions.phpにコードを追加して幅広と全幅に対応しただけでは、クラスが追加されるだけなのでCSSによる調整が必要です。幅広を選択すると、画像を内包している要素に”.alignwide”クラスが付与され、全幅では”.alignfull”クラスが追加されます。
一応、追加読み込みしたtheme.min.cssの中に以下のような記述があるので、何もしなくても画像が横幅100%にはなります。
1 | .wp-block-image.alignfull img,.wp-block-image.alignwide img{ width : 100% } |
Twenty NineteenのCSSを確認したところ、以下のようなスタイルが追加されていましたので、こちらを参考に調整すると良いかと思います。
幅広(.alignwide)
1 2 3 4 5 6 7 8 | .entry .entry-content > *.alignwide, .entry .entry-summary > *.alignwide { width : 100% ; max-width : 100% ; margin-left : auto ; margin-right : auto ; clear : both ; } |
全幅(.alignfull)
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | .entry .entry-content > *.alignfull, .entry .entry-summary > *.alignfull { padding-left : calc( 10% + 58px + ( 2 * 1 rem)); padding-right : calc( 10% + 58px + ( 2 * 1 rem)); margin-top : calc( 2 * 1 rem); margin-bottom : calc( 2 * 1 rem); left : calc( -12.5% - 75px ); width : calc( 125% + 150px ); max-width : calc( 125% + 150px ); } .entry .entry-content .wp-block-image.alignfull img { max-width : calc( 125% + 150px ); width : 100 vw; margin-left : auto ; margin-right : auto ; } |
幅広は横幅100%にするだけで良いですが、全幅の場合はブラウザ全体に広がるように工夫が必要ですね。ただ、サイトによってレイアウト等が異なると思いますので、サイトに合わせて調整してあげましょう。
あとがき
CSSの調整が多少面倒ではありますが、「幅広」と「全幅」が使えるようになると、表現の幅がぐっと広がりますね。より便利にGutenbergを使いこなしたい方は、ぜひ対応しておきましょう。