※ ダウンロードしたファイルの拡張子が無い場合があります。その場合は、ダウンロードしたファイル名に拡張子「.zip」を追加してください。
静的ページ作成に便利なpicoですが、各記事を表示している場合、前後記事とカテゴリトップに戻るリンクが表示されるものの、そのカテゴリにある記事一覧の表示がなく、全体像が把握しにくいですね。
ということで、ブログのようなページネーションとか関連記事一覧表示機能を追加してみましょう。
picoのオリジナル状態
記事の下に「次の記事」へのリンクがありますが、全体像は掴みにくいですね。
もちろん、サイドカラムなどに「コンテンツメニューブロック」を表示させると良いのですが、他のサイトで良く見かけるブログなどのように、その記事ページに関連する記事一覧が出ていると結構便利なこともあるようです。
ということで、カスタマイズしてみました。
ブログなどでよく見られるような、記事の上に「次の記事」へのリンクを設けました。
記事の下には、全記事へのリンクを示すページネーションを追加して、さらにその下に関連記事一覧を表示するようにしています。また、関連記事一覧については、5件ずつ表示、タブで切り替えできるようにしてみました。(jQuery利用)
さらに、ページネーションについては、マウスオーバーすると記事の題名をポップアップするようにしているので、結構、把握しやすいのではないかと思います。
Altsysでカスタマイズ用のテンプレートを作成のうえ、picoのテンプレート編集を行います。
ダウンロードしたファイルを解凍して、「pico_main_viewcontent.html」と「pico_main.css」をそれぞれ対応するテンプレートファイルに上書きしてください。
このカスタマイズでは、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; }); この行を追加 */
<html>
<html lang="<{$xoops_langcode}>" prefix="og: http://ogp.me/ns#">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" version="XHTML+RDFa 1.0" xml:lang="<{$xoops_langcode}>" dir="ltr" xmlns:fb="https://www.facebook.com/2008/fbml">
<{include file="`$smarty.const.XOOPS_ROOT_PATH`/common/ogp/meta_add.html"}>
<{$xoops_pagetitle}> と <{$xoops_meta_keywords}> と <{$xoops_meta_description}>
<{elseif $xoops_dirname == "bulletin"}>
<{if substr($xoops_requesturi,-9) == '/index.php' or substr($xoops_requesturi,-1) == '/'}>
ここはお知らせのトップページです。||ここはお知らせのキーワード||ここにはお知らせの説明を書きましょう
<{else}><{* bulletinは、トップページ以外は本文がdescriptionに挿入される *}>
<{$xoops_pagetitle}>||<{$xoops_meta_keywords}>||<{$xoops_meta_description}>
<{/if}>