Diviテーマで数字のページネーションナビゲーションを使用する

0

Elegant ThemesのDiviテーマでブログモジュールや、最新の記事、カテゴリ、などの改ページが次の図のように "過去の入力点""次のエントリ"のように表示されます。

Diviのメインページネーション
Diviのメインページネーションナビゲーション

別お気に入りのページネーション(Pagination)形式ではないですね。 このページネーション形式を数値に変えたい場合には、直接コードを作成して追加したり、プラグインを使用することができます。

WP-PageNaviプラグインを使用してページ数ナビを使用する

最も簡単な方法は、 WP-PageNavi プラグインを使用することです。 (他にも WP-Paginate など、いくつかのプラグインがあります。)

WordPress ページネーションプラグイン

このプラグインをインストールした後に WordPress 管理者ページの 設定> PageNaviのオプションを指定することができます。

PageNavi設定
PageNavi Settingsページ

必要に応じて設定をするようにします。 必要に応じてハングルで変更できます。 そしてCSSでレイアウトを必要に応じて変更することができます。

たとえば、 "Style The WordPress WP-PageNavi Post Navigation Plugin"文で紹介されたCSSコードを使用すると、次のように改ページを表示バーが表示されます。

WordPress WP-Pageナビゲーションプラグイン
WordPress WP-Pageナビゲーションのプラグイン。 出典:ejhansel.com

参考までに Blog Module(ブログモジュール)で改ページをナビゲーションを表示するには、 Show Pagination 옵션을 はいに設定します。

Diviテーマのブログモジュールの設定

ユーザーコードを使用してページ数ナビで置換

外部のテーマを使用する代わりに、直接コードでページネーションシンボルを挿入するには、テーマファイルを変更する必要があります。 たとえば、文の表示形式を、最新のグローバル表示するように設定(設定>読むで "フロントページの表示"を"最新記事"として指定)し、次のコードを関数ファイルに追加するようにします。(必ずチャイルドテーマを作成した後の操作にします。)

function pagination_bar() {
global $wp_query;

$total_pages = $wp_query->max_num_pages;

if ($total_pages > 1){
$current_page = max(1, get_query_var('paged'));

echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => '/page/%#%',
'current' => $current_page,
'total' => $total_pages,
));
}
}
// Source: Elegant Themes

その後、次のコードをループが終わる直前(「endif」ステートメントの後に、しかし「endwhile "の前に)に追加するようにします。

<nav class="pagination">
<?php pagination_bar(); ?>
</nav

それでは前へ、次の記事のリンクの代わりに、次の図のようなページ数のナビゲーションが表示されます。

WordPress ページ数ナビ
WordPress ページ数ナビ

CSSを使用して、レイアウトスタイルを適切に調整するようにします。

このブログでは、現在 Diviテーマを使用しているが、グィチァニズムためだけの基本ページネーションナビゲーションを使用しています。 (簡単に行くWP-PageNaviプラグインをインストールすればよいが、今でも非常に多くのプラグインがインストールされており、追加のプラグインをインストールすることが負担になってなるべくプラグインのインストールを自制しています。)

メモ:

コメントを残す

コメントを入力してください!
名前を入力してください