【freo】【freoTips】【プラグイン系TIPS】ページ移動表示調整プラグインを使ってエントリーのページ移動をかっこよくする方法

エントリーのページ移動をかっこよくしてみる

エントリーページ下部に表示されるページ移動をかっこよくしてみます。
こんな感じになります↓

※画像サンプルです。実際は動きません。

特徴

• 「<<前のページ」で前のページへ、「次のページ>>」で次のページへ移動できます。
• 最初のページと最後のページが表示されます。
• ページの表示件数をプラグインで設定できます。

ページ移動表示調整プラグインとは

freoTIPSを公開している「龍の棲む場所」さんにおいて配布していらっしゃる、エントリーのページ移動の表示件数を調整するためのプラグインです。

上記サイトでページ移動表示調整プラグインをDLし、導入してください。

ページ移動表示調整プラグインのテンプレートを編集する。

1. 導入したページ移動表示調整プラグインのテンプレートを編集します。
   [freo/templates/internals/default/default.html]（entry用テンプレートを用意している場合は[freo/templates/internals/entry/default.html]）のページ移動部分を下記のように編集します。

   <div id ="entry_pagelink">
       <h2>エントリーページ移動</h2>
       <ul class ="entry_pagelink">
           <li><!--{if $freo.query.page > 1}--><a href ="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$freo.query.page-1}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&amp;user={$smarty.get.user}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">＜＜ 前のページ</a><!--{else}-->＜＜ 前のページ<!--{/if}--></li>
       <!--{if $link_direct == 0 || $entry_page <= $link_direct}-->
           <!--{section name='loop' loop=$entry_page}-->
               <li><!--{if $smarty.section.loop.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$smarty.section.loop.iteration}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&amp;user={$smarty.get.user}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">{$smarty.section.loop.iteration}</a><!--{else}-->{$smarty.section.loop.iteration}<!--{/if}--></li>
           <!--{/section}-->
       <!--{else}-->
           <!--{if $freo.query.page - $link_direct_nav > 1}-->
               <li><a href ="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page=1{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&amp;user={$smarty.get.user}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">1</a>…</li>
           <!--{/if}-->
           <!--{section name='loop' loop=$entry_page start=$loop_start max=$loop_end}-->
               <li>
               <!--{if $smarty.section.loop.index != $freo.query.page}--><a href ="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$smarty.section.loop.index}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&amp;user={$smarty.get.user}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">{$smarty.section.loop.index}</a><!--{else}-->{$smarty.section.loop.index}<!--{/if}-->
               </li>
           <!--{/section}-->
           <!--{if $freo.query.page >= $entry_page - $link_direct_nav || $link_direct == 0 && $freo.query.page != $entry_page}-->
               <li><!--{if $freo.query.page != $entry_page}--><a href="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$entry_page}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&amp;user={$smarty.get.user}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">{$entry_page}</a><!--{else}-->{$entry_page}<!--{/if}--></li>
           <!--{elseif $freo.query.page == $entry_page}-->
               <li>{$entry_page}</li>
           <!--{/if}-->
           <!--{if $entry_page - $link_direct_nav > $freo.query.page}-->
               <li>…<a href ="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$entry_page}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&amp;user={$smarty.get.user}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">{$entry_page}</a></li>
           <!--{/if}-->
       <!--{/if}-->
       <li><!--{if $entry_page > $freo.query.page}--><a href ="{$freo.core.http_file}/{if $freo.query.category}category/{$freo.query.category}{else}entry{/if}?page={$freo.query.page+1}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.user}&amp;user={$smarty.get.user}{/if}{if $smarty.get.tag}&amp;tag={$smarty.get.tag|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.date}&amp;date={$smarty.get.date}{/if}">次のページ ＞＞</a><!--{else}-->次のページ ＞＞<!--{/if}--></li>
       </ul>
   </div>
   

2. cssを設定します。
   [freo/css/default.css]に下記のように加筆します。

   /* -------------------------------------------------------------------------------- */
   /*      div#entry_page ul.entry_page
   */
   /*              エントリーページ移動表示部分
   */
   /* -------------------------------------------------------------------------------- */
   div#entry_pagelink{clear:both; margin:0}
   div#entry_pagelink ul.entry_pagelink {
       text-align:center;
       margin: 20px 0;
   }
   div#entry_pagelink ul.entry_pagelink li {
       display:inline;
       list-style: none;
       margin-right: 10px;
   }
   

3. 編集したテンプレート及びCSSをアップロードする。

お願い

編集したテンプレートで期待通りの動きにならなかったら教えてください。
当TIPSについての配布元（「龍の棲む場所」さん）へのお問い合わせはなさらないようにお願い致します。