WordPressのページャーをオリジナルのものにしたい…
もっとカスタマイズせいのたかいものに変更したい…
そんな思いはありませんか?
プラグインをつかわなくてもfunction.phpとテンプレートに数行追加するだけでオリジナルのページャーが作成できちゃいます!
このページャーでのデザインカスタマイズ方法は【レスポンシブ対応】おしゃれなページャーをCSSだけで作る!コピペ出来るデザインサンプルで紹介しています♪
完成図
5件表示のページャーを作成してみましょう!
2ステップで完成しますよ♪
やり方
function.php
function.phpに以下のソースを貼り付けてください。
これは、ページャーのレイアウトをカスタマイズしたHTMLに変更するコードです。
//////////////////////////////////////////////////
//ページャー
//////////////////////////////////////////////////
function pagination($pages = '', $range = 2)
{
$showitems = ($range * 2)+1;//表示するページ数(5ページを表示)
global $paged;//現在のページ値
if(empty($paged)) $paged = 1;//デフォルトのページ
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;//全ページ数を取得
if(!$pages)//全ページ数が空の場合は、1とする
{
$pages = 1;
}
}
if(1 != $pages)//全ページが1でない場合はページネーションを表示する
{
echo "<div class="pager">n";
echo "<ul class="pagination">n";
//Prev:現在のページ値が1より大きい場合は表示
if($paged > 1) echo "<li class="pre"><span><a href='".get_pagenum_link($paged - 1)."'«</span></a></li>n";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
//三項演算子での条件分岐
echo ($paged == $i)? "<li><a class="active" href='".get_pagenum_link($i)."'><span>".$i."</span></a></li>n":"<li><span><a href='".get_pagenum_link($i)."'>".$i."</span></a></li>n";
}
}
//Next:総ページ数より現在のページ値が小さい場合は表示
if ($paged < $pages) echo "<li class="next"><span><a href="".get_pagenum_link($paged + 1).""»</span></a></li>n";
echo "</ul>n";
echo "</div>n";
}
}
表示したいアーカイブページ
アーカイブテンプレートに以下を追加してください。
function.phpで設定したオリジナルページャーを表示するタグになります。
<?php
if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);
}
?>
デザイン調整
デザインについてはCSSで調整します。
【レスポンシブ対応】おしゃれなページャーをCSSだけで作る!コピペ出来るデザインサンプルこちらの記事でコピペできるサンプル付きで紹介しています。
ひとつだけ上の記事から抜粋したCSSを紹介します♪
レスポンシブ対応済みでCSSのcontent
要素を使ってスマホ表示時だけ「前の10件」「次の10件」表示が出るようしています。
/* その1 */
.pager ul.pagination {
text-align: center;
margin: 0;
padding: 0;
}
.pager .pagination li {
display: inline;
margin: 0 2px;
padding: 0;
display: inline-block;
background:#9D50BB;
width: 50px;
height: 50px;
text-align: center;
position: relative;
}
.pager .pagination li a{
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display:table;
color: #fff;
text-decoration: none;
}
.pager .pagination li a span{
display:table-cell;
vertical-align:middle;
}
.pager .pagination li a:hover,
.pager .pagination li a.active{
color: #000;
background: #ccf;
}
@media only screen and (max-width: 767px){
.pager .pagination li{
display: none;
}
.pager .pagination li.pre,
.pager .pagination li.next{
display: inline-block;
width: 40%;
height: 50px;
text-align: center;
}
.pager .pagination li.pre a,
.pager .pagination li.next a{
width: 100%;
text-align: center;
}
.pager .pagination li.pre span::after{
content: " 前の10件へ";
}
.pager .pagination li.next span::before{
content: "次の10件へ ";
}
}
「wp_pager_css.zip」の中身
このページでダウンロードできるzipファイルの中身です。
上で紹介した方法+CSSでのデザイン調整用ファイル一式になります。
index.html | HTMLのソースファイルです |
---|---|
style.css | CSSファイルです。 |
function.php | WordPressでに反映する時に必要です |
archive.php | テンプレート貼り付け用のソースファイルです |
文字コードは【UTF-8】で作っています。
更新履歴
2019/01/23 Ver.1.0
ソースを公開しました
ページャーCSSVer.1.0をダウンロードする(wp_pager_css.zip)
カスタマイズや組み込み方法などご相談くださいね!
まとめ
ページャーについてまとめました!
解らないところがあればコメント等で声かけてくださいね♪
一緒に解決していきましょう〜