画像ポップアップ（Lity）の使い方について

ワードプレスでLityを使ってimgをポップアップさせています。
複数人に記事を書いてもらう関係上、タグを編集することが難しい人がいます。
そこで、imgを挿入したときにdata-lityを自動挿入したいのですが、いい方法がないでしょうか？
functions.phpなどに書いてできる方法がないかと考えているのですが…

No.1 ベストアンサー 回答者： kantansi 回答日時： 2023/03/06 20:09

WordPressの場合、投稿やページに自動的に特定のHTMLを挿入するためのプラグインがいくつかあります。

その中でも、"AddFunc Head & Footer Code"や"Header and Footer Scripts"などのプラグインは、functions.phpファイルに直接コードを書き込むことなく、ヘッダーやフッターにHTMLコードを挿入することができます。

以下は、"AddFunc Head & Footer Code"プラグインを使用した場合の、imgタグに自動的にdata-lity属性を追加する方法の例です。

"AddFunc Head & Footer Code"プラグインをインストールし、有効化します。
WordPressの管理画面から、"Appearance"→"Editor"を選択し、functions.phpを開きます。

以下のコードを追加します。
.php
Copy code
function add_lity_to_img( $content ) {
// imgタグにdata-lity属性を追加
$content = preg_replace('/<img(.*?)src="(.*?)"(.*?)>/', '<a data-lity href="$2"><img$1src="$2"$3></a>', $content);
return $content;
}
add_filter( 'the_content', 'add_lity_to_img' );

関数.phpを保存します。
このコードを追加すると、投稿やページにimgタグが挿入されると、そのimgタグに自動的にdata-lity属性が追加されます。このようにすることで、複数の人が記事を書いた場合でも、imgタグにdata-lity属性を手動で追加する必要がなくなります。ただし、このコードを使用する場合は、imgタグをaタグでラップすることになるため、スタイリングに注意する必要があります。

この回答へのお礼

教えていただいた方法で無事に実装することができました！
ありがとうございました。

お礼日時：2023/03/07 11:36