2012年1月21日開催予定のWordBench福井のイベント『WordCrab Fukui 2012』。参加費の集金用に、WordBench福井名義のゆうちょ口座を開設したところ、なんだかやたらとFacebook上での反応が良かったので、その開設方法を解説したいと思います……ってどーでもいいシャレですみません

任意団体名義での口座開設というとハードルが高いようですが、ゆうちょ銀行についていうとそうでもないみたいです。WordBench福井の前に、別の団体の口座も同じような方法で開設しているので、ほぼこの手順で問題ないでしょう。

1. 団体の規約を作る
2. 代表者個人の印鑑と身分証明書を用意する
3. 代表者と会計担当者が別の場合は、会計担当者の印鑑と身分証明書を用意する
4. 1～3を持って郵便局に行く

ほぼ唯一の作業といっていいのは1.の規約作成です。といっても難しいものをつくる必要はなく、私の場合はA4判2枚の規約を作ってOKでした。参考になれば……ということで、提出した規約をもとにOpenDocument形式のテンプレートをつくりましたので、ご利用いただければと思います（一応PDF形式のファイルもダウンロードできるようにしました）。

なお、規約については一発OKが出ず何度か修正を求められるケースもあるので、口座開設手続きは最寄りの郵便局でやったほうがよいでしょうね。

規約テンプレート（OpenDocument形式）
規約テンプレート（PDF形式）

このところのVPSの低料金化で、重ったらしい共用サーバからVPSに乗り換えてWordPressを稼働させている方も多いかと思います。かくいう私もVPS（『さくらのVPS512』）に乗り換えて、当サイト含め3つのサイトを稼働させています。

PHPアクセラレータによる高速化

さて、せっかくVPSでWordPressを稼働させるのであれば、さまざまなワザを使って高速化を図りたいもの。その一つとして人気が高い（というか定番）のが、PHPアクセラレータを導入するという手法です。私が導入しているPHPアクセラレータ『APC』のサイトにはこう書かれています。

Alternative PHP Cache (APC) は、PHP の実行コードをキャッシュする仕組みで、 フリーかつオープンに使用できます。PHP の中間コードのキャッシュ・最適化を行うための、 フリーでオープンかつ堅牢なフレームワークを提供するということを目標としています。

意訳すると、PHPスクリプト（WordPressでいうとコアファイルやテーマファイル、プラグインなど *.php という名のファイル群）を、サーバがより高速に処理できる状態（バイトコードという）に変換し、メモリ上に蓄えておく仕組み。以降、同じPHPスクリプトを実行するときには変換後のバイトコードを使いまわすため、高速化が図れるというわけです。

で、何が起きた？

このメリットが実は落とし穴でした。WordPressのテーマディレクトリにある functions.php をいくらいじってもサイトに反映されないのです。

WordPressの利点として「PHPスクリプトをトライアンドエラーで修正しながらサイトを構築できる」があると思います。某CMSのように「再構築」という面倒きわまりない手順を踏まなくても、PHPスクリプトをちょっと書いて実行して、また修正して……が簡単にできる。すばらしい。

ところが、PHPアクセラレータを使っていると、PHPスクリプトの修正がすぐには反映されません。コンパイルされたバイトコードがメモリ上に残っていると、PHPスクリプトを修正しようが中身がからっぽになろうが、ゾンビのようにバイトコードが実行されてしまうのです。

例えば、当方の環境（Ubuntu 10.04 i386）におけるAPCの設定ファイル /etc/php5/apache2/conf.d/apc.ini にはこんな記述があります。

apc.gc_ttl=3600

これは、PHPスクリプトが変更されても3600秒間は変更前の古いバージョンでコンパイルしたバイトコードを使い続けるという設定です。なので functions.php をいくらいじってもサイトに反映されなかったというわけ（1時間待てば反映されるんですけどね…… ）

前振りが長くなりましたが対処法

APCを導入していて、かつ、テーマのテンプレートファイルや functions.php を変更する必要が出てきたら、一時的にAPCを停止させるのがいいでしょう。

/etc/php5/apache2/conf.d/apc.ini をエディタで開き

-apc.enabled=1
+apc.enabled=0

と変更して、ウェブサーバ（当方の環境ではApache2）を再起動。

sudo service apache2 restart

こうすることで、PHPスクリプトの変更が即座にサイトに反映されるという、WordPress本来のメリット（？）にあずかれるようになります。

修正が終わったら、再度 apc.ini の書き換えとウェブサーバの再起動をお忘れなく。

私がよくやる制作工程ということで、作業環境はこんな感じ。

• サーバA …… さくらのVPS 512
• サーバAのWordPressインストールディレクトリ…… /home/foo/bar
• サーバB …… さくらのレンタルサーバ スタンダード
• サーバBのアカウント …… hoge
• サーバBの初期ドメイン …… hoge.sakura.ne.jp
• WordPressを転送したいサーバBのディレクトリ …… /home/hoge/www/fuga

サーバAにログインして以下のコマンドを実行。

rsync -e "ssh -p 22" -rz /home/foo/bar/ hoge@hoge.sakura.ne.jp:/home/hoge/www/fuga/

コマンドを実行すると「DSA key fingerprint is ～」という文字列の後に

Are you sure you want to continue connecting (yes/no)?

と出てくるので yes [enter] で続行。アカウント hoge のパスワードを入力後、しばらくしてプロンプトが返ってきたら転送完了です。サーバBにSSHでログインして無事転送されたか確認しましょう。

ちなみに rsync の -a オプションを使わないのは、転送するファイルの所有者やパーミッション、タイムスタンプなどをサーバBに反映させないようにするためです。

なお、ここで紹介した作業ではデータベースの内容は移設できません。phpMyAdminを使った移設方法を別エントリーでまとめてありますので、そちらもあわせてどうぞ。

そんな『Breadcrumb NavXT』、今まで作ったいろんなサイトに組み込んでいるものの、どうもカスタム投稿タイプとの相性がよろしくない様子（プラグインのそのものはカスタム投稿タイプに対応している、ということになっているのですけれども）。

『Custom Post Type UI』プラグインを使った私の設定に原因があるのかもしれませんが、あるサイトでこんなパンくずリストが出力されました。

何が起きた？

ホーム > [カスタム投稿タイプのラベル] > [カテゴリー名] > 記事タイトル

HTMLを見てみるとこんな感じです。

<ul>
<li><a title="ホーム" href="http://www.example.com">ホーム</li><li><a title="[カスタム投稿タイプのラベル]" href="">[カスタム投稿タイプのラベル]</a></li><li><a title="[カテゴリー名]" href="http://www.example.com/path/to/category">[カテゴリー名]</a></li><li>記事タイトル</li>
</ul>

だらだらと書いてしまいましたが、結局

<li><a title="[カスタム投稿タイプのラベル]" href="">[カスタム投稿タイプのラベル]</a></li>

が余計に出力されてしまっているのです。

bcn_display() に引数を与えて解決

公式サイトにもあるようにこのプラグインは、テンプレートの任意の箇所に

<?php
if ( function_exists( 'bcn_display' ) ) {
	bcn_display();
}
?>

と記述することによりパンくずリストを表示するようになっています。ところが、このままでは上記の〈余計なリンク〉が出力されてしまいます。

実は bcn_display() という関数（WordPress的にいうとテンプレートタグ）には、

bcn_display( true );

と書くことにより、PHPで処理できる形として値を返すオプションがあります。つまり、たとえば

$str = bcn_display( true );

と書けば変数 $str にパンくずリストの文字列をいったん格納し preg_replace() などで不必要な箇所をカットして表示させることができるのです。

このオプションを活用して、上記の〈余計なリンク〉問題は

if ( function_exists( 'bcn_display' ) ) {
	$str = preg_replace( "/<li><a title=\"[カスタム投稿タイプのラベル].+?li>/", "", bcn_display( true ) );
 
	echo '<ul>';
	echo $str;
	echo '</ul>';
}

と回避。我ながら変則的なやりかたと思いながらも表示の不具合を解消できたのでした。

この画像でいうところの「活動」とか「プロフィール」といった項目ですね。

で、ソースを読んでいったところ、フィルターフックでメニュー項目の非表示ができることが分かりましたのでここに紹介する次第です。いつもどおりの「ご利用は計画的に」な技術情報ですのでご留意ください。

今回のオーダーは

• 「グループ」を非表示にしてほしい
• 「設定」→「通知」を非表示にしてほしい

というもの。ぱっと思い浮かぶのは、「テンプレートファイルいじればオッケイなんじゃない？」との発想ですが、たとえば「グループ」の非表示に絡む wp-content/plugins/buddypress/bp-themes/bp-default/members/single/home.php というテンプレートファイルを見てみますと

<div id="item-nav">
<div id="object-nav" class="item-list-tabs no-ajax">
<ul>
	<?php bp_get_displayed_user_nav(); ?>
 
	<?php do_action( 'bp_member_options_nav' ); ?>
</ul>
</div>
</div><!-- #item-nav -->

というループでメニューが生成されており、テーマファイルのカスタマイズではどうしようもない状態でした。

それじゃあ、ということで対処法を。

「グループ」を非表示に

wp-content/plugins/buddypress/bp-core/bp-core-templatetags.php で定義されている bp_get_displayed_user_nav() 関数を見てみると、ありました apply_filters() 関数が。

echo apply_filters( 'bp_get_displayed_user_nav_' . $user_nav_item['css_id'], '<li id="' . $user_nav_item['css_id'] . '-personal-li" ' . $selected . '><a id="user-' . $user_nav_item['css_id'] . '" href="' . $link . '">' . $user_nav_item['name'] . '</a></li>', &$user_nav_item );

1. メニュー項目を作るたびに apply_filters() 関数を実行
2. <li> タグに

   $user_nav_item['css_id']

   をIDとして与える

ということをやっているので、

1. 非表示にしたいメニュー項目（<li>タグ）のIDを調べる
2. 調べたIDについて以下のような関数を functions.php に書く

function remove_displayed_user_nav( $content ) {
	if ( function_exists( 'bp_get_displayed_user_nav' ) ) {
		$content = '';
	}
	return $content;
}
add_filter( 'bp_get_displayed_user_nav_groups', 'remove_displayed_user_nav' );

functions.php に書く前

functions.php に書いた後

同様にして……

「設定」→「通知」を非表示に

サブメニューの方は wp-content/plugins/buddypress/bp-core/bp-core-templatetags.php の bp_get_options_nav() 関数で実装されているようなので

function remove_bp_get_options_nav( $content ) {
	if ( function_exists( 'bp_get_options_nav' ) ) {
		$content = '';
	}
	return $content;
}
add_filter( 'bp_get_options_nav_notifications', 'remove_bp_get_options_nav' );

このような感じで。

add_fliter() 関数の引数である bp_get_displayed_user_nav_hoge や bp_get_options_nav_hoge の文字列 hoge が<li>タグのIDに相当するので、削除したいメニュー項目のIDを調べて functions.php に add_filter でどんどこ追記していけばオッケイでしょう。

なんと！　いつの間にかワイルドカードが使えるようになっているではありませんか！

えー……Google ドキュメントのヘルプもいつの間にか更新されてました

COUNTIF : 関数 – Google ドキュメント ヘルプ
http://docs.google.com/support/bin/answer.py?hl=ja&answer=155230

特定の条件に一致するセル範囲内の要素の数を返します。[範囲] は、条件を適用する範囲です。[条件] は、セルを数えるのに使用する数値形式または文字列形式の条件です。[条件] には、不特定の 1 文字に一致する疑問符（?）や、不特定の文字列に一致するアスタリスク（*）を使用できます。実際の疑問符やアスタリスクを検索するには、疑問符（?）またはアスタリスク（*）の前にチルダ（~）を付けます。

自分でメモった技術情報もときどきこうやって検証しないといかんですね。

ですがこのプラグイン、例えばFacebook上でシェアしたとき、デフォルトだと

こんな画像が表示されてしまいます。せっかくプラグインを組み込むのなら、オリジナルの画像を使いたいのが人情というものでしょう……ということで二つの方法を紹介。

デフォルト画像を上書き

How do I replace the default image?
Go to “wordpress directory”/wp-content/plugins/wp-ogp and replace default.jpg with another image with the same name! This only works for the default image, you need to add a featured image on the post page for it to work with articles.

……と『WP-OGP』のFAQにも載っている方法。任意の画像に default.jpg というファイル名をつけ wp-content/plugins/wp-ogp 内にアップロードするだけです。上書きするのでもともとの default.jpg が消えてしまったり、JPEG以外の画像だと使えなかったり、という欠点も。

functions.phpに追記

『WP-OGP』内の wpogp_add_head 関数をアクションフックで置き換える方法です。管理パネルの [外観] – [ヘッダー] で設定した画像だけでなく、サイト外の画像も表示可能という利点があります。例のごとく「ご利用は計画的に 」のコードですが、こんな感じで functions.php に追記します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function my_wpogp_add_head() {
 
        if ( function_exists( 'wpogp_add_head' ) ) {
                global $post;
                $image = get_the_post_thumbnail_src( get_the_post_thumbnail( $post -> ID ) );
                $data = wpogp_set_data();
 
                if ( empty( $image ) ) {
                        $data['og:image'] = $data['image_src'] = get_header_image();
                }
                else {
                        $data['og:image'] = $data['image_src'] = $image;
                }
 
                echo get_wpogp_headers( $data );
        }
 
}
remove_action( 'wp_head', 'wpogp_add_head' );
add_action( 'wp_head', 'my_wpogp_add_head' );

上記の例では

• アイキャッチ画像がないとき……サムネイルはヘッダー画像
• アイキャッチ画像があるとき……サムネイルはアイキャッチ画像

となります。ヘッダー画像以外のものをサムネイルにしたいときは、9行目の get_header_image(); を ‘http://www.example.com/hoge.jpg’; のように書き換えればオッケイです。

［2011.5.1追記］
初出時のコードにて『WP-OGP』プラグインOFF時の挙動に不具合がありました。コードを修正しましたので、初出時のものをお使いになった方がいらっしゃいましたら、再設定をおねがいいたします。

子テーマを作るディレクトリは『子テーマ – WordPress Codex 日本語版』にあるとおり wp-content/themes 内でOK。でも、Codexどおりの書式ではBuddyPressのデフォルトテーマ（BuddyPress Default）を継承してくれないので、以下のように style.css を定義します（必須の項目だけ記しました）。

1
2
3
4
5
6
7
8

@charset "utf-8";
/*
Theme Name: hoge
Template: bp-default
*/
 
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

BuddyPressデフォルトのテーマファイルは wp-content/themes 内ではなく wp-content/plugins/buddypress/bp-themes/bp-default 内にあるので @import のパス（7～8行目）が通常の子テーマとは異なっている、というわけです。

テンプレートをオーバーライド（上書き）したいときは、子テーマディレクトリ内に wp-content/plugins/buddypress/bp-themes/bp-default と同じ構造でテンプレートファイル（*.php）を配置していきます。

たとえばフォーラムのテンプレートをカスタマイズするなら wp-content/themes/hoge/forums というディレクトリを作り、その中に index.php や forums-loop.php を作ればいいということになります。

ではではハッピーなBuddyPressライフを！　BuddyPressの日本語ドキュメントはまだまだ発展途上だと思うので、BuddyPressと格闘するみなさんといろいろ情報共有したいですね。

これでも結果オーライだからまあいいのですけれど、別解として skin.js を修正した後、自分でカスタム shadowbox.js を作る方法も紹介します。

なお、カスタム shadowbox.js を作るには

• Ruby
• Rake（Rubyによるビルドツール）

が必要なのでご了承のほど。ここでは、Ubuntuを使ってのビルド（作成）方法について紹介していきます。

まずは ruby と rake を apt か aptitude でインストール。

sudo apt-get install ruby rake

GitHubからダウンロードした Shadowbox.js のソースディレクトリに移動し設定ファイル build.yml を開きます。

---
 
# May be the name of any adapter in source/adapters
adapter: base
 
# May be any language code in source/languages
language: en
 
# An array of names of players found in source/players
players: [flv, html, iframe, img, qt, swf, wmp]
 
# YES to include support for CSS selectors, NO to decline
css_support: YES
 
# YES to compress the code, NO to use the source code
compress: NO
 
# The directory to output the build to
target: build

日本語環境で使うなら

-language: en
+language: ja

あとはお好みで、ライブラリとしてjQueryを使いたいなら

-adapter: base
+adapter: jquery

可読性よりもファイルサイズ・実行速度重視なら

-compress: NO
+compress: YES

と変更すればよいでしょう。

それではおもむろに Rake でビルド。build.yml のあるディレクトリでコマンドを実行します。同じディレクトリにある Rakefile が自動的に build.yml の設定内容を読みにいってくれるので、rakeコマンドは引数なしでオッケイです。

rake

すると、同じ階層に build というディレクトリが新たにできます。build ディレクトリの中身は例えばこんな感じですね。

LICENSE
README
close.png
expressInstall.swf
loading.gif
next.png
pause.png
play.png
player.swf
previous.png
shadowbox.css
shadowbox.js

これでビルドは完了。ディレクトリ名を Shadowbox などに適宜変えて、いつもどおりウェブサーバ上にディレクトリごとアップロードしてください。

要は shadowbox.js の中身をちょっと書き換えればよいのですが、改行やスペースを徹底的に削除して軽量化が図られてるのでヒジョーに読みづらい。そこで、まずはGitHubからShadowboxのソースをダウンロードしてきます。

mjijackson/shadowbox – GitHub
https://github.com/mjijackson/shadowbox

展開して source フォルダ内の skin.js を開きます。今日現在の最新版であれば、413行から始まるHTMLタグの文字列を見てみます。

'<div id="sb-container">' +
    '<div id="sb-overlay"></div>' +
    '<div id="sb-wrapper">' +
        '<div id="sb-title">' +
            '<div id="sb-title-inner"></div>' +
        '</div>' +
        '<div id="sb-wrapper-inner">' +
            '<div id="sb-body">' +
                '<div id="sb-body-inner"></div>' +
                '<div id="sb-loading">' +
                    '<div id="sb-loading-inner"><span>{loading}</span></div>' +
                '</div>' +
            '</div>' +
        '</div>' +
        '<div id="sb-info">' +
            '<div id="sb-info-inner">' +
                '<div id="sb-counter"></div>' +
                '<div id="sb-nav">' +
                    '<a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a>' +
                    '<a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a>' +
                    '<a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a>' +
                    '<a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a>' +
                    '<a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>' +
'</div>';

上記のうち

        '<div id="sb-title">' +
            '<div id="sb-title-inner"></div>' +
        '</div>' +

の3行がタイトル（キャプション）あたる箇所なので、この3行をカットして

        '<div id="sb-info">' +

の前に挿入後、いったん保存。

次は本丸、shadowbox.jsの書き換え。エディタの検索機能で

T.markup='<div id="sb-container">

という文字列を検索します。すると T.markup= の次から始まる

'<div id="sb-container"><div id="sb-overlay"></div><div id="sb-wrapper"><div id="sb-title"><div id="sb-title-inner"></div></div><div id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div id="sb-loading"><div id="sb-loading-inner"><span>{loading}</span></div></div></div></div><div id="sb-info"><div id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a><a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a><a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a><a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a><a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a></div></div></div></div></div>';

が見つかるので、この塊をさきほど保存したskin.js（の一部）と差し替えればオッケイとなります。

お気づきかと思いますが、実はこんな回り道をしなくても、実はshadowbox.jsを直に書き換えればよかったりします 　ただ、あまりに可読性がよろしくないので、きれいにインデントされたソースを改造した方が早道では？と考えて紹介した次第です。

……と書いてる私のサイト、Shadowboxのキャプションが画像の上だったりするんですよねー。うはは。

［2011.4.14追記］
別解として skin.js を変更後 Shadowbox.js を新規作成（ビルド）する方法を書きました。RubyとRake（Rubyで動くビルドツール）必須ですが興味のある方はぜひ。