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

> Entry >freo>freo講座>初心者の為のfreoサイト運営講座> 【メニュー編(05)】ページメニュー表示プラグインの利用

【freo】【freo講座】【初心者の為のfreoサイト運営講座】【メニュー編(05)】ページメニュー表示プラグインの利用

3.ページメニュー表示プラグインを使う。

ページメニュー表示プラグインを利用したメニュー作成方法です。
まずは、ページメニュー表示プラグインの解説から始めたいと思います。

ページメニュー表示プラグインとは

ページメニュー表示プラグインは、freoにデフォルトで搭載されているプラグインです。
ページ機能を使ったページ群のうち、もっとも上の階層にあるページを一覧表示します。
ページのタイトル、URLはもちろん、本文、ファイル、オプションの情報など、ページに関する様々な情報を取得できます。
ページは、ページの並び順で表示されます。
ページメニュー表示プラグインで表示できるものは、ページ機能を使って作成されたページのうち、一番上の親階層にあるページの情報のみです。
ページを一覧表示するプラグインなので、ページ以外の画面、たとえばエントリー画面やプロフィール画面、メール送信プラグインなどの情報は取得することができません。
しかし、ページメニュー表示プラグインのテンプレートに編集を加えれば、エントリー画面など、ページ機能を使ったページ以外の画面へのリンクを貼ることができます。

実際に動かした方がわかりやすいと思うので、早速ページメニュー表示プラグインを使ってみます。

ページメニュー表示プラグインをつかってページ一覧を表示する
  1. [freo/templates/utility.html]をエディタで開き、64行目~70行目をコピーする。
    (<ul><!--{foreach from=$plugin_page_menus~~/foreach}--></ul>の部分)
  2. 【実践編(04)】メニュー作成準備・メニュー登録プラグインの利用の「0.メニュー用のテンプレートを作る」で作ったmenu.htmlの<div id="menu">~</div>の間に、コピーしたソースを貼り付ける。
  3. menu.htmlを上書きしてアップロードする。

以上の手順で、親ページ一覧を表示することができます。

  • ABOUT
  • NOVEL
  • GALLERY
  • INFO

のように表示されていれば成功です。
ページ管理画面上の、ページの並び順を変更すれば、ページメニュー表示プラグインを使ってページを表示したときも、並び順が変更になると思います。

ページメニュー表示プラグインを利用しているのは、<!--{foreach from=$plugin_page_menus|…}-->~~<!--{/foreach}-->の部分なので、例えば、

<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}-->
    <li><a href="{$freo.core.https_file}/bookmark">BOOKMARK</a></li>
    <li><a href="{$freo.core.https_file}/contact">CONTACT</a></li>
    <li><a href="{$freo.core.https_file}/clap">CLAP</a></li>
    <li><a href="{$freo.core.https_file}">TOP</a></li>
</ul>

などのように記入すれば、ページ一覧の下に、手動で外の画面へのリンクを入れることができます。

ページの一覧に別のリンクを割り込ませたい場合

上記の通り、ページメニュー表示プラグインを利用すると、親ページがページの並び順で表示されますが、その他のリンク(エントリーやブックマーク等)を割り込ませたい場合の書き方について説明します。

単純にページメニュー表示プラグインを利用すると、

 

  • ABOUT
  • NOVEL
  • GALLERY
  • INFO

となりますが、これを

  • ABOUT
  • DIARY   ←これを追加したい
  • NOVEL
  • GALLERY
  • INFO

に変更するときのテンプレートの書き方を御紹介します。

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

このようにすると、「ABOUT」ページの下に「DIARY」へのリンクを追加できます。
ABOUTを表示する時に、その下にDIARYへのリンクが表示されるように条件式を追加しています。
解説すると以下のとおりです。

<ul>
    <!--{$plugin_page_menus配列をplugin_page_menuとして1回ずつ繰り返して表示するここから}-->
        <!--{もし $plugin_page_menuのidが"about"だったらここから}-->
            <li><a href="{$freo.core.http_file}/page/{$plugin_page_menu.id}">{$plugin_page_menu.title}</a></li>
            <li><a href="{$freo.core.http_file}/entry">DIARY</a></li>
        <!--{そうじゃなければ}-->
            <li><a href="{$freo.core.http_file}/page/{$plugin_page_menu.id}">{$plugin_page_menu.title}</a></li>
        <!--{もし $plugin_page_menuのidが"about"だったらここまで}-->
    <!--{$plugin_page_menus配列に値が入っていなければ}-->
        <li>ページが登録されていません。</li>
    <!--{$plugin_page_menus配列の繰り返しここまで}-->
</ul>

また、同じ結果を得るために、以下のような書き方も利用できます。

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

上記の場合は、NOVELを表示する時に、その上にDIARYへのリンクを表示する条件式を追加しています。

ページメニュー表示プラグインでオプションの情報を取得する

下記のリンクで、ページメニュー表示プラグインでオプションを使用する方法や具体例を紹介しています。
宜しければ参考にしてみてください。

32877:ページメニュー表示プラグインでオプションの情報を取得する方法
32877:オプションの使用例~新着マークを表示する~

ページ移動

関連記事

ユーティリティ

Twitter

記事検索

ページ上部へ