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

作成日： 2019年5月15日

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

処理内容

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

コード

[php]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 );[/php]

解説

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

余談

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

参考

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

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

ある複数の単語が文章中に含まれるかどうかを調べる方法 - アナログCPU：5108843109 http://honey8823.hateblo.jp/entry/2015/08/05/173129

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

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

⬅ 前の記事
サイクリング旅行用にストラップ付きのスマホホルダーを取り付けました。
次の記事 ➡
BE-PALの6月号（2019年5月9日発売）にアウトドア向けの防滴財布が付録で付いてきます。

関連投稿

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。