WP/ 記事タイトルをクリックさせて中身を表示

解決済

質問者：commecomme
質問日時：2014/11/12 21:08
回答数：3件

お世話になります。
どうしても頭を悩ませていています。
WORDPRESSを使用し、シンプルに投稿内容を表示させたく思っています。
記事タイトル一覧のページで、各タイトルをクリックしたら
記事内容をアコーディオンメニュー的に表示させたいのです。
jqueryでもcss3でもいいのですが、どこかに参考サイトはないでしょうか？
探したのですが、見つからなくて困っています。
何卒、ご教授ください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： shockatz
回答日時：2014/11/13 23:48

Wordpress

アーカイブテンプレートで

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<dl class="accordionLister">
<dt><?php the_title() ?><span class='showExcerpt'>[概要表示]</span><a href="<?php the_permalink() ?>">[詳細表示]</a></dt>
<dd><?php the_excerpt() ?></dd>
</dl>
<?php endwhile; else: ?>
<p>404</p>
<?php endif; ?>

<head>内に以下のjQueryを

$(function(){
$('accordionLister dd').hide();
$('document').on('click','.showExcerpt',function()){
$('accordionLister dd').hide;
$(this).parent().find('dd').show();
}
});

内容が約わからないのですが、だいたいこんな感じ？

- 0
- 件

通報する

この回答へのお礼

大変ありがとうございます！
まずはやってみます！
お手数をおかけいたしました。

通報する

お礼日時：2014/11/14 09:48

No.2

回答者： shockatz
回答日時：2014/11/13 11:53

そ程度の要件を、wordpressのphpスクリプトを使い、わざわざサーバサイドでやるのは感心しないです。

反応も鈍く、サーバ負担も高く、トラフィックも多い。

理想の処理は、表示すべきデータ（ページ単位）をwordpressで取得しておき、jQueryで表示すること。
ただ、こういう「組み合わせ」的な要件に対するソリューションがBingo!で見つかることはほとんどないと思いますよ。

やりたいことは以下の方法論の組み合わせ。

■wordpressテンプレート上で、任意のjQueryを走らすことのできるスキル

■wordpressテンプレートを書くスキル
各種の投稿をカテゴリーやカスタム投稿タイプ指定で取得する。
ページング機能も必要。
titleとcontentを以下の形式で列挙するwordpressループを記述。
<dl>
<dt>タイトル</dt>
<dd>本文</dd>
</dl>
CSSで $('dd').hide(); などして本文を隠す

■jQueryでアコーディオン（的な）UIを記述するスキル
jQueryを使い、上記のtitleをクリックしたら、いったん全ての$(dd)をhide()し、$(this).parent().find("dd")なddを取得してshow()する。

３つのうちどの部分で「頭を悩ませて」いるんですか？

この回答への補足

ありがとうございます！
わざわざサーバーサイドでやらせることは
あまり良くないということですよね。
今回、ちょっとイレギュラーな組み方をしなければならず、
このような悩みを抱えてしまいました。

特に頭を悩ませているのは、
▪︎titleとcontentを以下の形式で列挙するwordpressループを記述。
■jQueryでアコーディオン（的な）UIを記述する

といったところだと思います。

補足日時：2014/11/13 12:36

通報する