小粋空間: 折りたたみアーカイブ

Top ＞ WordPress ＞カスタマイズ＞折りたたみ [全て開く]

2007年12月10日

tabAccordion によるサイドメニューの折りたたみ for WordPress

December 10,2007 12:25 AM
Tag：[]WordPress][Customize][TabAccordion]
Permalink

WordPress で tabAccordion によるサイドメニューの折りたたみについて質問を頂きましたので、本エントリーにてカスタマイズを紹介します。

このカスタマイズを行うことで、サイドメニューをサンプルの「最近のエントリー」「カテゴリーリスト」「月別アーカイブリスト」のように、アコーディオン風に折りたたむことができます。

サンプル

設定は当ブログでの配布テンプレート「WordPress テーマ（テンプレート）・3カラム版」用に最適化していますが、CSSを変更すれば他のテンプレートでも応用可能です。

~~注：IE6で正常に動作していないため、別途確認して修正します。~~修正致しました。対処方法は５項へ。

１．3カラムレイアウトの修正

tabAccordion の表示幅が広いため、左サイドバーを右サイドバーの左側に移動し、サンプルと同じカラムレイアウトに変更します。

まず「アーカイブ」・「インデックス」・「シングルポスト」・「ページ」の各テンプレート編集画面を開き、左サイドバーを中央カラムの右側になる位置に移動（赤色を削除して青色を追加）します。

変更前

<?php get_header(); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
 
<!-- center -->
<div id="content">
<div class="blog">
　　　：

変更後

　　　：
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

次に「スタイルシート」編集画面を開き、中央カラムの左罫線（赤色部分）を削除します。

/* for 3 columns fixed layout */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
}

また、フッタに clear プロパティ（青色部分）を追加します。
これはフッタの内容が短い場合、フッタがサイドバーの真下に表示される不具合を回避するためです。

#footer {
    margin: 10px 0;
    padding: 1px 0;
    clear: both;
}

この段階でブログを表示し、カラムレイアウトが正常に変更されたことを確認してください。

２．スクリプトのダウンロード・アップロード

tabAccordion のサイトより、tabAccordion.zip のリンクをクリックしてダウンロード。

解凍した中にある、

scripts/moo.fx.js
scripts/moo.fx.pack.js
scripts/prototype.lite.js

を scripts フォルダごと、WordPress のインストールディレクトリにアップロードしてください。

３．tabAccordion の設定

「スタイルシート」に tabAccordion のスタイル（下記）を追加します。各設定がどの部分に反映されるかは、コメント（/* ～ */）を参考にしてください。

/* タブ全体 */
#wrapper {
    float: left;
    width: 338px;
    margin: 0 auto;
    padding: 20px 0 0 18px;
}
/* リスト表示部分 */
.boxholder{
    clear: both;
}
/* タブ */
.tab{
    float: left;
    width: 110px;
    _width: 106px;
}
/* タブに表示するタイトル */
.tabtxt{
    margin: 0 1px 0 0;
    padding-bottom: 2px;
    border: 1px solid  #666;
    color: #444;
    background: #f6f6f6;
    text-align: center;
    font-size: 75%;
    line-height: 2.0;
}
/* リストのタイトル */
#wrapper .box h2 {
    margin: 3px 0;
    font-size: 83.3%;
    font-weight: bold;
}
/* リストの内容 */
#wrapper .box ul {
    font-size: 83.3%;
}
/* タブのリンク */
.tab a,
.tab a:link,
.tab a:visited {
    color: #444;
    text-decoration: none;
}
.tab a:hover {
    color: #069;
    text-decoration: underline;
}
/* リストの内容（p要素を用いた場合） */
#wrapper p {
    margin: 0;
    padding: 5px 0;
    font-size: 75%;
    line-height: 1.5;
    /*text-align: justify;*/
}
/* リストマーク表示 */
.box ul {
    padding-left: 16px;
}
html > body .box ul {
    padding-left: 14px;
}
.box ul li {
    magin-left: 6px;
}

「ヘッダー」テンプレートの head 終了タグの前に下記を追加します。これは tabAccordion スクリプトを起動するための設定です。

<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/scripts/prototype.lite.js"></script>
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/scripts/moo.fx.js"></script>
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/scripts/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
  var stretchers = document.getElementsByClassName('box');
  var toggles = document.getElementsByClassName('tab');
  var myAccordion = new fx.Accordion(
  toggles, stretchers, {opacity: false, height: true, duration: 600}
  );
  //hash functions
  var found = false;
  toggles.each(function(h2, i){
    var div = Element.find(h2, 'nextSibling');
    if (window.location.href.indexOf(h2.title) > 0) {
      myAccordion.showThisHideOpen(div);
      found = true;
    }
  });
  if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>

赤色で示した部分は、次に設定する tabAccordion 本体の中にある (X)HTML 要素あるいは class 属性名と対応しています。(X)HTML マークアップを変更する場合は、上記の赤色部分も併せて変更してください。

最後に tabAccordion で表示される本体（下記）を、「サイドバー2」の先頭に追加します。カラムレイアウトの構造上、先頭に追加しないとレイアウトが崩れますのでご注意ください。

<div id="wrapper">
  <div id="tabcontent">
  <div class="tab"><h2 class="tabtxt" title="first"><a href="javascript:;">Entries</a></h2></div>
  <div class="tab"><h2 class="tabtxt" title="second"><a href="javascript:;">Categories</a></h2></div>
  <div class="tab"><h2 class="tabtxt" title="third"><a href="javascript:;">Archives</a></h2></div>
  <div class="boxholder">
    <div class="box">
      <h2>Recent Entries</h2><ul><?php get_archives('postbypost', '10','custom' ,'<li>' ,'</li>'); ?></ul>
    </div>
    <div class="box">
      <h2>Categories</h2><ul><?php wp_list_cats('sort_column=name&optioncount=1&hide_empty=1'); ?> </ul>
    </div>
    <div class="box">
      <h2>Archives</h2><ul><?php wp_get_archives('show_post_count=true'); ?></ul>
    </div>
  </div>
</div>
</div>
<script type="text/javascript">
Element.cleanWhitespace('tabcontent');
init();
</script>

赤色で示した部分は必ず同じ名称にしてください。

なお、表示内容はお好みにカスタマイズしたいと思いますので、タグの構造を簡単に説明しておきます。

<div id="wrapper"> ← tabAccordion 全体
  <div id="tabcontent">
 
　　↓ タブ表示部分
  <div class="tab"><h2 class="tabtxt" title="first"><a href="javascript:;">[1番目のタブタイトル]</a></h2></div> 
  <div class="tab"><h2 class="tabtxt" title="second"><a href="javascript:;">[2番目のタブタイトル]</a></h2></div>
  <div class="tab"><h2 class="tabtxt" title="third"><a href="javascript:;">[3番目のタブタイトル]</a></h2></div>
 
　　↓ タブをクリックした時に表示される部分
  <div class="boxholder">
    <div class="box">
        [1番目に表示するリストの内容]
    <div class="box">
        [2番目に表示するリストの内容]
    </div>
    <div class="box">
        [3番目に表示するリストの内容]
    </div>
  </div>
 
</div>
</div>
 
↓ tabAccordion スクリプトを起動
<script type="text/javascript">
Element.cleanWhitespace('tabcontent');
init();
</script>

青色のカッコ書きで示した部分は適宜変更可能ですので、お好みのリストを表示させてください。

また、各 ID 属性、class 属性名は変更可能ですが、ひとつ前のリストにある名称および、スタイルシートと名称が一致するようにしてください。

４．折りたたみ速度を変更する

速度を変更する場合は、「ヘッダー」テンプレート直前に設定した、

toggles, stretchers, {opacity: false, height: true, duration: 600}

の赤色部分を変更してください。

５．IE6 で正常に動作しない場合の対処

ページの先頭に XML 宣言が記述されている場合、IE6 では正常に動作しないようです。IE6 で動作させたい場合は XML 宣言を削除してください。

2007.12.12
script 要素の内容を修正しました。

Comments [15] | Trackbacks [1]

2007年11月14日

「WordPress で『続きを読む』の折りたたみ」を特定のページだけに適用する

November 14,2007 3:10 AM
Tag：[Customize, WordPress]
Permalink

「WordPress で「続きを読む」の折りたたみ Web2.0」では、スライドダウンで本文下に続きを表示するカスタマイズをご紹介しましたが、カテゴリーアーカイブや月別アーカイブでも折りたたみが適用されてしまうため、追記部分のテキスト量が多い場合、ページの読み込みに時間がかかる可能性があります。

ということで、本エントリーではインデックスページのみ折りたたみを適用し、アーカイブページでは記事ページへのリンクを表示するカスタマイズを紹介します。

注：このカスタマイズを行う前に「WordPress で「続きを読む」の折りたたみ Web2.0」を設定してください。

設定方法

getContentforShowHide.php を任意のエディタで開き、以下の青色部分を追加してください。追加部分は大きく分けて４ヶ所あります。特に閉じカッコ "}" 忘れがないよう、ご注意ください。

　　　　：
function output_showHide_js() {
    if(is_home()) {
?>
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '&#171; Hide more';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = 'Read more &#187;';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>
<?php
    }
}
　　　　：
function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
　　　　：
　　（中略）
　　　　：
    if (count($content)>1) {
        $allcontent = "";
        for ($counter = 1; $counter < count($content); $counter++) {
            $allcontent .= $content[$counter];
        }
        if ($more) {
            $output .= '<a id="more-'.$id.'"></a>'.$allcontent;
        } else {
            if(is_home()) {
    $output .= "
    <div id='Link$id' class='ajax-entry-more-link'><a href='".get_permalink()."' name='ext$id' onclick=\"ajaxShowHide($id);return false;\">Read more »</a></div>
    <div id='Text$id' style='display: none'>
        " . $allcontent . "
        <div class='ajax-entry-more-link'><a href='#ext$id' onclick=\"ajaxShowHide($id);return false;\">« Hide more</a></div>
    </div>";
            } else {
    $output .= "<div class='ajax-entry-more-link'><a href='".get_permalink()."' name='ext$id'>Read more &#187;</a></div>";
            }
        }
    }
    if ($preview) { // preview fix for javascript bug with foreign languages
        $output =  preg_replace('/\%u([0-9A-F]{4,4})/e',  "'&#'.base_convert('\\1',16,10).';'", $output);
    }
    return $output;
}

修正後、元のディレクトリにアップロードすれば完了です。

2007.11.14
ソースコードの関数名が誤っていたので修正しました。また折りたたみを適用しない場合のマークアップ（div）に class 属性を追加しました。

Comments [2] | Trackbacks [0]

2007年10月10日

dTree プラグイン for WordPress v0.4

October 10,2007 12:23 AM
Tag：[Category, dTree, Plugin, WordPress]
Permalink

WordPress のカテゴリーリストをツリー表示する「dTree プラグイン」をバージョンアップしました。

バージョンアップ内容は次の通りです。

クッキーによる折りたたみ状態を保持しない場合の折りたたみ初期状態を設定可能

プラグインのダウンロードは「dTree プラグイン for WordPress」よりお願い致します。

追加機能の設定方法

バージョンアップしたプラグインをアップロード・有効化すると下記のリンクが表示されるのでクリック。

プラグイン

クリックすると下記のオプション画面が表示されます。赤枠部分が今回追加したオプションです。

オプション画面

追加オプションの意味は次の通りです。

オプション	意味	デフォルト
Fold Status is open.	ツリーを常に開いた状態にする場合にチェック（クッキーによる状態保持を無効にしている場合のみチェックボックスを表示）	false

Comments [4] | Trackbacks [0]

2007年9月20日

WordPress で「続きを読む」の折りたたみ Web2.0

September 20,2007 1:25 AM
Tag：[Plugin, scriptaculous, WordPress]
Permalink

WordPress で追記文章を書いた時、「続きを読む」のリンクをクリックすると、スライドダウンで本文下に続きを表示するカスタマイズをご紹介します。

１．特徴

JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「Read more（続きを読む）」のリンクをクリックすると追記文章をスライドダウンで表示します。
JavaScript が無効の場合は記事ページにジャンプします。
「Hide more（続きを隠す）」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
スクリプタキュラスのライブラリを編集せずに、折りたたみ速度の変更が可能です。

２．サンプル

以下にサンプルを作りましたので、動作をお試しください。折りたたみ速度は0.5秒に設定しています。

追記文章の折りたたみ 2.0 サンプル

３．WordPress で「続き」を作成する方法

実は「続き」の作り方がさっぱり分からず、都合10分ほど悩みました（笑）。

WordPress では、テキストエリアにあるアイコン more または「more」をクリックすることで続きを作成します。

テキストエリアのモード（タブ）が「ビジュアル」を選択している場合は、テキストエリア内に続き用の罫線が表示され、「コード」の場合は、 が埋め込まれます。

参考：メモ帳であり備忘録でありブログであり・・・：記事の途中に「続きを読む・・・」みたいなのを挿入する方法

以下、カスタマイズ方法です。

４．プラグインのダウンロード

下記のリンクよりプラグインをダウンロードしてください（IEの場合、Step 1の「Download and "install" this plugin.」を右クリックして「対象をファイルに保存」を選択し、getContentforShowHide.php という名前で保存。ファイルの種類は「すべて」を選択してください）。

Show Hide “more” with WordPress

ダウンロードした getContentforShowHide.php を任意のエディタで開き、下記の修正を行ってください。
修正箇所は、大きく分けて2つあります（下記）ので、ごっそり入れ替えてください。修正前の削除部分を赤色、追加部分を青色で示しています。

変更前（その1）

注：その1の手順は wp-lightbox2 プラグインを有効にしていると不要かもしれません
（その2→その3を行って動作しないようであれば本修正を行ってください）。

add_action('wp_head', 'output_showHide_js');
add_action('the_content', 'the_contentshowhide',0);

変更後（その1）

function showhide_javascript() {
	if ( !function_exists('wp_enqueue_script') || is_admin() )
		return;
	wp_enqueue_script('prototype');
	wp_enqueue_script('scriptaculous-effects');
}
add_action('init', 'showhide_javascript');
add_action('wp_head', 'output_showHide_js');
add_action('the_content', 'the_contentshowhide',0);

変更前（その2）

function output_showHide_js() {
    $output = '<script type="text/javascript">';
    $output .= 'function showHide(entryID, entryLink, htmlObj, type) {';
    $output .= 'if (type == "comments") {';
    $output .= 'extTextDivID = (\'comText\' + (entryID));';
    $output .= 'extLinkDivID = (\'comLink\' + (entryID));';
    $output .= '} else {';
    $output .= 'extTextDivID = (\'extText\' + (entryID));';
    $output .= 'extLinkDivID = (\'extLink\' + (entryID));';
    $output .= '}';
    $output .= 'if( document.getElementById ) {';
    $output .= 'if( document.getElementById(extTextDivID).style.display ) {';
    $output .= 'if( entryLink != 0 ) {';
    $output .= 'document.getElementById(extTextDivID).style.display = "block";';
    $output .= 'document.getElementById(extLinkDivID).style.display = "none";';
    $output .= 'htmlObj.blur();';
    $output .= '} else {';
    $output .= 'document.getElementById(extTextDivID).style.display = "none";';
    $output .= 'document.getElementById(extLinkDivID).style.display = "block";';
    $output .= '}';
    $output .= '} else {';
    $output .= 'location.href = entryLink;';
    $output .= 'return true;';
    $output .= '}';
    $output .= '} else {';
    $output .= 'location.href = entryLink;';
    $output .= 'return true;';
    $output .= '}';
    $output .= '}';
    $output .= '</script>';
 
    echo $output;
}

変更後（その2）

function output_showHide_js() {
?>
<script type="text/javascript">
Effect.DefaultOptions = {
  transition: Effect.Transitions.sinoidal,
  duration:   0.5,   // seconds
  fps:        60.0,  // max. 60fps due to Effect.Queue implementation
  sync:       false, // true for combining
  from:       0.0,
  to:         1.0,
  delay:      0.0,
  queue:      'parallel'
}
function ajaxShowHide(entryID) {
  element = $('Text' + entryID);
  if(element.style.display == 'none') {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = '&#171; Hide more';
            Element.show(effect.element);
        }
    };
    Effect.BlindDown(element, options);
  } else {
    options = {
        afterFinish: function(effect) {
            $('Link' + entryID).firstChild.innerHTML = 'Read more &#187;';
            Element.hide(effect.element);
        }
    };
    Effect.BlindUp(element, options);
  }
}
</script>
<?php
}

変更前（その3）

function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
         :
      （中略）
         :
    $output .= "
    <div id='extLink$id'>
        <p>
            <a href='".get_permalink()."#more-$id'>Read more...</a> or <a href='".get_permalink()."' name='ext$id' onclick=\"showHide($id,'".get_permalink()."',this,'entry');return false;\">Read more right here... &#187;</a>
        </p>
    </div>
    <div id='extText$id' style='display: none'>
        " . $allcontent . "
        <p>
            <a href='#ext$id' onclick=\"showHide($id,0,this,'entry');return true;\">&#171; Hide it</a>
        </p>
    </div>";
        }
    }
    if ($preview) { // preview fix for javascript bug with foreign languages
        $output =  preg_replace('/\%u([0-9A-F]{4,4})/e',  "'&#'.base_convert('\\1',16,10).';'", $output);
    }
    return $output;
}

変更後（その3）

function get_the_contentshowhide($more_link_text = '(more...)', $stripteaser = 0, $more_file = '') {
         :
      （中略）
         :
    $output .= "
    <div id='Link$id' class='ajax-entry-more-link'><a href='".get_permalink()."' name='ext$id' onclick=\"ajaxShowHide($id);return false;\">Read more &#187;</a></div>
    <div id='Text$id' style='display: none'>
        " . $allcontent . "
        <div class='ajax-entry-more-link'><a href='#ext$id' onclick=\"ajaxShowHide($id);return false;\">&#171; Hide more</a></div>
    </div>";
        }
    }
    if ($preview) { // preview fix for javascript bug with foreign languages
        $output =  preg_replace('/\%u([0-9A-F]{4,4})/e',  "'&#'.base_convert('\\1',16,10).';'", $output);
    }
    return $output;
}

修正後、getContentforShowHide.php を wp-content/plugins ディレクトリにアップロードしてください。

アップロード後、プラグイン管理画面で「Content with show/hide javascript for "more"」を有効にすれば設定完了です。

なお、折りたたみ速度を変更する場合は、getContentforShowHide.php 内の

duration:   0.5,   // seconds

の数値を変更します。0.5 はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。

この Effect.DefaultOptions = { … } の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。

５．CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

例えば、wp.Vicuna では下記の設定が必要です。

.ajax-entry-more-link {
    margin-left: 30px;
}

６．その他

(X)HTML の1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません（開く瞬間と閉じた瞬間にビクッとなります）。サンプルの公開テンプレートは XML 宣言を外しています。

2007.10.01
カスタマイズ手順より script.aculo.us のインストールを削除しました（プリインストールされているため）。

2007.10.01
script.aculo.us のインクルードがもれていたので追加しました。

Comments [23] | Trackbacks [1]

小粋空間 - a cheap joke and a play on words site