Easy Start Pack - WordPress プラグイン

【2010-02-25 追記】

こちらのプラグインは、jQuery 1.2系を使っています。現在は、jQuery 1.4系が出ていますので、正直こちらのプラグインの使用はオススメできません。一旦公開を中止しようと思いましたが、一応そのまま置いて起きます。ただし、今後は当プラグインに関しては、ご質問等もお受けできませんのでご了承ください。

このプラグインは、jQuery をベースにした色々な機能（ jQuery プラグイン）を WordPress に簡単に導入できるようにしたものです。

このプラグインが受け持つ役割は、単純に (X)HTML の head 要素内にライブラリを読み込むための要素を追加するだけですが、ライブラリ自体の CSS ファイルや js ファイルに少しだけ手を加えて、WordPress でより簡単に使えるようにしてあります。

主な機能（ライブラリ別）

Superfish

階層型のドロップダウンメニューを提供します。グローバルナビゲーションに最適です。

Internet Explorer の z-index バグもある程度回避できるようにしています。人気のテーマ「 wp.Vicuna」でも大丈夫だと思います。

Facebox 1.2

画像やページ内のボックス、(X)HTML ファイルなどをオーバーレイ表示します。

デフォルトのままだと、オーバーレイ表示する a 要素に「 rel="facebox" 」を追加しなければなりませんが、画像への直リンクに関しては「 rel="facebox" 」を追加する必要はなく、自動的に Facebox が起動するようにしてあります。

yuga.js 0.6.3

yuga.js には便利な機能がたくさん詰まっています。機能の説明とサンプルは、以下のサイトがとても参考になります。

• yuga.js 0.4.2 - 優雅なWeb制作のためのJSとデモ｜CSS HappyLife

また、当プラグインで使用している yuga.js には簡易タブ機能も追加されています。作者ブログの以下のページが参考になります。

• inputlog - yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript

accordion （yuga.js 末尾に追記）

タイトル部分をクリックすると、非表示になっていた本文部分がスルスルっと表示され、もう一度タイトル部分をクリックするとスルスルっと閉じます。

ライセンス

当プラグインは、ライブラリを簡単に使用できるようにするプラグインです。よって、各ライブラリについての著作権は、それぞれの作者に帰属します。

各ライブラリのライセンスについては、ソースに以下のように記載されています（ソースの抜粋）。

なお、当プラグイン自体は MIT ライセンスです。

[Superfish]
/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 * 	http://www.opensource.org/licenses/mit-license.php
 * 	http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

[Facebox]
/*
 * Facebox (for jQuery)
 * version: 1.2 (05/05/2008)
 * @requires jQuery v1.2 or later
 *
 * Examples at http://famspam.com/facebox/
 *
 * Licensed under the MIT:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ]
 */

[yuga.js]
/*
 * yuga.js 0.6.3 - 優雅なWeb制作のためのJS
 *
 * Copyright (c) 2007 Kyosuke Nakamura (kyosuke.jp)
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Since:     2006-10-30
 * Author Modified:  2008-07-07
 * User   Modified:  2008-09-16 by Tomohiro Okuwaki
 *
 * jQuery 1.2.6
 * ThickBox 3.1
 */

[accordion]
/*
 * accordion
 *
 * copyright (c) 2007 RedLine Magazine
 *    RedLine Magazine : jQueryでリストを開閉させたい 
 *    http://redline.hippy.jp/lab/misc/jquery_1.php
 * Modified: Tomohiro Okuwaki
 * 
 */

最新版ダウンロード

• easy-start-pack-012.zip （最新版）

チェンジログはこちら

インストール

ダウンロードしたファイルを解凍します。解凍してできた easy-start-pack フォルダを、wp-content/plugins/ ディレクトリにアップロードします。

管理画面の「プラグイン」より、このプラグインを「使用する」にすればOKです。

使用方法

グローバルナビゲーションの設置方法

ドロップダウン式のグローバルナビゲーションを設置したい場所に、以下のようなソースを貼り付ければOKです。id 属性や class 属性を変える場合、CSS ファイルも同様に変更する必要があります。

【カテゴリのみのグローバルナビゲーション】

<div id="globalNavWrapper">
    <ul class="globalNav">
        <li><a href="<?php bloginfo('home'); ?>" title="トップページへ戻る">Home</a></li>
        <?php wp_list_categories('use_desc_for_title=1&title_li='); ?>
    </ul>
</div>

【カテゴリとページを並べるグローバルナビゲーション】

<div id="globalNavWrapper">
    <ul class="globalNav">
        <li><a href="<?php bloginfo('home'); ?>" title="トップページへ戻る">Home</a></li>
        <?php wp_list_categories('use_desc_for_title=1&title_li='); ?>
        <?php wp_list_pages('title_li='); ?> 
    </ul>
</div>

WordPress のデフォルトのテーマで使用する場合は、ヘッダー (header.php) の最終行の <hr /> の後に追加することをお勧めします。

これはあくまでサンプルです。トップページへ戻るリンクが不要でしたら削除してください。また、パラメータを設定すれば様々な表示が可能になりますので、必要に応じて修正してください。

なお、パラメータ等については、以下のサイトや書籍が参考になります。

• ps*wiki
• Webプロフェッショナルのための黄金則 WordPressテンプレートタグ虎の巻

グローバルナビゲーションのデザインの変更

グローバルナビゲーションのデザインを変更したい場合は次のファイルを適宜カスタマイズしてください。

• /easy-start-pack/superfish/superfish.css

参考までに修正する場所を示しておきます。赤字部分を修正してください。

【 WordPress のデフォルトのテーマで使用する場合】

[ 4 行目]
/*** ESSENTIAL STYLES ***/
#globalNavWrapper {
    position: relative;
    padding-bottom: 1em;
    font-size: 13px;
    z-index: 15;
}

ちなみに、以下のようにするとしっくりとハマります。

/*** ESSENTIAL STYLES ***/
#globalNavWrapper {
    position: relative;
    padding: 1em 10px;
    font-size: 13px;
    z-index: 15;
}

【文字サイズを変更する場合】

[ 5 行目]
/*** ESSENTIAL STYLES ***/
#globalNavWrapper {
    position: relative;
    padding-bottom: 1em;
    font-size: 13px;
    z-index: 15;
}

【色を変更する場合】

[ 86 ～ 102 行目]
.globalNav {
    background: #BDD2FF;
}
.globalNav li {
    background: #BDD2FF;
}
.globalNav li li {
    background: #AABDE6;
}
.globalNav li li li {
    background: #9AAEDB;
}
.globalNav li: hover, .globalNav li.sfHover,
.globalNav a: focus, .globalNav a: hover, .globalNav a: active {
    background: #CFDEFF;
    outline: 0;
}

Facebox でのオーバーレイ表示の仕方

画像をオーバーレイ表示する場合は、画像ファイル（ .jpg .gif .png ） へ直リンクすればOKです。例えば以下のようになります。

<a href="http://www.tinybeans.net/demo/wp-content/uploads/2008/09/tatado-s.jpg">伊豆は下田の多々戸浜</a>

その他、画像以外をオーバーレイ表示するには、a 要素に「 rel="facebox" 」を追加すればOKです。例えば、ページ内の非表示ボックスを表示するときは以下のようになります。

<a href="#displaynone" rel="facebox">見～つけた</a>

<div id="displaynone" style="display:none;">
    <p>見つかっちゃった！僕は人前に出るのが苦手なの。</p>
    <p>実は僕、お父さんに display:none; で非表示にしてもらったテキストさ。ソースを見れば分かるよ。</p>
    <p>じゃ、またねー！</p>
</div>

その他の使い方は、Facebox 1.2をご覧ください。

WordPress のサイトをドメイン直下以外で公開するときの Facebox 使用の注意点

WordPress のサイトをドメイン直下以外で公開する、つまり当ブログのように次のような URL でブログを運営するときは、Facebox が完全には動作しません。

http://www.tinybeans.net/blog/

そこで、easy-start-pack/facebox/facebox.js ファイルをテキストエディタで開き、77 行目を次のように変更し、デフォルトのファイルを上書きします。

[変更前]
var yourpathname = '/';

[変更後（http://www.tinybeans.net/blog/ で公開する場合）]
var yourpathname = '/blog/';

アコーディオンの使い方

アコーディオンについては、特にライブラリは使用していませんので、yuga.js ファイルの末尾に追記しています。

このソースに関しては以下のサイトを参考にして、アコーディオンできる要素に関して少しだけ変更しています。

• RedLine Magazine : jQueryでリストを開閉させたい

使い方は、dl 要素全体でアコーディオンを使いたい場合は、その dl 要素に「 class="accordion" 」を追加します。すると、その dl 要素内の dt 要素をクリックすと dd 要素が開閉できます。

また、dl 要素内の一部の dt、dd 要素のみをアコーディオンさせたい場合は、その dt、dd 要素に「 class="accordion" 」を追加します。

その他のブロック要素でも使用可能です。タイトルに当たるブロック要素に「 class="accordion_title" 」を追加し、本文に当たるブロック要素に「 class="accordion_body" 」を追加すればOKです。

機能の停止方法

使用を停止したい機能（ライブラリ単位）がある場合は、easy-start-pack.php ファイル内の 64 ～ 68 行目の「設定：開始」～「設定：終了」の中で、使用を停止する機能の「 1 」を「 0 」に変更すればOKです。

/* 設定：開始 */
$use_superfish = 1;
$use_facebox = 1;
$use_yuga = 1;
/* 設定：終了 */

yuga.js 内の個別の機能を停止したい場合は、yuga.js ファイルの 28 ～ 36 行目の該当する機能を「 // 」でコメントアウトすればOKです。

【例：外部リンクは別ウィンドウ機能を停止する場合】

$(function() {
    $.yuga.selflink();
    $.yuga.rollover();
//    $.yuga.externalLink();
    $.yuga.scroll();
    $.yuga.tab();
    $.yuga.stripe();
    $.yuga.css3class();
});

チェンジログ

【2008-09-20 追記】

サイトの URL を引っ張ってくるところを次のように変更しました。

• （変更前） get_bloginfo('home');
• （変更後） get_bloginfo('wpurl');

【2008-09-18 追記】

yuga.js のバナーで外部リンクする場合の externalLink クラスを削除する設定を追加した、バージョン 0.1.1 を公開しました。以下の二つのファイルのみ上書きすればOKです。

• easy-start-pack.php
• yuga.js

【2008-09-17】

Easy Start Pack バージョン 0.1.0 を公開しました。

ダウンロード

• easy-start-pack-012.zip （最新版）
• easy-start-pack-011.zip
• easy-start-pack-010.zip