TORIYAMAHONPOS WordPressのまめ知識
の記事
TORIYAMA Yuko
テーマを作成する際のオプション的なテンプレートのひとつに、image.phpがある。添付画像を単独で表示するものだ。
例えばWordPressのデフォルト機能であるショートコードgalleryは、投稿ページの画像一覧をクリックすると画像ごとの詳細ページを見ることができる。とりあえずはsingle.phpが使用されるので、image.phpを用意することで単独画像のタイトル、キャプション、説明、コメントなど詳細を表示することができる。
bodyタグには”.single-attachment”などのクラスが付加される。これを利用してスタイルを変えることもできる。せっかくだからサイドバーを取り払って、画像を大きく見せるのもよい。
つくってみたのがこのページ。
TORIYAMA Yuko
画像アップローダで[投稿に挿入]ボタンを押すと、編集中の記事に以下のようなimgタグが挿入される。
|
1 |
<a href="画像URL"><img src="画像URL" alt="代替テキスト" title="タイトル" width="240" height="180" class="alignnone size-full wp-image-151" /></a> |
アンカータグやタイトル、サイズなどの属性は親切設計で付加してくれてるのだろうが、たいていは不要だ。自分テーマ特有のクラスを使いたい場合もあるので、[投稿に挿入]ボタンを押さずに手動でimgタグを記述してしまうことが多かった。
自分が使うにはそれでもよいものの、他人が使う場合は通じない。編集担当よりimgタグがめんどくさすぎてなんとかするよう要望があったので調べているうちに、[投稿に挿入]のタグをカスタマイズできることがわかった。
まずは get_image_tag というアクションフックを利用する。imgタグを生成するタイミングで不要なタグを除去することができる。
[PHP]
function my_remove_img_attr($html, $id, $alt, $title, $align, $size){
$html = preg_replace(‘/ width=”\d+”/’, ”, $html);
$html = preg_replace(‘/ height=”\d+”/’, ”, $html);
$html = preg_replace(‘/ class=”.+”/’, ”, $html);
$html = preg_replace(‘/ title=”.+”/’, ”, $html);
return $html;
}
add_action( ‘get_image_tag’, ‘my_remove_img_attr’, 1 ,6);
[/PHP]
これで挿入されるタグは以下となった。
<a href="画像URL"><img src="画像URL" alt="代替テキスト" /></a>
実をいうとアンカータグもいらない。しかし、この時点でアンカータグは生成されていなかった。記事に画像を挿入する別のタイミングがあるらしい。それが image_send_to_editor というアクションフックだ。ここでアンカータグを削除することができた。ついでに、自分テーマのクラスで囲む。
[PHP]
function my_image_send_to_editor( $html, $id, $caption, $title, $align, $url, $size ) {
$html = preg_replace(‘//’, ”, $html);
$html = preg_replace(‘/<\/a>/’, ”, $html);
$html = ‘
‘;
return $html;
}
add_action( ‘image_send_to_editor’, ‘my_image_send_to_editor’, 10 ,7);
[/PHP]
これで挿入されるタグは以下となった。
<div class="imagebox"><img src="画像URL" alt="代替テキスト" /></div>
まとめて処理できるのかもしれないが、今のところはこんなかんじでまずまず。
参考にしたのは、
WordPressで画像をアップロードする際に挿入される邪魔な属性を排除するプラグイン | モンキーレンチ
WordPressの画像挿入時にwidthとheight指定が入らないようにする | Simple Colors
TORIYAMA Yuko
ログイン画面に表示される「WORDPRESS」というロゴを変更することができる。
[PHP]
function my_login_logo() {
$url = “画像のフルパス”;
echo ‘
‘;
}
add_action(‘login_head’, ‘my_login_logo’);
[/PHP]
さらに、ダッシュボードの左上の「W」というアイコンを変更することもできる。
[PHP]
function my_admin_logo() {
$url = “画像のフルパス”;
echo ‘
‘;
}
add_action(‘admin_head’, ‘my_admin_logo’);
[/PHP]
どちらもフックを利用してCSSを上書きしている。属性が強いのか、!importantが必要だった。
これだけでも、けっこうカスタマイス感が上がる！
TORIYAMA Yuko
WordPress 2.9よりアイキャッチ画像という機能が加わっている。投稿に添付した画像のなかから、トップページなどでサムネイル的に表示する画像を1枚選択できるのだ。アイキャッチ画像を使用するには、テーマのafter_setup_theme フックでそのむね宣言しておく必要がある。functions.php に以下を記述しておけばよい。
[PHP]
function mysetup() {
add_theme_support( ‘post-thumbnails’ );
}
add_action( ‘after_setup_theme’, ‘mysetup’ );
[/PHP]
これで投稿画面の右下あたりにアイキャッチ画像の項目が表示される。テーマを作成するうえで必須の処理となっている。
設定したアイキャッチ画像は、以下の一行でサムネイルとして表示することができる。
[PHP]
[/PHP]
今までは、投稿記事に添付した画像からget_children()で抽出した画像を表示するために長々とコードを書いていた。こんな便利になっていたとは知らなかった。
TORIYAMA Yuko
WordPress2.8.4にアップデートした後にひっかかったのは、画像ファイルのアップロードだ。
投稿画面で「画像の追加」アイコンをクリックしてもウンともスンともいわなくなってしまった。よく見るとFireFoxでJavaScriptのエラーが大量に出ている。とりあえずプラグインをひとつづつ無効にしていきながら、Simple Tagsでひっかかっていることまでつきとめた。
Simple Tagsを最新バージョンにアップデートしてみるも直らない。このような有名なプラグインが最新バージョンに対応していないはずはないと思った。そこでふと思いついてFireFoxをIEに変えると、問題ないことが分かった。FireFoxがだめなのか？と2、3日はブログの更新をIEで行っていた。またふと思いついて、FireFoxを最新バージョンにしたら正常に戻った。
何事も最新バージョンに保たないと思いどおりにいかないものだ。
TORIYAMA Yuko
記事に投稿されている画像を取得するには、添付ファイルを取得するget_children()でimageを指定する。画像のURLのほか、タイトルやサイズなどのメタ情報も取得することもできる。
[sourcecode language=’php’]
$attachments = get_children(array(‘post_parent’ => $id, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’));
if (is_array($attachments) ){
foreach($attachments as $attachment){
$image = wp_get_attachment_url(intval($attachment->ID));
echo ‘