get_postsを使った一覧ページの作成

nerimanKWS
2014.02.27

はじめに

ワードプレスをカスタマイズしていると、カスタム投稿タイプの一覧ページを作成することが頻繁にあります。毎度、調べ直すのは手間なので備忘録として残しておきます。以下の例は、カスタム投稿タイプworksの一覧を表示する場合になります。

カスタム投稿タイプのデータを取得する

// １ページの表示数を設定します。





$per_page = 5;
$offset = 0;

$paged = get_query_var('page');
if(empty($paged)){
    $paged = 1;
}

if($paged > 1){
    $offset = intval(($paged - 1)) * $per_page;
}

// カスタム投稿タイプの投稿数を取得します。
$item_count = $wpdb->get_var("
	SELECT COUNT(ID) AS cnt
	FROM {$wpdb->posts}
	WHERE post_type = 'works'   /* 施工事例である */
	AND post_status = 'publish'	    /* かつ公開済の記事 */
	AND post_password = ''          /*かつパスワードが設定されていない */
");

$item_count = intval($item_count);

// カスタム投稿タイプの投稿を取得します。
$args = array(
    'post_type' => 'works',
    'posts_per_page' => $per_page,
    'offset' => $offset
);
$works_posts = get_posts($args);
for($i=0; $i<count($works_posts); $i++){
    // 投稿ごとにアップされてい画像を取得します。
    $works_posts[$i]->images  = get_image_children($works_posts[$i]->ID);
}

// ページ数を計算します。
$pages = ceil($item_count / $per_page);

投稿ごとにアップされている画像を取得するget_image_children()の中身。取得する画像数を変更する場合は、numberpostsの値を変更します。

/**
 * 投稿に紐付いた画像を取得する
 * @param $post_id
 * @return array
 */
function get_image_children($post_id)
{
    $id = intval($post_id);
    $attachments = get_children(array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order', 'numberposts' => 3));
    if (empty($attachments)) {
        $attachments = array();
    }
    return $attachments;
}

ページネーションを表示する

ページネーションはプラグインを使わなくていいように、関数で作成します。
Kowappa様のサイトを参考にさせていただきました。

/**
 * 施工事例一覧ページ用ページャー
 * @param string $pages
 * @param int $paged
 * @param $base_url
 * @param int $range
 */
function my_pager($pages = '', $paged=1, $base_url, $range = 2)
{
    $showitems = ($range * 2) + 1;


    if (1 != $pages) {
        echo "<div class='pagination'>";
        if ($paged > 2 && $paged > $range + 1 && $showitems < $pages) {
            printf("<a href='%s?page=1'>&laquo;</a>", $base_url);
        }
        if ($paged > 1 && $showitems < $pages) {
            printf("<a href='%s?page=" . ($paged - 1) . "'>&lsaquo;</a>", $base_url);
        }

        for ($i = 1; $i <= $pages; $i++) {
            if (1 != $pages && (!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems)) {
                echo ($paged == $i) ? "<span class='current'>" . $i . "</span>" : sprintf('<a href="%s?page=%s" class="inactive">%s</a>', $base_url, $i, $i);
            }
        }

        if ($paged < $pages && $showitems < $pages) {
            printf('<a href="%s?page=%s">&rsaquo;</a>', $base_url, ($paged + 1));
        }
        if ($paged < $pages - 1 && $paged + $range - 1 < $pages && $showitems < $pages) {
            printf('<a href="%s?page=%s">&raquo;</a>', $base_url, $pages);
        }
        echo "<div class=\"clear\"></div>";
        echo "</div>\n";
    }
}

ページャーのCSSを用意します。

/** ページャー */
.pagination {
  clear:both;
  padding: 0;
  position:relative;
  font-size:11px;
  line-height:13px;
  margin-left: 5px;
  margin-right: 5px;
}

.pagination span, .pagination a {
  display:block;
  float:left;
  margin: 2px 5px 5px 0;
  padding:6px 9px 5px 9px;
  text-decoration:none;
  width:auto;
  color:#fff;
  background: #555;
}

.pagination a:hover{
  color:#fff;
  background: #c8aa82;
}

.pagination .current{
  padding:6px 9px 5px 9px;
  background: #c8aa82;
  color:#fff;
}

.clear {
  clear: both;
}

執筆者：カニ
今日はアメ降ってる…