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

> Entry >freo>freoTips>プラグイン系TIPS> freoでちょっとかっこいいページネーション~メディア表示プラグイン

【freo】【freoTips】【プラグイン系TIPS】freoでちょっとかっこいいページネーション~メディア表示プラグイン

メディア表示プラグインでのページネーションを変更します。

サンプル

pagenation.jpg

(画像サンプルです)

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

導入方法

  1. [freo/templates/plugins/media_list/default.html]の43~45行目を以下のように変更します。
    <div id="page">
        <h2>ページ移動</h2>
        <ul class="order">
            <li><!--{if $freo.query.page > 1}-->&lt;&lt;<a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$freo.query.page-1}">前のページ</a><!--{else}-->&lt;&lt;前のページ<!--{/if}--></li>
            <!--{section name='media_list_pages' loop=$media_list_page}-->
    
                <!--{if $smarty.section.media_list_pages.first and $media_list_page > 1}-->
                <li {if $smarty.section.media_list_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.media_list_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$smarty.section.media_list_pages.iteration}">{$smarty.section.media_list_pages.iteration}</a><!--{else}-->{$smarty.section.media_list_pages.iteration}<!--{/if}--></li>
                <li class="blank">…</li>
                <!--{/if}-->
                <!--{if $smarty.section.media_list_pages.iteration < $media_list_page and $smarty.section.media_list_pages.iteration > 1 and ($smarty.section.media_list_pages.iteration == $freo.query.page-1 or $smarty.section.media_list_pages.iteration == $freo.query.page or $smarty.section.media_list_pages.iteration == $freo.query.page+1 or $smarty.section.media_list_pages.iteration == $freo.query.page+2 or $smarty.section.media_list_pages.iteration == $freo.query.page-2)}-->
            <li {if $smarty.section.media_list_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.media_list_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$smarty.section.media_list_pages.iteration}">{$smarty.section.media_list_pages.iteration}</a><!--{else}-->{$smarty.section.media_list_pages.iteration}<!--{/if}--></li>
            <!--{/if}-->
                <!--{if $smarty.section.media_list_pages.last and $media_list_page > 1}-->
                <li class="blank">…</li>
                <li {if $smarty.section.media_list_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if} id="last"><!--{if $smarty.section.media_list_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$smarty.section.media_list_pages.iteration}">{$smarty.section.media_list_pages.iteration}</a><!--{else}-->{$smarty.section.media_list_pages.iteration}<!--{/if}--></li>
                <!--{/if}-->
            <!--{/section}-->
            <li><!--{if $media_list_page > $freo.query.page}--><a href="{$freo.core.http_file}/media_list?{if $smarty.get.directory}directory={$smarty.get.directory}&amp;{/if}{if $smarty.get.target}target={$smarty.get.target}&amp;{/if}page={$freo.query.page+1}">次のページ</a>&gt;&gt;<!--{else}-->次のページ&gt;&gt;<!--{/if}--></li>
        </ul>
    </div>
    
  2. [freo/templates/plugins/event/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}

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

ページ移動

関連記事

ユーティリティ

Twitter

記事検索

ページ上部へ