メニュー

Home >freoTIPS>プラグイン系TIPS> freoでちょっとかっこいいページネーション~ニュースプラグイン

【freoTIPS】【プラグイン系TIPS】freoでちょっとかっこいいページネーション~ニュースプラグイン

2014/03/29 14:29|タグ:ニュースプラグインページネーショングッジョブ表示 27

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

サンプル

pagenation.jpg

(画像サンプルです)

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

導入方法

  1. [freo/templates/plugins/news/default.html]の72~86行目を以下のように変更します。
    <div id="page">
        <ul class="order">
            <li><!--{if $freo.query.page > 1}--><a href="{$freo.core.http_file}/news?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='news_pages' loop=$plugin_news_page}-->
                <!--{if $smarty.section.news_pages.first and $plugin_news_page > 1}-->
                <li {if $smarty.section.news_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.news_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/news?page={$smarty.section.news_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.news_pages.iteration}</a><!--{else}-->{$smarty.section.news_pages.iteration}<!--{/if}--></li>
                <li class="blank">…</li>
                <!--{/if}-->
                <!--{if $smarty.section.news_pages.iteration < $plugin_news_page and $smarty.section.news_pages.iteration > 1 and ($smarty.section.news_pages.iteration == $freo.query.page-1 or $smarty.section.news_pages.iteration == $freo.query.page or $smarty.section.news_pages.iteration == $freo.query.page+1 or $smarty.section.news_pages.iteration == $freo.query.page+2 or $smarty.section.news_pages.iteration == $freo.query.page-2)}-->
                <li {if $smarty.section.news_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if}><!--{if $smarty.section.news_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/news?page={$smarty.section.news_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.news_pages.iteration}</a><!--{else}-->{$smarty.section.news_pages.iteration}<!--{/if}--></li>
            <!--{/if}-->
                <!--{if $smarty.section.news_pages.last and $plugin_news_page > 1}-->
                <li class="blank">…</li>
                <li {if $smarty.section.news_pages.iteration == $freo.query.page}class="current"{else}class="no"{/if} id="last"><!--{if $smarty.section.news_pages.iteration != $freo.query.page}--><a href="{$freo.core.http_file}/news?page={$smarty.section.news_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.news_pages.iteration}</a><!--{else}-->{$smarty.section.news_pages.iteration}<!--{/if}--></li>
                <!--{/if}-->
            <!--{/section}-->
            <li><!--{if $plugin_news_page > $freo.query.page}--><a href="{$freo.core.http_file}/news?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}

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

ページ移動

関連エントリー

コメント

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

コメント登録

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

ユーティリティ

新着コメント

Twitter

サイト内検索

ページ上部へ