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

> Entry >freo>freoTips>テンプレート系TIPS> ページメニュー表示プラグインで現在表示しているページにclassを付与する方法

【freo】【freoTips】【テンプレート系TIPS】ページメニュー表示プラグインで現在表示しているページにclassを付与する方法

freoにはページメニュー表示プラグインがデフォルトで備わっています。
ページメニュー表示プラグインは、freoのページ機能を使って一番上の階層に登録されたページを表示するプラグインです。

ページメニュー表示プラグインが利用されている箇所は、デフォルト状態(なにも加工していない状態)のテンプレートでいうと、
[freo/templates/utility.html]の61~72行目

        <div class="utility">
            <h3>ページ</h3>
            <div class="content">
                <ul>
                    <!--{foreach from=$plugin_page_menus|smarty:nodefaults item='plugin_page_menu'}-->
                    <li><a href="{$freo.core.http_file}/page/{$plugin_page_menu.id}">{$plugin_page_menu.title}</a></li>
                    <!--{foreachelse}-->
                    <li>ページが登録されていません。</li>
                    <!--{/foreach}-->
                </ul>
            </div>
        </div>

の部分です。

上記を解説すると

        <div class="utility">
            <h3>ページ</h3>
            <div class="content">
                <ul>
                    <!--{第一階層のページを$plugin_page_menuとして繰り返して表示するここから}-->
                    <li><a href="{$freo.core.http_file}/page/{第一階層のページID}">{第一階層のページタイトル}</a></li>
                    <!--{第一階層のページがなければ}-->
                    <li>ページが登録されていません。</li>
                    <!--{第一階層のページを$plugin_page_menuとして繰り返して表示するここまで}-->
                </ul>
            </div>
        </div>

以上のように、第一階層のページのタイトルを第一階層のページのIDへリンクを貼って表示しています。

第一階層のページを表示している時、ページメニュー表示プラグインの該当ページ表示部分にクラスをつける方法は以下のとおりです。

サンプル

当サイトのページメニュー表示部分でも利用しています。
このページのフッター部分の「pages」のどれかをクリックしてみてください。

ページメニュー表示プラグインで現在表示しているページにclassを付与する方法

なお、現在表示しているのが第一階層のページの子ページであっても
(例えば、第一階層のページが「novel」であり、現在表示しているページが「novel/genre1」という子ページであっても)
親ページである第一階層のページにクラスが付与されるようになっています。
(ページIDが「novel」のページにクラスが付与されるようになっています。)

        <div class="utility">
            <h3>ページ</h3>
            <div class="content">
                <ul>
                    <!--{foreach from=$plugin_page_menus|smarty:nodefaults item='plugin_page_menu'}-->
                    <li><a href="{$freo.core.http_file}/page/{$plugin_page_menu.id}" {if strpos($smarty.server.REQUEST_URI,$plugin_page_menu.id)} class="current"{/if}>{$plugin_page_menu.title}</a></li>
                    <!--{foreachelse}-->
                    <li>ページが登録されていません。</li>
                    <!--{/foreach}-->
                </ul>
            </div>
        </div>

解説

        <div class="utility">
            <h3>ページ</h3>
            <div class="content">
                <ul>
                    <!--{第一階層のページを$plugin_page_menuとして繰り返して表示するここから}-->
                    <li><a href="{$freo.core.http_file}/page/{第一階層のページID}" {もし現在表示しているURLに第一階層のページIDが含まれたらここから} class="current"{もし現在表示しているURLに第一階層のページIDが含まれたらここまで}>{第一階層のページタイトル}</a></li>
                    <!--{第一階層のページがなければ}-->
                    <li>ページが登録されていません。</li>
                    <!--{第一階層のページを$plugin_page_menuとして繰り返して表示するここまで}-->
                </ul>
            </div>
        </div>

参考リンク:

10press:freo メモ 4:メニューリンクの現在のページに class 付け
SapphireForest:freoカスタマイズめも
※上記2件のサイト様を参考にさせて頂きました。
 尚、上記記事ではメニュー登録プラグインを利用した際にclassを付与する方法を紹介しています。

ページ移動

関連記事

ページ上部へ