ブログ・サイト

【WordPress】「Fukasawa」のTOPページの記事をランダム表示するカスタマイズ【かなり難あり】

ブログ・サイト
この記事は約4分で読めます。

とっちゃん@nyanco! です。

今回はポートフォリオやアートなサイトに向いているWordPressの無料テーマ「Fukasawa」のTOPページの記事をランダム表示にカスタムしてみたよというお話です。

肉玉にゃんこ

WordPress非推奨のテンプレートタグを使用していたりとかなり難ありですにゃ〜

スポンサーリンク

仕上がりはこんな感じ

筆者のバンド「Benjamin」のアーカイブサイトで実装してみた結果のスクリーンショットをどうぞ。

ちなみにこの「Fukasawa」Pinterest(ピンタレスト)みたいにタイル状にコンテンツが並ぶレイアウトがとっても簡単に実装できる、かなり洒落オツなテーマです。

デフォルトでは新着記事が新しい順に表示されますが、本記事のカスタムを施すと上記のようにページを読み込む度に記事がランダムに表示されるようになります。

あまり頻繁に更新はしないけどコンテンツはたくさんあるといったアーカイブ系のサイトにはこのランダム表示が向いているのでは?と思い、今回このカスタマイズにチャレンジしてみました。

「Fukasawa」のTOPページをランダム表示にカスタムする手順

「子テーマ」を作成

まず、テーマをカスタムするので「子テーマ」を作成して「子テーマ」をカスタマイズすることをオススメします。

今回カスタムするのはテーマフォルダの第一階層にある index.php だけなので、 index.php ファイルを子テーマフォルダにコピーしておきます。

カスタマイズ手順

カスタマイズとしてはめちゃくちゃ簡単で、 index.php たった2行追加するだけ

61〜68行目(テーマのバージョンによっては異なるかも)の前後に次のように追記します。

....
	<?php if ( have_posts() ) : ?>

		<div class="posts" id="posts">
		
			<!-- ここに追加 --> <?php query_posts('orderby=rand');?>
			<?php 
			
			while ( have_posts() ) : the_post();
				$template_part_name = get_post_type() == 'post' ? get_post_format() : get_post_type();
				get_template_part( 'content', $template_part_name );
			endwhile; 
			
			?>
			<!-- ここに追加 --> <?php wp_reset_query(); ?>
		
		</div><!-- .posts -->

		<?php get_template_part( 'pagination' ); ?>
....

追記した2行についてざっくり解説すると、

<!-- ここに追加 --> <?php query_posts('orderby=rand');?>

こちらのコードは「’orderby=rand’」で記事の並び順をランダムにするという意味。

<!-- ここに追加 --> <?php wp_reset_query(); ?>

こちらは「query_posts」を使ったループの終わりに必要なコードとなります。

たったこれだけでランダム表示ができちゃうんですが、この「query_posts」というものが「難あり」でして…

「query_posts」は非推奨テンプレートタグ

「query_posts」はもう何年も前から使用するのは非推奨なテンプレートタグとなってます。

WordPressのquery_postsは非推奨!理由と他の実装方法を紹介 | 侍エンジニアブログ
この記事では「 WordPressのquery_postsは非推奨!理由と他の実装方法を紹介 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでしょう。お悩みの方はぜひご一読ください。

全く使えないわけではないのですが、どうも裏側の動きとして非効率なことをしているというのが非推奨の理由のようで。

取り急ぎランダム表示を取り入れたかったので、一時的に「query_posts」を使うことにしましたが、近いうちに別の手段でランダム表示できるようにするつもりです。

ただ、この既存テーマの一部分をカスタマイズするというのは、htmlとCSSくらいしか分からない筆者にとってはなかなかハードルが高く…

少し時間がかかりそうです。

TOPページ以外もランダム表示になっちゃう

もう一点、難ありな点が。

WordPressなので本来はカテゴリーの絞り込み表示ができるんですが、どのカテゴリーページを見ても絞り込みできないだけでなくランダム表示になってしまうというなかなか致命的な点です ww

カテゴリー一覧ページを固定ページで自作すると回避はできそうですが、まぁスマートなやり方ではないですよね…

はい、というわけでかなり難ありなカスタマイズ方法とはなりますが、良ければ参考程度にしてください。

これを機に、もう少しWordPressカスタムの知識を深めたいと思った筆者でございました。

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント