WordPress アイキャッチ画像 hover タイトル表示

Question

###前提・実現したいこと WordPress利用
１.index.phpの記事一覧アイキャッチ画像にカーソルhoverすると登録したタイトルがsidebar.phpに表示される。
2.アイキャッチ画像をクリックすると個別記事に飛ぶのではなく、記事内容がsidebar.phpに表示される。

###試したこと
jQueryのhoverによってHTMLの静的な文章の表示は下記でできましたが、phpの動的な文章を特定の場所に表示するためにはどのような技術を組み合わせたらよいでしょうか？
$('.languages-box').hover(
function(){
$(this).find('p').fadeIn(500); },
function(){
$(this).find('p').fadeOut(500); });

良い方法がございましたら回答いただけると幸いです。
どうぞよろしくお願いいたします。

Answer 1

まず、sidebar.php は サイトトップを含め全てのページの出力に使われるファイルなので、ページを表示した後に JavaScript から利用するものではありません。（サイドバーのある場所にという意味であればもう少し具体的に書いていただけるとありがたいです）

記事をページ遷移する事なく表示する方法はいくつかありますが、ページ内に記事を非表示で用意しておき、クリックで表示する方法が簡単です。

<ul class="menu">
	<li><a href="#" class="pid01">title01</a></li>
	<li><a href="#" class="pid02">title02</a></li>
	<li><a href="#" class="pid03">title03</a></li>
</ul>
<div class="articles">
	<div class="pid01">article01</div>
	<div class="pid02">article02</div>
	<div class="pid03">article03</div>
</div>

.articles > div {
	display: none;
}

$( function() {
	var $articles = $( '.articles > div' );
	$( '.menu' ).on( 'click', 'a', function() {
		var pid = $( this ).attr( 'class' );
		$articles.stop().hide().filter( '.' + pid ).show( 'slow' );
		return false;
	} );
} );

※ この方法ではあまりたくさんの記事を表示（準備）するとページ書き出し／読込に時間がかかることになります。

Comments

[may88seiji]

回答ありがとうございます。

sidebar.phpの記述、私の言葉選びが悪くて大変失礼しました。
kei344さまの書いてい頂いた通り、ページを遷移することなく、hoverまたはクリックした画像とは別の離れた要素に記事内容を表示する方法を探しておりました。大変勉強になりました。一度、動作を確認してみます。

記事の数が多くなるとページ書き出し／読込の時間が多くなってしまうんですね...
別の方法でデーターベースとphpの組み合わせた表示の仕方があるらしいですが、そのような技術をもちあわせてないのでkei344さまの方法を試してみます????