WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!
  • これ簡単!プラグインを使わずページネーションを実装するコード
  • 記事公開:2015/10/20
  • 最終更新:2015/10/21

これ簡単!プラグインを使わずページネーションを実装するコード

WordPressサイトにプラグインを使わずページネーションを実装するコードをご紹介します。プラグインを使わずにページネーションを設置したい方は参考にしてください。1分でページネーションを設置できます。

この記事は約 5 分で読めます。

Wordpressのカスタマイズなら全てお任せ!

http://takayakondo.com/

WordpressのカスタマイズならWordpressカスタマイザーにお任せください!
毎月5件の限定受注。お見積もりはいつでも無料です。

このサイトで使用しているページネーションのコードを公開します。

WordPressで構築したサイトにページネーションを設置しようとすると、ほとんどの方がプラグインの【WP-PageNavi】などに行き着くかと思います。

プラグインを使っても構わないのですが、個人的にプラグインの数は減らしたほうが良いと言う考え方なので、私の構築するサイトではプラグインを使わずにページネーションを設置しています。

基本的なページネーションでよければ、プラグインを使わないでもカコイイものを実装することが可能ですよ。

このサイトで使用しているページネーションのコードはコレだ!

まず、ページネーションを設置したい箇所に設置するコードをご紹介します。
以下がそのコード。

<div id="pagination">
<?php global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
$paginate_format = '';
$paginate_base = add_query_arg('paged', '%#%');
} else {
$paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
user_trailingslashit('page/%#%/', 'paged');;
$paginate_base .= '%_%';
}
echo paginate_links( array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $wp_query->max_num_pages,
'mid_size' => 5,
'current' => ($paged ? $paged : 1),
)); ?>
</div>

次に上記のコードを装飾しているのが以下のコード。
CSSファイルに記述しています。

#pagination {
color: #2583ad;
margin: 30px auto;
line-height:2em;
}

a.page-numbers, #pagination .current {
color: #00019b;
padding: 10px;
border:solid 1px #ccc;
text-decoration:none;
font-size:smaller;
background:white;
}

a.page-numbers:hover {
color:white;
background: #328ab2;
}

#pagination .current {
color: white;
background: #328ab2;
border: #328ab2;
font-weight:bold:
}

.next,
.prev {
border:0 none;
background:transparent;
font-weight:bold;
}

以上のコードをコピペするだけで、あなたのサイトにもプラグインを使わずにページネーションを設置することができます。

もしよろしければ、参考にしてください。

まとめ

プラグインを使わずページネーションを実装するコードをご紹介しました。

ページネーションはブログ形式のサイトには必須の機能です。
プラグインを使わないでも実装可能ですのでぜひ試してみてください。

私のサイトで利用しているコードは、大分以前にどこかのサイトにあったコードを参考にさせていただいております。参考記事としてご紹介したかったのですが、参考元の記事が分かりませんでした。

もしも、このコンテンツでご紹介しているコードの参照元が分かりましたらご一報ください。参照元として紹介させていただきます。

シェアしていただきありがとうございます。

この記事が気に入ったら【いいね】しよう!

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • WordPressに投稿した画像を自動的にpタグで囲ませない方法

    WordPressに投稿した画像を自動的にpタグで囲ませない方法をご紹介。WordPressに画像を投稿すると自動的にpタグで囲まれてしまうのですが、これを回避する方法をご紹介します。 記事を読む

  • 1つのカスタムフィールドで複数の値を登録して表示する方法

    1つのカスタムフィールドで複数の値を登録して表示する方法をご紹介します。複数の値を一つのカスタムフィールドで管理したいかは必見です。3分後には1つのカスタムフィールドで負k数の値を管理できるようになります。 記事を読む

  • 基本的なオリジナルショートコードを作る方法

    簡単なオリジナルショートコードを作成する方法をご紹介。ショートコードの作成と聞くと、難しそうと思う方もいらっしゃいますが、そんなことはありません!簡単なショートコードなら1分程度で作成することができます。 記事を読む

  • WordPress管理画面のあなたのプロフィールで項目を追加したり削除する方法

    WordPress管理画面のあなたのプロフィールで項目を追加したり削除する方法をご紹介します。プロフィールの項目を増やしたい方や減らしたい方は参考にしてください。コピペだけで3分後にはプロフィールの項目を自由自在にカスタマイズできてしまいます。 記事を読む

  • 知ってて損なし!記事URLから投稿IDを取得する方法

    WordPressサイトの記事URLから投稿IDを取得する方法をご紹介します。なんでそんなことするの?と疑問に思われるかもしれませんが、投稿IDを取得することができれば、記事URLを指定するだけで様々な情報を取得できるようになります。カスタマイズの幅も広がること間違いありません。 記事を読む

コメントを残す


(必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)