LogoMark.png

PukiWiki/Customize のバックアップ(No.1)


PukiWiki Customize


CONTENTS




カスタマイズの基本

ここで概説するカスタマイズとは、システムの基幹部分はそのままで、ページのフレーム構造(HTML)とスタイル(CSS)を書き換えることを意味します。PukiWikiの場合、skinフォルダの中にある以下の2つのファイルを編集するだけでカスタマイズが可能です。

ページの文書構造の変更: ./skin/pukiwiki.skin.php

このファイルは、ページ構築するHTMLの雛形情報が書かれています。このHTML構造を編集し、スタイル用の id や class を下の pukiwiki.css と関連づけることでデザインのカスタマイズが可能です。この作業には、HTML+CSSによるページデザインの知識と、phpの基本的な仕組みについての理解が必要です。

スタイルの変更: ./skin/pukiwiki.css

このファイルは、pukiwiki.skin.php がもつ文書構造にスタイルを与えます。このCSSには、代表的なプラグイン利用時のデザインも含め、すべてのスタイル情報が書かれています。スタイルのカスタマイズには、以下の2通りが考えられます(おすすめは後者かも?)。

SAMPLE|2019.12.06

SKINの内容を簡潔に理解するためのミニマルサンプルです。いくつか、追加のプラグインも含めています。

DEMOとSkinの配布

サンプルの利用方法

以下、デモサイトのトップページに記載しています。
https://design.kyusan-u.ac.jp/SampleSite/pukiwiki_minimal

サンプルの説明




構造のカスタマイズ

HTML構造のカスタマイズには、pukiwiki.skin.php の編集が必要です。
以下、よくある質問です。

特定のページをレイアウトに埋め込みたい

PukiWikiはデフォルトで、MenuBar という名前のページを持ち、その内容(主にリスト)をページ内に埋め込むかたちでメニューを表示しています。これと同様に、サイドバーやトップメニューといった機能ブロックも、別ページとして作成しておいて、それを読み込ませる・・ということが可能です。例えば以下のような記述を pukiwiki.skin.php の<body>内に置けば、SideBar という名前のページを埋め込むことが可能になります。レイアウトは #sideBar をフックとして、CSSで制御します。

<div id="sideBar">
   <?php echo convert_html(get_source('SideBar')) ?>
</div>

この方法を使うことで、PukiWiki画面上には、ページとして編集された様々なパーツを埋め込むことができます。

参考
PukiWiki には、#include というプラグインがあります。基本的なブロック構造を変更する必要がなく、単に記事本体ブロック($body)の中に他のページを読み込みたい・・という話であれば、#include プラグインの利用で解決します。具体的には、以下のように記載します。

#include( 読み込みたいページ名, [,title |,notitle]  )


トップページのみ特別にしたい

トップページにのみ特定のコンテンツを表示したい場合、あるいはその逆の場合、以下のように、現在のページがトップページであるか否かを判定するPHPを書けばOKです。

if ( $title == ' トップページのページ名 ' ) { }




スタイルのカスタマイズ

スタイルのカスタマイズは、skin/pukiwiki.css.php の編集が必要です。
上記SAMPLE で練習中の方は、skin / css / style.css が相当します。

基本

pukiwiki.skin.php のタグ・ID・CLASS を見ながら、それらをセレクタとして、プロパティーと値を記述します。

Wikiの記法とHTMLタグの対応

実際のページには、Wikiの記法にしたがって記述された内容が、HTMLタグに置き換えられて表示されるので、どの記法がどのHTMLタグに対応するのか、その対応関係を知っておくことが必要です。以下、主なものを挙げます。

要素Wikiの記法HTMLタグ
ページ名Wikiページ名h1
大見出し* h2
中見出し** h3
小見出し*** h4
箇条書き レベル1- ul.list1 li
箇条書き第 レベル2-- ul.list2 li
段落記述+改行 p
整形済みテキスト行頭半角空白 pre
引用行頭に > blockquote p.quotation
リンク[ [ ] ] a
強調’’文字列’’ strong
斜体’’’文字列’’’ em
取消線%%文字列%% del




関連ファイルの編集

オリジナルのCSSでデザインする場合、PukiWiki特有の仕様の無効化も必要になります。以下、よくある要望についての回答です。

default.ini.phpの編集


ja.lng.php