pre_get_postsのサンプル

利用シーン

  • 通常のループとは異なる表示件数でページ遷移したい場合など、通常ループを利用しつつ、改変したい場合はコチラを利用。
  • 通常のループをサブループで作ることは極力避ける
<?php
function change_posts_per_page( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return;
    }
    if ( $query->is_tax( 'タクソノミースラッグ', '' ) ) {
        $query->set( 'posts_per_page', '100' );
        return;
    }
}
add_action( 'pre_get_posts', 'change_posts_per_page' );

// 参考
// query_postsを捨てよ、pre_get_postsを使おう【追記あり】【報告あり】
// http://notnil-creative.com/blog/archives/1688

WordPressのアーカイブにおけるページナビゲーションをスマホも含めていい感じにする

WP SiteManager を利用する場合

<?php if ( class_exists( 'WP_SiteManager_page_navi' ) ) {
    WP_SiteManager_page_navi::page_navi( 'items=5' );
} ?>
@charset "utf-8";

.page_navi {
    margin: 0;
    text-align: center;
    li {
        list-style: none;
        display: inline-block;
        &.current {
            padding: 5px 10px;
            border: 1px solid #ccc;
            font-size: 14px;
        }
        a {
            display: block;
            padding: 5px 10px;
            background-color: $vapor;
            font-size: 14px;
            &:hover {
                background-color: #000;
                color: #fff;
            }
        }
        &.first {
            display: none;
        }
        &.last {
            display: none;
        }
    }
}
@media (min-width: 768px) {
    .page_navi {
        li {
            &.current {
                padding: 10px 20px;
            }
            a {
                padding: 10px 20px;
            }
        }
    }
}

the_post_navigationを利用して記事の次前の表記内容を変更する

<?php
the_post_navigation( array(
    'prev_text' => '<span class="show-for-small-only">前の記事へ</span><span class="show-for-medium-up">前の記事<br>%title</span>',
    'next_text' => '<span class="show-for-small-only">次の記事へ</span><span class="show-for-medium-up">次の記事<br>%title</span>'
) );
@charset "utf-8";
.nav-links{
  @include clearfix();
  margin: 20px 0;
  a{
    display: block;
    padding: 10px;
    background-color: $vapor;
    font-size: rem-calc(12);
    &:hover{
      background-color: #000;
      color: #fff;
    }
  }
  .nav-previous{
    float: left;
    width: 48%;
    border-left: 5px solid #000;
  }
  .nav-next{
    float: right;
    width: 48%;
    text-align: right;
    border-right: 5px solid #000;
  }
}

ページ分割の装飾

分割を行う場合のタグ

<!--nextpage-->

利用するテンプレートタグ

<div class="pagesprit">
    <?php wp_link_pages( 'before=<div class="page-numbers">&after=</div>&next_or_number=number&pagelink=<span class="numbers">%</span>' ); ?>
</div>

装飾するためのSCSS

@charset "utf-8";

.pagesprit {
    color: #000000;
    background:white;
    margin: 1em auto;
    line-height:2em;
    text-align:center;
}
.page-numbers{
  .numbers{
    display: inline-block;
    padding: 5px 20px;
    font-size: rem-calc(12);
    border: 1px solid $iron;
  }
  a {
    .numbers{
      background-color: $vapor;
      border: none;
      &:hover {
        background-color: #000;
        color: #fff;
      }
    }
  }
}

一般的なループ

<ul>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<li>
			<?php the_time('Y年m月d日'); ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</li>
	<?php endwhile; else : ?>
		<li>投稿が見つかりません。</li>
	<?php endif; ?>
</ul>

get_postsを利用したサブループ

ポイント

  • 最初に global をよびだすことで、excerptも呼び出せる
  • 投稿がない場合にはループの外にあるタグも表示しないようにする
<?php
    global $post;
    $args = array(
        'posts_per_page' => 5, //表示件数
        'category'       => 1 //カテゴリーのIDの指定
    );
    $myposts = get_posts( $args );

    if ( $myposts ) :
?>
        <ul>
    <?php
        foreach ( $myposts as $post ) :
            setup_postdata( $post );
    ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
    <?php
        endforeach;
        wp_reset_postdata();
    ?>
        </ul>
<?php else : ?>
        <p>記事がありません。</p>
<?php endif; ?>

参考