【WordPress】プラグインなしでカスタム投稿のページネーションを表示させる方法

add_action('pre_get_posts', 'home_posts_type');
function home_posts_type($wp_query)
{
  if (!is_admin() && $wp_query->is_main_query() && $wp_query->is_home()) {
    $wp_query->set('post_type', array('post', 'news'));// newsの部分にカスタム投稿のスラッグ名
    $wp_query->set('posts_per_page', 10); // 10件ずつ表示
  }
}

// ページネーション
function pagination($pages = '', $range = 2)
{
  $showitems = ($range * 2) + 1; //表示するページ数（５ページを表示）
  global $paged; //現在のページ値
  if (empty($paged)) $paged = 1; //デフォルトのページ
  if ($pages == '') {
    global $wp_query;
    $pages = $wp_query->max_num_pages; //全ページ数を取得
    if (!$pages) //全ページ数が空の場合は、１とする
    {
      $pages = 1;
    }
  }
  if (1 != $pages) //全ページが１でない場合はページネーションを表示する
  {
    echo "<div class=\"pager\">\n";
    echo "<ul class=\"pagination\">\n";
    //Prev：現在のページ値が１より大きい場合は表示
    if ($paged > 1) echo "<li class=\"pre\"><a href='" . get_pagenum_link($paged - 1) . "'><span>«</span></a></li>\n";
    for ($i = 1; $i <= $pages; $i++) {
      if (1 != $pages && (!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems)) {
        //三項演算子での条件分岐
        echo ($paged == $i) ? "<li><a class=\"active\" href='" . get_pagenum_link($i) . "'><span>" . $i . "</span></a></li>\n" : "<li><a href='" . get_pagenum_link($i) . "'><span>" . $i . "</span></a></li>\n";
      }
    }
    //Next：総ページ数より現在のページ値が小さい場合は表示
    if ($paged < $pages) echo "<li class=\"next\"><a href=\"" . get_pagenum_link($paged + 1) . "\"><span>»</span></a></li>\n";
    echo "</ul>\n";
    echo "</div>\n";
  }

<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
	'post_type' => 'news',//カスタム投稿名
	'posts_per_page' => 10,//記事表示件数
	'paged' => $paged
);
$the_query = get_posts($args);
$max_num_pages = $my_query->max_num_pages;
?>
<?php $my_posts = get_posts($args); ?>
<?php global $post;
foreach ($my_posts as $post) :
	setup_postdata($post);
?>

// ループ処理を記述

<?php
endforeach;
wp_reset_postdata();
?>

//ページネーション
<?php
if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
}

/* ページナビゲーション */
.pager {padding-top: 40px; width: 100%;}
.pager .pagination {text-align: center;line-height: 0;}
.pager .pagination li {display: inline;margin: 0 2px;padding: 0;display: inline-block;width: 40px;height: 40px;overflow: hidden;text-align: center;position: relative;border-radius: 2px;}
.pager .pagination li a {vertical-align: middle;position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;display: table;text-decoration: none;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: al0.3s ease;}
.pager .pagination li a span {display: table-cell;vertical-align: middle;transform: none;}
.pager .pagination li a:hover {color: #fff;background: #830000;}
.pager .pagination li .active {color: #fff;background: #000;}
@media (max-width: 750px) {
  .pager .pagination li {display: none;}
  .pager .pagination .pre,
  .pager .pagination .next {display: inline-block;width: 40%;height: 50px;text-align: center;}
  .pager .pagination .pre a,
  .pager .pagination .next a {width: 100%;text-align: center;}
  .pager .pagination .pre span:after {content: " 前のページ";}
  .pager .pagination .next span:before {content: " 次のページ ";}
}

<div class="pager">
	<ul class="pagination">
		<li><a class="active" href=""><span>1</span></a></li>
		<li><a href=""><span>2</span></a></li>
		<li><a href=""><span>3</span></a></li>
		<li><a href=""><span>4</span></a></li>
		<li><a href=""><span>5</span></a></li>
		<li class="next"><a href=""><span>»</span></a></li>
	</ul>
</div>