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

> Entry >freo>freo講座>初心者の為のfreoサイト運営講座> 【メニュー編(02)】サブメニューを作ってみる(前編)

【freo】【freo講座】【初心者の為のfreoサイト運営講座】【メニュー編(02)】サブメニューを作ってみる(前編)

メニューを作る方法として、前回4つの方法をご紹介しました。
それぞれの方法を、実践を交えながら解説しようと思います。
今回は、テンプレートに直接書く方法を利用したメニュー作成の解説です。
試しに、メインメニューとは別に、サブメニューを作ってみることにします。

サブメニューのすすめ

メインコンテンツではないけれど、使う可能性のあるサイト上の機能は、サブメニューとして分けておくと便利です。

サブメニューサンプル

※画像サンプルです。実際には動きません。

こんなやつです。
ユーザーのログイン状況によって使える機能と使えない機能があるので注意が必要です。
(例えば、各種登録・管理系のリンクには、非ログインユーザー及びゲストユーザーはアクセスできません。)

サブメニューにしておいたほうが便利そうな機能のログイン状態への対比表は以下のとおりです。

分類 機能名 ログインして
いない状態
閲覧者
(guest)
投稿者
(author)
管理者
(root)
スマホ対応 スマホ用表示への変更
連絡ツール系 メール※1
拍手※2
メッセージ※3
ユーザー管理系 ログイン × × ×
ログアウト ×
パスワード変更 ×
プロフィール ×
プロフィール編集 ×
ユーザー管理ページ × ×
ユーザー用ページ × × ×
管理ページ × ×
各種作成・管理系 エントリー登録 × ×
エントリー管理 × ×
ページ登録 × ×
ページ管理 × ×
このページ以下のページを表示 × ×
インフォメーション管理 × ×
メディア登録 × ×
メディア管理 × ×
コメント管理 × ×
トラックバック管理 × ×
拍手管理※2 × ×
メッセージ管理※3 × ×
ブックマーク登録※4 × ×
ブックマーク管理※4 × ×
32877オリジナル バナー付きリンク登録※5 × ×
バナー付きリンク管理※5 × ×
ニュース登録※6 × ×
ニュース管理※6 × ×
イベント登録※7 × ×
イベント管理※7 × ×

※1…メール送信プラグインが必要です。
※2…拍手送信プラグインが必要です。
※3…メッセージ登録プラグインが必要です。
※4…ブックマーク登録プラグインが必要です。
※5…バナー付きリンクプラグインが必要です。
※6…ニュースプラグインが必要です。
※7…イベント登録プラグインが必要です。

サブメニューの作り方

実際にサブメニューを作ってみます。
まずは、メニューを作る準備です。
[freo/templates/header.html]の36行目~46行目にデフォルトのメニューのソースが記載されていますので、これを参考にしながら編集してみます。

上記メニューのソースは↓のようになっています。

<div id="menu">
  <h2>メニュー</h2>
  <ul>
   <li><a href="{$freo.core.http_file}">トップページ</a></li>
   <li><a href="{$freo.core.https_file}/login">ログイン</a></li>
   <!--{if isset($smarty.session.freo.agent.type|smarty:nodefaults)}-->
   <li><a href="{$smarty.server.PHP_SELF}?freo%5Bagent%5D%5Btype%5D=iphone">iPhone版</a></li>
   <!--{/if}-->
  </ul>
 </div>

これはまさに、メニューをテンプレートに直接記述する方法で書かれています。
この部分をコピーして、エディタで新規ファイルを作成し、ペーストしてください。
サブメニュー用に編集する前に、作成した新しいファイルを保存しておきます。
文字コードは「UTF-8」、拡張子は「html」、保存先は[freo/templates]フォルダ(header.htmlと同じ場所)で、ファイル名は「submenu.html」として保存してください。
保存できたら、このメニューをサブメニュー用に変更します。

<div id="submenu">
  <h2>サブメニュー</h2>
  <ul>
   <li><a href="サブメニューのURL">サブメニューの名前</a></li>
  </ul>
 </div>

このようにしてみました。
ブロックのIDを「submenu」に変更し、タイトルもサブメニューにしました。
メニューをリストで並べる形式はそのまま残しています。

<ul>~</ul>内に、<li>~</li>として、組み入れたいサブメニューをどんどん追加していきます。

ページ移動

関連記事

ページ上部へ