プラグインを使わずに自分でページングを実装するfunction.phpのコードサンプル

公開日: 最終更新日:2015/11/01

ワードプレス ページング・ページネーション(wordpress paging)
Wordpressで選んだテーマにページング機能が付いていない場合は「WP-PageNavi」というプラグインを使うか、該当テーマ内のテンプレートファイル(php,css)にコードを追加して自力で実装する事になる。
ページング(Paging)、ページネーション(Pagination)、ページャー(Pager)と人によって言い方が異なるが、ページングとは上の画像の様にページ番号を表示しページ番号にリンクを付けてアクセスしやすくする事をいう。

スポンサードリンク

ページング、ページネーションの設置方法

一般のWordPressサイト(ブログ)であれば、トップページの記事一覧の下部やアーカイブページ(カテゴリーやタグページ)の記事一覧の下部で見かけるもの。尚、投稿ページや固定ページでも記事がすごく長くなりページ分割したい時に、半角で<!–nextpage–>と書けばページ分割されページングが表示される。

function.phpにコードを記入する場合

function.phpに下記のコードを追加

表示エリアのcssファイルを用意
※自分のテーマに合うように文字の大きさや背景色は変更すること

テーマファイルの表示箇所に下記のコードを追加
ex) index.php archive.php category.phpなど

参考coliss WordPressにプラグイン無しでページネーションを設置する方法

「WP-PageNavi」というプラグインを使う場合

プラグイン「WP-PageNavi」を使う場合は、プラグインをインストールして設定画面から必要項目を設定して表示したい箇所に下記のコードを書くと表示される。

※プラグインの設定方法を詳しく説明しているページ
参照 http://crossinthenight.com/wordpress/2624/

まとめ

自分でWordpressのテーマを作成する場合には必要ですが、最近のテーマファイルはページング、ページネーション機能が予め実装されているテーマが殆どです。現在使っている「Stinger3」も、一つ前に使っていた「mono-lab | CUBIC」も付いていました。
別サイトで使っているシンプルでレシポンシブ対応した無料テーマの「wsc7」ではページング機能は実装されていませんが「WP-PageNavi」を使う前提でテーマファイルに設定されていますからプラグインをインストールし設定すると表示されます。

表示速度が若干でも早い方がいい場合は、プラグインを使わずにfunction.phpにコードを書く方が余分なcssファイルの読込や条件分岐の多いコードを読む必要がないのでコードを書くべき、既に長く運用していて問題が無い場合はプラグインを止める必要はない。

Post Categories: Wordpress  Tags:

AD

関連記事

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

カテゴリーページや投稿タグページに入力した説明文を反映させる方法

WordPressのテーマではカテゴリーページや投稿タグページに各々の編集画面で入力した説明文を表示するテーマは少ないのですが、今回入力

記事を読む

メタタグセット記事のアイキャッチイメージ

プラグイン『Meta Manager』の使い方と注意点

WordPressでSEO対策用プラグインの『ALL in One SEO Pack』は機能が豊富すぎて使いきれないので、メタタグのDe

記事を読む

wpテーマ-cubic

WordPressテーマ『mono-lab | CUBIC』を少しカスタマイズしてみた

現在はStinger3で運用しています。 このブログは(モノラボ)mono-lab | CUBIC というテーマを使っています。GPL

記事を読む

stinger3 1カラムテンプレートサンプル

「Stinger3」に1カラム テンプレートを追加する方法

このブログで使っているテーマ「Stinger3」はメインコンテンツ領域(横幅)が550pxとやや狭いです。いろんな方が横幅を広げるカスタ

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

WordPress管理画面の投稿一覧にカスタムフィールドの項目を追加表示する方法

良く使うWordPress管理画面の投稿一覧ですが標準の表示項目は以下の7個です。通常のブログならカスタマイズする必要もないのでしょうが

記事を読む

ワードプレステーマ wsc7

レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触ってみたので少し解説含む覚書メモです。 2011年10月25日にリリ

記事を読む

wordpressテーマ stinger3

人気のWordPress無料テーマ「Stinger3」に変えてみた

ブログのテーマをスマホ対応済の人気無料テーマ「Stinger3」に変更しました。 一つ前に適用していたモノラボさんのテーマ CUBIC

記事を読む

ワードプレスタイトル

WordPress テンプレート ページ別にタイトル(title)・見出し(h1/h2)・メタの各タグは何を書くべき?

二つ前の記事「WordPressの仕組みを理解する」でも書いたが、WordPressのテンプレートファイルは、ざっくり以下の6パターン、

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

Exec-PHPを使わずに投稿ページや固定ページでphpを使いたい

投稿ページや固定ページに直接phpコードが書けるプラグイン「Exec-PHP」は、セキュリティ面に問題があるようなので使わない方が良い。

記事を読む

スマホ対応テーマ 画像をtableタグで表示すると入らない時の記事に使った画像

スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法

スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する記事内のhtmlタグの書き方によっては表示が想定外って事もありますよね

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

AD

WordPress(ワードプレス)も SEO(エスイーオー)も、今一つ解らない、アラフィフおやじのWeb勉強ノート

・なんでやねん?
・忘れたらアカン!
・えらいこっちゃ !!

などなど、諸々かきつけていきます。

livedoor-reader-btn
follow us in feedly
著作権表示が要らない素材サイト「pixabay」が使えるプラグイン

ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本

Wordpress パソコン開発環境構築の記事
簡単に自分のパソコン(PC)にWordPress開発環境を作る方法

ワードプレス(Wordpress)で既に稼働中サイトのテーマをカス

スマホ対応テーマ 画像をtableタグで表示すると入らない時の記事に使った画像
スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法

スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する

stinger3 1カラムテンプレートサンプル
「Stinger3」に1カラム テンプレートを追加する方法

このブログで使っているテーマ「Stinger3」はメインコンテンツ

ワードプレステーマ wsc7
レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触

→もっと見る