--
--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
11
21

ページ送りを設置しました
(FC2ブログにsimplepagination.js)

spthum.png
ページ送り、ページナビ、ページネーション、ページャー等色々な呼び方をされているのを見かけますが(厳密には違うのかもしれません)、ページを移動するための機能をsimplePagination.jsを使って設置してみました。
simplePagination.js

simplepagenation

simplepagenation.jsは上記のページで公開されているjqueryプラグインです。

私はテンプレートをFC2公式のbasic_whiteをカスタマイズして使用しています。
basic_whiteはデフォルトではページ移動は、前のページ、ホーム、次のページしかなく、ページ数が増えてくると少し不便になるかな?と思っていたところ、このプラグインを見つけてデザインがかっこよかったので設置してみようと思いました。

本当はデザインもサイトに合わせて自分でするといいんでしょうが、なかなか難しいですしね…このプラグインはシンプルでどのサイトにも合いそうなテーマが3つ用意されていてGood!

FC2ブログに設置


※まだ設置したばかりでブログも開設したばかりで記事が少なかったり、ちゃんと機能しているか十分に確認できていない部分があります。なにかお気づきの点がありましたらコメント等で教えていただけると嬉しいです。

必要なファイルの設置


上記の公式サイトからファイルをダウンロード(Download項のhere

zipファイルを展開した中で使うファイルは、
「jquerysimplePagination.js」と「simplePagination.css」の2つですが、
FC2ブログに合わせるために「jquerysimplePagination.js」を1箇所変更しました。
ワードパッドなどで開いて、hrefで検索をして3つ目の
$link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');

この行の(pageIndex + 1) の+ 1部分を削除。
おそらくこの部分はページ番号になっていて、1ページ目のページ番号を1にしていると思うのですが、FC2ブログは1ページ目にあたるページ番号は0なので削除してみました。

「simplePagination.css」と変更した「jquerysimplePagination.js」をファイルアップロードからFC2ブログにアップロード。

テンプレートのhtml head内に
<script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>
<link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>

を記述しました。
jquery本体をまだ設置していない方は、
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

も一番上に追加してください。
path_toには自分がアップロードした場所が入ります。FC2ブログ管理画面ファイル管理のファイル一覧で確認できますね。

オプションの記述&設置


FC2ブログの各ページ(カテゴリーページ、タグページ、etc...)に対応させるために以下をhead内先ほどの記述の下に記述
<script type="text/javascript">
$(function() {
$('#pagenation').pagination ({
displayedPages:4,
pages:<%total_pages>,
cssStyle: 'light-theme',
hrefTextPrefix: 'page-',
hrefTextSuffix: '.html',
<!--category_area-->
hrefTextPrefix: 'blog-category-<%cno>-',
hrefTextSuffix: '.html',
<!--/category_area-->
<!--tag_area-->
hrefTextPrefix: '?tag=<%tag_word>&page=',
hrefTextSuffix: '',
<!--/tag_area-->
<!--date_area-->
hrefTextPrefix: 'blog-date-<%now_year><%now_month>-',
hrefTextSuffix: '.html',
<!--/date_area-->
<!--search_area-->
hrefTextPrefix: '?q=<%search_word>&page=',
hrefTextSuffix: '',
<!--/search_area-->
currentPage:<%current_page_num>
});
});
</script>


そしてhtmlの設置したい部分に以下を記述
<!--not_permanent_area-->
<div id="pagenation"></div>
<!--/not_permanent_area-->


basic_whiteに設置する場合の例

私の場合、設置場所はhtmlで<!--/trackback_area-->の後ろです。
この部分には個別ページ以外用のページナビがあるのでこれを削除します。

<!--not_permanent_area-->
<div class="page_navi">
<!--prevpage--><a href="<%prevpage_url>" title="<%template_prevpage>" class="prev prevpage"><%template_prevpage></a><!--/prevpage-->
<a href="<%url>" title="<%template_home>" class="home"><%template_home></a>
<!--nextpage--><a href="<%nextpage_url>" title="<%template_nextpage>" class="next nextpage"><%template_nextpage></a><!--/nextpage-->
</div><!--/page_navi-->
<!--/not_permanent_area-->

↑の部分を削除

コメント

コメントの投稿

非公開コメント

トラックバック


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。