【freo】【freo講座】【初心者の為のfreoサイト運営講座】【メニュー編(04)】メニュー作成準備・メニュー登録プラグインの利用
- 2012/12/19 14:32
- メニュー
- メニュー登録プラグイン
- 55
実際にメニューを作る前に、サイトにどんなコンテンツがあって、どのコンテンツをメニューにするか、書き出してみます。
また、これらのコンテンツが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がゴチャゴチャして編集しにくくなることを防ぐためです。
- [freo/templates/header.html]をエディタで開いてください。
- 26行目~36行目(<div id="menu">~</div>)をコピーして、新規ファイルを作成し、ペーストします。
- 文字コードがUTF-8であることを確認して、新しく作成したファイルに、[menu.html]という名前をつけて、[freo/templates]フォルダに保存します。
- そして、header.htmlの26行目(<div id="menu">~</div>のあった場所)に、下記のように記述します。
{include file='menu.html'}
以上です。
こうすると、header.html内にmenu.htmlが読み込まれて使用されます。
あとは、menu.htmlの内容を編集すればOKです。
1.メニューに使用したいリンクをテンプレートに直接書いて作成する(おさらい)
前回までにテンプレートに直接書いて作成する方法をご説明しているので、さくさく解説します。
↑で一覧にしたコンテンツをリストにまとめてみます。
- [0]で作成したmenu.htmlをエディタで開いてください。
-
<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>
- menu.htmlを上書き保存してアップロードします。
あとはCSSでいろいろ装飾すれば、なんとなくメニューっぽくなると思います。
ところで、この先このメニューを使っていくうちに、メニューの順番や内容を編集したいことがあるかもしれません。
そういったとき、いちいちまたエディタを開いてテンプレートを編集するのは面倒です。
管理画面上でいろいろ編集できると便利なので、是非メニュー登録プラグインを使ってみてください。
2.メニュー登録プラグインを使う。
メニュー登録プラグインを使ったメニュー作成方法を説明します。
メニュープラグインの利点は、「管理画面上でメニューの内容を編集できる」は当然ですが、「IDを入力すれば、freo設置URLの記入を省略できること」です。
例えば、ページIDが「/page/about」のページにリンクを貼りたい場合は、メニューのURLの項目に「/page/about」と入力すると、自動的に「http://freo設置URL/page/about」と表示されます。
もちろん、任意のURLをメニューとして登録することもできます。
- メニュー登録プラグインをDLします。
- 導入方法を参考に、「データベースの作成」までやってみてください。
- 上記ページの「テンプレートの編集」に掲載されているソースを、[freo/templates/menu.html]の<div id="menu">~</div>内にペーストしてください。
- [freo/templates/menu.html]をアップロードしてください。
- 管理者ページにログイン後、管理メニューから「プラグイン」→「メニュー登録」で、メニューを登録してください。
登録する内容は、上記の表を参考にしてください。
これで完了ですが、もう1ステップ。
freoをブラウザで表示し、右クリック→「ページのソースを表示」コマンドで表示されたソースが、「1.メニューに使用したいリンクをテンプレートに直接書いて作成する(おさらい)」で作成したソースと同一であれば、成功です。
メニューに登録したURLの変更、名前の変更などを管理ページ上で手軽にできるので、簡単に管理する事ができると思います。