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

> Entry >freo>freo講座>初心者の為のfreoサイト運営講座> 【メニュー編(04)】メニュー作成準備・メニュー登録プラグインの利用

【freo】【freo講座】【初心者の為のfreoサイト運営講座】【メニュー編(04)】メニュー作成準備・メニュー登録プラグインの利用

実際にメニューを作る前に、サイトにどんなコンテンツがあって、どのコンテンツをメニューにするか、書き出してみます。
また、これらのコンテンツがfreoのどの機能を使って構築されているかを考えます。

今回は二次創作サイト(サークル情報有)の場合を想定してみます。

タイトル 内容 使用する機能 freo/index.php以下のURL
ABOUT サイトの紹介 ページ機能(ページID:about) /page/about
DIARY 日記 エントリー一覧画面 /entry
NOVEL 小説作品一覧 ページ機能(ページID:novel) /page/novel
GALLERY イラスト作品一覧 ページ機能(ページID:gallery) /page/gallery
INFORTATION サークル情報 ページ機能(ページID:info) /page/info
BOOKMARK サイト外へのリンク ブックマーク登録プラグイン /bookmark
CONTACT サイト管理者へのメールフォーム メール送信プラグイン /contact
CLAP 拍手 拍手送信プラグイン /clap
TOP サイトのトップページ サイトのトップページへのリンク  

メニューにしたいコンテンツは上記の通りです。
実際に、上記のようなメニューを作ってみたいと思います。

どんなメニューを作るかの原型が大体できたところで、そろそろメニューを作ってみます。

0.メニュー用のテンプレートを作る

まずは、メニューを作る準備をします。
メニューを作る方法としては、既に4つの方法があることを御紹介していますが、私は、どれを使うにせよ、メニュー部分のテンプレートを「menu.html」というテンプレートで別に作成し、includeして使用することをオススメします。
メニューやサブメニューをheader.html内に記述することにより、header.htmlがゴチャゴチャして編集しにくくなることを防ぐためです。

  1. [freo/templates/header.html]をエディタで開いてください。
  2. 26行目~36行目(<div id="menu">~</div>)をコピーして、新規ファイルを作成し、ペーストします。
  3. 文字コードがUTF-8であることを確認して、新しく作成したファイルに、[menu.html]という名前をつけて、[freo/templates]フォルダに保存します。
  4. そして、header.htmlの26行目(<div id="menu">~</div>のあった場所)に、下記のように記述します。
    {include file='menu.html'}

以上です。
こうすると、header.html内にmenu.htmlが読み込まれて使用されます。
あとは、menu.htmlの内容を編集すればOKです。

1.メニューに使用したいリンクをテンプレートに直接書いて作成する(おさらい)

前回までにテンプレートに直接書いて作成する方法をご説明しているので、さくさく解説します。
↑で一覧にしたコンテンツをリストにまとめてみます。

  1. [0]で作成したmenu.htmlをエディタで開いてください。
  2. <div id="menu">~</div>の間にコンテンツを書き出します。

    <ul>
        <li><a href="{$freo.core.https_file}/page/about">ABOUT</a></li>
        <li><a href="{$freo.core.https_file}/entry">DIARY</a></li>
        <li><a href="{$freo.core.https_file}/page/novel">NOVEL</a></li>
        <li><a href="{$freo.core.https_file}/page/gallery">GALLERY</a></li>
        <li><a href="{$freo.core.https_file}/page/info">INFORMATION</a></li>
        <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>
    
  3. menu.htmlを上書き保存してアップロードします。

あとはCSSでいろいろ装飾すれば、なんとなくメニューっぽくなると思います。
ところで、この先このメニューを使っていくうちに、メニューの順番や内容を編集したいことがあるかもしれません。
そういったとき、いちいちまたエディタを開いてテンプレートを編集するのは面倒です。
管理画面上でいろいろ編集できると便利なので、是非メニュー登録プラグインを使ってみてください。

2.メニュー登録プラグインを使う。

メニュー登録プラグインを使ったメニュー作成方法を説明します。

メニュープラグインの利点は、「管理画面上でメニューの内容を編集できる」は当然ですが、「IDを入力すれば、freo設置URLの記入を省略できること」です。
例えば、ページIDが「/page/about」のページにリンクを貼りたい場合は、メニューのURLの項目に「/page/about」と入力すると、自動的に「http://freo設置URL/page/about」と表示されます。
もちろん、任意のURLをメニューとして登録することもできます。

  1. メニュー登録プラグインをDLします。
  2. 導入方法を参考に、「データベースの作成」までやってみてください。
  3. 上記ページの「テンプレートの編集」に掲載されているソースを、[freo/templates/menu.html]の<div id="menu">~</div>内にペーストしてください。
  4. [freo/templates/menu.html]をアップロードしてください。
  5. 管理者ページにログイン後、管理メニューから「プラグイン」→「メニュー登録」で、メニューを登録してください。
    登録する内容は、上記の表を参考にしてください。

これで完了ですが、もう1ステップ。

freoをブラウザで表示し、右クリック→「ページのソースを表示」コマンドで表示されたソースが、「1.メニューに使用したいリンクをテンプレートに直接書いて作成する(おさらい)」で作成したソースと同一であれば、成功です。

メニューに登録したURLの変更、名前の変更などを管理ページ上で手軽にできるので、簡単に管理する事ができると思います。

ページ移動

関連記事

ページ上部へ