ebicology

あまり更新頻度は高くないコンテンツ向き？

年別記事一覧（今年だけフルオープン）

こんな要望を頂きました

  1. ブログ記事のアーカイブページは作らずサイドメニューに年別の記事一覧を出す
  2. 今年の記事一覧は開いておいて、去年以前のものはクリックでオープンする

こうやって作りました

ご要望「1」の年別記事一覧は「（年別）記事一覧をテンプレートではなくfunctions.phpに書きたい」に書いた内容で出力します。

ご要望「2」の今年の記事だけ開いておいて去年以前の記事は開閉させるというのはjQueryを使います。

CSS

#secondary h3 a{
	font-size: 20px;
	font-size: 2.0rem;
	text-decoration: none;
	display: block;
	color: #FFF;
	background-color: #3EC1A5;
	padding: 20px;
}
#secondary h4{
	cursor: pointer;
	margin-left: 15px;
	color: #3EC1A5;
	font-size: 18px;
	font-size: 1.8rem;
}
#secondary ul.SideList li a{
	font-size: 14px;
	font-size: 1.4rem;
	color: #333333;
	text-decoration: none;
}
#secondary ul.SideList li a:before{
	content:"> ";
	color: #1365CC;
}

#secondary ul.SideList.close{
	display: none;
}
#secondary h4.bt_open{
	padding-left: 20px;
	background: url(images/bt_open.png) no-repeat 0 50%;
	background-size:14px 8px;
}
#secondary h4.bt_close{
	padding-left: 20px;
	background: url(images/bt_close.png) no-repeat 0 50%;
	background-size:14px 8px;
}

年別記事一覧（すべて表示）をfunctions.phpに書く

function getblog() {
 global $post;
 $oldpost = $post;
 $myposts = query_posts(
array(
 'posts_per_page'=> '-1',
 'post_type' => 'post',
 'order'=>'DESC',
 'orderby'=>'date'
));
 if ( have_posts() ) :
 $retHtml='';
 $myposts = false;
 while ( have_posts() ) :
 the_post();
 if( $myposts != get_post_time('Y') ) :
 if ( $myposts !== false ) :
	$retHtml.='</ul>';
 endif;
 $retHtml.='<h4>'.get_post_time('Y年').'</h4><ul class="SideList">';
 endif;
 $retHtml.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a>'.do_shortcode('[NEW]').'</li>';
 $myposts = get_post_time('Y');
 endwhile;
 wp_reset_query();
 $post = $oldpost;
 return $retHtml;
 endif;
}
add_shortcode("blog", "getblog");

sidebar.phpにショートコードを読み込む

<aside id="secondary">
<h3><a href="/blog">ブログ</a></h3>
<?php echo do_shortcode('[blog]'); ?>
</aside>

jQueryで2つ目以降の要素を開閉させる

jQuery(document).ready(function($) {
//↑WordPressでjQueryを使う時は$wojQueryに書き変えるか、これで囲む
"use strict";

//ここから記述
$(function(){
//読み込み時に2つ目以降のh4とulにclassを記述
$(window).load(function() {
	$('h4:gt(0)').addClass('bt_open');
	$('ul.SideList:gt(0)').addClass('close');
});
  var state = false;
  $("#secondary h4:gt(0)").on("click", function() {
//2つ目以降のh4をクリックしたら↓
//h4の次のulをオープン
//h4.bt_openを.bt_closeに書換え
//h4の次のul.closeから.closeを削除
    $(this).next('ul.SideList').slideToggle();
    if(state === false) {
      $('h4:gt(0)').removeClass('bt_open');
      $('h4:gt(0)').addClass('bt_close');
      $('ul.SideList:gt(0)').removeClass('close');
      state = true;
    } else {
//もう一度クリックしたら↓
//h4.bt_openに書換え
//ul.SideListに.closeを追加
    $('h4:gt(0)').removeClass('bt_close');
	$('h4:gt(0)').addClass('bt_open');
    $('ul.SideList:gt(0)').addClass('close');
      state = false;
    }
  }); 
});
//ここまで
});

:gt(0)がポイントです。
これは便利だ～！

あまり更新頻度は高くないコンテンツ向き？
あまり更新頻度は高くないコンテンツ向き？

参考にさせて頂きました！

:gt(index)（jQuery日本語リファレンス）

Comments

コメントを残す