また、最近は大手のライブラリはほとんど非同期読み込みに対応しているので、なるべくそちらを使ったほうがいいのですが、これもまた似たようなコードばかりで無駄が多くなってしまいます。

そこで、「まとめ非同期読み込み」が一時期流行ったのですが、自分用に少し改造したコードをいつも忘れそうになるので、メモがわりに投稿しておきます。

読込みコード

<div id="fb-root"></div>
<script type="text/javascript" src="script/ga_social_tracking.js"></script>
<script>(function(t,d,s) {
var j,f=d.getElementsByTagName(s)[0],a=function(u,i,o){if(d.getElementById(i)){return;}
j=d.createElement(s);j.src=u;j.id=i||null;j.onload=o||null;j.async=true;f.parentNode.insertBefore(j,f);};
 
t._gaq=[["_setAccount","UA-XXXXXXX-X"],["_trackPageview"],["_trackPageLoadTime"]]; // GoogleAnalytics Setting
a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js");　// GoogleAnalytics
a('https://apis.google.com/js/plusone.js','gplus1js');t.___gcfg={lang:"ja"}; // Google+
a('//connect.facebook.net/ja_JP/all.js#xfbml=1','fbjssdk',_ga.trackFacebook); // Facebook
a('//platform.twitter.com/widgets.js','tweetjs',_ga.trackTwitter); // Twitter
a("//b.st-hatena.com/js/bookmark_button_wo_al.js"); // Hatena
a("//static.mixi.jp/js/share.js"); // Mixi
 
}(this,document,'script'));</script>

これを body ダグの最後尾に追加しておきます。

2行目の「ga_social_tracking.js」は、ボタンが押されたイベントを Google Analytics に反映させるスクリプトで、analytics-api-samplesのページに有ります。Raw SourceのURLで、そのまま読み込んでもいいかもしれません。

8行目からの a ファンクションで各ライブラリを読み込みます。これ以外のサービスも、同じような非同期読み込みに対応してる物ならば、この行の追加で対応できるかと思います。
また、必要のないサービスは1行づつコメントアウトさせるだけ(Google Analyticsの場合はSettingの行も)で無効にできます。

a( jsライブラリのURL , 生成されるタグのid , onloadで実行させるコールバック );

ボタン表示コード サンプル

<ul id="social-shares">
    <li><div class="g-plusone" data-size="medium" data-count="false" data-href="http://example.com"></div></li>
    <li><div class="fb-like" data-send="false" data-layout="button_count" data-href="http://example.com"></div></li>
    <li><a data-text="" data-url="http://example.com" data-count="none" href="http://twitter.com/share" class="twitter-share-button" data-lang="ja" ></a></li>
    <li><a href="http://mixi.jp/share.pl" data-key="XXXXXXX" data-url="http://example.com" class="mixi-check-button">mixiチェック</a></li>
    <li><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="Add Bookmark" /></a></li>
</ul>

ここでは自分の趣味で、なるべく XML名前空間 を使わずに記述しています。

Livefyre というコメントサービスです。

特徴は以下のとおりです。

• XMPPでのリアルタイム通信
• ソーシャルサービスとの密な連携
• スパムをしづらい評価システム
• 今ならまだ表示が軽い

サイトからのユーザー登録をした後、自分のサイトのシステムに合わせてインストールします。Wordpressは公式のプラグイン「Livefyre Realtime Comments」があるのでインストールも簡単です。
ただ、インストール後、Wordpress側のコメントをLivefyreが読み込んで同期する必要があるので、既存コメントが多いサイトは最初に時間がかかるかもしれません。

また、プラグインがコメントテンプレートの読込みにフィルターをかけていて、その説明も詳しく書いていないので、カスタムテーマを使ってる場合等でコメント欄が表示されない場合は、テンプレートに comments_template(); の記述があるか確認してみましょう。

表示のカスタマイズは有料プランになるとフルカスタムできるらしいのですが、無料プランでもJavascriptが生成した後のHTMLソースを見ながらスタイルを当てれば多少の変更は可能なようです。

またそのうち変えるかもしれませんが、しばらくはこれを試してみようかと思います。

追記 (2012.02.17)

WordPressのプラグインで導入すると、WordPressの標準のコメントにも保存してくれて便利なのですが、なぜか現時点では IE9.js との相性が悪く（他にも原因があるかも）、IEで見た時にブラウザが固まる場合があるようなので、解決策がみつかるまでプラグインを使わずに Livefyre のコードをテンプレートに直接書いて対応してます。

<!-- START: Livefyre Embed -->
<script type='text/javascript' src='http://zor.livefyre.com/wjs/v1.0/javascripts/livefyre_init.js'></script>
<script type='text/javascript'>
    var fyre = LF({
        site_id: XXXXXX,
        article_id: <?php the_ID(); ?>
    });
</script>
<!-- END: Livefyre Embed -->

LivefyreのWordPressプラグインはまだまだ完成度が低いような気がします。設定も少ないし、スクリプトもスタイルも読込みや生成が多くて整理されていない感じがします。これからに期待ですね。

以前のパーマリンクのパフォーマンス問題とは、パーマリンクのカスタム設定で、パスの最初が定型の文字列や数字ではなく、不規則な文字列が来るような設定にすると、固定ページとの判別の為にルーティングテーブルがふくれあがりパフォーマンスが落ちるというものでした。

詳しい内容は Simple Colors さんの記事 で、これまでの状況とバージョンアップ後の結果を丁寧に解説されていますので、ご覧下さい。

パーマリンク設定

今までの設定

/%year%/%monthnum%/%postname%/

新しい設定

/%postname%/

Nginx での rewrite 設定

最後に忘れちゃいけないのが、旧URLから新URLへのリダイレクトです。これは上記の設定の時、新しいURLにリダイレクトさせるNginxでの設定です。いままでの設定に「%postname%」が無い場合は、「/?p=記事ID」にリダイレクトさせればいいでしょう。

rewrite ^/\d{4}/\d{2}/([^/]+)/$ http://akibe.com/$1 permanent;

まとめ

ちょっとやり過ぎかもしれませんが、シンプルにしちゃいました。 今はカスタム投稿や、カスタム分類があってURL構成に自由度があるので、メインコントローラーがシンプルでも問題ないかなと。

あと、WordPress向けのSEOプラグインの作者も、推奨しているようなので、しばらくこれでいってみようと思います。

変更点は以下のとおりです。

• パフォーマンスを重視して、fast-cgiはなるべくsocketを使うように設定。
• 最近のNginx(0.8.30以降？）は、SCRIPT_FILENAME の値が既に定義済みらしい。
  環境によって、fastcgi_params には無いけど、 fastcgi.conf にはあったりするので、それぞれ要確認。
• php.ini の cgi.fix_pathinfo を 0 にするのを推奨し、それに対応。
• RFC 3875の仕様に沿って、PATH_INFO と PATH_TRANSLATED を追加。
• セキュリティの為、 /wp-content/uploads/ 内は PHP を起動しない。

設定サンプル

upstream php {
    server unix:/tmp/php-cgi.socket;
    server 127.0.0.1:9000;
}

server {
    server_name domain.tld;
    root /var/www/wordpress;
    index index.php;

    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }

    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }

    location / {
        try_files $uri $uri/ /index.php;
    }

    location ~ \.php$ {
        include fastcgi.conf;
        fastcgi_intercept_errors on;
        fastcgi_param  PATH_INFO        $fastcgi_path_info;
        fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_script_name;
        if ($uri !~ "^/wp-content/uploads/") {
            fastcgi_pass php;
        }
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
        expires max;
        log_not_found off;
    }

    location ~ /\.ht {
        deny all;
        access_log off;
        log_not_found off;
    }
}

ルートじゃない場合の設定

location /wordpress {
    try_files $uri $uri/ /wordpress/index.php;
}
location ~ \.php$ {
    fastcgi_split_path_info ^(/wordpress)(/.*)$;
    ...
    if ($uri !~ "^/wordpress/wp-content/uploads/") {
        fastcgi_pass php;
    }
}

マルチサイトの設定等も最近はよく見かけますが、自分は検証用のマルチサイトを持っていないので、紹介は控えます。

追記

書き忘れましたが、何らかの理由で PATHINFO パーマリンク の設定にしている場合は以下の設定が必要です。

location ~ \.php$ {
    #下記の1行を追加
    fastcgi_split_path_info  ^(.+\.php)(.*)$;
    ...
}

参考サイト

http://wiki.nginx.org/WordPress 他

昨日22日は @kenji_s さんの「 FuelPHP でのセキュリティ対策(2) 」でした。

丁度 Nginx に FuelPHP入れる時、あまり纏まった情報が見つからなかったので、
今回はその設定と手順をメモしてみました。

インストール

FuelPHPのインストールはNginxとか関係ないので、通常通りインストールします。
インストールには、公式サイトのマニュアル通り、oil を使ったインストールが簡単です。
尚、ユーザーに sudo 権限があることと、Gitがインストールされている必要があります。

FuelPHPはコマンドライン無しでインストールも稼働も可能ですが、使える場合は使った方が楽です。

$ curl get.fuelphp.com/oil | sh

   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                  Dload  Upload   Total   Spent    Left  Speed
   100   244  100   244    0     0    396      0 --:--:-- --:--:-- --:--:--     0
   [sudo] password for username: 

これで oil コマンドがインストールされました。
次に、サーバのウェブディレクトリに行って、oilコマンドでFuelPHPのプロジェクトを作成します。

$ cd /var/www/
$ oil create hogehoge

これで /var/www/hogehoge にFuelPHPがインストールされました。

手動でファイルをインストールする場合

sudo権限とかGitとか無い場合は、手動でもインストール可能です。

1. フレームワークをダウンロードします。
   http://docs.fuelphp.com/installation/download.html

2. zipファイルを解凍します。

3. 以下のディレクトリとファイルをサーバにアップロードします。

   fuel/
       app/
       core/
       packages/
   public/
       .htaccess
       assets/
       index.php
   oil
   

4. 以下のディレクトリの権限を書き込み可能にします。

   fuel/app/cache
   fuel/app/logs
   fuel/app/tmp
   fuel/app/config
   

これで完了です。

Nginxの設定

FuelPHPに含まれる .htaccess ファイルのrewrite設定等を、
Nginx用のホスト設定に try_files で書き換えて設定してあげます。
ドメインやディレクトリパスは適宜変更してください。

server {
    listen 80;
    server_name hogehoge.example.com;
    access_log /var/log/nginx/hogehoge.access.log;
    error_log /var/log/nginx/hogehoge.error.log;
    root /var/www/hogehoge/public;
    charset utf-8;
    index index.php;

    # すべてのアクセスをindex.phpに振ります。
    location / {
        try_files $uri /index.php?$uri&$args;
    }

    # phpを実行できるようにします。
    location ~ .*\.php$ {
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        #fastcgi_param  FUEL_ENV production; #リリース時にはコメントを外して有効にします。
        include        fastcgi_params;
    }

    # すべての不可視ファイルをアクセス不可にします。
    location ~ /\. {
        access_log off;
        log_not_found off;
        deny all;
    }
}

publicをルートにできない場合

サーバの都合でpublicをルートにできない場合は、 上のコードの location / {…} のブロックを以下のようにします。

# すべてのアクセスをindex.phpに振ります。
location / {
    try_files $uri /public/index.php?$uri&$args;
}

# FuelPHPの実行ファイルをアクセス不可にします。
location /fuel/ {
    deny all;
}

これで、ルートにアクセスしても、public/index.php を呼び出してくれます。
また、この配置だとFuelPHPの実行ファイルが見えてしまうので、アクセス不可にします。

サブディレクトリに置く場合

さらに、既存サイトの一部分に使う等で、サブディレクトリに入れる場合は、以下のようになります。

location ~ ^/sub_directory/(.*)$ {
    try_files $uri /sub_directory/public/$1 /sub_directory/public/index.php?$1;
}
location /sub_directory/fuel/ {
    deny all;
}

この場合、設定ファイル「fuel/app/config/config.php」の base_url の設定も必要です。

'base_url'  => null,
    ↓
'base_url'  => '/sub_directory/',

リリース時の環境変数の変更

FuelPHPはデフォルトの設定で、詳細なエラー表示や、デバッグ用の設定ができるように、開発モードにセットされています。 リリース時にはこれを切り替える為に、環境変数 FUEL_ENV に production を設定する必要があります。
Nginxで記述する場合は、location ~ .*\.php$ {…} のブロックに fastcgi_param で設定します。

location ~ .*\.php$ {
    ...
    fastcgi_param  FUEL_ENV production;
}

動作チェック

rewrite がちゃんと動いているか確認する為に、 /hello/akibe にアクセスしてみましょう。

http://hogehoge.example.com/hello/akibe

「Hello,akibe!」と表示されればOKです。

最後に

基本的にApache向けのシステムをNginxで動かす時に変更しなくちゃいけないのはrewriteの設定なのですが、慣れないうちは意外と悩み所なので、参考になればと思います。
FuelPHPはやっと触り始めた段階ですが、サクリと何か作るには非常にレスポンスが良くていいフレームワークのような気がします。 scaffoldとか使いこなせるようになれば、かなり素早く開発ができそう。

あと、開発にCodeIgniterの開発者も参加してるそうですが、ネーミングが点火装置とかオイルとか燃料とか、。
このノリは嫌いじゃないです。;-P

いよいよ FuelPHP Advent Calendar 2011 もあと2日。

明日24日は @kenji_s さんの「 FuelPHP でのセキュリティ対策(3) 」です。

また、最近はSSL接続が必須になってきているので、ホスティングするサーバーはSSL対応である必要があります。
SSL対応のサーバを借りるのも設定するのも慣れていない人には大変ですが、実はDropboxのファイル共有を使う事で、静的ファイルのみですが条件に叶ったホスティングをすることができます。

Dropboxの登録はコチラから

DropboxでFacebookページを作成する利点と欠点

利点

• 2Gまで無料で使える。
• 共有ファイルは、http://~ からも、https://~ からもアクセス可能。
• ローカルで編集すれば、自動でFacebookページも更新される。
• Dropboxのバージョン管理機能でうっかりミスしても戻せて安心。
• クラウドなので、災害にも強い。
• 静的ファイルはなんでも置けるので、Javascript で Facebook API に接続可能。

欠点

• 動的なサーバーサイドプログラムは使えない。

テストコンテンツの作成

まず、Dropbox上の「Public」フォルダか、新たにフォルダを作成して共有設定したフォルダに html ファイルを作成します。

~/Dropbox/Public/fb/index.html

次にhtmlを書いていきます。
Facebookのページと言ってもiFrameにWebページを表示させてるだけなので、なんでもOKですが、最低限fb-rootというidのエレメントを作っておきましょう。

<!DOCTYPE html><html lang="ja">
<head><meta charset="UTF-8">
<title>fbpage</title>
</head><body>
<div id="fb-root"></div>
</body></html>

これだけだと最低限すぎるので、基本形のメモとして、以下を追加します。

コンテンツに応じてiFrameの高さをそろえる

通常iFrameは表示するコンテンツの高さが固定されてしまいますが、Facebookのスクリプトにコンテンツの高さを計算して自動調節するコマンドがあるので、これを適用します。
また、読み込むFacebookのjavascriptライブラリは本来はプロトコルを出し分けするべきですが、ここでは「https」で読み込んでいます。

<script type="text/javascript" src="https://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
    FB.Canvas.setAutoResize();
</script>

ページ遷移時にページトップに移動

コンテンツに応じてiFrameの高さをそろえた時、縦に長くなったiFrame内のコンテンツからリンクした時に、 親ページのスクロールは移動しない為に一瞬迷子になることがあります。これを解決する為に、iFrame内コンテンツの最上部のアンカーにリンクする事で 親ページも含めてスクロールさせることができます。いちいちリンクを書き換えるのも面倒なので、「http」から始まらないリンクに「#fb-root」を自動で付加します。

<script type="text/javascript">
(function (anchors) {
    for (var i = 0, l = anchors.length; i < l; i++) {
        var link = anchors[i].getAttribute("href")+"#fb-root";
        anchors[i].setAttribute("href",link);
    }
})(document.querySelectorAll("a:not([href^='http'])"));
</script>

これらをフッターに追加して、適当なコンテンツを入れた基本形は以下のとおりです。

<!DOCTYPE html><html lang="ja">
<head><meta charset="UTF-8">
<title>fbpage</title>
</head><body>
<div id="fb-root">
<p>Hello World!!</p>
</div>
<script type="text/javascript" src="https://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
    (function (anchors) {
        for (var i = 0, l = anchors.length; i < l; i++) {
            var link = anchors[i].getAttribute("href")+"#fb-root";
            anchors[i].setAttribute("href",link);
        }
    })(document.querySelectorAll("a:not([href^='http'])"));
    FB.Canvas.setAutoResize();
</script>
</body></html>

Facebookページの登録

Facebookの開発者ページへアクセスして、新しいアプリを作成します。 最低限設定すべき項目は以下のとおりです。

• 設定 > Basic > 基本情報 > App Display Name アプリの名称を記入
• 設定 > Basic > Page Tab > Page Tab Name タブの初期名
• 設定 > Basic > Page Tab > Page Tab URL Dropboxの共有ファイルのURL
• 設定 > Basic > Page Tab > Secure Page Tab URL Dropboxの共有ファイルのURL(https)

Dropboxの共有ファイルのURLは、先程作成したhtmlファイルのパブリックリンクURLを入力します。
「Page Tab URL」のほうは http://〜 のURL

例）　http://dl.dropbox.com/u/000000/fb/index.html

「Secure Page Tab URL」のほうは https://～ のURL（上記と同じURLでプロトコルをhttpsに変えるだけ）

例）　https://dl.dropbox.com/u/000000/fb/index.html

Facebookページへのタブの追加

アプリの設定のページの左カラムの下のほうにある「アプリケーションのプロフィールページを見る」リンクから、アプリページを開きます。 アプリページの左カラムの下のほうにある「マイページへ追加」リンクをクリックして自分のFacebookページへ追加します。

これで自分のFacebookページにタブが追加されます。

Dropboxの登録

下記のリンクからDropboxに登録すると、最初から 500MB 増量ボーナス付きで登録できます。
私にも少しボーナスがありますので、是非是非ご利用ください。

Dropboxの登録はコチラから

WordPressで作成したサイトをクライアントに納品する際、管理画面を色々とカスタマイズしなくてはいけない場合があります。Wordpressで管理画面をカスタマイズする場合、プラグインを使う方法とfunction.phpに手動で登録する方法があります。

簡単便利なプラグインは検索すればすぐに見つかると思いますので、今回は手動で設定をする方法をメモしておきます。

WordPressでのカスタム処理は、アクセスからページ出力までの間に設定されている様々なイベントに対して、その時処理する関数を設定することで実現しています。その為、1つの処理毎に2つの命令文が必要になります。

• アクションフックやフィルターに、カスタム関数を登録する。
• 登録したカスタム関数を定義する。

これらのコードはすべて、利用するテンプレートの function.php に記述します。

ログイン画面のロゴを変更する

ログイン画面のヘッダー生成のアクションフックにスタイルシートを出力する関数を登録します。
ログイン画面のロゴは h1 > a のバックグラウンド画像で指定します。

add_action('login_head', 'login_custom');
function login_custom() {
    echo '<style type="text/css">h1>a{background-image:url('.get_bloginfo('template_directory').'/images/login-logo.png);}</style>';
}

カスタムロゴにして wordpress.org へのリンクを無効にするには、h1タグにロゴを貼って、aタグを消してしまうのが簡単です。

add_action('login_head', 'login_custom');
function login_custom() {
    echo '<style type="text/css">h1{background:url('.get_bloginfo('template_directory').'/images/login-logo.png) top center no-repeat;} h1>a{display:none;}</style>';
}

要はヘッダーにタグを追加しているだけなので、何でもできます。cssファイルやjavascriptファイルを読み込んで、色々とカスタマイズ可能です。
ただ、外部ファイルを読み込むなら、なるべく「wp_enqueue_style」や「wp_enqueue_script」を使いましょう。

管理画面のロゴを変更する

管理画面のカスタマイズも、ログイン画面の変更と同じ方法で可能です。管理画面のヘッダー生成のアクションフックは「admin_head」になります。

add_action('admin_head', 'admin_custom');
function admin_custom() {
    echo '<style type="text/css">#header-logo{background-image:url('.get_bloginfo('template_directory').'/images/login-logo.png);}</style>';
}

最近の管理画面はロゴは16×16と小さめなので、新たに画像をつくらなくても、faviconを貼るだけでもいいかもしれません。

add_action('admin_head', 'admin_custom');
function admin_custom() {
    echo '<style type="text/css">#header-logo{background-image:url(/favicon.ico);}</style>';
}

ここでは「admin_head」で直接CSSを出力していますが、「admin_print_scripts」や「admin_print_styles」といったアクションフックもあります。似たような用途でも、アクションフックの種類によって出力される位置がかわりますので、問題があった場合はいろいろ試してみましょう。

管理画面のフッターテキストを変更する

管理画面の最下部に、「WordPress のご利用ありがとうございます。 • ドキュメンテーション • 自由について • バグ報告と提案 • クレジット」とあります。 この表記も、クライアントに納品した場合はふさわしくない場合があります。
このテキストを変更する為に、「admin_footer_text」というフィルターフックが用意されています。

add_filter('admin_footer_text', 'custom_admin_footer');
function custom_admin_footer() {
    echo 'お困りの際は、株式会社〇〇 担当「〇〇」までお気軽にご連絡ください。 E-mail:<a href="mailto:xxx@akibe.com">XXXXX</a> TEL:00-0000-0000';
}

余計なメニューを非表示にする

サイトによってはリンクやコメントを利用しない場合もありますが、そんな時に管理画面のメニュー項目を操作できる アクションフック「admin_menu」が用意されています。

add_action('admin_menu', 'remove_menus');
function remove_menus () {
    global $menu;
    unset($menu[15]);//リンク
    unset($menu[25]);//コメント
}

どのメニューがどの項目かは、/wp-admin/menu.php を見れば解ります。

プロフィールの項目を増やす

プロフィールの項目って今の日本のユーザー的には微妙ですよね。
そこで最近メジャーな項目を増やして、使わなそうな項目を削除します。

add_filter('user_contactmethods','my_new_contactmethods',10,1);
function my_new_contactmethods( $contactmethods ) {
    $contactmethods['twitter'] = 'Twitter';
    $contactmethods['facebook'] = 'Facebook';
    $contactmethods['hatena'] = 'はてな';
    $contactmethods['mixi'] = 'mixi';
    $contactmethods['Flickr'] = 'Flickr';
    $contactmethods['YouTube'] = 'YouTube';
    $contactmethods['Tumblr'] = 'Tumblr';

    unset($contactmethods['aim']);
    unset($contactmethods['jabber']);

    return $contactmethods;
}

追加項目を表示させるには、以下のコードのように「the_author_meta」にキーを指定してテンプレートに追加します。

<?php the_author_meta('twitter'); ?>

デフォルトアバターを変更する

標準のアバター画像も、フィルターで変更可能です。

add_filter('avatar_defaults','avatar_custom');
function avatar_custom($avatar_defaults) {
    $myavatar = get_bloginfo('template_directory') . '/images/guest.jpg';
    $avatar_defaults[$myavatar] = "Guests";
    return $avatar_defaults;
}

ビジュアルエディターに拡張ボタンを追加表示する

ビジュアルエディターを利用する場合、標準では非表示になっているボタンがあります。
中には便利なボタンもあるので、クライアントが使いそうなボタンをデフォルト表示にしてしまいましょう。

add_filter("mce_buttons", "mce_custom");
function mce_custom($buttons){
    array_push($buttons, "backcolor", "copy", "cut", "paste", "fontsizeselect", "cleanup");
    return $buttons;
}

管理画面のメニューカラーの変更

管理画面のメニューカラーを変えるにはカスタムCSSをヘッダーに追加します。
ソースを見ながらCSSを上書きすればOKですが、修正箇所が多いので以下に例を記します。

add_action('admin_head', 'admin_custom');
function admin_custom() {
echo '<style type="text/css">

/*サイドバー全体の背景と右線の色*/
#adminmenuback {
    background-color: #333;
    border-color: #222;
}

/*メニュー項目の背景と右線の色*/
#adminmenuwrap {
    background-color: #333;
    border-color: #222;
}

/* メニュー項目の上線と下線の色 */
#adminmenu a.menu-top,
.folded #adminmenu li.menu-top,
#adminmenu .wp-submenu .wp-submenu-head {
    border-top-color: #444;
    border-bottom-color: #222;
}

/* メニュー内セパレーターの背景と下線の色 */
#adminmenu li.wp-menu-separator {
    background: #222;
    border-top-color: #333;
    border-bottom-color: #111;
}
/* 上記設定で不必要になった線を削除 */
#adminmenu div.separator {
    border: none;
}

/* メニュー項目の文字色 */
#adminmenu a {
    color: #999;
}

/* アクティブなメニュー項目の文字色 */
#adminmenu a:hover {
    color: #eee;
}

/* サブメニュー項目の背景色と文字色 */
#adminmenu .wp-submenu a {
    background-color: #222;
    color: #666;
}

/* アクティブなサブメニュー項目の背景色と文字色 */
#adminmenu .wp-submenu a:hover {
    background-color: #333 !important;
    color: #eee !important;
}

/* カレントなサブメニュー項目の文字色 */
#adminmenu .wp-submenu li.current,
#adminmenu .wp-submenu li.current a,
#adminmenu .wp-submenu li.current a:hover {
    color: #aaa;
}

/* 開いたサブメニューの下線の色 */
#adminmenu li.wp-menu-open {
    border-color: #111;
}

/* カレントメニューの背景色と上下の線の色 */
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
.folded #adminmenu li.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
    background-color: #c00;
    background-image: -ms-linear-gradient(bottom,#900,#c00);
    background-image: -moz-linear-gradient(bottom,#900,#c00);
    background-image: -o-linear-gradient(bottom,#900,#c00);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#900),to(#c00));
    background-image: -webkit-linear-gradient(bottom,#900,#c00);
    background-image: linear-gradient(bottom,#900,#c00);
    border-top-color: #c00;
    border-bottom-color: #900;
}

/* カレントメニューの矢印画像 */
#adminmenu li.wp-has-current-submenu.wp-menu-open .wp-menu-toggle,
#adminmenu li.wp-has-current-submenu:hover .wp-menu-toggle {
    background: transparent url(/wp-admin/images/arrows.png) no-repeat -1px 6px;
}

/* アップデート数表示の背景色と文字色 */
#adminmenu .awaiting-mod, #adminmenu .update-plugins, #sidemenu a .update-plugins, #rightnow .reallynow {
    background-color: #666;
    color: #fff;
    -moz-box-shadow: none;
    -khtml-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

</style>';
}

上記のコードを適用すると、以下のような表示になります。

管理ページを追加する

クライアントにWordpressサイトを納品する際、操作マニュアルを提供しないといけない場合があります。
そんな場合には、新たにページを追加してメニューに組み込んでしまったほうが、利用しやすくなります。

// メニューを追加
add_action('admin_menu', 'add_custom_menus');
function add_custom_menus() {

    // 新しいトップレベルメニューを追加:
    add_menu_page('マニュアル', 'マニュアル', 8, __FILE__, 'page_manual');

    // カスタムのトップレベルメニューにサブメニューを追加:
    add_submenu_page(__FILE__, '新規投稿手順', '新規投稿手順', 8, 'sub-page', 'page_manual_newpost');

    // カスタムのトップレベルメニューに二つ目のサブメニューを追加:
    add_submenu_page(__FILE__, 'コメントの管理', 'コメントの管理', 8, 'sub-page2', 'page_manual_comment');
}

// 追加したトップレベルメニューのコンテンツを表示
function page_manual() {
    echo "<h2>マニュアル</h2>";
}

// 追加したサブメニューのコンテンツを表示
function page_manual_newpost() {
    echo "<h2>新規投稿手順</h2>";
}

// 追加した二つ目のサブメニューのコンテンツを表示
function page_manual_comment() {
    echo "<h2>コメントの管理</h2>";
}

コンテンツの量にもよりますが、実際に追加ページを作成する時は、関数で表示させるよりも、外部PHPファイルを作成するか、プラグインにしたほうがいいでしょう。
詳しくは公式ドキュメントをご覧ください。

リンク

• プラグインAPI
• アクションフック一覧
• フィルターフック一覧

標準のコメント機能を使うのは嫌だったので、いろいろ検討した結果、スクリプトの読み込みとレンダリングが遅いのは変わりませんが、仕事で必要な気がしたので、Facebook Commentsを導入してみることにしました。
というわけで、導入メモを残しておきます。

簡単導入

簡単に導入したい場合はプラグインがオススメです。
設定も豊富で、OGPにも対応のプラグインがあるので、すぐに導入可能です。

Facebook Comments for WordPress

アプリIDを取得して、高度なセットアップをする事も可能ですし、簡単な設定ですぐに始める事も可能です。

ただ、これでは面白くないので、全部手動で設定してみます。

コードの取得

コードの取得は以下のURLから取得できます。

Comments – Facebook Developers

これを元に、WordpressテンプレートのPostループの中に入れてパーマリンクのタグを入れるとこんな感じです。

<?php while (have_posts()) : the_post(); ?>
...
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="<?php the_permalink() ?>" num_posts="2" width="500"></fb:comments>
...
<?php endwhile; ?>

ここから、必要ない物を除いていきます。

• <div id="fb-root"></div>
  これは無くても動きます。というより、同画面内で「いいね」ボタンとかある場合に、生成したコードをそのまま使っていたらidカブります。
• <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
  これも、一度読み込めばよいので、ループ外のヘッダーかフッターに入れましょう。
• num_posts="2" width="500"
  num_postsはデフォルトでいいや、とか。幅は後で100%指定したいからいいや、とか。で消してしまいます。

ということで、必要なコードがシンプルになりました。

<fb:comments href="<?php the_permalink() ?>"></fb:comments>

次に headタグ 内、もしくは bodyタグ内の最後 にスクリプトの読み込みコードを入れます。
日本語環境なので、「en_US」は「ja_JP」にしましょう。

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>

最後に html タグの属性にネームスペースを追加します。

<html lang="ja" xmlns:fb="https://www.facebook.com/2008/fbml">

横幅をコンテンツ幅に合わせる

このサイトは横幅が一定範囲内で可変に作ってあるので、横幅をピクセルで指定すると都合がよくありません。またiPad等のタブレットから見る場合もあります。
「width=”100%”」とか書ければいいのですが、出来ないので CSS で対応します。

<style type="text/css">
    #comment-block iframe, #comment-block .fb_iframe_widget { width: 100% !important; }
</style>
<div id="comment-block">
    <fb:comments href="<?php the_permalink() ?>"></fb:comments>
</div>

これで #comment-block の幅にフィットします。

iPhone対応

このサイトではiPhoneへの対応に WPtouch を使っています。WPtouchはプラグイン内に専用のテンプレートを使っているのでその対応をします。 ただ、アップデートの度にテンプレートファイル全体が入れ替わってしまうので、直接編集するのは避けたいところです。
そこでプラグインの設定画面の「Adsense, Stats & Custom Code」の中の Stats & Custom Code にコードを書きます。

ここに書かれた内容はHTMLのまま Bodyタグ内の最後に追加されますので、Facebookのスクリプトファイルの読み込みと、fbタグを生成するjavascriptを記述します。

<style type="text/css">
#comment-block iframe, #comment-block .fb_iframe_widget { width: 100% !important; }
</style>
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<script type="text/javascript">
(function() {
    var newdiv=document.createElement("div");
    newdiv.id = 'comment-block';
    newdiv.className = 'post';
    newdiv.innerHTML = '<fb:comments href="'+location.href+'" width="300"></fb:comments>';
    document.getElementById("bookmark-box").parentNode.appendChild(newdiv);
})();
</script>

コメントの管理

Facebookでアプリケーション登録して以下のメタタグを追加すると、禁止ワードでのコメント管理や、通知機能が使えます。

<meta property=”fb:app_id” content=”{アプリケーションID}”>
<meta property=”fb:admins” content=”{ユーザーID}”>

また、OGP仕様のメタタグを設定することでウォールに表示される画像を変えたりできますので、是非設定しましょう。