【WordPressカスタム】single.phpに関連記事の他におすすめ記事、人気記事、新着記事をタブメニューを設置して表示しました!!

4021813470_90f76ddc77_b_min

いままで記事の下に関連記事だけ表示させていましたが、レスポンシブテーマなのでスマホで見るとかなり下の方までスクロールしなければ関連記事以外のおすすめ記事、人気記事、新着記事が見られません。今回タブメニューを設置していろいろなおすすめ記事を表示させてみました!!


タブメニュー作成のきっかけ

HaLPosTをスマホで見てるとレスポンシブテーマで作成しているため、サイドバーにある人気、新着、おすすめ記事がかなりスクロールさせないと見れません。

HaLPosTの見解ですが、レスポンシブテーマはまだそんなに浸透していないと思うので、関連記事まで見てこの記事は終了だと思ってサイトを離れてしまう、関連記事以下にサイドバーが表示されていることに気付かないなどあるようなのでその関連記事のところにすべて表示させればいいのではないかと思いタブメニューを設置することにしました。

関連記事の場所にタブメニューを作る

いろいろ探して見たのですが、WordPress3.6のせいで!?ほとんど動かず…おそらくHaLPosTのやりかたが悪いんだと思うんですが、シンプルで簡単に設置出来るタブメニューを探しておりましたら
を発見!!これは簡単そうなので挑戦してみました。

なにを表示させるのか!?

HaLPosTでは以下のおすすめ記事を表示させています。
  • 関連記事
  • おすすめ記事
  • 人気記事
  • 新着記事

【関連記事】:

関連記事を表示させているプラグインは「Similar Posts」です。
Similar Postsは更新されていないプラグインですので早めに違うプラグインにしなければならないんですが、コンテンツの中身で関連付けて表示させることが出来るので関連度は高いようです。

【おすすめ記事】:

これも関連記事を表示させることが出来る「Yet Another Related Posts Plugin」と言うプラグインです。
こちらも記事内容で関連記事を表示させることが出来るんですが、なんだか設定しても表示されない…よってこちらはカテゴリー重視で関連記事を表示させておすすめ記事として表示させています。

【人気記事】:

人気記事は「Popular Posts」です。
WordPress Popular Postsが有名ですが、Popular PostsはSimilar Postsの作成者と同じようですのでこちらを使っています。

【新着記事】:

こちらはプラグインなしで表示させています。

タブメニュー設置方法

≫<a href="javascript:void(0);" class="btn_act active">MENU【1】</a>
≫<a href="javascript:void(0);" class="btn_act">MENU【2】</a>
≫<a href="javascript:void(0);" class="btn_act">MENU【3】</a>

<div id="motion_area1" class="motion">
~MENU【1】クリックでオープンとなるタブエリア要素。~
</div><!--/tab_area1-->

<div id="motion_area2" class="motion">
~MENU【2】クリックでオープンとなるタブエリア要素。~
<img src="img/photo.jpg" />
</div><!--/tab_area2-->

<div id="motion_area3" class="motion">
~MENU【3】クリックでオープンとなるタブエリア要素。~
</div><!--/tab_area3-->
これを表示させたいところに書いてください。

.motion {
	width: 500px;
	display: none;
}
#motion_area1 {
	display: block;
}
a.active {
	font-weight: bold;
	background: #ddd;
}
基本CSSです。自分のサイトに合うように変更してください。

<script type="text/javascript">
$(function(){
	$("a.btn_act").click(function(){
		var connectCont = $("a.btn_act").index(this);
		var showCont = connectCont+1;
		$('.motion').css({display:'none'});
		$('#motion_area'+(showCont)).slideDown('normal');

		$('a.btn_act').removeClass('active');
		$(this).addClass('active');
	});
});
</script>
head内にscriptで囲んでください。

ここで迷ったのが、どうやってSAMPLE[3]にするかでした。
ソースを表示させて、scriptの中身を見たら

$('#motion_area'+(showCont)).fadeIn('slow');
上記のようになっていました。

ようはその部分を変えればいいわけですね。



ちょっと設置に迷いましたがいまのところ正常に作動しています。
デザインがシンプルすぎるような気もしますので時間があるときに変更していきたいと思っています。

シェアする

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です