TopWordPress > カスタマイズ > 折りたたみ > 2011年8月
2011年8月24日

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(); ?>">
Comments [2] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3