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

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

2012年2月12日

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」バージョンアップ

February 12,2012 2:55 AM
Tag：[Plugin, WordPress, wp_list_folder]
Permalink

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」をバージョンアップしました。

１．プラグインの機能

WordPressのサイドメニューで折りたたみができるようにします。

プラグイン適用前（Twenty Tenテーマ）

プラグイン適用後の折りたたんだ状態

２．プラグインの変更点

ページを移動したときに、メニューの折りたたみ状態を保持できない不具合を解消しました。以下解説です。

このプラグインはjQueryの「Listfolderプラグイン」を利用しているのですが、ページを移動したときに折りたたみ状態を保持するために、各メニュータイトルに次のようなid属性の設定が必要です（その値をクッキーに保持します）。

<dt class="sidetitle" id="hoge">Recent Entries</dt>
<dd>
  <ul>
    <li><a href="2011/08/post-8.html" title="e22">業務提携に関するお知らせ</a></li>
    <li><a href="2010/09/post-9.html" title="e23">モバイルサイトオープン</a></li>
    <li><a href="2010/07/java.html" title="e19">ソリューションセミナー</a></li>
  </ul>
</dd>

ただし、WordPressのウィジェットではこの設定を行うことが困難なようです。困難な理由は次のとおりです。

WordPressのウィジェットはwidgets_initフックでカスタマイズできるようになっています。下はTwentyElevenのfunctionc.phpにあるwidgets_initフックの実装です。

/**
 * Register our sidebars and widgetized areas. Also register the default Epherma widget.
 *
 * @since Twenty Eleven 1.0
 */
function twentyeleven_widgets_init() {
 
    register_widget( 'Twenty_Eleven_Ephemera_Widget' );
 
    register_sidebar( array(
        'name' => __( 'Main Sidebar', 'twentyeleven' ),
        'id' => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => "</aside>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
    …中略…
}
add_action( 'widgets_init', 'twentyeleven_widgets_init' );

メニュータイトルに該当するのは赤色で示した「before_title」の部分ですが、ウィジェットごとに異なるid属性値を設定できないようです。wp-includes/widgets.phpにあるregister_sidebar()のデフォルト値（赤色部分）も次のようになっています。

function register_sidebar($args = array()) {
    global $wp_registered_sidebars;
 
    $i = count($wp_registered_sidebars) + 1;
 
    $defaults = array(
        'name' => sprintf(__('Sidebar %d'), $i ),
        'id' => "sidebar-$i",
        'description' => '',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => "</li>\n",
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => "</h2>\n",
    );
    …後略…

ただし、その手前にある「before_widget」にはid属性値が付与されるので、これを利用できるようにしました。

        'before_widget' => '<aside id="%1$s" class="widget %2$s">',

「before_title」にこの設定がある場合、ページ移動を行ったときに折りたたみ状態が保持されるようになります。

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

wp_list_folderプラグインは以下のリンク先からダウンロードできます。

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」

Comments [0] | Trackbacks [0]

2011年8月24日

WordPressのアーカイブページで本文を折りたたむ「wp_content_folderプラグイン」

August 24,2011 2:55 AM
Tag：[Plugin, WordPress, wp_content_folder]
Permalink

WordPressのアーカイブページ（月別・カテゴリなど）で本文を折りたたむ「wp_content_folderプラグイン」を公開します。

１．機能

アーカイブページに表示されている記事タイトルをクリックすることで、本文の折りたたみを行います。折りたたみ状態はクッキーに保存します。

折りたたんだ状態（Twenty Elevenテーマ）

開いた状態

以下にサンプルも用意しました。

折りたたみサンプル

２．プラグインのダウンロード・インストール

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

変更履歴

2011.08.24 v0.1 初版

wp_content_folder_0_1.zip

プラグインのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

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

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

管理画面

３．テンプレートの修正

Twenty Elevenテーマの場合、content.phpに以下の青色部分を追加します。赤色部分は必須のclass属性およびid属性です。

…前略…
<?php if ( is_archive() ) : ?>
    <h1 class="entry-title content-title" id="title<?php the_id()?>"><?php the_title(); ?></h1>
<?php else : ?>
    <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<?php endif; ?>
…中略…
<div class="entry-content" id="content<?php the_id(); ?>">

class属性とid属性の付与ルールは次のとおりです。Twenty Elevenテーマ以外のテーマに適用する場合の参考にしてください。

記事タイトルを括る要素のclass属性値：content-title
記事タイトルを括る要素のid属性値：title + 記事ID
本文全体を括るdiv要素などのid属性値：content + 記事ID

４．タイトルに折りたたみマークをつける

このプラグインでは「jQuery Listfolderプラグイン」を利用しています。Listfolderプラグインの設定変更はプラグインの編集画面から行えます。

設定を変更すれば、次のような折りたたみマークをつけるといったカスタマイズも可能です。

管理画面

Twenty Elevenテーマの場合、content.phpに以下の青色部分を追加します。

…前略…
<?php if ( is_archive() ) : ?>
    <h1 class="entry-title" ><?php the_title(); ?><a href="javascript:void(0)" id="title<?php the_id()?>" class="content-title mark"></a></h1>
<?php else : ?>
    <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
<?php endif; ?>
…中略…
<div class="entry-content" id="content<?php the_id(); ?>">

Comments [2] | Trackbacks [0]

2011年6月20日

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」

June 20,2011 12:55 AM
Tag：[Plugin, WordPress, wp_list_folder]
Permalink

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」を公開します。

１．機能

WordPressのサイドメニューで折りたたみができるようにします。

プラグイン適用前（Twenty Tenテーマ）

プラグイン適用後の折りたたんだ状態

２．プラグインのダウンロード・インストール

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

変更履歴

2011.06.20 v0.1 初版
2012.02.12 v0.2 折りたたみ状態が保持されない不具合を修正

wp_list_folder_0_2.zip

プラグインのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

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

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

管理画面

３．注意事項

現在のバージョンでは、メニューリストタイトルのclass属性値に「widget-title」が設定されている必要があります。

Comments [1] | Trackbacks [0]

2007年12月10日

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

December 10,2007 12:25 AM
Tag：[Customize, TabAccordion, WordPress]
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 [18] | 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 [4] | 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 [6] | 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 を任意のエディタで開き、以下に示す修正を行ってください。

修正内容は、５．１～５．３の3つがあります。修正前の削除部分を赤色、追加部分を青色で示しています。

５．１その1

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

変更前

...前略...
add_action('wp_head', 'output_showHide_js');
add_action('the_content', 'the_contentshowhide',0);
...後略...

変更後

...前略...
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;
}
...後略...

変更後

...前略...
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;
}
...後略...

変更後

...前略...
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"」を有効にすれば設定完了です。

８．CSS

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

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

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

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

９．折りたたみ速度の変更

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

duration:   0.5,   // seconds

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

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

１０．その他

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

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

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

2008.12.15
エントリーの構成を見直しました。

Comments [59] | Trackbacks [5]

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

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」バージョンアップ

１．プラグインの機能

２．プラグインの変更点

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

WordPressのアーカイブページで本文を折りたたむ「wp_content_folderプラグイン」

１．機能

２．プラグインのダウンロード・インストール

３．テンプレートの修正

４．タイトルに折りたたみマークをつける

WordPressのサイドメニューを折りたたむ「wp_list_folderプラグイン」

１．機能

２．プラグインのダウンロード・インストール

３．注意事項

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

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

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

３．tabAccordion の設定

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

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

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

設定方法

dTree プラグイン for WordPress v0.4

追加機能の設定方法

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

１．特徴

２．サンプル

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

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

５．プラグインファイルの修正

５．１ その1

５．２ その2

５．３ その3

６．プラグインのアップロード

７．プラグインの有効化

８．CSS

９．折りたたみ速度の変更

１０．その他

５．１その1

５．２その2

５．３その3