データサイエンティストハトリのブログ

PythonとインテリジェントクラウドとAIが好きな学生エンジニア。データ分析、スクレイピング、就職活動などについて書いていきます。

プラグインなしでWordpress投稿ページに特定カテゴリの投稿一覧をページネーション付きで表示する方法!サンプルコードつき!

f:id:hatorihatorihatorik:20180907233241p:plain

特定カテゴリの投稿一覧を表示させたいことありませんか?

特定カテゴリの投稿一覧を表示させたいことってありませんか?例えば以下のとき

 

 

f:id:hatorihatorihatorik:20180907201610p:plain

カテゴリ名が「Python」のものだけを取得しそれを一覧で表示させたいことってあると思います。

記事ページにPHPコードはかけない

wordpressの記事ページにはphpコードを書くことができません。なので、記事にfor文とかwhile文を書いて、記事一覧を表示させよう!とおもってもだめなんです。

 

これを実現するためにはショートコードというものが必要です。

whitebear-seo.com

ショートコードを使って作成(コピペOK )

ショートコードは少し使い方が難しいです。仕組みを理解してもなかなか使いこなすのは難しいのではないでしょうか。

コピペで簡単にできるようにコードを用意しましたのでぜひ参考にしてみてください。もっときれいなコードがあるよーって方はコメントお願いします!

 

function category_article_list(){
  echo '<div class="content">';
  echo '<div class="top-post-list">';
  $paged = (int) get_query_var('paged'); 
  $args = array(
    'cat' => #カテゴリの番号を入力,
    'orderby' => 'modified', 
    'paged' => $paged, 
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 10(1ページあたりの記事数)
  );

  $the_query = new WP_Query($args);
  while ($the_query->have_posts()): $the_query->the_post();
    echo '<a href="' . get_permalink() . '" class="post_link">';
    echo '<article class="post-list animated fadeInUp" role="article">';
    if (has_post_thumbnail()) {
      echo '<img class="attachment-home-thum size-home-thum wp-post-image" src="' . get_the_post_thumbnail_url() . '" alt="" width="170" height="90" />';
    } else {
      echo '<img src="' . get_stylesheet_directory_uri() . '/images/noimage.png" alt="" width="170" height="90">';
    }
    echo '<div class="entry-content">';
    $title_text = get_the_title();
    echo '<p class="entry-title">' . $title_text . '</p>';
    echo '<p class="byline entry-meta vcard"><span class="date gf updated">' . get_the_date('Y年m月d日 H:i', strtotime($post->post_modified)) . '</span> </p>';
    echo '<div class="description">';
    echo '<p>' . mb_substr(get_the_excerpt(), 0, 60) . '.. </p>';
    echo '</div>';
    echo '</div>'; 
    echo '</article>';
    echo '</a>';
    endwhile;
  echo '</div>';
  echo '</div>';

// ここからページネーション

  $the_query = new WP_Query($args);
  $the_query->max_num_pages;
  $page_arg = array(
  'current' => max( 1, $paged ),
  'prev_next' => false,
  'total' => $the_query->max_num_pages,

  );
  echo '<div class="category_article_list_pagination">';
  echo paginate_links($page_arg);
  echo '</div>';
}

add_shortcode('category_article_list', 'category_article_list');