メニュー

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

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

2013/05/21 14:20|タグ:ページ移動表示調整プラグインエントリーページネーショングッジョブ表示 48

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

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

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

特徴

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

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

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についての配布元(「龍の棲む場所」さん)へのお問い合わせはなさらないようにお願い致します。

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

登録フォーム
名前
メールアドレス
URL
コメント
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

Twitter

サイト内検索

ページ上部へ