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

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

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(); ?>">