Bootstrap3でpaginationを中央揃えにしたい時の方法

現在、Bootstrap3を使ってWordPressのテーマをつくっています。

Bootstrap

で、ページャーについては、プライム・ストラテジーさんのWP SiteManagerを使うことにしました。

ただし、Bootstrap2の記載の方法とはちょっと変わっていたので備忘録として書いておきます。

Bootstrap3ではdivではなくulのclassにpaginationを指定する

ぐぐってみたところ、Bootstrapの2まではulのクラスにpagination-centeredを入れてあげればできたようなのですが、今回はどうもうまくいきません。

bootstrap.min.cssで、’pagination-centered’を検索してみたところ見当たらないので、どうやらBootstrap3からはかわったようです。

代わりに、英語のサイトをしらべていたら、こちらのサイトにずばり書いてありました。

Weblog Bass Jobsen Migrate your templates from Twitter Bootstrap 2.x to Twitter Bootstrap 3 – Weblog Bass Jobsen

Pagination

The pagination class needs to add to the ul-tag direct instead of to the containing div. But when you want to center the pagination you will have add the center class to the containing div. Note Pager links (previous / next) are centered by default.

Bootstrap2まではdivにpaginationのclassをつけてたけど、Bootsrtap3からはulにpaginationのclassをいれればよくなった。でも、中央揃えしたい場合には、divに中央揃えのclassをつけてpaginationのulを使ってくれ。

とのことです。

結局こう書いた

結果として、このようにコードを記載すれば、wp-sitemanagerをつかって中央揃えでpaginationを表示させることができました。

    <div class="text-center">
           <?php if ( class_exists( 'WP_SiteManager_page_navi' ) ) { 
           		WP_SiteManager_page_navi::page_navi('elm_class=pagination' );
           	} ?>
    </div>

所感

最近は動画作成や文章の書き方などを勉強していましたが、今後のSEOのことを考えると、ページのOutlineを意識したマークアップが求められることと、schema.orgのようなマイクロデータをそれに含めることなどが、強く強く(Googleさんは)求めているような感じです。

なので、この機会にBootstrap3を使ってそこんところを盛り込んだ自分テーマをつくり、今後の自分のサイトのベースにしたいなぁ、などとおもっておりまする。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク