プラグインでWordPressにページ送りを追加する方法・手順

wp page numbers

どーも、ダンゴです( ̄▽ ̄)ノ

ブログのトップページの1番下に
「次のページへ」とか「前のページへ」
みたいな感じでページを移動できるボタンがあれば便利ですよね。

僕が愛用している「賢威」というテンプレートは、
デフォルトでページへのリンクがついているんですが、
ちょっと見づらいかな、とも思います。

ページナンバー デフォルト

そこで今回は、プラグインを使って
このページ送りをカスタマイズしてみたいと思います(*^^)b

 

『WP Page Numbers』の設定手順

個人的にオススメなのは、
『WP Page Numbers』というプラグインです。

まず、ダッシュボードから
「プラグイン」⇒「新規追加」で、
インストールして有効化してください。

そしたら、「設定」⇒「Page Numbers」とクリックして、
デザインを決めていきます。

 

1番上の部分で、
好きな見た目を選択できます。

wp page numbers スタイル選択

 

ここでページの表記を選択できます。
「Page 3 of 5」にチェックを入れると、
上画像のような数字表記になります。

wp page numbers スタイル選択2

 

その下にコードがあるので、
コピーして設定を保存します。

見つけられなかった方は、
下のコードをコピーしてもらえれば大丈夫です(*^^)b

<?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?>

 

で、「外観」⇒「テーマの編集」とクリックし、
「メインインデックスのテンプレート」にコードを貼りつけます。

場所は、賢威の場合だと<?php endif; ?>の下になります。
賢威の方は、『pager_keni();』というところを削除してください

wp page numbers 賢威コード挿入場所
↓ ↓ ↓
wp page numbers 賢威コード挿入後

 

これでブログのトップページを見てみると、、

ページナンバー 挿入後

 

表示されてるけど小さい!!Σ(´Д`;)笑

 

この大きさを変えるには、
CSSを編集してやればOKです☆

「プラグイン」⇒「インストール済みプラグイン」から
WP Page Numbersの「編集」をクリック。

wp page numbers 編集

 

さきほど選んだデザインの種類が
「Modern」「Classic」「Tiny」「Panther」「Stylish」
の5種類あるんですが、それに対応したCSSを編集していきます。

wp page numbers CSS

 

編集した結果がこちら☆

ページナンバー カスタマイズ後

まだ記事数が少なくてちょっと見栄えが悪いですが、
あと何記事が書いていったらいい感じになりそうです( ̄▽ ̄)b

 

参考までに、
今回のclassic.cssの変更部分を載せておきますね(^^)

フォントサイズは、
『#wp_page_numbers ul, #wp_page_numbers li, #wp_page_numbers a』
というところから変えることができます☆

#wp_page_numbers ul {
	position: relative;
	left: 50%;
	float: left;
}
#wp_page_numbers ul li {
	position: relative;
	left: -50%;
	float: left;
}

#wp_page_numbers a {
	padding: 15px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 2px;
	margin-right: 10px;
	display: block;
	color: #333;
	border: 1px solid #0000ff;
}

#wp_page_numbers li a:hover {
	border-color: #0000ff;
background: #0000ff;
color: #fff;
}

 

動画も撮ったので、
よければ参考にしてください(*^^*)

チャンネル登録で他の動画も見る
ダンゴのYoutube

 

ブログランキング参加中!
よければ1日1クリックしていただけると
嬉しいです♪ヾ(´▽`*)ノ
↓ ↓ ↓

 

管理人プロフィール
▼名前:ダンゴ
ダンゴ プロフィール
どーも、ダンゴです。

お酒と漫画とお笑いが大好きな大学生で、現在はネットビジネスとスロットで学費と生活費を稼ぎながら、細々と暮らしてます。

数年前ブラック企業に内定し、「雇われるリスク」を肌で感じた結果、就職を放棄。

とはいえ食わねばいけないので、藁にもすがる思いでネットビジネスを始めたところ、毎月10万円以上の収入を生み出すことに成功!

知識ゼロから月収10万円を稼ぐまでの道のりをメールで紹介していますので、興味があれば登録してみてください☆

⇒10万を稼ぐ第1歩


2 件のコメント “プラグインでWordPressにページ送りを追加する方法・手順”

  1. まー より:

    いつも有益な情報ありがとうございます。
    以前にSeesaaからの移管で質問させていただいた者です。
    おかげ様で移管は完了しました。
    ありがとうございます。

    またまた質問で申し訳ないのですが、この主様のblogようなスマホ表示をさせたいのですが、このテンプレートは
    どこかで入手可能でしょうか??
    調べ方が分かりませんでしたので、申し訳ありません。

    • ダンゴ より:

      >まーさん

      移管できたんですね!
      よかったです(*^^*)♪

      このスマホのテンプレートは、
      29collegeという塾?に入ると使用できます☆

      メインはアクセスアップやカスタマイズの塾なんですが、
      見やすくてソースがきれいなスマホテンプレートも魅力的ですね(ノω`*)♪

コメントを残す

サブコンテンツ

このページの先頭へ