Nucleusのインストールは無事完了したと思います。ここでは、ページ表示を定義するスキン/テンプレートの編集について説明をしたいと思います:
このドキュメントは、これらの作業を行うにあたりヒントになる事項を紹介します。
スキンとテンプレートを編集するにあたっては、HTMLとCSSの基礎知識が必要です。このセクションでは基礎知識を得る事ができる解説サイトを紹介しておきます。
このセクションでは、同梱の「grey」スキンが使用しているファイルと、編集の注意点を説明します。(新規インストール時にはgreyスキン/テンプレートはインストールされていません。「読み込み」を行ってください。)
「grey」スキンは以下のファイルを使用しています:
CSSファイル (grey.css) には、標準のスキン/テンプレートを使用した際のページ構成(ブロック構造)を書き入れています。 基本的には.contents、 .logo、.menuの3つのdivブロックとなっています。
grey.cssを編集するにあたっては、テキストエディタを使用してください。 例えばWindowsに標準添付されている「Notepad」やemacs や TextPadなどです。「WordPad」、「Word」、「OpenOffice Writer」などは余計なデータが混入しますので、絶対に使用しないでください。
Nucleusではページ表示に「スキン」と「テンプレート」の両方を使用します。ではこれら2つの違いは何でしょう?
下のサンプル画像をご覧下さい。ページ全体のソースはスキンで定義しています。その中の赤点線で囲った部分(カテゴリリストとblog記事)はテンプレートをひな形にして展開されたデータ部分です。この赤点線部分をどこに出力させるのかはスキンの方で指定しています。
このセクションではページ表示に使うスキンを設定する方法を説明します。
まず最初に、スキンタイプの種別について紹介しておきます。NucleusはアクセスされたURLを元に表示するスキンタイプを判別してページ表示に使います。下記が種別のリストです。(実際のURLは状況に応じて他のクエリが付加され、様々に変化します。)
クエリ文字列 | スキンの種別 | 表示される記事 |
---|---|---|
?itemid=.. | item(個別アイテム) | 指定されたitemidの記事 |
?archive=.. | archive(アーカイブ) | 標準のblog記事、又はblogidで指定されたblog記事(の該当記事) |
?archivelist=... | archivelist(アーカイブリスト) | 指定されたarchivelistのblog記事(のリスト) |
?archivelist | archivelist(アーカイブリスト) | 標準のblog記事(のリスト) |
?query=... | search(検索) | 標準のblog記事、又はblogidで指定されたblog記事(の該当記事) |
?memberid=.. | member(メンバー) | なし |
?imagepopup=.. | imagepopup(ポップアップ画像) | なし (画像のみ表示するポップアップ・ウィンドウ) |
(その他 又は クエリなし) | index(メイン) | 標準のblog記事、又はblogidで指定されたblog記事 |
これら7つのタイプに併せて、エラーの場合に使われる error タイプがあります。
上の表において、それぞれのケースで選択適用するblogがどれになるかを併せて説明しています。表示に使用するスキンは、blog設定で設定した「標準のスキン」です。
新しくスキンを作成する際はすべてのスキンタイプを定義する必要はありません。選択適用するスキンタイプが定義されていない場合は、グローバル設定において設定した「標準のスキン」を代替適用します。(下記参照)。つまり、エラーページのスキンタイプだけを定義したスキンを使用するといったことが可能な訳です。
Nucleus は「標準のスキン」が必ず必要です。この標準のスキンは、スキンタイプ定義が見あたらない場合の補完表示に使われるからです。もし、標準のスキンにおいても適用すべきスキンタイプの定義が見あたらない場合は、エラーメッセージが表示されてしまいます。
また、指定されたblogが見あたらない場合は、適用するスキンのblog設定そのものが存在しませんから、エラーメッセージを表示するためのページデザインとして「標準のスキン」がかならず必要なのです。
Nucleus ではblogページに新規投稿フォームを埋め込む機能を設けています。「新規投稿」リンクをページ内のどこかに作り、このリンクをクリックすると新規投稿フォームの表示/非表示の切り替えができます。 このフォームに入力後プレビュー機能が使えますので、どのように記事が表示されるかを瞬時に確認できて便利です。
方法は、「メインの目次ページ」を編集するだけです。テンプレートの編集は必要ありません。
まず最初に、edit.jsをページ上に呼び出すコードを追加します。<head> と </head> タグの間のどこかに下のコードを追加して下さい。このファイルを呼び出す事によって新規投稿のプレビュー機能とフォームの表示/非表示切替え機能が有効になります。
<script type="text/javascript" src="nucleus/javascript/edit.js"></script>
新規投稿フォームを埋め込みたい場所に追加します。"display:none;"は必ず間違えずに記述してください。
<div id="edit" style="display:none;"> ... </div>
次に、このdivブロックの中に入力フォームとプレビューエリアを埋め込むコードを追加します。入力フォームは<%additemform%> と、プレビューエリアは <%preview(テンプレート名)%>と書く事によってそこに展開されます。あとは好きなコードを追加してください。 例えば次のように書きます。
<h2>Add Item</h2> <%additemform%> <h2>Preview</h2> <%preview(mytemplate)%>
最後に、このエリアを表示/非表示させるための切替えリンクをどこか別の場所に追加します。サンプルとして2つのコードを紹介しておきます。
1つめはシンプルなタイプ:
<a href="javascript:showedit();">add item</a>
2つ目はページ左上隅に切替えリンクを配置するタイプ:
<div style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px" onclick="javascript:showedit();"> </div>
例えばスキン内に。 <%searchform%> や <%commentform%> と記述することによって、それぞれ検索フォームやコメント投稿フォームに置き換えられてページ内に表示されます。これらの入力フォームやボタンや入力フォーム領域には標準でクラス名が定義されていますので、cssファイル内でクラスの定義をすればスタイルの変更が可能です。
入力フォーム領域のクラス名は下記のように指定されています。クラス名はフォーム全体を囲ったdivブロックを修飾しています。
フォームの種類 | 記述コード | CSS クラス名 |
---|---|---|
新規投稿フォーム | <%additemform%> | .blogform |
コメント投稿フォーム | <%commentform%> | .commentform |
ログインフォーム | <%loginform%> | .loginform |
検索フォーム | <%searchform%> | .searchform |
メンバー間のメール送信フォーム | <%membermailform%> | .mailform |
ボタンと入力フォームのクラス名は以下のように指定しています。
タイプ | CSS クラス名 |
---|---|
単行/複数行のテキスト入力フィールド | .formfield |
ボタン | .formbutton |
スタイルシート内で実際にこれらを定義するサンプルです:
/* applies to all input fields */ .formfield { background-color: gray; } /* only applies to buttons for comment forms */ .commentform .formbutton { border: 1px solid #000; background-color: #ddd; color: #000; font-size: xx-large; }
上のサンプルでは、Nucleusが自動生成するテキスト入力フィールドの全部が「 背景色 = 濃灰色 」で、コメント投稿フォーム内のボタンだけが「 文字サイズ = 大 / 四辺 = 黒色の1ピクセルの太さの線 / 文字色 = 黒 / 背景色 = 淡灰色 」とする、と定義しています。
標準添付のスキン/テンプレートでは投票機能を表示させていません(使わない方がよいのかもしれません)。ここでは投票機能が表示されるようにテンプレートを書換える方法を紹介します。
'grey/short' という名前のテンプレートの編集画面を開きます。(新規インストール時にはgreyスキン/テンプレートはインストールされていません。「読み込み」を行ってください。)
アイテムの本体部分の最後の方を以下のように書換えます:
<div class="iteminfo"> <%time%> - <a href="<%authorlink%>"><%author%></a> - karma: <%karma%> [<a href="<%karmaposlink%>">+</a>/<a href="<%karmaneglink%>">-</a>] - <%edit%> <%comments%> </div>
編集後にメインページにアクセスすると記事詳細情報が下のように表示が変更されているのが確認できると思います:
上記の編集作業ではメインページでのみ投票スコアが表示される状態です。アイテムの個別ページでも同様に投票を表示したい場合は、スキンの「アイテムの個別ページ」で使用しているテンプレートに同様の修正を行ってください。greyスキンでは 'grey/full' という名前のテンプレートがそれに該当します。
Nucleus標準添付のスキンでは記事の編集権限を持つユーザーにだけ表示される「アイテムの編集」リンクを埋め込んでいます。 ここではどこでそのリンクを埋め込んでいるのかを説明します。
テンプレートの編集画面の「アイテムを編集するためのリンク」部分でアイテムの編集リンクの表示を定義しています。 標準添付のテンプレートでは以下のように定義しています:
<a href="<%editlink%>" onclick="<%editpopupcode%>">edit</a>
ポップアップ編集画面ではなく管理エリアの記事編集画面を使いたい場合は次のように修正してください:
<a href="nucleus/index.php?action=itemedit&itemid=<%itemid%>">edit</a>
表示形式を決めたら、次にどこにこれを表示するのかを設定します。通常なら「アイテムの本体」の中に<%edit%>
と記述します。この<%edit%>
の部分が上で設定した表示形式に置き換えられてコードが自動生成されます。
「アイテムの本体」の中の記述例は 投票機能を有効にする方法 を参照してください。
バージョンv2.0以降からスキンとテンプレートをインポート/エクスポートする機能が追加されています。ここでは、スキンを作成する手順を追ってその機能をわかりやすく説明したいと思います。
まず管理エリアにてスキンを新規作成します。管理エリアに入り、「スキンの編集」画面の一番下にある「新しいスキン」の所に入力します。ここでは例として名前を「vista」とします。
スキンの一覧にこの「vista」という名前のスキンが追加されていますので、その行の右横「編集」リンクをクリックして編集画面に入ります。content type は 「text/html
」としてください。 これから説明する作業を行うにあたって必要な設定となりますので、よく確認して設定してください。
さらにその下の Include モード
と Include プリフィックス
もよく注意して設定してください。スキンを移植したり配布したりする事を考えて、デザインに使用する画像やcssファイルなどは1つのディレクトリの中に格納しておく事とします。
Include モード
と Include プリフィックス
が適用される仕組みを簡単に説明しておきましょう。config.php
で定義している「$DIR_SKINS
」の値と、管理エリアのグローバル設定の中で設定している「スキンURL
」が関連してきます。
例えばそれぞれ以下のような値になっているとします:
/home/user/example/htdocs/skins/
http://example.org/skins/
この設定を準用してデザインに使用する画像やcssファイルなどを格納するディレクトリを次のように設定させます
/home/user/example/htdocs/skins/vista/
http://example.org/skins/vista/
このように準用適用させる設定がInclude モード
です。準用させるためにはInclude モード
を「skindirを使う」にしてください。
さらに Include プリフィックス
は 「vista/」と入力してください。
この画面の設定:
スキン内に記述するコードのうち、include
と phpinclude
と parsedinclude
で読み込むファイルの場所指定に、この「Include モード
」 と 「Include プリフィックス
」の設定が適用されます。また、このほかにskinfile
という記述コードでもこれらの設定を読み込んでURLの自動生成が行われます。
例えばスキン内に以下のように記述したとします:
<%skinfile(myFile.jpg)%>
これはページ生成時に以下のように自動変換されます:
http://example.org/skins/vista/myFile.jpg
仕組みの説明はこのくらいにして、実際にスキンを編集してみましょう。vista/
ディレクトリの中に「pagefoot.inc
」 と 「pagehead.inc
」 という名前の2つのファイルを作成して、これらのファイルを使い回す事によって作業効率を上げる方法をご紹介します:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="<%skinfile(layout.css)%>" />
</head>
<body>
<div id="contents">
</div><!-- contents div end -->
<div id="stuffbar">
<h2>Navigation</h2>
<ul>
<li><a href="<%todaylink%>">Today</a></li>
<li><a href="<%archivelink%>">Archives</a></li>
</ul>
<h2>About</h2>
<ul>
<li><a href="http://www.nucleuscms.org/">Nucleus</a> Power!</li>
</ul>
</div><!-- stuffbar end -->
</body>
</html>
このような共通して使えるコードを書いたファイルを使い回します: (上のサンプルは重要な部分だけを抜粋した物です。実際に使用する際は標準添付のスキンを参考に、もっとたくさんのコードを書き込んだ方が良いでしょう。)
<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<%blog(vista/main,10)%>
<%parsedinclude(pagefoot.inc)%>
<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<h2>Item</h2>
<%item(vista/detailed)%>
<h2>Comments</h2>
<%comments(vista/detailed)%>
<h2>Add Comment</h2>
<%commentform%>
<%parsedinclude(pagefoot.inc)%>
上のサンプルでは使用するテンプレート名を「vista/main」 、 「vista/detailed」と指定していることに注意してください。テンプレート名はスキン名と揃えて置いた方が後々編集する時にわかりやすくて便利です。単純に標準添付の 「grey/short」 と 「grey/full」をそれぞれ複製して名前を付け替えただけの物でも構いません。
<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<%archivelist(vista/main)%>
<%parsedinclude(pagefoot.inc)%>
<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<%archive(vista/main)%>
<%parsedinclude(pagefoot.inc)%>
これでvistaスキンのできあがりです。では、このスキンをエクスポートしてみましょう。管理エリアの「スキンのインポート/エクスポート」画面に入り、以下の作業を行います:
選択されたスキン/テンプレートを書き出し
ボタンを押します。 Nucleusにて「skinbackup.xml
」の自動作成が行われます。skinbackup.xml
」ファイルを保存し、vista/
ディレクトリの中に他の画像ファイルなどと一緒に格納してください。vista/
ディレクトリごとzipファイルなどに圧縮します。スキンをインポートするには、上と逆の手順を踏みます:
vista/
)をサーバのスキンディレクトリ内に配置します(ひとつのスキンで1つのディレクトリを使用します)。