テーマが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 * 1rem)); padding-right: calc(10% + 58px + (2 * 1rem)); margin-top: calc(2 * 1rem); margin-bottom: calc(2 * 1rem); 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: 100vw; margin-left: auto; margin-right: auto;} |
幅広は横幅100%にするだけで良いですが、全幅の場合はブラウザ全体に広がるように工夫が必要ですね。ただ、サイトによってレイアウト等が異なると思いますので、サイトに合わせて調整してあげましょう。
あとがき
CSSの調整が多少面倒ではありますが、「幅広」と「全幅」が使えるようになると、表現の幅がぐっと広がりますね。より便利にGutenbergを使いこなしたい方は、ぜひ対応しておきましょう。