Wood-Roots:blogHOMEWordPress201407/08記事内に画像を挿入するときのHTMLをカスタマイズするWordPressダッシュボードの「メディアを追加」から画像を選び、「投稿に挿入」をクリックするとimgタグが記事に挿入されます。この挿入されるHTMLをもうちょっと自分好みにできればいいなと思い、編集する方法について調べてみました。PHPコードをfunctions.phpに記述します。ADs画像を挿入する際に適用されるフィルターフックについてimgタグに対して適用されるフィルターフックとリンクを設置した際のaタグまで含めた結果に適用されるフィルターフックがあります。それぞれ適用される対象が異なるので、どういう処理をしたいかを考えてフィルターフックを使い分けます。imgタグそれぞれに適用されるフィルターフック→get_image_tagリンクを設置した際のa>imgに適用されるフィルターフック→image_send_to_editorimgタグそれぞれに適用されるフィルターフック:get_image_tagget_image_tagはimgタグに対して適用されるフィルターフックです。返り値はimgタグそのものとなります。false;”」を追加するいい例が思いつかなかったのであまり実用的ではないですが、imgタグに対してoncontextmenuを設定したい場合を考えてみます。get_image_tagは6つの引数を取ります。それぞれ、$html・・・最終的に出力されるimgタグ。これをreturnする必要がある。$id・・・アタッチメントID(投稿IDではない)$alt・・・代替テキスト$title・・・タイトル$align・・・配置$size・・・サイズ(medium、largeなど)となります。6);aタグ設置後のHTMLに適用されるフィルターフック:image_send_to_editorimage_send_to_editorはリンクを設置した際のa>imgとなるHTMLに対して適用されるフィルターフックです。リンクを設置しない場合はimgに対して適用されます。例:imgタグを包括するaタグをdiv.imageblockで囲う画像を挿入するとimgやa>imgがそのまま挿入されますが、それをdivで囲いたいというときのフィルターフックの例です。/></a></div>この処理を前述のget_image_tagに書いてしまうと、画像にリンクを設置した際にa>div>imgとなってしまい、想定しているHTMLになりませんので注意してください。引数はそれぞれ$html・・・最終的に出力されるa>imgタグ。これをreturnする必要がある。$id・・・アタッチメントID(投稿IDではない)$caption・・・キャプション$title・・・タイトル$align・・・配置$url・・・リンクを設定した際のリンク先URL$size・・・サイズ(medium、largeなど)$alt・・・代替テキストとなります。上記のimage_send_to_editorと似ていますが、media_send_to_editorというフィルターフックを使います。引数は以下のようになっています。$html・・・最終的に出力されるタグ。これをreturnする必要がある。$id・・・アタッチメントID$attachment・・・添付ファイルの情報が配列で入っているたとえば添付ファイルをdiv.mediablockで囲いたい場合は以下のようになります。$html;}add_filter('media_send_to_editor','image_wrap',10,3);画像以外のメディアの場合は単純なHTMLではなく、ショートコードが挿入される点に注意してください。まとめget_image_tag、image_send_to_editorについては扱える引数がやたらと多いので一見すると難しそうですが、使わない引数は無視してよいです。結局やりたい処理は「出力されるHTMLを書き換える」というシンプルなものなので、日常の更新が面倒だと思っているサイト運営者の方は導入を検討してみるといいかもしれません。これらのフィルターフックは適切に使うと日常の更新作業が楽になりますが、やりすぎると更新時の自由度が下がってしまいます。Tagのような定型文挿入プラグインを使ったりカスタムフィールドを使ったりなど、ケースバイケースで考えていくといいのではないかと思います。コメントをキャンセルメールアドレスが公開されることはありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。