WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!
  • これ簡単!プラグインを使わずページネーションを実装するコード

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

bsPAK85_desk15215645

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

この記事は約 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;
}

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

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

まとめ

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

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

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

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

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

bsPAK85_desk15215645

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

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

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

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

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

詳細を確認する

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

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

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

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

  • copyright-40632_1280

    【WordPress】コピーライトの年号を自動更新する

    作成したサイトのフッターにコピーライトを記述する機会は多いと思います。WordPressなら、簡単なカスタマイズでコピーライトの年号を自動更新することができるのです。今回はそんなカスタマイズをご紹介します。 記事を読む

  • OOK86_tewohuriPR500 (2)

    WordPressのテーマを選ぶ時に知っておきたい5つのポイント

    WordPressには、有償無償を問わず様々なテーマが存在します。選択肢が多いのは嬉しいのですが、その反面、どのテーマを選べばよいのか迷ってしまいます。今回はWordPressテーマを選ぶポイントをご紹介します。 記事を読む

  • hang-out-1521663_1280

    WordPressのthe_excerpt()に付与されるpタグを削除する方法+α

    WordPressのthe_excerpt()に付与されるpタグを削除する方法をご紹介します。Pタグが付与されていない抜粋を表示させたい方は参考にしてください。Pタグを削除する方法と、もう一つPタグの付与されていない抜粋を表示する方法をご紹介しています。 記事を読む

  • PAK63_koukyomawarinoensen20131026500

    WordPressがインストールされているディレクトリ名を変更する方法

    初心者の方向けにWordPressを設置しているディレクトリ名を変更する方法をご紹介します。設置ディレクトリの名前を変えたい方は参考にしてください。 記事を読む

  • LIG_h_agentjyuwohuku500

    WordPressで自動的に挿入されるpタグとbrタグを無効にする方法

    WordPressで記事や固定ページを作成すると、PタグとBRタグが改行にあわせて自動的に挿入されます。便利な機能なのですが、必要ないと感じている方もいるかもしれません。今回は自動的に挿入されるPタグとBRタグを無効にする方法をご紹介します。参考にしてください。 記事を読む

コメントを残す


(必須)

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