とっちゃん@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」はもう何年も前から使用するのは非推奨なテンプレートタグとなってます。
全く使えないわけではないのですが、どうも裏側の動きとして非効率なことをしているというのが非推奨の理由のようで。
取り急ぎランダム表示を取り入れたかったので、一時的に「query_posts」を使うことにしましたが、近いうちに別の手段でランダム表示できるようにするつもりです。
ただ、この既存テーマの一部分をカスタマイズするというのは、htmlとCSSくらいしか分からない筆者にとってはなかなかハードルが高く…
少し時間がかかりそうです。
TOPページ以外もランダム表示になっちゃう
もう一点、難ありな点が。
WordPressなので本来はカテゴリーの絞り込み表示ができるんですが、どのカテゴリーページを見ても絞り込みできないだけでなくランダム表示になってしまうというなかなか致命的な点です ww
カテゴリー一覧ページを固定ページで自作すると回避はできそうですが、まぁスマートなやり方ではないですよね…
はい、というわけでかなり難ありなカスタマイズ方法とはなりますが、良ければ参考程度にしてください。
これを機に、もう少しWordPressカスタムの知識を深めたいと思った筆者でございました。
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント