画像挿入時にリンク先が画像の時のみデータ属性値を付加する方法【WordPress】

画像挿入時にリンク先が画像の時のみデータ属性値を付加する方法【WordPress】



WordPressの投稿画面で画像を挿入する際、リンクをLightboxで開くように設定したいと思います。

処理内容

「添付ファイルの表示設定」で指定するリンク先が画像ファイルの場合に限りaタグにdata-type="lightbox"を付加する。

コード

function output_image_send_to_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
	$image_mime = [ '.jpg', '.jpeg', '.gif', '.png' ];
	str_replace( $image_mime, $image_mime, $url, $count );
	if ( 0 !== $count ) {
		$html = str_replace( '"><img', '" data-type="lightbox"><img', $html );
	}
	return $html;
};
add_filter( 'image_send_to_editor', 'output_image_send_to_editor', 10, 8 );

解説

  1. image_send_to_editorで画像挿入時に処理するフィルターを追加します。
  2. リンク先の変数$urlの拡張子を調べて、画像か判断します(これでリンク先が「添付ファイルのページ」や「カスタムURL」でも対応可能です)。
    ポイント
    調べたいキーワードの配列を作成して、str_replaceで置換回数をカウントすることで、複数パターンの文字列の検索が簡単に出来ます。
  3. 画像だった場合、出力される変数$htmlに対してstr_replaceで末尾にdata-type="lightbox"を付加します。

余談

$caption$alt等の他の変数を置換して$htmlに自由に組み込むことも出来ます。

参考

[WordPress] 画像挿入時にリンク先が画像の時のみ、aタグに独自クラスを付与する方法
参考
[WordPress] 画像挿入時にリンク先が画像の時のみ、aタグに独自クラスを付与する方法

ライトボックス系で画像の拡大表示をしたい時など、aタグに独自クラスを付与したい場合があると思います。そんな時に自動的にHTMLにクラス付けする方法です。

[WordPress] 画像挿入時にリンク先が画像の時のみ、aタグに独自クラスを付与する方法 memocarilog


ある複数の単語が文章中に含まれるかどうかを調べる方法 - アナログCPU:5108843109
参考
ある複数の単語が文章中に含まれるかどうかを調べる方法 - アナログCPU:5108843109

タイトルの通り、ある文章の中に特定の単語(複数)が含まれるかどうかをチェックする機能が欲しくていろいろ調べていました。掲示板やブログコメントのNGワードチェックのような用途です。

ある複数の単語が文章中に含まれるかどうかを調べる方法 - アナログCPU:5108843109 アナログCPU:5108843109

今日はここまで

関連する記事



こちらはいかが?


コメントを残す