メニュー

Home >freo講座>初心者の為のfreoテンプレート編集講座> 【基本編(01)】freoの構造について

【freo講座】【初心者の為のfreoテンプレート編集講座】【基本編(01)】freoの構造について

2012/08/13 20:30|タグ:|グッジョブ表示 59

freoのテンプレートの編集方法について簡単にご説明します。
ものすごく簡単に記載しているので、ニュアンス等が違っている場合がありますが、そこら辺は大目に見て下さい。

freoを使ったサイトでは、
データベースに登録されている情報
テンプレートで指定した形式
スタイルシートで設定したスタイル
表示されます。

なにを表示できるかは、[freo/libs/freo]ォルダ以下のphpファイル
どのように表示するかは、[freo/templates]フォルダ以下のhtmlファイル
スタイルの設定は[freo/css]フォルダ以下のcssファイルで決められています。

テンプレートを編集するときは、自分が
なにを表示したいのか
どのように表示したいのか
どんなスタイルで表示したいのか
をわけて考える必要があります。

それによって、編集すべきファイルが変わってくるからです。

なにを表示したいのか

データベースに登録されている情報を表示してみます。
まず、データベースにはどんな情報が登録されているのか確認します。

freo公式サイト→各種解説→データベース構成の解説ページを開きます。
ここでは、freoで使用するデータベースに登録されている情報を見ることができます。

まずは、本体のテーブル構成ページを見てみます。
ここには、freo本体で使用されるテーブルに登録される情報の一覧を見ることができます。

そもそもデータベースってなにかっていうと、freoに登録される情報が記録されているものです。
じゃあテーブルってなにかっていうと、データベースに登録されている情報を分類分けしているものです。

データベースに登録されている情報は、テーブルごとに分類されています。
データベースをある一つの国だとすると、テーブルは都道府県、フィールドは市町村、といった感じです。
データベースがある本棚だとすると、テーブルは一つの本、フィールドはその中にある絵や文章といった感じです。

  • フィールド…データベースに登録される情報の名前。
  • タイプ…フィールドのタイプです。VARCHARの後にある(数字)は文字数を表しています。
  • ヌル…フィールドが必須項目かそうでないかを定義しています。必須でない場合はYESと記載されています。必須項目である場合は空欄です。
  • キー…それぞれのフィールドを関連付けるためのものです。たとえば、エントリーIDがそのエントリーのタイトルを呼び出す(判断)するための鍵になる、といった感じです。
  • 備考…AUTO_INCREMENTと書かれているものは自動的に入力されます。
  • 格納データ…そのフィールドがつまりなんなのかっていう説明です。

この表を見れば、自分が表示したいものがどのテーブルのどのフィールドに格納されているのかが判ると思います。

どのように表示したいのか

本体のテーブル構成ページで自分の表示したい情報が見つかったら、テンプレートを編集します。

テンプレートでは、表示したい情報をどのように表示するかを設定できます。
たとえば、<p>~</p>のような段落で表示するのか、<h1>~</h1>のように見出しで表示するのか、などです。
これは、実際にテンプレートをエディタで開いてみるのが一番わかりやすいです。

たとえば、[freo/templates/header.html]をエディタで開くと、23行目に

 <h1><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></h1>

と書いてあります。
これは、

 <見出しここから><[freo/config.php]で設定したfreoの設置URLへのリンクここから>{freoの管理ページ→システム→設定管理→基本設定で設定したfreoのタイトル}<[freo/config.php]で設定したfreoの設置URLへのリンクここまで><見出しここまで>

という意味になります。
これを段落に変えたい場合は

 <p><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></p>

にすればいいですし、リンクを取りたいなら

 <h1>{$freo.config.basis.title}</h1>

にすればいいですし、罫線を下につけたいなら

 <h1><a href="{$freo.core.http_file}">{$freo.config.basis.title}</a></h1><hr />

にすればいいわけです。

どんなスタイルで表示したいのか

freo公式のデザインの変更時の注意点をに書いてありますが、freoではレイアウトや配色などは、すべて外部CSSで設定しています。
[freo/templates/header.html]を見ると、12行目で[freo/css/default.css]を読み込んでいるので、この[freo/css/default.css]を変更するのが良いでしょう。

ためしに、見出しのスタイルを変更して、<h1>~freoのタイトル~</h1>部分を変更してみます。

[freo/css/default.css]をエディタで開き、36行目~39行目の

 div#header h1 {
    line-height: 1.0;
    margin: 0;
}

 div#header h1 {
    line-height: 1.0;
    margin: 0;
    border:10px solid #cccccc;
    background-color:#000000;
    color:#ffffff;
}

に変更してみて下さい。
[freo/css/default.css]を上書きしてアップロードすると、freoのタイトルのスタイルが変更になっていると思います。
このように、スタイルをどんどん変えると、同じテンプレートを使用していても、ガラッとイメージを変えることができると思います。

ページ移動

関連エントリー

  • 関連エントリーはありません。

コメント

cat-korokoro

freo初心者です(60代)
投稿キィープラグインDLしましたが、htmlの書き換えがよくわかりません

<!--{if $page.restriction == 'password' and !$smarty.session.security.page[$page.id] and $freo.user.authority != 'root' and $freo.user.authority != 'author'}-->
<form action="{$freo.core.http_file}/page/{$page.id}" method="post" class="passwordForm">
<fieldset>
<legend>認証フォーム</legend>
<p>
<input type="text" name="page[password]" size="30" value="" />
<input type="submit" value="パスワード認証" class="passwordSubmit" />
</p>
</fieldset>
</form>
<!--{/if}-->

↑の、formの中にコピペで入れ込むのでしょうか?!
それともこの下?!

記述を教えていただけるとありがたいのですが(^^ゞ

  • URL
  • 2014/02/26 20:55:53

cat-korokoro

すみません、追記です
freoサイトでイメージ関数が必要という記載があったのですが
もしかしたら、フリーじゃ手に入らないのかしら?!

  • 2014/02/26 21:18:57

ミツ@32877

こんにちは。
freo公式サイトの投稿キープラグインのページ(http://freo.jp/plugin/postkey.html)を見ると、

templates/internals/page/default.html と templates/internals/regist/default.html と templates/internals/view/default.html にある、フォームタグの method に post が指定されているすべてのデータ登録フォームに、以下の記述を追加します。表示項目やHTMLは、必要に応じて適当に変更してください。

と書いてあります。
引用されているフォームは、「ページにパスワード制限がかかっていた場合にパスワード認証を表示させる」ためのフォームです。
ここにも投稿キーを表示させたいなら、

<form>
 <fieldset>
  ~この部分~
 </fieldset>
</form>

にfreo公式サイトの投稿キープラグインのページに記載されているテンプレートを書き込んで下さい。

投稿キーは、多分、コメント投稿フォームに書き込む場合が多いと思うので、
[freo/templates/internals/page/default.html]の194行目あたり
[freo/templates/internals/view/default.html]204行目あたり
に書き込めば良いのではないでしょうか。

freoサイトでイメージ関数が必要という部分についてですが、お使いのサーバーがイメージ関数を利用できる環境かどうかは私には判断できかねます。
お使いのサーバーにお問い合わせ下さい。

あと、この記事はfreoについてのなにかの改造について具体的にどこに書き込めばよいのかの質問を受付けている記事ではないので、今後質問されましてもお答えできかねます。
当サイトはfreoに関する非公式の解説サイトですので、当サイトで得た情報をもとに改造してどのようなトラブルが起きても責任は負いかねます。
freoについての質問等は、freo公式サイトのサポートをご利用下さい。
ただし、当サイトがご紹介しているfreoTIPSまたは配布しているプラグイン・テンプレートへのご質問に関しては該当記事のコメント欄にコメントして下さい。
また、freo全体でのテンプレートの書き方に関しましては、
「【期間限定】あなたのfreoのテンプレートの書き方を考えさせて下さい 」
http://32877.xii.jp/index.php/view/46
にコメントして下さい。(尚、現在質問の受付は休止しています。)

  • 2014/02/26 21:46:45

cat-korokoro

有り難うございましたm(_ _)m

どこに書き込めば良いか迷い&どこに訊ねたらたら良いか
全くわからず、なお知識もあまりないので・・・
HTMLがほんの少しわかる程度なのです

大変ぶしつけで失礼いたしました
アドバイスを元に、修正したいと思います
今後、投稿には充分注意いたします(^^ゞ
大変助かりました、有り難うございました、感謝

  • 2014/02/27 06:38:16

コメント登録

登録フォーム
名前
メールアドレス
URL
コメント
投稿キー(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

Twitter

サイト内検索

ページ上部へ