WordPressテーマをGutenbergの「幅広」と「全幅」に対応させる方法

WordPressテーマをGutenbergの「幅広」と「全幅」に対応させる方法

WordPressテーマをGutenbergの「幅広」と「全幅」に対応させる方法

テーマが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を使いこなしたい方は、ぜひ対応しておきましょう。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です