MS Access Tips/Sample and VBA and Blog customize etc...

カテゴリ内移動と全記事移動を自動で切り替えるページナビゲーション

タイトル画像

最近、FC2ブログのテンプレート変数にカテゴリ内での次の記事と前の記事へのリンク変数が追加されました。以前から要望の多かったもので、やっと実装されたのはいいのですが、全記事の前後リンクとカテゴリ前後記事リンクを2つ並べるのではなく、状況に応じてどちらかのみ表示されるといいと思いませんか。

難易度:

全記事前後リンクとカテゴリ前後記事リンクの表示

ブログ同じカテゴリ内に存在する次の記事と前の記事へのリンク変数を追加しました!

2015/07/15付で上記の発表がされました。上記のページ内のサンプル画像でも上下に2つのページナビゲーションが並んでいます。

とりあえず公式テンプレートの「basic_white」に表示させてみます。

「basic_white」テンプレートのHTMLで「 <div class="page_navi"> 」を検索して、
「 <div class="page_navi"> 」から、「</div><!--/page_navi-->」までのブロックに下記のようにコードを追加します。

もとのページナビゲーションをコピーして、リンクをカテゴリ内リンク変数に変更しただけです。ただし、カテゴリ名表示と真ん中のリンクをカテゴリ一覧リンクにするために使用する変数が<!--topentry--> ~ <!--/topentry-->内でしか有効でないのでそれで囲んでいます。

結果が下記です。

全記事前後リンクとカテゴリ前後記事リンクのサンプル

凝ったデザインにしているのが災いして、ちょっとしつこいですよね。全記事を移動したいときは全記事移動ナビゲーションのみ表示、カテゴリ内で移動したいときは、カテゴリ内移動ナピゲーションのみ表示と切り替えられられたらいいと思いませんか。

カテゴリ内移動したい状況とは

では、カテゴリ内移動したい状況とは、どんな時でしょうか。下記の条件の時は、カテゴリ内移動ナピゲーションを表示、それ以外は全記事移動ナピゲーションを表示とすることにしました。

  • カテゴリ一覧ページから、記事を選択してページ遷移してきた時。
  • カテゴリ内移動ナピゲーションのリンクをクリックしてページ遷移してきた時。

これだと、特定のカテゴリの記事を連続して読みたいという時は、カテゴリ一覧ページから見たい記事を選択して移動します。これで、カテゴリない移動モードに移行します。記事を読み終わったら、カテゴリ内移動ナピゲーションが表示されていますので、カテゴリ内を移動できます。

カテゴリ内移動モードと通常移動モードの切り替えのロジック

この仕様のページナピゲーションは実は、以前のテンプレートの時に実装していたのですが、その時は、カテゴリ内前後記事リンクの変数はFC2ブログに実装されていなかったので、javascriptを駆使して無理やり前後記事のリンクを取得して実現していました。

今回は前後のリンクは変数で取得できますので、表示/非表示をスクリプトで切り替えるだけですのでシンプルなコードで実現できます。

カテゴリ内移動モードと通常移動モードの切り替えのロジックは、document.referrer で前ページのURLを取得してそこに "category-カテゴリ番号" が含まれていればカテゴリ内移動モードに切り換えます。また、既にカテゴリ移動モードに移行しているかどうかは、、カテゴリ内前後記事へのリンクURLの最後に"?cat"+カテゴリNo というサーチ情報を付加して判断してます。

テンプレートのHTML

ページナビのdiv要素<div class="page_navi">にid属性を付加します。
全記事移動にはid="moveall"、カテゴリ内移動にはid="movecate"を。

カテゴリ内移動のリンクの最後にサーチ情報 ?cat=<%topentry_category_no> を付加します。

真ん中のホームアイコンのリンクは、カテゴリ内記事一覧へのリンクにします。

最後に、表示/非表示を切り替える関数のスクリプトを記述します。引数で、カテゴリ番号を渡します。

スクリプト

下記のスクリプトコードをheadセクション内(</head>の前)に記述します。

コードを見れば分かると思いますが、jQueyを使用していますので、自分のプログに設置する場合は、jQueryを導入しておく必要があります。「basic_white」テンプレートには最初から導入済みです。

前ページのURL(document.referrer)に"category-##.html"または"?cat=##"が含まれているかを正規表現でチェックします。
また、現ページのサーチ情報(location.search)が "?cat=##" かどうかチェックします。
どちらかが合致すれば、カテゴリー移動モードと判断して、id属性 "moveall" のページナビゲーション要素を非表示にします。そうでない場合は、id属性が "movecate" の要素を非表示にします。

これで、全記事移動モードとカテゴリ移動モードが切り替わりそれに対応したページナビゲーションが表示されます。

当ブログのスクリプト

親子カテゴリを設定している場合、カテゴリ前後記事リンク変数は子カテゴリのリンク先しか返さないので、親カテゴリーからページ遷移した場合は、全記事移動モードとなります。

当ブログでは、カテゴリ前後記事リンク変数を使わずに、下記のページの方法を採用しています。

カテゴリ内前後記事移動スクリプト - hatena chips

ページナビゲーションのcssデザインは、下記の記事をご参考に。

次ページ、前ページへのリンクをCSSデザインしてみた - hatena chips

当プログの現状のキャプチャ画像

http://***************/blog-entry-###.htmlでページ遷移した時
(全記事移動モード)

全記事移動モードのページナビゲーション

http://***************/blog-entry-###.html?cat=## でページ遷移した場合
あるいは、 http://***************/blog-category-##.html からページ遷移してきた場合
(カテゴリ内移動モード)
カテゴリ内移動モードのページナビゲーション

真ん中のアイコンは、Font Awesome の フォルダーアイコンに変更しています。

まとめ

異なるカテゴリの記事が混在しているブログだと、興味のあるカテゴリのみまとめて読みたいというようなニーズは結構あるのではないでしょうか。そのようなニーズに応えられる機能だと思います。

せっかく要望により新しく実装された機能ですので、上手に利用したいですね。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/476-4edb8850
該当の記事は見つかりませんでした。