WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグイン
WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグインを紹介します。
プラグイン適用前
プラグイン適用後
このプラグインは、以前公開した「サイドメニューのツリー化プラグイン for WordPress」をjQueryで新たに作り直したものです。これにより、ツリー化の設定が格段に簡単になりました。
１．機能
本プラグインの主な機能は次の通りです。
- 階層構造のリストをツリー化します
- サブカテゴリーの多段階層にも対応しています
- ツリー化の設定は管理画面から行えます
２．プラグインのダウンロード・インストール
以下のリンクからプラグインをダウンロードしてください。
変更履歴
2011.05.24 v2.0 jQuery版
2011.05.26 v2.1 保存後に入力項目が表示されない不具合を修正
2011.12.03 v2.2 第1階層にもツリーを適用できるオプションを追加
アーカイブを展開し、中にあるwp_tree_makerフォルダをpluginsディレクトリにアップロードしてください。
アップロード後、管理画面で「Tree Maker」の有効化をクリックします。
３．プラグインの設定
「設定」→「Tree Maker」をクリック。
サイドバーのリストタイトルに用いている見出し要素名（h1～h6）とツリー化したいサイドバーのリストタイトルを設定します。ツリー化したいリストが複数ある場合はリストタイトルをカンマで区切ってください。
第1階層にもツリーを表示したい場合は、「第1階層もツリー化する」をチェックしてください。
４．CSS
すべてのデザインに対応しているわけではないので、ツリー化後のスタイルは適宜設定してください。このプラグインでは次のようなclass属性値を追加しています。
<h3>Categories</h3>
<ul class="tree">
<li><a href="http://.../">ブログ</a>
<ul>
<li><a href="http://.../">カスタマイズ</a></li>
<li class="tree_end"><a href="http://.../">テンプレート</a></li>
</ul>
</li>
<li><a href="http://.../">日記</a>
<ul>
<li><a href="http://.../">お知らせ</a></li>
<li class="tree_end"><a href="http://.../">趣味</a></li>
</ul>
</li>
</ul>WordPressにFacebookのOGP（Open Graph Protocol）を簡単に設定できる「WP-OGP」プラグイン
ご存知の方も多いと思いますが、WordPressにFacebookのOGP（Open Graph Protocol）を簡単に設定できる「WP-OGP」プラグインを紹介します。
ブログにOGP（meta要素）を設定することで、例えばFacebookのウォールなどからブログをリンクされたときに、ブログの情報をFacebookのプログラムに正しく伝えることができます。
以下、設定方法です。
１．プラグインのダウンロード・インストール
管理画面の「プラグイン」→「新規追加」をクリック。
キーワードに「WP-OGP」を入力して「プラグインの検索」をクリック。
「いますぐインストール」をクリック。
インストールが完了したら「プラグインを有効化」をクリック。
これでサイトの(X)HTMLにmeta要素が追加されます。
自動インストール機能が使えない場合は、WP-OGPのページの「Download version～」をクリックして、プラグインアーカイブをダウンロード。
アーカイブを展開して中にある「wp-ogp」フォルダをWordPressのpluginsフォルダにアップロードしたあと、プラグイン一覧にある「WP-OGP」の「有効化」をクリックしてください。
２．Facebookアプリの登録
WP-OGPプラグインには、OGPの「fb:app_id」「fb:admins」を設定するオプションが用意されています。２項では「fb:app_id」にアプリケーションIDを設定するためのアプリケーション作成を行います。
「開発者のページ」にある「マイアプリ」をクリック。
ページ右上の「Set Up New App」をクリック。
アプリケーション作成ページに移動するので、適当なアプリケーションを入力し、「同意する」を選択して、「アプリケーションを作成」をクリック。
セキュリティコードを入力して「送信」をクリック。
これでアプリが作成されたので「Web Site」タブをクリックして、ブログの「Site URL」にメインページのURL、「Site Domain」にメインページのドメイン（サブディレクトリは入力不要）を入力して「変更を保存」をクリック。また、ここに表示されている「アプリケーションID」はあとで使うのでテキストコピーしておきましょう。
保存後の画面でも「アプリケーションID」の確認ができます。
３．オプション設定
３項では「fb:app_id」「fb:admins」を有効にするための設定を行います。
WordPress管理画面に戻って、「設定」→「WP-OGP」をクリック。
オプション設定が表示されるので、
- fb:appid：２項で作成したアプリの「アプリケーションID」
- fb:admins：FacebookのあなたのユーザーID
を設定します。ユーザーIDが分からない場合は、同じページにある「http://apps.facebook.com/what-is-my-user-id/」のリンクをクリックして進めていけば分かります。
なお、ダウンロードしたバージョンではプラグインのソースコードにtypo（下のスクリーンショットの28行目は「fb:app_id」が正解ですが「fb:appid」になっている）があり、追加されたmeta要素が正常に機能しません。
ということで、plugins/wp-ogp配下にあるwp-ogp.phpを任意のエディタで開き、以下の赤色部分を青色の内容に修正してください。
変更前
function load_wpogp_settings() {
global $ogpt_settings;
$ogpt_settings['fb:appid'] = get_option(OGPT_SETTINGS_KEY_FB_APPID);
$ogpt_settings['fb:admins'] = get_option(OGPT_SETTINGS_KEY_FB_ADMINS);
}変更後
function load_wpogp_settings() {
global $ogpt_settings;
$ogpt_settings['fb:app_id'] = get_option(OGPT_SETTINGS_KEY_FB_APPID);
$ogpt_settings['fb:admins'] = get_option(OGPT_SETTINGS_KEY_FB_ADMINS);
}修正後、元の位置にアップロードし、ページを表示すれば、正常に機能するようになります。
４．html要素の修正
テーマ編集画面を開いて、html要素に以下の青色のxmlns属性を追加してください。
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">- 関連情報：HTML5+RDFaについて
WordPressの「続き」をjQueryで折りたたむ「wp_more_content_folder」プラグイン
WordPressの「続き」をjQueryで折りたたむ「wp_more_content_folder」プラグインを公開します。
閉じた状態
開いた状態
１．機能
本文の追記部分をjQueryを使って折りたたみします。このプラグインは「Show Hide "more" with WordPress」を改造したものです。
２．ダウンロード
以下のリンクからプラグインをダウンロードしてください。
変更履歴
2011.05.09 初版
2011.05.09 v0.2 jQueryの呼び出し方法変更／本文下に表示される「閉じる」をクリックしたときの折りたたみ速度修正
アーカイブを展開し、中にあるwp_more_content_folderフォルダをpluginsディレクトリにアップロードしてください。
アップロード後、管理画面で「More Content Folder」の有効化をクリックします。
３．CSS
追記には「class="more"」および「class="hide"」が追加されます。以下のようなスタイルを追加すれば、クリック後のリンク色も変わらないと思います。
a.more, a.hide {
color: #0066cc;
}
