テーマがGutenbergに対応していないと、画像挿入時に設定できる「幅広」と「全幅」が出てきません。せっかく便利な機能なので、Gutenbergを利用するのであればこれらの機能も使いたいですよね。元からテーマ側で対応してくれていれば良いのですが…
そんなわけで、今回はGutenbergで画像を挿入した時に、「幅広」と「全幅」を表示させて使えるようにする方法をご紹介いたします。
WordPressテーマをGutenbergの「幅広」と「全幅」に対応させる方法
ステップ1. functions.phpへのコードの追加
適用しているテーマのfunctions.phpに以下を追加します。
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%にはなります。
.wp-block-image.alignfull img,.wp-block-image.alignwide img{width:100%}
Twenty NineteenのCSSを確認したところ、以下のようなスタイルが追加されていましたので、こちらを参考に調整すると良いかと思います。
幅広(.alignwide)
.entry .entry-content > *.alignwide,
.entry .entry-summary > *.alignwide {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
clear: both;
}
全幅(.alignfull)
.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を使いこなしたい方は、ぜひ対応しておきましょう。