How to make a theme

First, make public/theme/THEME NAME directory.

Copying existing theme is no probrem. But now, Let's make theme from nothing.

Making theme directory

exampleディレクトリの作成

テーマのディレクトリの中にテンプレートファイルを作成します。テンプレートの形式は複数から選べますが、一番簡単なerbで作ってみます。

Lokkaのテーマに最低限必要なテンプレートは下記の二つだけです。

entry.erb: 個別(Individual)ページのテンプレート
entries.erb: 一覧(List)ページのテンプレート

Making template for individual page

まずは個別ページのテンプレートを書いてみます。

exampleテーマを使うように設定します。themeディレクトリにexampleディレクトリを作成した時点でテーマが認識されているので、管理画面の"テーマ"から"example"のテーマを選択します。

そして、個別ページを見てみましょう。(最初から1エントリーある筈なので http://localhost:9646/1 にアクセスします。)

単なるHTMLですが、ちゃんと表示されました。

しかし、静的なHTMLを表示するだけではつまらないのでサイトのタイトルを表示してみましょう。

h1タグの部分にサイトのタイトルを表示するように変更しました。<% と %>を囲うのがerb形式のテンプレートの記法です。<%= %>のように=が最初に付くと内容を表示するという意味になります。(これはphp/wordpressの<?php echo ?>と同じです。)

また http://localhost:9646/1 にアクセスして確認してみましょう。

サイトのタイトルが表示されました。この内容は管理画面の"設定" > "タイトル" で変更することが出来ます。同じようにサイトの詳細も <%= @site.description %>と書けば表示されます。

今度は個別ページなので、エントリーの内容を表示してみましょう。

http://localhost:9646/1 というURLからわかるように、IDが1のエントリーを表示するためのテンプレート内容になっています。

上記URLから判断して、IDが1のエントリーが@entryという変数の中に自動的に入っているので、@entry.titleや@entry.bodyでそれぞれエントリーのタイトルと本文が取り出せます。

表示されました。

Making template for listing page

一覧ページのテンプレートを作る前に、エントリーが一個だけでは一覧になっているかわからないので管理画面の"投稿" > "登録" から幾つか適当に投稿(Post)を登録しておきます。

entries.erbというファイル名で一覧のページのテンプレートを作成します。

一覧は個別より少し複雑です。<% @posts.each do |post| %>から<% end %>の書き方に注目して下さい。do ~ endは一組になっていて（ブロックと言います）、@posts.each do ~ end は@postsの個数分だけdo ~ endを繰り返すという構文です。投稿(Post)が3個あれば3回繰り返されます。

結果は下記のように表示されます。

How to use images, css and other

画像やCSS、Javascriptといった外部リソースはテーマフォルダに含めることができます。

例えば、example/logo.png は <img src="/theme/example/logo.png"> のようにテンプレート中で指定できます。下記のようにディレクトリを作っても構いません。

example/
 images/
  logo.png
 stylesheets/
  style.css
 javascripts/
  jquery.js

また、テーマまでのパスは下記のように書くこともできます。

<img src="<%= @theme.path %>/logo.png" />

テーマ作成に最低限の知識はこれだけです。Lokkaにはその他に柔軟なテンプレートタイプとテーマAPIを持っていますが、それを以下で紹介したいと思います。

Advanced functions for theme

最低限のテーマの作り方は紹介しました。以下は無くてもいいけど使うと便利なテンプレートタイプについて紹介します。

Lokkaにはデフォルトのentry, entries以外に様々なテンプレートタイプがあります。テンプレートは一覧、個別、その他のどれかに分類されます。

Template types

list

index: トップページのテンプレート
category: カテゴリー別の一覧ページのテンプレート
tag: タグ別の一覧ページのテンプレート
yearly: 年別の一覧ページのテンプレート
monthly: 月別の一覧ページのテンプレート
search: 検索結果の一覧ページのテンプレート
entries: 一覧ページのテンプレート。上記のテンプレートが無い場合に使われる。

individual

post: 投稿(Post)の個別ページのテンプレート
page: ページ(Page)の個別ページのテンプレート
entry: 個別ページのテンプレート。上記のテンプレートが無い場合に使われる。

other

partial: テンプレートの一部分を共有するテンプレート
layout: テンプレートの外枠を共有するテンプレート

List template

一覧はentries、個別はentryというテンプレートがありますが、例えば一覧で"検索結果だけに必要なもの"があった場合、entriesの中がごちゃごちゃしてしまうのでsearchという名前でテンプレートを作っておくと、検索結果の場合はそちらが優先して使われます。

Individual template

同じようにentryとpostというテンプレートがあった場合投稿(Post)の場合はpostが優先的に表示されます。投稿とそれ以外で別の内容にしたい時に便利です。

どのテンプレートが選ばれるかはURLで決まります。実際には厳密なルールがありますが長くなるので代表的な例を紹介します。

index: /
category: /category/foo/
tag: /tag/foo/
yearly: /2011/
monthly: /2011/01/
search: /search/foo/
post: /1
page: /2

(postやpageやcategoryはIDの他にスラッグと呼ばれる自由なURLを持つことができます。そちらでもアクセスすることも可能です。)

上記以外に特殊なテンプレートタイプが存在します。それがpartialとlayoutです。

Partial template

partialは複数のテンプレートで共通の部分等を別ファイルとして作成して共有するためのテンプレートです。好きな名前で作成することができます。

例えば、Copyright部分をpartialテンプレートとして下記のように作成し、別のテンプレートから読み込む事ができます。

<p>Copyright FJORD, LLC</p>

entries.erb:

(省略)
<%= partial 'copyright' %>

entry.erb:

(省略)
<%= partial 'copyright' %>

同じ内容が複数のテンプレートで出てくる場合にpartialを使うと楽でしょう。

Layout template

もう一つのlayoutテンプレートはpartialとは逆に、テンプレートの一部分を共有するのではなく、外枠の殆どを共有するイメージです。

layout.erb:

<h1 id="header">Title</h1>
<%= yield %>
<div id="footer">Powered by Lokka</div>

entry.erb:

<h2>Post Title 1</h2>
<div class="body">body ...</div>

yieldの部分にentryやentriesのテンプレートの結果が全部入るイメージです。layoutテンプレートはWordPressなどには無い機能なので多少取っ付きづらいですが、テンプレートの大部分を共有できる非常に便利な機能で、上手く使うとテーマコーディングが大幅に楽になります。数多くのフレームワークに採用されている機能なので是非とも活用してみてください。

Page	2011-07-24 00:10:11