PHPベースのオープンソースのウィキソフトウェア DokuWikiのデフォルトテンプレートのカスタマイズについて解説します。
DokuWikiには、テンプレートカスタマイズに便利なロゴの変更や挿入（組込）フックなどの機能が用意されています。
これはDokuWikiの標準的な機能なので、テンプレートによってカスタマイズできる内容は異なりますが、ほとんどのテンプレートで実装されています。
また、DokuWikiデフォルトテンプレートはシンプルが故に、少し見にくい点もあります。
それらをCSSを使用してカスタマイズ・調整してみます。
なお、今回のバージョンは以下の通りです。
- DokuWiki 2018-04-22a “Greebo”
DokuWikiのロゴの変更
テンプレートで用意されているサイトロゴなどの画像は、ファイルを差し替えることなく変更できます。
デフォルトテンプレートでは、以下の3つの画像を変更できます。
- サイトロゴ（logo.png）
- ファビコン（favicon.ico）
- ブックマークアイコン（apple-touch-icon.png）
これら3つの画像は、以下のような読み込み優先順位となっています。
- :wiki:logo.png
- :logo.png
- lib/tpl/dokuwiki/images/logo.png
※favicon.ico・apple-touch-icon.pngも同じ
ですので、1・2番目の名前空間wiki・ルートに同じ名前の画像ファイルを用意してアップロードすれば、テンプレートの画像より先に読み込まれます。
これで、ロゴの変更は完了です。
テンプレート本体のロゴに手を加える必要はありません。
挿入（組込）フックによるコンテンツの追加
挿入（組込）フックとは、テンプレート本体を編集することなく、コンテンツの一部を挿入できる仕組みのことです。
用意されているフックの箇所はテンプレートによって異なりますが、DokuWikiデフォルトテンプレートの場合は以下の通りです。
| ファイル名 | フックの位置 |
|---|---|
| meta.html | headタグの中。metaタグやスタイルを追加可能。 |
| sidebarheader.html | （サイドバーがあれば）サイドバーの上部。 |
| sidebarfooter.html | （サイドバーがあれば）サイドバーの下部。 |
| pageheader.html | コンテンツの上部。 |
| pagefooter.html | コンテンツの下部。 |
| header.html | ページの上部。ロゴや Wiki タイトルの上。 |
| footer.html | ページの一番最後。他の全ページの内容の後。 |
テンプレートのソースファイル内で、
tpl_includeFile('meta.html')
のように記述している箇所が挿入フックです。
なお、フックされるコンテンツのファイル拡張子はHTMLですが、PHPも記述できるので、動的なコンテンツにすることも可能です。
フックされるコンテンツファイルの格納ディレクトリは、
- lib/tpl/dokuwiki（テンプレートと同一ディレクトリ）
- conf
となっています。
いずれかに上記ファイル名のファイルを配置すれば、テンプレート本体を修正することなくコンテンツを拡張できます。
サイト全体幅の変更
ここからは、DokuWikiデフォルトテンプレートの微調整です。
デフォルトテンプレートのベースとなるフォントに関するスタイルは、
lib/tpl/dokuwiki/css/basic.less
で、以下のように記述されています。
body {
font: normal 87.5%/1.4 Arial, sans-serif;
/* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
-webkit-text-size-adjust: 100%;
}
ブラウザのデフォルトフォントサイズが16pxなので、それに対して87.5%に縮小した14pxがフォントサイズ。
また、行の高さ（line-height）は1.4となっています。
サイト全体幅とサイドバーの幅は、管理画面のテンプレートのスタイル設定でstyle.iniファイルを使用して設定できますが、デフォルトはそれぞれ75em、16emとなっています。
emはフォントサイズが元となるので、それぞれピクセル（px）にすると、
- サイト全体幅 … 1050px
- サイドバー幅 … 224px
です。
サイドバーの幅はこのままでもいいんですが、サイト全体幅は最近のワイドモニターのサイズを考えると少し狭いです。
ですので、モニターの解像度のシェア率を考えて、フルHD（1920×1080px）、フルワイドXGA（1366×768px）である程度画面幅いっぱいになるように、以下の設定を行いました。
| 項目 | デフォルト | 変更後 |
|---|---|---|
| フォントサイズ | 87.5%（14px） | － |
| サイト全体幅 | 75em（1050px） | 90em（1260px） |
| サイドバー幅 | 16em（224px） | － |
サイト全体幅を90em（1260px）にしたので、コンテンツ部分の幅が広くなりました。
ページ内スタイルの変更
続いて、ユーザースタイルのCSSファイル（conf/userall.css）を追加して、テンプレートのスタイルを調整します。
行間の調整
まずは以下のスタイルを追加して、行間を少し広げて文章を読みやすくします。
/* ページ内段落行の高さ */
.dokuwiki .page p {line-height:1.5em;}
見出しのスタイルの調整
続いて、見出しにスタイルを設定してセクションの区切りをわかりやすくします。
DokuWikiデフォルトテンプレートの見出し（h1～h6）は、文字の大きさしか変わらないので、読みにくいです。
タイトルとなるh1とほとんど使用しないh5以降を除き、h2～h4を以下のようにスタイル追加しました。
/* ページ内見出し */
.dokuwiki .page h2 {border-left:3px solid #000; padding-left:5px;}
.dokuwiki .page h3 {border-bottom:3px solid #e7e7e7;}
.dokuwiki .page h4 {border-bottom:3px double #eee;}
最後に
今回は、DokuWikiのデフォルトテンプレートのカスタマイズについて解説しました。
DokuWikiは、ロゴの変更や挿入（組込）フックの仕組みが用意されているので、テンプレート本体を修正することなくコンテンツを拡張できて便利です。
また、デフォルトテンプレートはシンプルな見た目なので、スタイルを追加して見やすくするのがおすすめですよ。
DokuWikiのおすすめテンプレートとカスタマイズ方法については、こちらの記事にまとめています。
DokuWikiの使い方については、こちらの記事にまとめています。
コメント