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

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

Posted at August 24,2011 2:55 AM
Tag:[Plugin, WordPress, wp_content_folder]

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

1.機能

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

折りたたんだ状態(Twenty Elevenテーマ)
折りたたんだ状態

開いた状態
開いた状態

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

折りたたみサンプル
サンプル

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

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

変更履歴

2011.08.24 v0.1 初版
wp_content_folder_0_1.zip

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

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

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

管理画面

3.テンプレートの修正

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

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

このプラグインでは「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(); ?>">
関連記事
zenback
人気エントリー
トラックバックURL


コメント

おはようございます。
プラグインのダウンロードのリンクが張れてないと思うのですが、どんなもんでしょうか?

[1] Posted by kankiti : August 25, 2011 8:59 AM

>kankitiさん
こんにちは。
ご指摘ありがとうございました!
さきほどリンク貼りました。

[2] Posted by yujiro logo : August 25, 2011 2:32 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)