wordpressランキングページの作り方。ショートコードでグルメランキングを実現

wordpress

以前にwordpressのカスタムフィールドを使用したグルメマップを作成しました。
wordpressで地図（グルメマップ）を自動作成！GoogleMapsAPI 大山グルメマップ！

このグルメマップは大山のお店の場所や、評価が確認できるものです。
個人的には便利で気に入っているのですが、情報がごちゃごちゃしすぎて見づらく、いまいち大山のお店の魅力を伝えきれていないという課題がありました。

今回はこの課題に対応すべく、より良いお店の情報を伝えるにはどうすれば良いのか考えました。
考えた結果、wordpressのコンテンツの一つとして、大山のお店のランキングページを作成すれば、大山の魅力的なお店を紹介できると思いランキングページを作成しました。

作成したページはこちら。
板橋大山のグルメランキングを作ってみた！１８０店の素敵なお店がたくさん・・・
%e7%84%a1%e9%a1%8c_r今回はwordpressを使用してどのようにこのランキングページを作成したのかを、備考録として残しておきます。

記事を書いてお店ごとに点数をつける

以前に紹介した方法と同じですが、wp-product-reviewを使ってお店の記事ごとに点数をつけておきます。
wordpressでレビューサイトの作り方。wp-product-reviewをカスタマイズしてレビュー記事を作成

登録した点数はカスタムフィールドとして登録されます。
この方法で登録した点数から、wordpressのショートコードを使ってランキングページを作成します。

ランキングページをショートコードで作る

functions.phpにショートコードの処理を追加します。
使用テンプレートもしくは、wp-product-reviewのfunctions.phpにコードを書きます。

こんな感じ
function showRank($args) {
ランキングページ表示 処理
}

add_shortcode('rankwp', 'showRank');

具体的なプログラムはこちら。

/**
 * 指定されたカテゴリのお店を評価順で取得する
 * @param args[0] string カテゴリ名
 */
function rankFunc($args) {
 $category_name = $args[0];

 /** paramater **/
 $title = "";
 // 1ページに表示する件数
 $item_count = "10";
 $post_type = "1";
 $show_image = "1";
 $rank = 1;
 $cut_text = 190;
 
 /**
 ページ番号の確認
 パラメータ「id」の値を取得
 ** /
 $page = (isset($_GET["navipage"]) && $_GET["navipage"] != "" && $_GET["navipage"] != 0) ? $_GET["navipage"] : "1";
 // エスケープ処理
 $page = htmlspecialchars($page, ENT_QUOTES);
 
 if ($page != 1) {
 $rank = ($page - 1) * $item_count + 1;
 } 
 
 // タグが「大山」でかつ、カスタムフィールド「meta_box_check'」がyesの記事を取得する
 // WP_Queryを使用。これで点数が付いた大山のお店の記事の一覧が取得できます。
 $query_args = array(
 'posts_per_page'=> $item_count, // limit it to the specified no of posts
 'paged' => $page,
 'post_type' => "any",
 'post__not_in' => get_option('sticky_posts'),
 'category_name' => $category_name, // limit it to the specified category
 'tag' => '大山',
 'meta_key' => 'option_overall_score',
 'meta_query' => array(
 array(
 'key' => 'cwp_meta_box_check',
 'value' => 'Yes',
 ),
 ), 
 'orderby' => 'value_num date',
 'order' => 'DESC'
 );
 $top_products_loop = new WP_Query( $query_args ); 
 
 $last_num = $rank + $item_count -1;
 if ($top_products_loop->post_count < $item_count) {
 $last_num = $top_products_loop->post_count;
 } 
 $all_num = $top_products_loop->found_posts;
 if ($all_num == 0) {
 echo "データがありません";
 return;
 }
 $start_rank = $rank;
 
 // 全体の件数を表示
 echo "全" . $all_num . "件中&nbsp;&nbsp;" . $rank . "位～" . $last_num . "位を表示<br><br>";
 
 // カレントのURLを取得。クエリは付かない 
 $current_url = get_permalink();;
 
 // ランキング対象記事一覧の取得
 while ( $top_products_loop->have_posts() ) {
 $top_products_loop->the_post();
 $id = $top_products_loop->post->ID;
 $return_string = "";
 
 // title
 $return_string = '<h2>' . $rank ."位&nbsp;&nbsp;" . get_the_title() . '</h2>';
 
 // pageのURL
 $page_current_url = get_permalink();
 
 // rate
 for($i=1; $i<6; $i++) {
 ${"option".$i."_content"} = get_post_meta($top_products_loop->post->ID, "option_".$i."_content", true);
 }
 $review_score = pos_calc_overall_rating($top_products_loop->post->ID);
 $review_score = $review_score['overall'];
 // 少数第１位まで表示
 $return_string .= '<span class="box-title--tieup"><b>' . sprintf('%.1f' ,floor($review_score) / 10) . "点" . "</b></span>&nbsp;&nbsp;";
 
 // product_name
 $return_string .= '<span class="post-category"><i class="fa fa-file"></i>' . get_post_meta($top_products_loop->post->ID, "rev_shop_name", true) . '</span>';
 
 // image
 $product_image = get_post_meta($id, "rev_product_image", true);
 // description
 $product_description = get_post_meta($id, "rev_product_description", true);
 $return_string .= '<a href="'.$page_current_url. '"><img class="aligncenter size-full wp-image-162" title="' . $product_description . ' alt="" src=" ' .$product_image. '" /></a>'; 
 
 // text
 $revtxt = get_post_meta($id, "revtxt", true);
 $return_string .= mb_strimwidth( $revtxt, 0, $cut_text, "...", "UTF-8" );
 $return_string .= '<a href="' . $page_current_url . '">続きを読む</a>';
 
 // br
 $return_string .= "<br><br>";
 
 $rank++;
 
 echo $return_string;
 }
 
 // ページナビを作成
 echo '<div id="post-navigator-rank">';
 echo '<div class="wp-pagenavi iegradient">';
 // 前のページが存在するか
 if ($page > 1) {
 echo '<a href="' . $current_url . '"><<</a>';
 echo '<a href="' . $current_url . '?navipage=' . ($page -1).'" class="inactive">' . ($start_rank - $item_count) . '位～' . ($start_rank -1) .'位</span></a>';
 }
 // 現在のページ
 echo '<span class="current">' . $start_rank . '位～' . ($rank -1). '位</span>';
 
 // 次のページが存在するか 
 if ($all_num > ($rank -1)) {
 // ページナビのところでは端数は考慮しない。
 echo '<a href="' . $current_url . '?navipage=' . ($page +1).'" class="inactive">' . $rank . '位～' . ($rank + $item_count -1) .'位</a>';
 echo '<a href="' . $current_url . '?navipage=' . (ceil($all_num/$item_count)).'" >>></a>'; 
 } 
 echo '</div>';
 echo '</div>';
 

 return;
}

add_shortcode('rankwp', 'rankFunc');


?>

今回はカテゴリ名を指定することで、カテゴリ別のランキングも同じコードで表示できるようにしました。
これであとは固定ページを作成して、ショートをコードを呼び出すとランキングページが表示できます。

［rankwp] →総合ランキング
［rankwp　カテゴリ名] →カテゴリ別ランキング
wordpressは便利ですね。ショートコードで簡単にランキングページが作成できました！

スポンサーリンク
タイトルとURLをコピーしました