Wind of South Kyusyu BLOG

上記の広告は90日以上記事の更新がないブログに表示されます。新しい記事を書くことで、こちらの広告が消せます。

  

共用SSLのサブディレクトリでWordpressの部分SSL化実験に失敗して、多少方向性を変える（ex.Facebookページへの連動についてはWordpressを用いずにRSSを活用する、もしくは、VPSマルチドメインではなくさくらのレンタルサーバをなどを利用して丸々1つで運用させる）ことにしましたが、Wordpressのマルチサイト機能を駆使して、子サイトでSSL専用を作ってみる実験もありかなと思うところですが、さほど痛手が大きくないため次の機会に回すことにして、今日は別件のページナビ設置をやってみました。

プラグインもありますが、筋金入りのコーダーとしてはソースコードが汚くなるのが耐え切れず、【Headspace2】のみは妥協している身ですので、ページナビは自力でやろう、というわけで、以前AmazonAPIの時に作っていたページナビを流用して、無事動きましたのでご紹介します。
なお、作成にあたっては【HOUSE TECT】さんのサイトが参考になりました。

なお、動作確認環境はPHP5.2.x、WP3.3.1ですが、WP3.0.4以降で【TwentyTen】が入っている環境ならば問題ないでしょう。

まず、【TwentyTen】元々のページナビを拝借、これは2ページ以上あるかどうかを判定した上で【前のページ】及び【次のページ】を表示しつつ、リンクも張ってくれる優れ物です。
ただし、ページ数が多いとアクセシビリティの観点からするとNGな代物になります。

そこで、その間にページナビを配置してしまえばいいわけです。
2ページ以上判定は既にあるのですから、現在のページと最大ページ数が分かれば、簡単です。

まず、利用するテーマ内の【function.php】の最下層に、次のコードを入れます。
function show_page_navi() {<br /> global $wp_query;<br /> $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;<br /> $max_page = $wp_query->max_num_pages;<br /> for ($spn_pno=1; $spn_pno<=$max_page; $spn_pno++) {<br /> if ($spn_pno == $paged) {<br /> echo '<li class="current"><strong>' . $spn_pno . '</strong></li><br /> ';<br /> } else {<br /> echo '<li><a href="' . get_permalink() . 'page/' . $spn_pno . '/">' . $spn_pno . '</a></li><br /> ';<br /> }<br /> }<br /> }

そうそう、スタイルシート（テーマ内のstyle.css）には下記のようにすると、見栄えが良くなります。

ul#page_navi {text-align: center;}
ul#page_navi li {display: inline; list-style: none;}
ul#page_navi li.current strong {color: #C00; font-weight: bold; display: inline-block; padding: 3px 7px; background: #fee; border: solid 1px #fcc;}
ul#page_navi li a {color: #333; padding: 3px 7px; background: #eee; display: inline-block; border: solid 1px #999; text-decoration: none;}
ul#page_navi li a:hover {color: #C00;}
ul#page_navi li.meta-nav {}/* ～前後ページへのリンクの装飾用～ */


最後に、ページナビを配置したい所（page.phpやcategory.phpなど）に次のPHP文を入れるだけ。
<?php <br /> $wp_query->max_num_pages = $my_query->max_num_pages;<br /> if ( $wp_query->max_num_pages > 1 ) : ?><br /> <ul id="page_navi"><br /> <li class="meta-nav"><?php previous_posts_link( __( '<< 前の10件', 'twentyten' ) ); ?></li><br /> <?php show_page_navi(); ?><br /> <li class="meta-nav"><?php next_posts_link( __( '次の10件 >>', 'twentyten' ) ); ?></li><br /> </ul><br /> <?php endif; ?>

※コード中の【<br />】は、ブログの仕様で入ってくるため、利用の際は一斉置換して消し去ってからご利用ください。

ポイントは、ループ処理で最大ページ数に達するまでリンクを吐き出し続けることでしょう。
但し、ページ数が20を超えると次の段にまで達するかも・・・。
そのへんの処理は【function show_page_navi()】を改造して、現在のページを10の倍数ごとに判定させて、ループ処理の中身の数字を括らせて出す、というふうにすればよいはずです。
現在のページが5だったら1～10を、13だったら11～20を、という処理で対応できるからです。（商の値で判定可能）

現在のページは【$paged】ですから、PHPの基礎が解る方ならできるはず。
注意すべきは、最大ページ数を意味する【$max_page】の処理。
これも10で割った商を求めておいて、条件式で分岐処理すれば大丈夫です。
7ページしかないのに架空の【8ページ】を開いてしまっても、人生終わることはありませんが、改造の際は【$max_page】までとする処理判定をお忘れなく。

まあ、ご要望があれば追記で記載します。
ではこのへんで。
>>完成品