Geeklog Documentation

(Geeklogの最近のバージョンにおけるテーマ変更一覧については、下記参照のこと。)

Geeklog用のテーマ作成

Geeklog用にテーマを作成するのは簡単ですぐにできます。HTMLファイルを編集できるなら、テーマを作成できます。PHPを習得する必要はありません。

テーマ作成

最初に、自分が作成したいテーマに最も似ている既存のテーマがあれば、それをコピーします。作成したいテーマが根本的に違うものであるなら(我々としてはそうであってほしいのですが)、どのテーマをコピーしてもかまいません。既存のテーマを自分が希望するテーマ名でコピーしましょう(テーマ名にスペースを含めないでください)。

cp -R /path/to/geeklog/public_html/layout/professional /path/to/geeklog/public_html/layout/自分のテーマ名(スペースを含んではいけません。)

新しくできたディレクトリ(MS Windowsの場合は「フォルダー」。以下、同様。)に移動します。

cd /path/to/geeklog/public_html/layout/自分のテーマ名(スペースを含んではいけません。)

必要に応じてテンプレートを編集します。一般的に、GeeklogでいうテンプレートとはHTMLファイルの断片です。今作成したディレクトリにはGeeklogが必要とするすべてのテンプレートファイルが収められていますが、外見を大きく変えるのに変更する必要があるのはほんの少数でしょう。

特に次のテンプレートは間違いなく変更する必要があるでしょう。

テーマはどのように機能するか

テーマを用いて表示するとき、Geeklogはサイトのヘッダーになる header.thtml から始め、次に左ブロック({left_blocks} テンプレート変数と leftblocks.thtml テンプレートファイルを探しましょう)を処理します。サイトの中央部分は記事で構成されますが、普通の記事の場合は storytext.thtmlstorybodytext.thtml テンプレートファイル、注目記事の場合は featuredstorytext.thtmlfeaturedstorybodytext.thtml テンプレートファイルが使用されます。最後に、footer.thtml テンプレートファイルを使用して、右ブロック({right_blocks} テンプレート変数と right_blocks.thtml テンプレートファイルを探しましょう)とサイトのフッターを表示します。ブロック自体は blockheader.thtmlblockfooter.thtml テンプレートファイルで構成されています。

この説明はGeeklogのメインページと記事がどのように作成されるかを述べただけです。Geeklogで見かける様々なエディターやリストだけでなく、カレンダープラグインなど、Geeklogのあらゆる部分を構成するために様々なテンプレートが存在しています。

どのテンプレートファイルがGeeklogのどの部分の表示に使用されているのかを説明する完全なリストは今のところ存在していません。とはいえ、たいていの場合は、テンプレートのあるディレクトリ名とファイル名を見れば、用途は明らかなはずです。Geeklogのある部分を表示しているテンプレートファイルが分からない場合は、URLを見るとよいでしょう。たとえば、ユーザーのプロフィールを表示しているときなら、users.php というPHPのファイル名に気がつくでしょう。そのファイルをテキストエディターで開き、 .thtml を検索します。プロフィールの場合は、次の行が function userprofile() の中に見つかります。

$user_templates = new Template ($_CONF['path_layout'] . 'users');
$user_templates->set_file (array ('profile'=>'profile.thtml', 'row'=>'commentrow.thtml', 'strow'=>'storyrow.thtml'));

PHPを理解していなくても、この部分で profile.thtml, commentrow.thtml, storyrow.thtml テンプレートファイルが使用されていることは分かるでしょう。最初の行を見れば、これらのテンプレートファイルがテーマディレクトリ内の users ディレクトリから読み込まれているのが分かります。

テンプレートファイル内で使用されているテンプレート変数のリスト(完全なものではありません)もドキュメントに含まれています。

テーマのテストと追加情報

自分のテーマを編集し終わったら、次はテストです。 http://自分のサイトのURL/usersettings.php?mode=preferences へ行き、テーマのドロップダウンリストから作成したばかりのテーマを選択します(テーマ名はテーマを収めているディレクトリ名と同じです)。

最後に、テーマの images ディレクトリ内のロゴや他の画像ファイルを入れ替える必要もあるでしょう。

テンプレートシステムとしては、GeeklogではPHPLibのテンプレートクラス(http://phplib.sourceforge.net/)を使用しています。彼らが作成したドキュメントを読み、できれば、/非公開領域/system/classes/template.class.php を覗いて、どのように実装されているか調べてみるのもよいでしょう。この知識があっても、あるテンプレートファイルがどのテンプレートファイルとセットで使われているかはっきりと分からないかもしれません(たとえば、 storytext.thtmlstorybodytext.thtml がセットになって、1つの記事の完全なフォーマットができあがります)。疑問があるなら、http://lists.geeklog.net/listinfo/geeklog-usersメーリングリストに登録するか、IRC(irc.freenode.net の #geeklog チャネル)で尋ねるとよいでしょう。

ヒントと注意点

テーマとWYSIWYGエディター: Geeklogが使用するテンプレートファイルは完全なHTMLファイルではなく、断片に過ぎません。Geeklogはこの断片を組み合わせて適切なHTMLドキュメントを作成します。しかし、このため一部のWYSIWYG HTMLエディターが誤動作し、ファイルに不足しているHTML要素を勝手に追加して、Geeklogにとっては使い物にならなくしてしまうことがあります。
テーマの編集には、単純なテキストエディターを使用することをお勧めします。

XHTML: Geeklog は XHTML準拠のサイトを作成できます。HTMLにもXHTMLにも準拠したテーマを作成できます。 詳しくは次のWikiThemes and XHTMLをご覧ください。

テンプレートファイル中のPHP: テーマのヘッダー、つまり、header.thtml の中ではPHPのコードを使用できます。カスタム関数を使用したいなら、テーマディレクトリ内の functions.php ファイル内で定義すればよいでしょう。

左右のブロックで見た目を変える: 左右のブロックの外見を変えることができます。詳細は、Geeklogホームページのこの記事を参照してください。

アンケート: 投票結果をグラフで表示する際、複数の色の棒グラフを使用するには、{answer_counter}{answer_odd} テーマ変数を pollbooth/pollvotes_bar.thtml テンプレートファイル内で使用するとよいでしょう。{answer_counter} はそれぞれの回答数に置き換えられるので、 bar{answer_counter}.gif と記述すると、結果として bar1.gif, bar2.gif のようになります。GIFファイルごとに色を変えておけば、回答ごとに色も変わることになります。
{answer_odd} は回答ごとに 0 から 1、1 から 0 と変わるので、bar{answer_odd}.gif と記述すると、結果として奇数番目の回答は bar0.gif 、偶数番目の回答は bar1.gif となります。

右ブロック内で左ブロックを表示する: $_CONF['left_blocks_in_footer'] はかなり変わったオプションです。このオプションを使用すると、サイトのフッター(つまり footer.thtml)内で {left_blocks} テンプレート変数が使用できるようになる一方で、ヘッダー(header.thtml)内では {left_blocks} テンプレート変数が使用できなくなります。
これを利用すると、2列レイアウト(1列は右ブロック用、もう1列はコンテンツ用)を実現できます。単にすべてのブロックを右ブロックに移動しただけでは期待した動作にはなりません。普通、左ブロックしか表示しないようなページ(たとえば、article.php や管理者用のページ)では、全くブロックが表示されない からです。 $_CONF['left_blocks_in_footer'] = 1 にすると、この動作が修正され、システム内部では依然としてブロックとして扱われていても、実際にはブロックに表示されるようになります。
テーマの header.thtml, footer.thtml, leftblocks.thtml はたぶん、修正する必要があるでしょう。ですから、left_blocks_in_footer オプションはコンフィギュレーションでは設定できず、テーマの functions.php 内で設定すべきです。そうすることで、たとえば、ユーザーに「普通の」テーマと右ブロックテーマを選択する余地を与えることさえできるようにります。

エラーメッセージ: Geeklog 1.4.1以降、重大なエラーが発生したときにRoot以外のユーザーにどのようなHTMLを表示するか制御できるようになりました。好みのHTMLを表示するには、lib-custom.php 内の CUSTOM_handleError 関数を変更する必要があります。

記事にパーマネントリンク(permalink)を追加する: 多くのWebサイトでは、パーマネントリンク、つまり記事に対応する永続的なURLを提供しています。Geeklogでデフォルトの Professional テーマでは、記事の見出しが既にその機能を果たしています。つまり、記事の永続的なURLへのリンクとなっています(article.phpを指しています)。しかし、この方法はあまり目につかないし、訪問者がページのどこかにパーマネントリンクがあるのを期待することが多いため、自分でパーマネントリンクを追加する方法を次に示します。

  1. 記事のテンプレートファイル内に適当な場所を探します。既に記事関係のリンクが多数含まれているので、storytext.thtml 内の story-footer セクションがよいかもしれません。
  2. パーマネントリンクを設置する場所を決めたら、次のコードを入力します。
    <a href="{article_url}">{lang_permalink}<a>
    これで、記事へのリンク(article_url)が、現在の言語ファイルの「パーマネントリンク(Permalink)」に相当する語句(lang_permalink)を用いて追加されました。
  3. 徹底的にやりましょう。この時点では、パーマネントリンクは注目記事以外の記事でしか表示されません。また、CSSを使用して外見を変更したり、リンクの場所を調節する必要があるでしょう。
  4. 同じコードを featuredstorytext.thtmlarchivestorytext.thtml テンプレートファイルに追加すれば、注目記事にもパーマネントリンクが表示されるようになります。

Theme changes in Geeklog 2.1.1

新たなテーマ機能は、プラグインにテーマ別のテンプレートを用意できるようになったことです。 テンプレートはプラグインそのものに持つことができ、あるいはテーマ、あるいはその両方にもつことができます。 すべてのGeeklogs コアプラグインは、このあたらしい機能をサポートしています。より詳しい説明は Geeklog Wiki Theme Specific Plugin Templatesを参照してください。

General Changes

Theme changes in Geeklog 2.1.0

Theme changes in Geeklog 2.0.0

Geeklog 2.0.0には2つのテーマエンジンが存在します。現在、DeminとModern Curveテーマは2.0.0のテーマエンジンを使っています。Professional および Professional CSS テーマは1.8.1テーマエンジンを使っています。 1.8.1テーマエンジンはそのうちGeeklogからなくなります。そのため、テーマを開発するなら新しいテーマエンジンを使ってください。くわしくはGeeklog Wiki Theme Developers Guideを。

General Changes

Theme Engine 2.0.0 Specific Changes

Theme Engine 1.8.1 Specific Changes

Theme changes in Geeklog 1.8.0

Theme changes in Geeklog 1.7.1

Admin templates

その他の変更

Geeklog 1.7.0におけるテーマの変更点

Admin templates

その他の変更

Geeklog 1.6.1におけるテーマの変更点

軽微な変更点

以下の変更はほとんどの場合些細なものであり、たとえ変更しなくてもテーマの機能に 影響を与えないでしょう。

プラグインテンプレートの変更点

各プラグインのテンプレートはlayoutディレクトリではなく、 plugins/プラグイン名/templatesディレクトリにあります。

Geeklog 1.6.0におけるテーマの変更点

検索

検索フォームと結果表示のテンプレートが変更され、検索結果の表示モジュール用に新しく テンプレートが追加されました。searchディレクトリ以下のテンプレートを 同梱のProfessionalテーマからコピーして利用してください。

コメント

テンプレートファイルcommentform.thtmlcommentform.thtmlは、 セキュリティトークンとテーマ変数{notifcation}(コメント通知オプションのため)が 追加されました。

プラグイン

パーミッションエディター

パーミッションエディターのそのいろいろな場合(所有者、グループ、メンバー、ゲストユーザーに対してR = 閲覧 E = 編集 パーミッションの設定)は、いろいろなテンプレートで使われてきました。これからは、どこでも固有の名前で定義されます:

他の名前を使用しているテンプレートファイルは機能し続けます、しかし、新しいファイルは今後上記の名前を使用しなければなりません。

Geeklog 1.5.2におけるテーマの変更点

注: Geeklog 1.5.0ないし1.5.1用に作成されたテーマはGeeklog 1.5.2でも問題なく動作するはずです。今回のリリースでは、1.5.0と1.5.1に悪影響を与えていたバグ(下記参照)を修正するだけです。他の変更点はオプションです。

バグ修正

以下に述べるバグはGeeklog 1.5.0及び1.5.1に存在していたバグです。これらの修正をカスタムテーマに適用することを勧めます。

他の変更点

以下の変更点はオプションです。軽微な問題や一部のセットアップ方法にしか影響を与えない問題に対処します。

Geeklog 1.5.1でのテーマの変更点

注意: Geeklog 1.5.0用に作成されたテーマはたいていの場合、Geeklog 1.5.1と互換性があります。必ず変更しなければならないのは管理者メニューのコンフィギュレーション用のものが1つあるだけで、以下に列挙する変更点はすべて任意か、特別な設定時(多言語サイトや、右から左へと表示する言語など)のものです。詳細は以下をご覧ください。

重要な変更点: コンフィギュレーション

管理者のコンフィギュレーションで使用されていたJavaScriptのコードでは一般的な名前を使用していたため、他のJavaScriptと名前の衝突が起こっていました。お使いのテーマがGeeklog 1.5.1でも正常に動作するように、admin/config/config_element.thtml を更新してください。

多言語ブロック

Geeklog 1.5.1で導入された多言語ブロックでは、無効になっているブロックが動的に入れ替えられることを利用しています。Geeklogの多言語サポートを使用している場合、テーマの functions.php 内のPHPコードを変更して、多言語用に正しいブロックテンプレートが選択されるようにする必要があります。

$lang = COM_getLanguageId();
if (empty($lang)) {
    $result = DB_query("SELECT onleft,name FROM {$_TABLES['blocks']} WHERE is_enabled = 1");
} else {
    $result = DB_query("SELECT onleft,name FROM {$_TABLES['blocks']}");
}

Geeklog 1.5.1より前のバージョンでは、 functions.php の中に見つかるのは最初のSQLリクエストだけでしょう。

他の変更点

Geeklog 1.5.0におけるテーマの変更点

XHTMLをサポート

XHTML準拠のテーマがサポートされました。テーマの functions.php ファイルの中で、次の定数を定義する必要があります。

define('XHTML', ' /');

こうすることで、内部的にXHTMLに切り替わります。テーマをHTMLとXHTMLの両方でサポートしたいなら、XHTMLの空要素タグがあるところすべてで {xhtml} テーマ変数を使用する必要があります。たとえば、 <br /> タグは <br{xhtml}> と書く必要があります。HTMLをサポートするつもりがないなら、XHTMLタグを直接記述しても構いません。

注意: XHTMLを使用するなら、サイトのコンテンツ(記事、コメントなど)をXHTML準拠にしなければなりません。Geeklogは自動的にコンテンツをXHTMLに変換しません

「記事投稿」 - ユーザーによる記事投稿

Geeklog 1.5.0では、ユーザーが記事を投稿する際、記事を単に冒頭文だけでなく冒頭文と本文に分ける機能をサポートしています。テンプレートを変更することでこの機能は有効/無効にできます。該当するファイルは、

です。有効にするには、 {bodytext} テンプレート変数を含むテーブルの列がテンプレートファイルに含まれるようにしましょう。 {bodytext} テンプレート変数を含むテーブルの列をテンプレートファイルから削除すれば、元の動作に戻ります。

管理者メニュー、ユーザーメニュー、話題リスト

これらの項目は今ではリストを使用しています。 <ul> タグと <li> タグとリストの黒丸を表示しないための新しい blocklist クラスが使用されています。ブロックを作成するために新しいテンプレートファイルが追加されています。

Geeklog-1.5.0のベータ版やリリース候補版で使用されていた {blockid} テンプレート変数は削除されました。

セキュリティ上の変更

特に管理者セクションで使用される多くのフォームには、フォーム保存・アクション処理がきちんと実行されるよう、新しいhiddenフィールドが必要になっています(訳注:CSRF攻撃を防ぐため)。次の記述を

<input type="hidden" name="{gltoken_name}" value="{gltoken}"{xhtml}>

以下のテンプレートに追加してください。

プラグイン固有のテンプレートファイルが一部変更されているので、以下のテンプレートファイルを確認してください。

削除されたファイル

以下のテンプレートファイルは削除され、不要になりました。

システムメッセージ

以前、システムメッセージ用にハードコードされていたCSSは、新しく sysmessage クラスとしてスタイルシートに移されました。

Geeklog 1.4.1でのテーマの変更点

1.4.1ではCSSが以前よりも大幅に変更されました。レイアウト用のコンポーネントがスタイルシートに移されている途中なので、外見を変えるのに、テンプレートファイルをいじる必要は少なくなっています。テーブルと <div> タグの使用が減り、セマンティックス(意味)と一貫性がさらに重視されています。 style.css ファイルには、CSSクラスの使用に関する説明が増えています。

従来通り、不足しているテンプレートファイルはGeeklogに同梱されているデフォルトのProfessionalテーマからコピーしてくればよいでしょう。

見出しタグ

今後、ブロックと記事のタイトルは見出しタグで表現されます。記事の中で最大のタイトルは <h1> タグであり、ブロックのそれは常に <h2> タグです。

記事のレイアウト

記事のブロックはもはやテーブルを含まなくなり、対応するCSSのクラス名も一貫性を持たせるために変更されました。記事を囲むボックスは、 story クラスまたは story-featured クラスという名前がついています。ボックス内のコンポーネントは、記事アイコン、記事情報、記事本体、記事フッターです。タイトルは <h1> タグを使用しています。注目記事は外側のボックスのクラスが違うだけで、残りは同じです。

ブロック

ブロックは記事と同じように変化しました。テーブルはなくなり、block-box, block-box-left, block-box-right という名前の <div> タグが1個使用されているだけです。タイトルは <h2> タグであり、ブロックのヘルプアイコンは block-helpicon というクラスの <span> タグになりました。ブロックのサブタイトルは、(新着記事ブロックや過去の記事ブロックのように) <h3> タグです。これらの変更は style.css についで、以下のファイルに影響を与えます。

管理者用テンプレート

管理者用テンプレートの多くには、外見や機能の変更のため少しずつ変更が加えられています。自作テーマの管理者用テンプレートを変更していない場合、更新する最も簡単な方法は、Professional テーマの admin ディレクトリからファイルを一式、コピーすることです。

テーマの他の変更点

Professionalテーマ

以下の変更はProfessionalテーマ固有のものです。他のテーマに移植する必要はたぶんないでしょう。

Geeklog 1.4.0におけるテーマの変更点

従来通り、不足している新しいテンプレートファイルは、Geeklogに同梱されているデフォルトのProfessionalテーマからコピーしてくればよいでしょう。

管理者用テンプレート

Geeklog 1.4.0の管理者用セクションはかなりの変更を伴って改訂されています。したがって、従来のテーマの admin ディレクトリをGeeklog-1.4.0に同梱のProfessionalテーマの admin ディレクトリでそっくり置き換えてから、今まで自分が加えた改造を適用することをお勧めします。

注意: コントロールパネル(moderation.php)用の新アイコンは背景が白になっています。背景が暗い色(や白以外の色)のテーマ用には、アルファチャンネルつきのPNG形式のアイコンをダウンロードするとよいでしょう。この場合は、JavaScriptを用いたハックを行わないと、インターネットエクスプローラーでは表示できないことに注意してください。場合によっては、これらのアイコンを変換して、背景を透明にしたりテーマの背景色に合わせたりする必要があるでしょう。

アドバンストエディター(WYSIWYGエディター)

同梱されているアドバンストエディター(FCKeditor)を使用するには、次の新しいテンプレートが必要です。

テーマの header.thtml テンプレートファイルの <head> セクションに {advanced_editor} テンプレート変数を追加する必要があります。

他の変更点

Theme changes in Geeklog 1.3.11

There are no mandatory theme changes in Geeklog 1.3.11, so themes made for Geeklog 1.3.10 will work just fine without any modifications.

A few minor additions / new options have been introduced:

Theme changes in Geeklog 1.3.10

General note: To upgrade your custom theme for use with Geeklog 1.3.10, you can simply copy over any new template files from the Geeklog default theme.

The biggest change in Geeklog 1.3.10 is that we now ship it with only one default theme (the Professional theme, kindly provided by Victor B. Gonzalez) and that the previously included themes are now available as a separate download.

Admin templates

Most themes don't change the template files in the theme's admin directory, so you can often save yourself a bit of work by simply replacing the entire admin directory with the one from the Geeklog 1.3.10 distribution.

Other templates

Optional changes

The following is a list of optional changes (mostly new variables that are now available). This information is mostly of interest for those who want to develop their own themes.

Theme changes in Geeklog 1.3.9

Theme changes in Geeklog 1.3.8

Theme changes in Geeklog 1.3.8 were mostly aimed at moving as much of the hard-coded HTML into template files as possible. Other changes were made to give theme authors better control over the layout and a small portion of changes were done to incorporate new Geeklog features.

New template files

This is a list of the new files. You can safely copy these over from one of the standard themes that ship with Geeklog (most of these files contain HTML that was previously hard-coded into Geeklog).

adminoption_off.thtml
loginform.thtml
topicoption.thtml
topicoption_off.thtml
useroption_off.thtml
admin/database/listbackups.thtml
admin/database/listitem.thtml
admin/user/edituser.thtml
admin/user/plainlist.thtml
comment/commentbar.thtml
comment/startcomment.thtml
pollbooth/pollanswer.thtml
pollbooth/pollblock.thtml
pollbooth/pollcomments.thtml
pollbooth/pollresult.thtml
pollbooth/pollvotes_bar.thtml
pollbooth/pollvotes_num.thtml
preferences/boxesblock.thtml
preferences/commentblock.thtml
preferences/deleteaccount.thtml
preferences/digestblock.thtml
preferences/displayblock.thtml
preferences/displayprefs.thtml
preferences/excludeblock.thtml
preferences/language.thtml
preferences/privacyblock.thtml
preferences/profile.thtml
preferences/theme.thtml
preferences/username.thtml
preferences/userphoto.thtml
search/resultauthdatehits.thtml
search/resultrowenhanced.thtml
search/resultsummary.thtml
search/resulttitle.thtml
users/newpassword.thtml

Note: preferences and admin/database are new directores.

Changed / updated template files

These files have changed since Geeklog 1.3.7, i.e. they may contain new variables, table columns, etc. If you haven't changed these files in your existing theme, it is probably best to simply copy them over from one of the themes that ship with Geeklog (with the exception of style.css and header.thtml, see below).

style.css (see below)
header.thtml (see below)
admin/block/blockeditor.thtml
admin/block/listblocks.thtml
admin/block/listitem.thtml
admin/event/eventeditor.thtml
admin/event/eventlist.thtml
admin/event/listitem.thtml
admin/group/grouplist.thtml
admin/group/listitem.thtml
admin/story/liststories.thtml
admin/topic/listitem.thtml
admin/topic/topiceditor.thtml
admin/topic/topiclist.thtml
calendar/editpersonalevent.thtml
calendar/eventdetails.thtml
search/searchform.thtml
search/searchresults.thtml
submit/submitevent.thtml
users/getpasswordform.thtml

In style.css, four classes have been added that are used in the new search code of Geeklog 1.3.8. Instead of copying over the entire file, you will probably only want to copy over the code for those four classes: searchAuth, searchDate, searchHits, highlight.

If the header.thtml of your theme is using the {menu_elements} variable, then you do not need to make any changes to it. If it is not using that variable, then you will need to make one change to it. In that case, search your header.thtml for the link to the story submission form, i.e. something like

<a href="{site_url}/submit.php?type=story">

and change it to read

<a href="{site_url}/submit.php?type=story{current_topic}">

Removed template files

If you have a file named commentheader.thtml in your theme directory, you can safely remove it. It isn't used at all.

Theme changes in Geeklog 1.3.7

Please note that all the following changes are optional. Themes made for Geeklog 1.3.6 will work just fine with Geeklog 1.3.7 - no changes are necessary.

New features and improvements

Other changes

Theme changes in Geeklog 1.3.6

There have been a lot of changes in the themes for 1.3.6 to get rid of the last pieces of hard-coded english texts so as to make localisation easier. Most of these changes have been made in the Admin editors (admin directory) and the calendar (calendar directory). If you created your own theme for an earlier version of Geeklog, we recommend that you copy over these two directories from one of the themes that come with Geeklog (choose one that is similar to your own theme or which it was originally based on). It seems like most Geeklog themes didn't change these files anyway, so this shouldn't be too much of a hassle ...

Other changes

CSS changes

Note: Theme authors are encouraged to specify a character set in the header.thtml of their themes like this:

<meta http-equiv="Content-Type" content="text/html; charset={charset}">

Geeklog will replace the {charset} variable with the proper character set based on the currently used language file. Also make sure that you put the above line before the <title> tag in the <head> section of your header.thtml file.