あなたの映画力を試せる!POPLETA映画検定(無料) >>

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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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();
}
});

内容が約わからないのですが、だいたいこんな感じ?
    • good
    • 0
この回答へのお礼

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

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

そ程度の要件を、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()する。


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

この回答への補足

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

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

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

補足日時:2014/11/13 12:36
    • good
    • 0

カテゴリ一覧を開閉できるPHPソースはありますので、そちらを参考にしながら一覧画面のPHPソースを書き換えるのはいかがでしょうか?



■wordpress記事投稿画面のカテゴリー一覧を開閉式にする
http://ao-works.net/wordpress-category-list-to-o …
    • good
    • 0
この回答へのお礼

ありがとうございます!
ちょっと試したいと思います!

お礼日時:2014/11/13 12:29

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q文字をクリックすると詳細文章が展開されるJS

本の販売ページをつくりたいと思います。
以下の目次のように3章建て、それぞれに400字の要旨がついているとします。

第1章 前転のやり方
第2章 後転のやり方
第3章 倒立のやり方

各章名をクリックすると要旨が展開され、再度クリックすると閉じる(折りたたまれる)ようにしたいのです。例えば、第1章をクリックすると

第1章 前転のやり方
   ここに400字の要旨が展開ここに400字の要旨が展開
   ここに400字の要旨が展開ここに400字の要旨が展開
   ここに400字の要旨が展開ここに400字の要旨が展開
   ここに400字の要旨が展開ここに400字の要旨が展開
第2章 後転のやり方
第3章 倒立のやり方


ブラウザ依存なく、せめてIE、FF、Chrome、Safariだけは動作するようにしたいです。こういうJavascript(またはCSS)をご教示いただけないでしょうか。

Aベストアンサー

こんにちは。

jQueryを使うまでも無いかもしれませんが、記述が簡単に出来、ブラウザの差異も極力吸収してくれますのでどのブラウザでも動くと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
section h2 {
color: #333;
background: #ccc;
border: solid 1px #999;
cursor: pointer;
}
section h2 + p {
display: none;
padding-left: 20px;
}
</style>
<script>
$().ready ( function() {
$('section h2').click ( function() {
// 他を自動的に閉じるなら以下を有効に
//$('section p').hide();
$(this).next().toggle();
});
});
</script>
</head>
<body>
<div class="wrapper">
<header>
<h1>文字をクリックすると詳細文章が展開されるJS</h1>
</header>
<section>
<h2>第1章 前転のやり方</h2>
<p>
第1章-ここに400字の要旨が展開ここに400字の要旨が展開
</p>
<h2>第2章 後転のやり方</h2>
<p>
第2章-ここに400字の要旨が展開ここに400字の要旨が展開
</p>
<h2>第3章 倒立のやり方</h2>
<p>
第3章-ここに400字の要旨が展開ここに400字の要旨が展開
</p>
</section>
</div>
</body>
</html>

こんにちは。

jQueryを使うまでも無いかもしれませんが、記述が簡単に出来、ブラウザの差異も極力吸収してくれますのでどのブラウザでも動くと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
section h2 {
color: #333;
background: #ccc;
border: solid 1px #999;
cursor: pointer;
}
section h2 + p {
display: none;
padding-left: 2...続きを読む

Qクリックしたら記事が表示・非表示

趣味でホームページを作っています。発言小町で使われているタイトルをクリックすると記事が表示(非表示)される仕組みはどうやって実現してるのでしょうか?

たとえば↓このページのようにレスのタイトルをクリックすると本文が表示される仕組みです。
http://komachi.yomiuri.co.jp/t/2008/1008/207312.htm?g=04

Javascriptかなと思ってるんですが素人なもので(涙)
解説しているサイトの紹介でも構いません。お分かりの方、どうぞよろしくお願いします。

Aベストアンサー

非常に簡単なサンプルを載せておきます。

簡単に説明すると、ボタンがクリックされると、javascriptのShowHideMessage関数がコールされます。
この関数内で、idがmsg1というタグの表示状態を調べ、表示・非表示を行っています。

<html>
<head><title>sample</title></head>
<body>
<div id="msg1">ここのテキストが表示・非表示されます</div>
<script type="text/javascript">
function ShowHideMessage()
{
var elm = document.getElementById("msg1")
if( elm.style.display == 'none' )
elm.style.display = 'block';
else
elm.style.display = 'none';
}
</script>
<button onclick="ShowHideMessage()">表示・非表示</button>
</body>
</html>

非常に簡単なサンプルを載せておきます。

簡単に説明すると、ボタンがクリックされると、javascriptのShowHideMessage関数がコールされます。
この関数内で、idがmsg1というタグの表示状態を調べ、表示・非表示を行っています。

<html>
<head><title>sample</title></head>
<body>
<div id="msg1">ここのテキストが表示・非表示されます</div>
<script type="text/javascript">
function ShowHideMessage()
{
var elm = document.getElementById("msg1")
if( elm.style.display == 'none...続きを読む

Qカーソルを合わせると説明を表示させたい。

よくサイトのページで、カーソルを合わせるとリンク先の説明が表示されるような仕掛けがありますが、
あれの応用で、カーソルを合わせるとリンクはなく、説明だけが表示できる仕掛けを作りたいと思っています。
画像なら、代替テキストで可能ですが、テキストで行いたいのです。

 こういう仕掛けはできるのでしょうか?

Aベストアンサー

TITLE=
を使ってみてはいかがですか?
以下はサンプルですので、コピペしてみてください。

<HTML>
<BODY>
これが<SPAN TITLE="説明文
改行だってできます。
いかがですか?">サンプル</SPAN>です。
<BODY>
</HTML>

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q「急かしてすまない」を敬語にすると?

タイトルの通りなのですが、
「急かしてすまない」を敬語にするとどうなるでしょうか?

Aベストアンサー

こんにちは。8/20の英語のご質問以来ですね。

ご質問:
<「急かしてすまない」を敬語にするとどうなるでしょうか?>

「お急ぎ立てして申し訳ありません」
などもあります。

1.「すまない」はさらに丁寧な言い方だと
「申し訳ございません」
なども可能です。

2.「急がして」「急がせて」は、相手にある動作を「させる」という強制的な使役のニュアンスがあります。

3.この「使役」のニュアンスを、「立てる」がカバーすることがあります。
例:
「ご用立てして申し訳ありません」
=(常体)「用事を言い付けてすまない」

「お呼び立てして申し訳ありません」
=(常体)「呼びつけてすまない」

4.これらの「立てる」には、「物事や動作がはっきり表われるようにさせる」という、話し手の使役の意志が込められています。

従って「急ぎ立てる」=「話し手が相手を急がせる」という意味で使われています。

5.「お急ぎ立てして」「ご用立て」「お呼び立てして」の「お」「ご」などは、その動作を受ける相手に対する謙譲の接頭語となります。

以上ご参考までに。

こんにちは。8/20の英語のご質問以来ですね。

ご質問:
<「急かしてすまない」を敬語にするとどうなるでしょうか?>

「お急ぎ立てして申し訳ありません」
などもあります。

1.「すまない」はさらに丁寧な言い方だと
「申し訳ございません」
なども可能です。

2.「急がして」「急がせて」は、相手にある動作を「させる」という強制的な使役のニュアンスがあります。

3.この「使役」のニュアンスを、「立てる」がカバーすることがあります。
例:
「ご用立てして申し訳ありません」
...続きを読む

Qtableにul,または,olを入れられますか?

<table>
 <tbody>
  <th>くだもの</th>
   <td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td>
   …etcとして
くだもの
・りんご
・みかん
・すいか
としたいのですが、
<table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は
HTMLの仕様に反していますでしょうか?

Aベストアンサー

きちんとネストされていれば構いません。
ただ、書かれた例だと
・テーブルを構成する<THEAD>, <TR>タグが無い
・<UL>が閉じていない
というエラーがあるので、それを直せばいいでしょう。

<table>
 <thead>
  <tr><th>くだもの</th></tr>
 </thead>
 <tbody>
   <tr><td><ul><li>りんご</li><li>みかん</li><li>すいか</li></ul></td></tr>
   :
   :
 </tbody>
</table>

Qお問合せ?お問い合わせ?

現在、ホームページの制作を依頼しています。
一通りサイトが仕上がりチエックの段階です。

ヘッダー画像の右下の連絡先を「お問合せ」
と記載しております。

サイドメニューのバナーも「お問合せ」
と記載しております。

サイドメニューのテキストリンクも「お問合せ」

しかし、メニューボタンは「お問い合わせ」
ホームページ上の文言も「お問い合わせ」です。

質問です。

●『お問合せならお問合せ」、『お問い合わせならお問い合わせ』と統一しないと変でしょうか?

●『お問合せ』?『お問い合せ』?どちらが一般的でしょうか?

素人の質問で恐縮ですがよろしくお願いいたします。





メニューボタン
ホームページ上の文章

Aベストアンサー

ひとつだけ。良い悪い、どっちがよい、という話ではないのですが。
受付 ・・・名詞。特に係などの役名を示す名詞ですね。
受付け・・・名詞。受付けをすること。係などではなく、業務を表してます。
受け付け・・動詞。受け付けるの一部ですね。

問い合わせは、問う、合わせる の2つの動詞がくっついた言葉。合せると書くのは現代仮名遣いでは誤用。
なので、「合せ」というときは、名詞として使うケースのみ。なので、「問合せ」を使った場合、お問い合わせは、もしくは、お問い合わせの時はなど動詞を想定させるときの表現での使い方は微妙で、問合せ先など、はっきりと名詞と思われる使い方が違和感を感じにくいかと。
問いも、いを省くのは、合成された名詞の時だけなので、表記統一には不向きです。


人気Q&Aランキング