SANGOで記事一覧ページに人気記事を動的に表示する方法

SANGO公式ページのカスタマイズにも紹介されている”トップページに人気記事を設置する方法“。

魅力的ですが、こちらは静的なHTMLで記述されたカスタマイズのため表示する記事の選定や更新を手動で行わなければなりません

そこで、テーマファイルを編集して自動で人気記事を表示してくれるようにしましたので、その方法を紹介します!

このブログで行ったカスタマイズをまとめてあります!

事前準備

SANGO公式のカスタマイズを済ませておく

今回のカスタマイズは、SANGOテーマ公式ページで紹介されている”トップページに人気記事を設置する方法“をベースに行っています。
まずは前提として、コチラを参考に子テーマを編集して下さい。

参考 【サルワカ風】トップページに人気記事を設置する方法SANGOカスタマイズガイド
注意
子テーマのpost-grid.phpはまだアップロードしないで下さい。後の工程で編集します。
MEMO
★で囲まれた部分はそのままにしててOKです!

WordPress Popular Postsをインストール・有効化

このカスタマイズではWordPress Popular Postsの機能を利用しますので、インストール・有効化をして下さい。

はるしか
すでに使用中の方はそのままでOKですよ!

post-grid.phpのHTMLを書き換える

事前準備で用意した子テーマのpost-grid.phpを編集し、動的に人気記事の出力ができるようにします。

ここでの考え方は

  1. 元のカスタマイズの構造を把握する
  2. 動的に出力させる方法を考える
  3. 出力結果が元の構造と同じになるようにする
よめねこ
ごたくはいいから結論だけおしえて
はるしか
(´・ω・`)……

<div class=”popular-posts cardtype”>から閉じタグまでを削除してしまいましょう。

post-grid.php
<div class="popular-posts cardtype">
 <article class="cardtype__article">
 <a class="cardtype__link" href="★リンク先URL★">
 <p class="cardtype__img">
 ★<imgタグ>★
 </p>
 <div class="cardtype__article-info">
 <h2>★タイトル★</h2>
 </div>
 </a>
 </article>
 <article class="cardtype__article">
 <a class="cardtype__link" href="★リンク先URL★">
 <p class="cardtype__img">
 ★<imgタグ>★
 </p>
 <div class="cardtype__article-info">
 <h2>★タイトル★</h2>
 </div>
 </a>
 </article>
</div>

この部分を自動出力するため、不要になります!

次に、↑のコードが書いてあった場所にWordPress Popular Postsで動かすためのphpを書き込みます。

post-grid.php
<?php if ( function_exists( 'wpp_get_mostpopular' ) ) : ?>
 <?php $args = array( 
 'limit' => 4,
 'range' => 'weekly',
 'order_by' => 'views',
 'thumbnail_width' => 520,
 'thumbnail_height' => 300,
 'post_type' => 'post',
 'wpp_start' => '<div class="popular-posts cardtype">',
 'wpp_end' => '</div>',
 'stats_views' => 0,
 'stats_comments' => 0,
 'post_html' => '<article class="cardtype__article"><a class="cardtype__link" href="{url}"><p class="cardtype__img">{thumb_img}</p><div class="cardtype__article-info"><h2>{text_title}</h2></div></a></article>' );
 ?>
 <?php wpp_get_mostpopular( $args ); ?>
<?php endif; ?>

とりあえずこれで動くようになりました。設定値を自分好みに変更して使ってみてくださいね!

設定値の説明
  • limit -> 表示する件数
  • range -> 集計期間。daily(今日)、weekly(週間)、monthly(月間)、all(全期間)
  • order_by -> ソート順。commentsでコメントの多い順
  • thumbnail_width -> アイキャッチ幅
  • thumbnail_height -> アイキャッチ高さ
  • post_type -> pageで固定ページ
  • stats_views -> 1で閲覧数表示
  • stats_comments -> 1でコメント数表示

ファイルの管理をわかりやすくする

上の項の状態でも動作はするので、ここからは完全に自己満足の世界ですよ!

ファイルを見ただけで分かりやすい構造にしたい&SANGO元々のソースコードをできるだけそのままに残しておきたいので、今回のカスタマイズで追加した部分を別のファイルで処理させるようにしました。

新規にphpファイルを作成

メモ帳などのテキストエディタで新規に処理用のファイルを作成します。ここではpage-top-popular.phpという名前で作りました。

はるしか
自分でぱっと見てすぐわかるような名前を付けるといいですよ!

ファイルの中身を書き込む

post-grid.phpに記述したソースコードをそのまま作ったファイルに書き込みます。

post-grid.php
<?php if( !is_paged() && is_home() ): //人気記事?>
<p class="center strong top-title"><i class="fa fa-line-chart"></i>人気記事</p>
<?php if ( function_exists( 'wpp_get_mostpopular' ) ) : ?>
 <?php $args = array( 
 'limit' => 4,
 'range' => 'weekly',
 'order_by' => 'views',
 'thumbnail_width' => 520,
 'thumbnail_height' => 300,
 'post_type' => 'post',
 'wpp_start' => '<div class="popular-posts cardtype">',
 'wpp_end' => '</div>',
 'stats_views' => 0,
 'stats_comments' => 0,
 'post_html' => '<article class="cardtype__article"><a class="cardtype__link" href="{url}"><p class="cardtype__img">{thumb_img}</p><div class="cardtype__article-info"><h2>{text_title}</h2></div></a></article>' );
 ?>
 <?php wpp_get_mostpopular( $args ); ?>
<?php endif; ?>
<p class="center strong top-title"><i class="fa fa-thumb-tack"></i> 新着記事</p>
<?php endif; //END 人気記事?>

ファイルが完成したら、子テーマ内の/partsにアップロードしましょう。

はるしか
post-grid.phpと同じフォルダだよ!

post-grid.phpを編集

別ファイルに書き出した部分を削除し、代わりにそのファイルを読み込むコードを書き込みます。

post-grid.php
<?php get_template_part( 'parts/page-top-popular' ); ?>

これで上書き保存して、サーバーにアップロードしましょう。

作成したpage-top-popular.phpを読み込んで処理してくれますよ。
ブログトップページにアクセスして、こんな具合に表示されてたら完成です!

まとめ

最終的に必要な作業をまとめると、こんな感じになります。

  • WPPを有効にする
  • post-grid.phpを編集する
  • 新規に処理用のファイルをparts内にアップロード

人気記事として任意の記事へ誘導したい場合を除けばリアルタイムで集計される正確な人気記事が表示できるようになるこのカスタマイズは有効かなと思いますので、自動化がお好きな方はお試し下さいね!

コメントを残す

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