megane9988
5/6/2015 - 5:34 AM

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

ページナビをいい感じに装飾

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

pagenavi.scss
content_copyfile_download
@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: rem-calc(12);
    }
    a{
      display: block;
      padding: 5px 10px;
      background-color: $vapor;
      font-size: rem-calc(12);
      &:hover{
        background-color: #000;
        color: #fff;
      }
    }
    &.first{
      display: none;
    }
    &.last{
      display: none;
    }
  }
}

@media #{$medium-up} {
  .page_navi{
    li{
      &.current{
        padding: 10px 20px;
      }
      a{
        padding: 10px 20px;
      }
    }
  }
}
page-nav.php
content_copyfile_download
<?php if ( class_exists( 'WP_SiteManager_page_navi' ) ) { WP_SiteManager_page_navi::page_navi('items=5'); } ?>