はじめに
今回はオリジナルのPukiWikiスキンを開発のための準備をします。
1から作るのもいいですが、このシリーズではデフォルトのスキンを改造していく形となります。
ただ、改造して作るとライセンスは元ソースの GPLv2 or any later version が適用されます。
別のライセンスを使いたいのであれば1から書くことをオススメします。
(私的利用の範囲内で配布しないのであればライセンスに関しては考えなくてもヨシ！)
過去につくったCleaskin
過去にCleaskinというスキンを作ったことがあります
デスクトップ
モバイル
前提
- PHPを導入していること
- PukiWikiを既に導入していること
上記については省きます。
スキンの仕組みについて
pukiwiki.ini.php
/////////////////////////////////////////////////
// Directory settings II (ended with '/')
// Skins / Stylesheets
define('SKIN_DIR', 'skin/');
// Skin files (SKIN_DIR/*.skin.php) are needed at
// ./DATAHOME/SKIN_DIR from index.php, but
// CSSs(*.css) and JavaScripts(*.js) are needed at
// ./SKIN_DIR from index.php.
// Static image files
define('IMAGE_DIR', 'image/');
// Keep this directory shown via web browsers like
// ./IMAGE_DIR from index.php.
デフォルトではSKIN_DIRは skin/ となっています。
skin/ にはデフォルトのスキンが入っており、スキンを変えるには
- SKIN_DIRの定数を変更する
-
skin/*の中身を使いたいスキンで上書きする
という方法があります。
私は1. SKIN_DIRの定数を変更する方法でいいと思います。
例えば、Cleaskinならばskin/cleaskin/にCleaskinスキンを設置し、それをSKIN_DIRでskin/cleaskin/として設定して読み込ませます。
スキンの読み込み
pukiwiki.ini.phpで設定されたSKIN_DIRのディレクトリ内にあるpukiwiki.skin.php を読み込む仕様となってます。
つまり、pukiwiki.skin.phpさえあればスキンを作ることができます。
その他、CSSやJSなどをpukiwiki.skin.phpから読み込むことによって適用できるわけです。
スキンで使われる定数やら
必ず必須というわけでもないと思いますが、PukiWikiの標準スキンで利用されている定数なので基準みたいな感じだと思ってください。
| 定数名 | 説明 |
|---|---|
| SKIN_DEFAULT_DISABLE_TOPICPATH | 0でパンくずリスト(topicpath)、1でURL |
| PKWK_SKIN_SHOW_NAVBAR | ナビバーの表示 (標準スキンでいうところの左上の文字のバー) |
| PKWK_SKIN_SHOW_TOOLBAR | ツールバーの表示 (標準スキンでいうところの右下のアイコンのバー) |
| LANG | 表示言語、pukiwiki.ini.phpで定義されている |
| UI_LANG | UI上の表示言語、pukiwiki.ini.phpで定義されているが、初期設定ではLANGと同様の値 |
| PKWK_READONLY | 閲覧専用、pukiwiki.ini.phpで定義されている |
| CONTENT_CHARSET | 文字のエンコード形式 |
| SKIN_DIR | スキンのディレクトリ |
| IMAGE_DIR | 画像のディレクトリ |
| PLUGIN_DIR | プラグインのディレクトリ |
| S_COPYRIGHT | PukiWikiのコピーライト、バージョンや開発チームなどの情報 |
| PHP_VERSION | PHP標準定数でPHPのバージョン情報 |
スキン開発のための準備
-
skin/スキン名/のディレクトリを作成
私はskin/nature/にしました -
skin/にあるpukiwiki.skin.phpとpukiwiki.cssをskin/スキン名/へコピーする - 私は
pukiwiki.cssをリネームしてnature.cssにしました。
これもスキン名.cssでもいいですし、別に名前は任意です - cssの名前を変えた場合は、
skin/スキン名/pukiwiki.skin.phpの 75行目あたりの以下のコードにあるpukiwiki.cssの部分を変更後のファイル名にしてください
<!-- 変更前 -->
<link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>pukiwiki.css" />
<!-- 変更後 (例) -->
<link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>nature.css" />
5. pukiwiki.ini.php の SKIN_DIRの定数をskin/ から skin/スキン名/ に変更 (85行目)
/* 変更前 */
// Skins / Stylesheets
define('SKIN_DIR', 'skin/');
/* 変更後 (例) */
// Skins / Stylesheets
define('SKIN_DIR', 'skin/nature/');
正常にCSSやJSが読み込まれていれば準備は完了です。
次回は実際に変更していきます。