デフォルトの出力
WordPressはメディア挿入時に添付ファイルの詳細情報や表示設定を記述・選択することで代替テキスト・配置方法・リンク先・サイズといったものを設定でき、「投稿に挿入」ボタンを押下すると先ほど設定した項目にあわせてwidthやheightなどの属性がimgに付加されて出力されます。
例えばこの画像のようにメディア挿入時に「キャプション」と「説明」の項目以外を記述・選択した場合は、下記のような感じで出力されます。
※出力される内容は配置やサイズ・リンク先の有無などで異なってきます。
また、今回のサンプルでは「キャプション」と「説明」の項目は使わない想定です。
<a href="http://example.com/wp-content/uploads/20xx/xx/image.jpg"><img src="http://example.com/wp-content/uploads/20xx/xx/image.jpg" alt="alt here..." width="xxx" height="xxx" class="alignnone size-full wp-image-xx" /></a>
また、アイキャッチも同じようにデフォルトでは下記のようにwidthやheightなどが記述された状態で出力されます。
<img width="xxx" height="xxx" src="http://example.com/wp-content/uploads/20xx/xx/thumbnail.jpg" class="attachment-post-thumbnail wp-post-image" alt="alt here..." />不要な属性を削除する
レスポンシブが普及したこともあってwidthやheightを削除してというのが多そうですが、場合によってはクラスが邪魔だとかリンク先は一切設定しないなどの理由で他のも必要ないということもあるので、今回はそういった属性を全て削除してsrcとaltのみ出力させる方法です。
実装には下記をfunctions.phpに記述します。
functions.php
add_filter( 'image_send_to_editor', 'remove_image_attribute', 10 );
add_filter( 'post_thumbnail_html', 'remove_image_attribute', 10 );
function remove_image_attribute( $html ){
$html = preg_replace( '/(width|height)="\d*"\s/', '', $html );
$html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );
$html = preg_replace( '/title=[\'"]([^\'"]+)[\'"]/i', '', $html );
$html = preg_replace( '/<a href=".+">/', '', $html );
$html = preg_replace( '/<\/a>/', '', $html );
return $html;
}
上記を記述後にメディア挿入をすると、デフォルトではいろいろ付加されて出力されていたものが下記のようにsrcとaltのみで出力されるようになります。
<img src="http://example.com/wp-content/uploads/20xx/xx/image.jpg" alt="alt here..." />
また、アイキャッチも同じく幾つかの属性が削除されて出力されるようになります。
<img src="http://example.com/wp-content/uploads/20xx/xx/thumbnail.jpg" alt="alt here..." />
上記方法だとほとんどの属性を削除していますが、配置の問題とかでクラスは残しておきたい場合はソース6行目を、リンク先がある場合もあるのでとりあえず残しておきたいという場合はソース8、9行目を消すなどしてください。
この方法は以下を参考にしたもので、widthとheightを削除したいだけであれば、こちらで紹介されているコードをコピペするのでも実装できます。
「添付ファイルの表示設定」を目隠しする
先ほどのコードで出力される際の不要な属性を削除することはできましたが、メディア挿入時に右側にある各種項目はそのまま表示されています。
自分のサイトであればこの部分を気にしなければいい話ですが、クライアントとかだと混乱させてしまったり何のためにあるのか説明をする羽目になってしまうので、CSSを使って（もっとスマートな方法ありそうですけど...）必要ない項目を非表示にしてしまいます。
また、今回の場合は「キャプション」と「説明」も必要ないので、こちらも併せて非表示にします。
実装には下記をfunctions.phpに記述するのですが、その他で管理画面向けのCSSを記述している場合はそこにstyleの内容を追記、もしくは管理画面用で外部CSSがある場合はそのCSSに追記をすれば問題ないと思います。
管理画面用でCSSを記述・用意していないということであれば、下記をそのままfunctions.phpに記述してください。
functions.php
add_action( 'admin_print_styles', 'admin_css_custom' );
function admin_css_custom() {
echo '<style>.attachment-details label[data-setting="caption"], .attachment-details label[data-setting="description"], div.attachment-display-settings { display: none; }</style>';
}
.attachment-details label[data-setting="caption"]で「添付ファイルの詳細 - キャプション」、.attachment-details label[data-setting="description"]で「添付ファイルの詳細 - 説明」、div.attachment-display-settingsで「添付ファイルの表示設定」全体をそれぞれdisplay: noneで非表示にしています。
上記は直接記述の感じにしていますが、嫌な人は外部ファイルとして読み込ませたCSSに記述してください。
今回は「キャプション」と「説明」も非表示にしていますが、それらは必要ということであれば.attachment-details label[data-setting="caption"]と.attachment-details label[data-setting="description"]をCSSの記述から削除してください。
記述後にメディア挿入を確認すると、このように必要な部分以外が全て非表示になり、残しておきたかった「タイトル」と「代替テキスト」のみが表示されるようになります。