複数のサイドバーを作成する

本ブログは3カラムのデザインでサイドバーが2つある。現状、sidebar.phpにまとめて記述してしまっているが、左と右をそれぞれのテーマファイルに分けることもできる。例えば、
・sidebar-left.php
・sidebar-right.php
の2ファイルに分けて記述し、index.phpなどからは以下のように呼ぶ。

get_sidebar('left');
get_sidebar('right');

不特定多数のカスタムフィールドを取得する

例えば”hoge”というキー名のカスタムフィールドの値を取得するには、以下となる。
get_post_meta($post->ID, "hoge", true);

キー名が不特定多数であるかないか分からない場合もある。そんなときは、以下の方法で任意の投稿に関するすべてのカスタムフィールドを取得することができる。

投稿へのコメントを許可する

先日の投稿画面の不要なボックスを削除でディスカッションの欄を非表示にしたはいいものの、これでは投稿へのコメントが不許可になってしまうことがわかった。運用上、投稿へのコメントを強制的に許可しておかねばならない。

これにはwp_insert_post_data というアクションフックを利用する。更新される事前の投稿データがくるので、このタイミングで修正することができる。

[PHP]
add_action( ‘wp_insert_post_data’, ‘my_wp_insert_post_data’, 10, 2 );

function my_wp_insert_post_data( $data, $postarr ) {

if ( $data[‘comment_status’] == ‘closed’) {
$data[‘comment_status’] = ‘open’;
}

return $data;
}
[/PHP]

もう何年もWordPressを使っているというのに、知らないアクションフックが毎日でてくる。

投稿画面の不要なボックスを削除

nippiWordPressのバージョンが上がるごとに複雑化するダッシュボードである。できることが増えて便利な反面、ユーザには分かりづらくなってくる。ダッシュボードにログインすると「ワーッ!」ってなっちゃうというのだ。
mixi日記レベルと思っていたWordPressの更新作業であるが、ユーザはそんな気持ちをかかえていたのか。ダッシュボードが地味すぎるのがダメなのか?このように訴えるクライアントが続けて2件あったため、なんとかしようと思い立った。

そこで思い出したのが、年末に見せていただいた「WordCamp Tokyo アンケート集計サイト」だ。投稿画面を大胆にカスタマイズして、アンケート集計に撤したものである。そこにはチェックボックスとラジオボタンが並び、本文フィールドは消えていた。見たときには、こんなことができるんだ!使い道がわからないけどなんかかっこいい!ぐらいに思っていた。いざ、アレを使うとき。

まずは、投稿画面の抜粋やディスカッション、サイドバーのカテゴリ、タグなどわかりずらくて不要と思われるボックスを削除する。削除のタイミングは、ボックスを追加する際と同じアクションフッック add_meta_boxes を利用する。

[PHP]
add_action(‘add_meta_boxes’, ’my_add_meta_boxes’, 10, 2 );

function my_add_meta_boxes($post_type, $post) {
$meta_boxes = array(
‘side’ => array( ‘tagsdiv-post_tag’, ‘categorydiv’, ‘durationdiv’, ‘postimagediv’, ‘formatdiv’ ),
‘normal’ => array( ‘trackbacksdiv’, ‘commentstatusdiv’, ‘commentsdiv’, ‘postexcerpt’, ‘postcustom’, ‘slugdiv’, ‘authordiv’, ‘revisionsdiv’ )
);

foreach ( $meta_boxes as $position => $boxes ) {
foreach ( $boxes as $box ) {
remove_meta_box( $box, $post_type, $position );
}
}
}

[/PHP]

かなりすっきりした!
さらに本文フィールドを消す場合には、別のアクションフック init を利用する。

[PHP]
add_action( ‘init’ , ‘my_remove_post_editor_support’ );

function my_remove_post_editor_support() {
remove_post_type_support( ‘post’, ‘editor’ );
}
[/PHP]

こうなるともうなんでWordPressでやるの?って感じになってくる。好きだからよいのだ。

参考にしたのは、
WordCamp Tokyo アンケート集計サイトの舞台裏 | Simple Colors

WordCamp Tokyo 2011

Wapuu本日、品川シーサイド楽天タワー2号館にて開催されたWordCamp Tokyo 2011に参加してきた。開催されるたびに規模が大きくなるWordPressのイベントである。今回はユーザー/ブロガートラック、デザイナートラック、テクニカルトラックという3種類のセッションが並行して進むなか、時間帯ごとに好きのを選べる形式となった。
私が選んだのは、

  • アンカンファレンス: WordPress の疑問をみんなで分かち合おう(テクニカル)
  • 早く・良いものを作るための、WordPressサイト構築ワークフロー(デザイン)
  • WordPress の動作原理詳説(テクニカル)
  • WordPress の現在とこれから(キーノート)
  • 実践!オリジナルテーマで作る、スマホサイト&マルチスクリーンサイト(デサイン)
  • WordPress ハイパフォーマンスチューニング Reloaded
  • WordCamp Tokyo 2011 公式サイト制作チーム パネルディスカッション(デサイン)

ブログツールとはいえいろんな使い方を思いつくものだな、と刺激を受ける。そして
悩むことといえばお客さんとのコミュニケーションだったり、速度の問題だったりと共感することが多いのも興味深かった。

最後のライトニングトークでは登壇の機会を戴いた。人前で話すことが苦手なうえ準備も不十分で悔いが残るものの、よい経験でした。聞いてくださった皆様ありがとうございます!
»WP-Furigana ふりがなを自動入力するプラグインの資料はこちら
(Web用に修正を加えました)

コメント関連で使ってみたプラグイン5つ

コメント関連で使ったことがあるプラグインをメモ

  • Quick Comments
    画面遷移せずにコメント投稿できる、というのはユーザからけっこう要望をいただくインタフェースだ。なぜならWordPressでコメントした際のエラー表示があまりにしょぼくて見たくないからである。このプラグインを使うと、コメントの入力チェック、エラー表示、表示までの一連の作業がAjaxで行われる。ただ最近のコメント階層や、コメントの並び順に対応していないため、使う機会が減った。とても残念、国産だから対応してくれないかしら?

  • Ajax Comment Posting
    やはりコメント投稿をAjax処理してくれるプラグインだ。エラー表示がLightBox風に表示されるのが好みでない。(画面の真ん中にマウスを持って行ってOKボタンを押すのがめんどい) あとログインしているのに名前の入力が必須となっているのは設計ミスだろう。名前欄がないのでコメント投稿できなくなり、すぐに捨て去った。こんなのも公式プラグイン?

  • Comment Validation
    JavaScriptでチェックできる範囲のエラーが、送信ボタンの下に表示される。コメントが早過ぎたり、重複などのコアなエラーは素画面が表示されるのが不満だ。これも名前とメールアドレスの入力を必須にしていないにもかかわらず、名前欄が必須のエラーとなる。そこさえ直せばこの中では無難といえる。

  • Comment Image
    写真関連の掲示板を頼まれたので、これを使って画像も投稿できる掲示板を実現しようとしている。ファイル参照欄は自動で挿入する形式と、特定の箇所に自力で設置する方式が選べる。掲示板のみで使いたいので後者でやってみた。アップロードされた画像はプラグインのフォルダに保存される模様だ。そのためマルチサイトに未対応となっている。コメント欄のCSSを工夫すれば楽しくなりそう!

  • WP Ajax Edit Comments
    投稿してしまったコメントを、一定の期間内であれば修正できるプラグインだ。コメント欄で使える10のWordPressプラグイン | Webクリエイターボックスで知った。おもしろい!こんなことができるなんて思いつきもしないから、探しもしなかった。

このなかですぐに使ってみたいと思ったのは、Comment ImageとWP Ajax Edit Commentsだ。どちらもWordPressにはないけど、あったら良いなという機能を実現している。冒頭に挙げたAjaxを使ったコメント投稿はぜひ欲しい機能だけど、コメントが複雑化してきたため対応が難しいのだろうか。なかなか思ったとおりのが見つからない。

投稿画面の入力セクションの位置

ダッシュボードの投稿画面に入力セクションを追加する方法は以前にメモしておいた。デフォルトではメインカラムの一番下に追加されるので、ドラッグ&ドロップして上なり横なり好みの位置にもっていけばよいとしていた。
とはいえ、ユーザにその発想がない場合もある。いちいち説明するのは面倒くさいし、サイズ小さめであれば最初からサイドバーに設置したほうがスマートだ。表示位置を指定する方法があるのかどうか調べてみると、add_meta_box()の5番目のパラメータとして$context(編集画面セクションが表示される部分)というのがあった。これを指定しない場合のデフォルトは’normal’である。ほかに’side’というのがあって、こちらを指定すると入力セクションはサイドバーに表示される。

6番目のパラメータとして$priorityというのもある。これは上下位置を調整するものだろうか?

WordPress 3.2 がリリース

twentyeleven週末にWordPress 3.2 の日本語版がリリースされてた。今回はメジャーアップデートということで、コードネームはGershwin!

目立った変更点はダッシュボードのデザインだ。サイドメニューが立体的になり主張しすぎている。ネットワークのメニューがどこにあるのかわからなかった。ログアウトもよく使うから、ドロップダウンになってるのは面倒かな。このへんは慣れであろう。
まずはダッシュボードにアクセスすると、「お使いのブラウザは古すぎます!」というメッセージが大きく表示されて驚いた。某アドオンが捨てられなくてFireFox 3系を使っているためだ。そんなに古すぎるだろうか?「お使いのブラウザは古いかも?」ぐらいに和らげてほしいよ。

それより新テーマが追加されるという事前情報が気になっていたので、さっそく使ってみた。新テーマのTwenty Eleven はHTML5 + CSS3で作成されている。ページ遷移するたびにヘッダー画像が切り替わるのは、[外観]メニューの[ヘッダー]設定でオンオフ可能になっている。さらに[外観]メニューに[テーマ設定]という項目が追加されている。ここでは全体的に白背景か黒背景かを選択できる「色の設定」と、「リンク色の設定」「デフォルトのレイアウト」の設定がある。「デフォルトのレイアウト」とはサイドメニューの位置を左か、右か、無しかを選択できる。
業務用テーマを作成する場合にはこのようなカスタマイズは無用に思えるものの、配布テーマとなるとコードを触らずとも設定できる項目が重要になってくる。自由度が増すぶん公式テーマの審査基準も上がるんだろうなぁ。
構成ファイルを見るとloop.phpはなくなってて、かわりにcontent-XXX.phpのようなフィアル名がたくさんある。投稿フォーマットに関係があるのか?Twenty Eleven のすみからすみまで観察して勉強しなければ!

マルチサイトのサブドメインをサブディレクトリに変更したい

既存のサイトに子サイトを追加することになり、ネットワークの設定を行った。初めてこれを行う際にはサブドメイン方式かサブディレクトリ方式かが選べるはずだったように思う。ところが選択肢が表示されずに、強制的にサブドメイン方式になってしまった。
WordPressをインストールしてから1カ月以上経過している場合や再インストールした場合には、この現象になるらしい。wp-config.phpと.htaccessを手修正することでサブディレクトリ方式に変更することができた。

参考にしたのは、
akibonne’s manual of style : WordPress: サブディレクトリ式でマルチサイト化する手順

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

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