xoops123さあ、いっしょに XOOPS はじめましょう！

picoにページネーションと関連記事一覧を追加する

※ ダウンロードしたファイルの拡張子が無い場合があります。その場合は、ダウンロードしたファイル名に拡張子「.zip」を追加してください。

静的ページ作成に便利なpicoですが、各記事を表示している場合、前後記事とカテゴリトップに戻るリンクが表示されるものの、そのカテゴリにある記事一覧の表示がなく、全体像が把握しにくいですね。

ということで、ブログのようなページネーションとか関連記事一覧表示機能を追加してみましょう。

picoのオリジナル状態

記事の下に「次の記事」へのリンクがありますが、全体像は掴みにくいですね。

もちろん、サイドカラムなどに「コンテンツメニューブロック」を表示させると良いのですが、他のサイトで良く見かけるブログなどのように、その記事ページに関連する記事一覧が出ていると結構便利なこともあるようです。

ということで、カスタマイズしてみました。

ブログなどでよく見られるような、記事の上に「次の記事」へのリンクを設けました。
記事の下には、全記事へのリンクを示すページネーションを追加して、さらにその下に関連記事一覧を表示するようにしています。また、関連記事一覧については、５件ずつ表示、タブで切り替えできるようにしてみました。（jQuery利用）

さらに、ページネーションについては、マウスオーバーすると記事の題名をポップアップするようにしているので、結構、把握しやすいのではないかと思います。

カスタマイズ方法

Altsysでカスタマイズ用のテンプレートを作成のうえ、picoのテンプレート編集を行います。
ダウンロードしたファイルを解凍して、「pico_main_viewcontent.html」と「pico_main.css」をそれぞれ対応するテンプレートファイルに上書きしてください。

Altsysによるテンプレート編集方法はこちらをご覧ください。

xugj_blockをsmartyプラグインディレクトリにコピー（FTPにて）

このカスタマイズでは、xugj_blockプラグインを利用していますので、解凍したファイル「function.xugj_block.php」をプラグインディレクトリにFTPソフトなどでコピー（アップロード）してください。
※ XoopsXではデフォルトでインストール済みのようですので、この作業は不要です。

xoops_trust_path/libs/smartyplugins または
xoops_trust_path/libs/smarty/plugins

注意事項

また、当サイトで公開している「ページトップに戻るボタンを付加するプリロード」をお使いの場合は、jQueryによる機能のバッティングがありますので、次の箇所（38行目付近）をコメントアウトしてご利用願います。

/** この行を追加
  jQuery("a[href^=#]").click(function(){
    var Target = $(this.hash);
    var TargetOffset = $(Target).offset().top - 40;
    jQuery("html,body").animate({
      scrollTop: TargetOffset
      }, 1000);
      return false;
  });
この行を追加  */