advanced custom fieldsを使ったサイトで、カテゴリでソートした時に一覧表示＋ページネーション（自分用メモ）
【やったこと】
カテゴリ一覧ページを分岐させ、トップのインフォ用の一覧ページをページネーション付きで作成
その中に、advanced custom fieldsで入力した内容も入れる。
タイトルとカスタムフィールド内の記事をそれぞれ、抜粋して30文字と50文字以降で切って・・・表示にする。
カテゴリページ分岐のために、category.phpをコピーして
category-information.phpなどのファイルを作成し、中身を変更する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<?php $args = array( 'posts_per_page' => 10, //表示件数 'cat' => 1, //カテゴリID 'paged' => $paged, 'post_type' => 'post', 'post_status' => 'publish' ); query_posts($query_string .'&orderby=menu_order'.'&order=asc' ); $the_query = new WP_Query( $args ); if ( $the_query->have_posts() ): while ( $the_query->have_posts() ): $the_query->the_post(); //カテゴリ情報を取得 $cat = get_the_category(); $cat_id = $cat[ 0 ]->cat_ID; ?> <div class="cat_area"> <div class="<?php foreach($cat as $c) {echo ' '.$c->category_name;} ?>"> <p><span class="post-date"><?php the_time('Y.m.d'); ?></span> </p> <h6><a href="<?php the_permalink() ?>"><?php if (mb_strlen($post->post_title) > 30) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 25) . '…'; } else { the_title(); } ?></a></h6> <div class="news_txt"><?php if(mb_strlen(get_field('info'))>50) { $hoge= mb_substr(get_field('info'),0,49) ; echo $hoge. … ;} else {echo get_field('info');} ?></div> </div></div> <?php endwhile; ?> <?php else: ?> <p>そのカテゴリの記事は見つかりませんでした。</p> <?php endif; ?> <div class="pagenation"> <?php //ページネーション if ( $the_query->max_num_pages > 1 ) { echo paginate_links( array( 'base' => get_pagenum_link( 1 ) . '%_%', 'format' => 'page/%#%/', 'current' => max( 1, $paged ), 'total' => $the_query->max_num_pages, 'type' => 'list', 'prev_text' => '« 前へ', 'next_text' => '次へ »' ) ); } wp_reset_postdata(); ?> |
ページネーションのCSSは、こんなのがおしゃれ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.page-numbers { display: inline-block; padding-left: 0; margin: 20px 0; } .page-numbers > li { display: inline; } .page-numbers > li > a, .page-numbers > li > span { position: relative; float: left; padding: 6px 12px; line-height: 1.42857143; text-decoration: none; color: #337ab7; background-color: #ffffff; border: 1px solid #dddddd; margin-left: -1px; color: #000000; } .page-numbers > li:first-child a, .page-numbers > li:first-child span { margin-left: 0; border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .page-numbers > li:last-child a, .page-numbers > li:last-child span { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .page-numbers > li > a:hover, .page-numbers > li > span:hover, .page-numbers > li > a:focus, .page-numbers > li > span:focus { z-index: 2; color: #000; background-color: #eeeeee; border-color: #dddddd; } .page-numbers .current { z-index: 3; color: #ffffff; background-color: #000000; border-color: #dddddd; cursor: default; } .page-numbers > .disabled > span, .page-numbers > .disabled > span:hover, .page-numbers > .disabled > span:focus, .page-numbers > .disabled > a, .page-numbers > .disabled > a:hover, .page-numbers > .disabled > a:focus { color: #777777; background-color: #ffffff; border-color: #dddddd; cursor: not-allowed; } |