俺氏、本を読む

30歳になるまでに本を読んで勉強しようかと。主に啓発、お金についての本を読むつもり。一応プログラマーなのでその辺のことも。あと、せどり（転売）の仕入れ見込み商品をリサーチして仕入先と一緒に投稿します

【WordPress】全カテゴリー毎 or 指定カテゴリーの記事を取得して表示

WordPress PHP Web jQuery

このブログは作成当初は真面目に運営しようと思ったのだけど、
いざ記事を書こうとしても娘の相手をするのが楽しくてなかなかｗｗｗ
とは言え、あまりにも放置しすぎなので少し書いてみようかなと。

以前、俺氏は社畜アンテナというアンテナサイトをWordPressで作成したのだけど、
まぁそんなうまくいくわけもなく、収入なんてのはたかが知れていますｗ
作った時はちょっと期待してたのですけどね。。。
その時は調子が良かったらアクセス数とか公開すると書いたのですが、
いい機会なので近日中にでも記事にしようと思います。
　
んで、ここからが本題、
今回のサンプルコードとかは実際に自分の社畜アンテナのものをそのままコピペしてるので、
CSSの設定とかは適宜変更してくださいな。

　
WordPressには独自のテンプレートタグというのが用意されていて、
それを使えば簡単にいろいろできるようになっています。
例えば、カテゴリー一覧を取得したいだけであれば以下のテンプレートタグを使えば取得できます。
「wp_list_categories( $args );」
引数の &args というのはカテゴリーを取得する際の条件を指定するものなので、
詳細は「WordPress Codex 日本語版」や「WordPress私的マニュアル」とかで確認してくださいな。
この引数はWordPressのテンプレートタグでは良く使用するので、
なるべく確認した方が無難だと思います。
　
それに「WordPress カテゴリ一覧」とかでググれば、
大抵はほぼそのままコピペで使えるコードを紹介してくれている記事とかあるので、
俺氏のブログではあまり解説的なことはしない前提ですｗｗｗ
なので、あとはコードをそのまま書いて終了！
　
後述する全カテゴリー毎の記事を取得して表示するコードの2行目に

<input type="checkbox" id="chkAllDisp" value="1"><label for="chkAllDisp">全表示</label>

というのがあるのですけど、
これについては今回の記事とは関係はないのですが後述しようと思います。
あとインデントは全然合わせてないので少し見にくいです。

全カテゴリー毎の記事を取得して表示

<p>※ブログ名クリックで最大5件まで記事が表示されます</p>
<input type="checkbox" id="chkAllDisp" value="1"><label for="chkAllDisp">全表示</label>
<?php
$original_query = $wp_query;
$cat_all = get_terms( "category", "fields=all&get=all&exclude=1" ); ?>
<h4>ブログ数：<?php echo count($cat_all); ?>
<?php foreach($cat_all as $value):
?>
<h3 class="list-head"><?php echo $value->name;?></h3>
<ul class="rist-ranking" style="display: none;">
<?php $posts = get_posts('numberposts=5&cat='.$value->term_id); global $post;?>
<?php foreach($posts as $post): ?>
<p style="margin-bottom: 0px;"><?php the_time('Y/m/d H:i:s') ?></p><li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
<br />&nbsp;<br />
<a class="ReBtn" href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?>の記事一覧</a>
</ul>
<?php endforeach;
$wp_query = $original_query;
wp_reset_postdata();
?>

実際のページ：まとめブログ別新着記事一覧 | 社畜アンテナ

指定カテゴリー毎の記事を取得して表示

<?php $original_query = $wp_query; ?>
<h3><?php echo get_cat_name($catid); ?>の新着記事</h3>
<ul class="rist-ranking">
<?php $posts = get_posts('numberposts=5&cat='.$catid); global $post;?>
<?php foreach($posts as $post): ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
<?php
$wp_query = $original_query;
wp_reset_postdata(); ?>

実際のページ：事務職に必要なスキル教えてくれ:仕事まとめ | 社畜アンテナ のページ中段当たりの「FX為替 - ネットで稼ぐお金儲けまとめの新着記事」ってとこ
　
上記の2つともカテゴリ毎の新着記事を表示しているのですが、
「get_posts( $args );」の引数を変更すれば日付順などの条件は指定できます。
テンプレートタグ/get posts - WordPress Codex 日本語版
　

クリックで記事一覧の表示・非表示切替

<input type="checkbox" id="chkAllDisp" value="1"><label for="chkAllDisp">全表示</label>

これは実際にサイトのページを見てもらえたら分かるのですが、
カテゴリなどが多くなると表示するのに時間がかかってしまいますし、
ページが縦に長くなりすぎるのが嫌なので、
デフォルト状態ではカテゴリ名だけ表示し、記事のリストは非表示にしています。
カテゴリ名をクリックしてもらうことで、
記事リストの表示・非表示を切り替えるようにしています。
表示・非表示を実装するためには、
WordPressのヘッダー(header.php)のheadタグの最後に以下を追加するだけ。
厳密には「wp_head();」と記載されている行以降に以下を追加する。

<script type="text/javascript">
jQuery(function(){
	jQuery(window).load(function () {
		jQuery('h3.list-head').each(function(){
			jQuery(this).next('ul').hide();
		});		
	});
	jQuery(document).on('click', '#chkAllDisp', function(){
		if(jQuery(this).prop('checked')) {
			jQuery('h3.list-head').each(function(){
				jQuery(this).next('ul').show();
			});
		} else {
			jQuery('h3.list-head').each(function(){
				jQuery(this).next('ul').hide();
			});
		}	
	});
	jQuery(document).on('click', 'h3.list-head', function(){
		var sub = jQuery(this).next('ul');
		if (jQuery(sub).is(':hidden')) {
			jQuery(sub).show('fast');
		} else {
			jQuery(sub).hide('fast');
		}
	});
});
</script>

ちなみに、WordPressでJqueryが動かない場合は以下の記事が参考になります。
WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと.net
　
あと、PCで閲覧する場合は問題ないのですが、
IOSデバイス(iPhone/iPad)のSafariで閲覧する場合はjQueryで追加したclickイベントが発生しません(-_-;)
aタグとかだとそんなに再現しないみたいなのですが、
今回はh3タグにクリックイベント設定しているので最初は動作しなかなかった。。。
touchイベントに変更しないといけないのかと思ってたのですけど、簡単な方法で回避できました。
自分がやったのは対象の要素のCSSを「cursor: pointer;」にしてやるだけ。
参考：
jQueryで追加したclickイベントがiPhone/iPadのSafariでだけ動かない場合のスマートな対応方法 | roundropブログ implements Programmable
LNLY » jQueryを使って追加したクリックイベントがiOSデバイスで動作しない場合の対処法
iOSにおけるclickイベントの発生条件まとめ - hifive
iPhoneのclickイベントの挙動 - to-R
　
とりあえず今回はこれにて(^_^)/~
次は「全タグ毎 or 指定タグの記事を取得して表示」を記事にする予定。
ほとんど今回の記事と似たような内容やけどねｗｗｗ
　
あぁーーどうにかして不労所得でリタイア生活できんだろうか