TopWordPressプラグイン > 2011年5月
2011年5月24日

WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグイン

May 24,2011 1:23 AM
Tag:[, , ]
Permalink

WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグインを紹介します。

プラグイン適用前

プラグイン適用後

このプラグインは、以前公開した「サイドメニューのツリー化プラグイン for WordPress」をjQueryで新たに作り直したものです。これにより、ツリー化の設定が格段に簡単になりました。

1.機能

本プラグインの主な機能は次の通りです。

  • 階層構造のリストをツリー化します
  • サブカテゴリーの多段階層にも対応しています
  • ツリー化の設定は管理画面から行えます

2.プラグインのダウンロード・インストール

以下のリンクからプラグインをダウンロードしてください。

変更履歴

2011.05.24 v2.0 jQuery版
2011.05.26 v2.1 保存後に入力項目が表示されない不具合を修正
2011.12.03 v2.2 第1階層にもツリーを適用できるオプションを追加
wp_tree_maker_2_2.zip

アーカイブを展開し、中にあるwp_tree_makerフォルダをpluginsディレクトリにアップロードしてください。

アップロード後、管理画面で「Tree Maker」の有効化をクリックします。

管理画面

3.プラグインの設定

「設定」→「Tree Maker」をクリック。

管理画面

サイドバーのリストタイトルに用いている見出し要素名(h1~h6)とツリー化したいサイドバーのリストタイトルを設定します。ツリー化したいリストが複数ある場合はリストタイトルをカンマで区切ってください。

管理画面

第1階層にもツリーを表示したい場合は、「第1階層もツリー化する」をチェックしてください。

4.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>
Comments [2] | Trackbacks [0]
2011年5月18日

WordPressにFacebookのOGP(Open Graph Protocol)を簡単に設定できる「WP-OGP」プラグイン

May 18,2011 2:22 AM
Tag:[, , , ]
Permalink

ご存知の方も多いと思いますが、WordPressにFacebookのOGP(Open Graph Protocol)を簡単に設定できる「WP-OGP」プラグインを紹介します。

ブログにOGP(meta要素)を設定することで、例えばFacebookのウォールなどからブログをリンクされたときに、ブログの情報をFacebookのプログラムに正しく伝えることができます。

以下、設定方法です。

1.プラグインのダウンロード・インストール

管理画面の「プラグイン」→「新規追加」をクリック。

管理画面

キーワードに「WP-OGP」を入力して「プラグインの検索」をクリック。

プラグインの検索

「いますぐインストール」をクリック。

インストール

インストールが完了したら「プラグインを有効化」をクリック。

インストール完了

これでサイトの(X)HTMLにmeta要素が追加されます。

ソースコード

自動インストール機能が使えない場合は、WP-OGPのページの「Download version~」をクリックして、プラグインアーカイブをダウンロード。

WP-OGPのページ

アーカイブを展開して中にある「wp-ogp」フォルダをWordPressのpluginsフォルダにアップロードしたあと、プラグイン一覧にある「WP-OGP」の「有効化」をクリックしてください。

プラグイン一覧

2.Facebookアプリの登録

WP-OGPプラグインには、OGPの「fb:app_id」「fb:admins」を設定するオプションが用意されています。2項では「fb:app_id」にアプリケーションIDを設定するためのアプリケーション作成を行います。

開発者のページ」にある「マイアプリ」をクリック。

開発者のページ

ページ右上の「Set Up New App」をクリック。

開発者のページ

アプリケーション作成ページに移動するので、適当なアプリケーションを入力し、「同意する」を選択して、「アプリケーションを作成」をクリック。

アプリケーション作成ページ

セキュリティコードを入力して「送信」をクリック。

セキュリティコード

これでアプリが作成されたので「Web Site」タブをクリックして、ブログの「Site URL」にメインページのURL、「Site Domain」にメインページのドメイン(サブディレクトリは入力不要)を入力して「変更を保存」をクリック。また、ここに表示されている「アプリケーションID」はあとで使うのでテキストコピーしておきましょう。

Web Site

保存後の画面でも「アプリケーションID」の確認ができます。

3.オプション設定

3項では「fb:app_id」「fb:admins」を有効にするための設定を行います。

WordPress管理画面に戻って、「設定」→「WP-OGP」をクリック。

管理画面

オプション設定が表示されるので、

  • fb:appid:2項で作成したアプリの「アプリケーション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);
}

修正後、元の位置にアップロードし、ページを表示すれば、正常に機能するようになります。

ソースコード

4.html要素の修正

テーマ編集画面を開いて、html要素に以下の青色のxmlns属性を追加してください。

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
関連情報:HTML5+RDFaについて
Comments [2] | Trackbacks [3]
2011年5月 9日

WordPressの「続き」をjQueryで折りたたむ「wp_more_content_folder」プラグイン

WordPressの「続き」をjQueryで折りたたむ「wp_more_content_folder」プラグインを公開します。

閉じた状態
閉じた状態

開いた状態
開いた状態

1.機能

本文の追記部分をjQueryを使って折りたたみします。このプラグインは「Show Hide "more" with WordPress」を改造したものです。

サンプル
サンプル

2.ダウンロード

以下のリンクからプラグインをダウンロードしてください。

変更履歴

2011.05.09 初版
2011.05.09 v0.2 jQueryの呼び出し方法変更/本文下に表示される「閉じる」をクリックしたときの折りたたみ速度修正
wp_more_content_folder_0_2.zip

アーカイブを展開し、中にあるwp_more_content_folderフォルダをpluginsディレクトリにアップロードしてください。

アップロード後、管理画面で「More Content Folder」の有効化をクリックします。

管理画面

3.CSS

追記には「class="more"」および「class="hide"」が追加されます。以下のようなスタイルを追加すれば、クリック後のリンク色も変わらないと思います。

a.more, a.hide {
	color: #0066cc;
}
Comments [5] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3