WordPress 管理画面のメディアライブラリに画像のURLとリンクのタグを表示してみる。
先日、ちゃっかりテンプレートをレスポンシブにしてスマートフォン表示にもとりあえず対応した今日このごろ。
width を100％にした時には box-sizing が便利です。
それはさておき、Wordpress で画像付きで記事を投稿する際は [新規投稿]→[メディアを追加] 後にそのままビジュアルエディタを使用して書いてるんだと思います。
ですが、自分の場合 fc2 ブログだった頃から、画像があってもなくても html に特化したテキストエディタを使用し、<p> とか <br> とかのタグを手打ち入力（←エディタの機能により半自動）しつつ記事を書いてたりします。
画像を挿入する場合は、画像をアップロード後に URL をコピーして src にペースト。みたいな。
fc2 ブログの場合、アップロードされたファイル一覧部分に URL が表示されているのですが、Wordpress の場合は編集画面に行かないとURLが表示されない。
しかも、アップロードした時に自動で作成される縮小画像が fc2 の場合『ファイル名s.jpg』と『s』が付くだけだったのが、Wordpress だと『ファイル名-横サイズx縦サイズ.jpg』となんともめんどくさいわかりずらい感じ。
こりゃイカんでしょ。と言うことで、メディアライブラリの一覧部分に URL を表示することにしました。
ここから続き
メディアライブラリに項目を追加。
コレについては、下記サイトで紹介されてたのをまんま使用。
メディアライブラリの画像一覧テーブルに画像のURLを表示する列を加える
これだけでメディアライブラリに URL の項目が追加され、元画像のフルパスが表示されます。
ただ、これだと縮小画像の URL とかサイズがわからないと言うことで多少変更することにします。
縮小画像（中サイズ）の URL・サイズを取得しつつ、ついでにタグも出力して楽をする。
ってなわけで、↓みたいに修正しました。
- function.php
-
function muc_column( $cols ) { $cols["media_url"] = "URL"; return $cols; } function muc_value( $column_name, $id ) { if ( $column_name == "media_url" ) $image_attributes = wp_get_attachment_image_src( $attachment_id, 'medium', $icon ); echo '<textarea style="width:100%;" onclick="jQuery(this).select();"><a href="' . wp_get_attachment_url( $id ) . '"><img src="' . $image_attributes[0] . '" width="' . $image_attributes[1] . '" height="' . $image_attributes[2] . '"></a></textarea>'; } add_filter( 'manage_media_columns', 'muc_column' ); add_action( 'manage_media_custom_column', 'muc_value', 10, 2 );
するとこんな感じに。
さくっと書きましたが、ここに辿り着くまで苦労しました…。
簡単に説明すると wp_get_attachment_image_src で中サイズ画像の情報を配列で取得し、あとは $image_attributes[] で出力するって感じ。
上記関数については↓を。
関数リファレンス/wp get attachment image src
ちにみに『wp_get_attachment_link($id, 'medium' )』とすると、これだけで同じようなことが出来ますが、これだと余計な class が出たり、何より自分の入力パターンじゃないので却下。
つまりは、自分仕様にするために余計な時間を…。
（<img>タグを打つ場合は「src → width → height → alt の順番」とか自分なりのパターンってありますよね？ね？）
Jquery でクリックしたら全選択するようになってますので、あとはコピーすれば『元画像へのリンクが張られた中サイズ画像のタグ』がペーストできるって魂胆です。
きっと自分にしか需要がないスペシャル仕様ですッ。
Comment Form