logo
Page top

BLOG

WEB用メモ(備忘録)WordPress用ページ送り(カテゴリー・アーカイブ)

2017/10/10 16:35

 俺用メモ

 

ワードプレス用

投稿の出力とページ送り。

 

 カテゴリー・アーカイブ用  

            <?php
            $paged = (int) get_query_var('paged');
            $args = array(
              'posts_per_page' => 12,
              'paged' => $paged,
              'orderby' => 'post_date',
              'order' => 'DESC',
              'post_type' => 'post',
              'post_status' => 'publish'
            );
            $the_query = new WP_Query($args);
            ?>
            <?php if(have_posts()): while(have_posts()):the_post(); ?>

ページャー 

            <div class="l-row s-link-style">
              <div class="l-grid-5 s-link-box">
                <?php
                    $prev_link = get_previous_posts_link('PREVIOUS');
                    $next_link = get_next_posts_link('NEXT');
                    if ( isset( $prev_link ) or isset( $next_link ) ) {
                        echo '', PHP_EOL;
                        if( isset( $prev_link ) ) {
                            echo '<div class="s-link-pre">',$prev_link,'</div>', PHP_EOL;
                        }
                    echo '
                          </div>
                            <div class="l-grid-2 s-link-box">
                              <div class="s-link-home">
                                <a href="<?php echo home_url();?>/blog" class="">
                                  <i class="fa fa-home" aria-hidden="true"></i>
                                </a>
                              </div>
                            </div>
                            <div class="l-grid-5 s-link-box">
                            ';
                        if( isset( $next_link ) ) {
                            echo '<div class="s-link-next">',$next_link,'</div>', PHP_EOL;
                        }
                        echo '', PHP_EOL;
                    }
                ?>
              </div>
            </div>


ブログTOP(一覧)用 
						<?php
						$paged = (int) get_query_var('paged');
						$args = array(
							'posts_per_page' => 12,
							'paged' => $paged,
							'orderby' => 'post_date',
							'order' => 'DESC',
							'post_type' => 'post',
							'post_status' => 'publish'
						);
						$the_query = new WP_Query($args);
						if ( $the_query->have_posts() ) :
							while ( $the_query->have_posts() ) : $the_query->the_post();
						?>

 

ページャー 

					<?php
					if ($the_query->max_num_pages > 1) {
						echo paginate_links(array(
							'base' => get_pagenum_link(1) . '%_%',
							'format' => '/page/%#%/',
							'current' => max(1, $paged),
							'prev_text' => 'PREVIOUS',
							'next_text' => 'NEXT',
							'total' => $the_query->max_num_pages
						));
					}
					?>
					<?php wp_reset_postdata(); ?>

 

 

 カスタム投稿タイプ

 

        <div class="l-row s-link-style">
          <div class="l-grid-5 s-link-box">
            <div class="s-link-pre">
            	<?php previous_post_link('%link','PREVIOUS'); ?>
            </div>
          </div>
          <div class="l-grid-2 s-link-box">
            <div class="s-link-home">
              <a href="../../blogpost" class="">
                <i class="fa fa-home" aria-hidden="true"></i>
              </a>
            </div>
          </div>
          <div class="l-grid-5 s-link-box">
          	<div class="s-link-next">
          		<?php next_post_link('%link','NEXT'); ?>
          	</div>
          </div>
        </div>

sass


// PAGE-CONTROL
.pagination {
  text-align: center;
	margin-bottom: 15px;
	font-size: 1.4rem;
}
a.page-numbers,
.pagination .current {
	display: inline-block;
  background: $black;
  border: solid 1px $gray;
  padding: 5px 8px;
  margin: 0 2px;
  margin-bottom: 60px;
  text-decoration: none;
  color: $white;
  font-size: 1.4rem;
}

.current {
	display: inline-block;
  border: solid 1px $gray;
  padding: 5px 8px;
  margin: 0 2px;
  margin-bottom: 60px;
  color: $black;
  font-size: 1.4rem;
}

.s-link-home a,
.s-link-pre a,
.s-link-next a {
	display: inline-block;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: 4px;
	background-color: $gray;
	padding: 5px 10px;
	margin: 10px auto;
	color: $white;
	transition: .3s;
	&:hover {
		opacity: 0.7;
		transition: .2s;
	}
	@include max(767) {
		display: block;
		font-size: 1.2rem;
		padding: 5px;
		margin: 5px auto;
	}
}

.s-link-pre {
	text-align: left;
}

.s-link-next {
	text-align: right;
}

.s-link-home {
	text-align: center;
}

.s-link-style {
	@include max(767) {
		@include l-full;
	}
}

.s-link-box {
	@include max(767) {
		@include l-tile-grid-4;
	}
}

コメントを残す

新規投稿のプッシュ通知を受け取れます(個人情報入力不要&無料)
※解除する時は再度上記ボタンから解除を選択してください。

Menu

Search

  • Category