画像を投稿に挿入するタグをカスタマイズ

imagetag画像アップローダで[投稿に挿入]ボタンを押すと、編集中の記事に以下のようなimgタグが挿入される。

アンカータグやタイトル、サイズなどの属性は親切設計で付加してくれてるのだろうが、たいていは不要だ。自分テーマ特有のクラスを使いたい場合もあるので、[投稿に挿入]ボタンを押さずに手動で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 = ‘

‘ .$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

V3になっていたGoogle Maps API

GoogleMapジオタグのついた写真を地図上に表示する自作プラグインを手直しようと調べているうちに、Google Maps APIはV3になっていることが分かった。2009年のことらしいから、Google Mapにだいぶ触れていなかった、あるいは使うことがあっても以前のコードを流用していたのか。
V3になって大きく変わったのは、APIキーが不要になったことである。APIキーはサイトごとに申請する必要があったため、テストサイトなんかでは地図を表示できないことがあった。さらにスマホ対応や、ストリートビューが利用できるようになっている。
JavaScriptライブラリの組み込みは以下の記述となる。

[PHP]

[/PHP]

sensor=falseのところは、GPS対応のデバイスであればtrueにしていろいろできる。JavaScriptでの記述にけっこう変更点があるものの、これを機会に活用したい。

JavaScriptからホームURLを知りたい

現在のブログのホームURLを知るには、テンプレートタグのhome_url()である。これをJavaScriptから知るにはどうしたらよいのか？JavaScriptから動的に画像を差し替えたり、ajaxを使う際にはホームURLがわからないと困るのだ。
このようなときはあらかじめテーマに、hidden属性で home_url() を掃き出しておくことにしている。例えば、
[PHP]

のようにホームURLが分かる。

ただしHTML上ではどうしてこんなところにhiddenがあるのか、ということになるため収まりが悪い。もう少しスマートな方法はないものか。

親ブログの情報を取得する

マルチサイトにかかわっているため、親ブログ子ブログに関するメモが続く。
さて、子ブログから親ブログの情報を取得するには、
[PHP]
switch_to_blog(ブログID);
//なにか処理
restore_current_blog();
[/PHP]
こうすることで、親ブログの情報を取得することができる。
例えば処理でget_categories()を行えば、親ブログのカテゴリ一覧を取得する。ブログIDを指定すればよいので、もちろん親子にかかわることはない。マルチサイトでの他ブログの情報、という意味である。

子テーマで親テーマのディレクトリを知る

WordPressで構築しているポータルサイトに記事コンテンツ(いわゆるブログ)を設置することになった。ここで同じブログ内の別カテゴリとしてやるか、子ブログでやるかで悩むところだ。管理者が別ということもあって、記事が混在しないほうがよいかと子ブログを採用した。

デザインも似ているため子テーマでやってみようしたら、困ったことがあった。テーマ配下にある画像やJavaScriptのパスである。画像のパスを取得する際に親テーマのディレクトリにあるのか、子テーマのディレクトリにあるのかで区別する必要があったのだ。以下で区別できるとすぐに分かった。

子テーマの場合親テーマのURLは、
bloginfo('template_url');

子テーマの場合子テーマのURLは、
bloginfo('stylesheet_directory');

通常は同じ値が返るため区別のつかなかったこのコードを子テーマで使うと、違いがあった。

カテゴリ一覧の次ページでNotFound

カテゴリ一覧でページネーションできなくなる場合がある。例えば、
http://example.com/category/sample/
というカテゴリ一覧のページがあった際、次ページとなるはずの
http://example.com/category/sample/page/2/
がNot Foundになる。
いくつかのページ系プラグインで試したので、プラグインの問題というわけではなさそうだ。
このときカテゴリの一覧では、
query_posts($query_string .'&showposts=3');
というふうに表示件数を指定している。これが原因のようだった。showpostsで指定した件数が、ダッシュボードで設定している件数よりも少ない場合に発生する。

新規投稿画面にフック

プラグインより新規投稿画面にだけJavsScriptを追加したい場合には、admin_print_scripts-post-new.php というアクションフックがあると分かった。たとえば、新規投稿画面であらかじめ特定のカテゴリーを選択状態にしておくということができる。こんなことをしなくてもデフォルトのカテゴリーは設定できるが、投稿元によってカテゴリーを変更したかったのだ。

[PHP]
function my_scripts_new(){
$file = WP_PLUGIN_URL . ‘/’ .dirname(plugin_basename( __FILE__ )) .’/example.js’;
wp_enqueue_script(‘wp-multilingual_new.js’, $file);
}
add_action(‘admin_print_scripts-post-new.php’, ‘my_scripts_new’);
[/PHP]

似た処理で、新規投稿画面のフッタにだけ処理を加えるということもできる。その場合は、admin_footer-post-new.php というアクションフックが利用できる。
[PHP]
function my_footer_new(){
// 処理
}
add_action(‘admin_footer-post-new.php’, ‘my_footer_new’);
[/PHP]

Feedにアイキャッチ画像を追加

以前フィードに画像を追加する方法として、フィードテンプレートを上書きする方法をメモしていた。画像を追加するだけなら、もっと簡単な方法があった。

[PHP]
function my_thumbnail_feeds($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = ‘

‘ . get_the_post_thumbnail($post->ID, array(150,150)) . ‘

‘ . $content;
}
return $content;
}
add_filter(‘the_excerpt_rss’, ‘my_thumbnail_feeds’);
add_filter(‘the_content_feed’, ‘my_thumbnail_feeds’);
[/PHP]

なるほど、フィード用にもフィルタがあったんだ！

マルチサイトでWPtouch

WPtouchの無料版では、機能制限としてテーマディレクトリを設定することができない。テーマディレクトリは/plugins/wotouch/themes/default/に固定されているので、スマホ用テーマを自作した際には、このディレクトリ下のファイルを差し替えるのが無難としてきた。
このほど複数あったブログをひとつのWordPressにまとめ、マルチサイトとして管理するようにしたところ、ここでつまずいた。ブログは複数あるのに、WPTouchのテーマディレクトリが固定(ひとつしかない)ではブログによってスマホ用テーマを分けることはできないではないか。

おとなしく有料版にグレードアップするしかないのか？
そもそも有料版ではマルチサイトに対応しているのか？

と諦めモードになりつつ、ダメモトでWPtouchのコアコードを修正する手段にでた。wptouch.phpの中にreturn ‘default’としている箇所が2つある。まさにテーマディレクトリを固定で返しているところだ。ここでディレクトリ名を操作できそうだ。get_blog_ID()によりマルチサイトのブログIDが分かるので、この値によってテーマ名を分ければよさそうだ。たとえばブログIDが2であればexample-2、3であればexample-3というように分岐してそれぞれのディレクトリにテーマファイルを置けばよい。結果、いまのところうまく動いている！