• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >freo>freoTips>プラグイン系TIPS> freoでちょっとかっこいいページネーション~バナー付きリンク表示プラグイン

【freo】【freoTips】【プラグイン系TIPS】freoでちょっとかっこいいページネーション~バナー付きリンク表示プラグイン

同人イベントプラグインでのページネーションを変更します。

サンプル

pagenation.jpg

(画像サンプルです)

こんな感じのデザインに変更してみます。

導入方法

  1. [freo/templates/plugins/link/default.html]の79~93行目を以下のように変更します。
    <div id="page">
        <ul class="order">
            <li><!--{if $freo.query.page > 1}--><a href="{$freo.core.http_file}/link?page={$freo.query.page-1}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.category_id}&amp;category_id={$smarty.get.category_id|smarty:nodefaults|escape:'url'}{/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>
            <!--{section name='link_pages' loop=$plugin_link_page}-->
                <!--{if $smarty.section.link_pages.first and $plugin_link_page > 1}-->
                <li {if $smarty.section.link_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.link_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/link?page={$smarty.section.link_pages.iteration}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/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.link_pages.iteration}</a><!--{else}-->{$smarty.section.link_pages.iteration}<!--{/if}--></li>
                <li class="blank">…</li>
                <!--{/if}-->
                <!--{if $smarty.section.link_pages.iteration < $plugin_link_page and $smarty.section.link_pages.iteration > 1 and ($smarty.section.link_pages.iteration == $freo.query.page-1 or $smarty.section.link_pages.iteration == $freo.query.page or $smarty.section.link_pages.iteration == $freo.query.page+1 or $smarty.section.link_pages.iteration == $freo.query.page+2 or $smarty.section.link_pages.iteration == $freo.query.page-2)}-->
                <li {if $smarty.section.link_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.link_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/link?page={$smarty.section.link_pages.iteration}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/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.link_pages.iteration}</a><!--{else}-->{$smarty.section.link_pages.iteration}<!--{/if}--></li>
            <!--{/if}-->
                <!--{if $smarty.section.link_pages.last and $plugin_link_page > 1}-->
                <li class="blank">…</li>
                <li {if $smarty.section.link_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if} id="last"><!--{if $smarty.section.link_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/link?page={$smarty.section.link_pages.iteration}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/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.link_pages.iteration}</a><!--{else}-->{$smarty.section.link_pages.iteration}<!--{/if}--></li>
                <!--{/if}-->
            <!--{/section}-->
            <li><!--{if $plugin_link_page > $freo.query.page}--><a href="{$freo.core.http_file}/link?page={$freo.query.page+1}{if $smarty.get.category_id}&amp;category_id={$smarty.get.category_id|smarty:nodefaults|escape:'url'}{/if}{if $smarty.get.word}&amp;word={$smarty.get.word|smarty:nodefaults|escape:'url'}{/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. [freo/templates/plugins/link/default.html]をアップデートします。

おまけのCSS

[freo/css/default.css]のページ移動部分を変更してみます。

/* ################################################################################ */
/*      0:ページ移動
*/
/* ################################################################################ */
/* ================================================================================ */
/*      0-1:ページ移動ブロック
*/
/* ================================================================================ */
div#page{clear:both;padding:50px 0 0;margin:0}
div#page h2 {display: none;}
/* ================================================================================ */
/*      0-1:ページ移動リスト
*/
/* ================================================================================ */
ul.order {margin: 20px 0;text-align:center;}
ul.order li {display: inline;list-style: none;margin-right: 10px;}
/* ================================================================================ */
/*      0-1:表示中ページクラス
*/
/* ================================================================================ */
ul.order li.current {border:1px solid #000000;color:#000000;padding:0 5px;}
/* ================================================================================ */
/*      0-1:ページリンククラス
*/
/* ================================================================================ */
ul.order li.no a{border:1px solid #000000;background-color:#000000;color:#000000;padding:0 5px;}
ul.order li.no a:link,ul.order li.no a:visited{color:#ffffff;}
ul.order li.no a:hover,ul.order li.no a:active{text-decoration:none;background-color:#666666}

上記のように変更すると、サンプルのようなデザインになります。

ページ移動

関連記事

ページ上部へ