お問い合わせはコチラから

再利用ブロックのショートコードでimgタグのwidthとheightが付加されない理由とは?

サイト運営

CLSの対策で最近ではimgタグにwidthとheightを追加するのは必須となっています。

ブロックエディタで記事を書いている時にはwidthとheightは自動的に追加されるので意識しなくても大丈夫ですが、最近利用した再利用ブロックをショートコード化するプラグインを使ったときに画像にwidhtとheightが追加されない現象に悩まされたのでまとめておきたいと思います。

再利用ブロックをショートコード化するプラグイン

snowmonkey界隈の人が作成した、easy-access-reusable-blocksというプラグインを導入しました。

このプラグインは再利用ブロックをショートコード化するプラグインなのですが、CTAなど再利用したいブロックをショートコードにしてウィジェット領域に配置したりできるので便利です。

Easy Access Reusable Blocks
You can access the Reusable Block(s) List screen with a single click from the admin.

ショートコード内のimgタグにwidthとheightが追加されない

再利用ブロックのショートコードを記事下のウィジェット領域に配置した時に問題が起きました。

再利用ブロックには画像ブロックが含まれていましたが、imgタグに通常付加されるはずのwidthとheightが付加されません。これはプラグインの問題というより、wordpressの処理の問題になってきます。

imgタグにwidthとheightが追加されるのは実際にサイトに表示されるときに処理されます。ブロックを保存した時には追加されていないので、再利用ブロックでも同じようにwordpressに処理してもらう必要があります。

しかし、wordpressから見ると、ショートコードは展開のタイミングの問題がありますし、ウィジェット領域はthe_contentフィルタを通過しないという問題があります。その影響で、再利用ブロックをショートコード化し、the_content以外の領域に配置すると画像ブロックにwidthとheightが追加されないようです。

幸い、imgタグのclassにwp-image-XXXは追加されているので、画像IDはわかる状態です。フックを利用してwidthとheightを自動的に追加するようにします。

自動的にwidthとheightを追加する処理

the_content以外で追加しているもの(ウィジェット領域など)はthe_contentフィルタを通らないので、wordpressの最終出力に対して、imgタグのwidthとheightを追加する処置を追加します。

内容的にはwordpressの標準関数wp_filter_content_tagsと同じ内容なので、そのまま使った方が良さそうなものですが、こちらにしないと動きませんでした。

<?php
function call_back($buffer) {
    
	if(is_singular('report')){
		return _image_dimensioning_filter_content_tags($buffer);
	}
  return $buffer;

}
function buf_start() { ob_start("call_back"); }
function buf_end() { ob_end_flush(); }

add_action('after_setup_theme', 'buf_start');
add_action('shutdown', 'buf_end');

//https://xakuro.com/blog/wordpress/2185/
function _image_dimensioning_filter_content_tags( $content, $context = null ) {
	if ( null === $context ) {
		$context = current_filter();
	}

	if ( false === strpos( $content, '<img' ) ) {
		return $content;
	}

	if ( ! preg_match_all( '/<img\s[^>]+>/', $content, $matches ) ) {
		return $content;
	}

	$images = array();

	foreach ( $matches[0] as $image ) {
		if ( preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) ) {
			$attachment_id = absint( $class_id[1] );

			if ( $attachment_id ) {
				$images[ $image ] = $attachment_id;
				continue;
			}
		}

		$images[ $image ] = 0;
	}

	foreach ( $images as $image => $attachment_id ) {
		if ( $attachment_id ) {
			$size = array();
			$filtered_image = $image;

			if ( false === strpos( $filtered_image, ' width=' ) && false === strpos( $filtered_image, ' height=' ) ) {

				if ( preg_match( '/src\s*=\s*[\"|\'].*?-([0-9]{2,4})x([0-9]{2,4})\.(jpe?g|png|gif)[\"|\']/i', $image, $s ) ) {
					$size = array( $s[1], $s[2] );
				} else {
					$s = wp_get_attachment_image_src( $attachment_id, 'full' );
					if ( $s ) {
						$size = array( $s[1], $s[2] );
					}
				}

				if ( $size ) {
					$filtered_image = str_replace( '<img', '<img width="' . $size[0] . '" height="' . $size[1] . '"', $filtered_image );
					$content = str_replace( $image, $filtered_image, $content );
				}
			}
		}
	}

	return $content;
}
WordPress img 要素に width と height 属性を自動追加
ブロックエディターの画像ブロックやギャラリーブロック、メディアと文章ブロックなどの一部のブロックは、追加した画像の im...

別の方法(the_content filterを通す)

再利用ブロックをpost_idで管理して、出力する仕組み自体はwordpressのものなので、post_idだけ分かれば自分で出力部分を作ってもいいよね、という話が公式に書かれていました。

テンプレートに組み込む場合だけでなく、自前でショートコードを作っても同じことができそうです。

<?php
add_action(
	'snow_monkey_prepend_footer',
	function() {
		echo apply_filters( 'the_content', get_post( 12345 )->post_content );
	}
);
Easy Access Reusable Blocks プラグインの活用方法 | オレインデザイン
先日、Easy Access Reusable Blocks というプラグインを公開し、WordPress 公式ディレクトリに掲載登録を行いました。

まとめ

便利なものが出てくると、違った問題も同じように出てきますが、既存の対処方法を組み合わせることで道は開けます。

以前も同じような問題で、同じような対処をしたのですが、今回はその知識が生かせました。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました