LogoMark.png

PukiWiki/Customize の変更点


#author("2020-03-06T20:16:03+09:00","default:inoue.ko","inoue.ko")
*PukiWiki Customize
~

***CONTENTS
#contents2_1
~
~

**カスタマイズの基本
ここで概説するカスタマイズとは、システムの基幹部分はそのままで、ページのフレーム構造(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通りが考えられます(おすすめは後者かも?)。
-これ(pukiwiki.css)を直接改修する。
-これはそのままにして、追加のCSSファイルを作成してリンクする。
~
~

**SAMPLE|2019.12.06
SKINの内容を簡潔に理解するためのミニマルサンプルです。いくつか、追加のプラグインも含めています。
~
***DEMOとSkinの配布

-''DEMO'':https://design.kyusan-u.ac.jp/SampleSite/pukiwiki_minimal
// ID user
// PW password
-''DATA'':https://github.com/koichi-inoue/pukiwiki_minimal
~


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


***サンプルの説明
-''HTMLの構造を変更しています(最新:2019.12.06)''
元のデザインは tableタグでレイアウトされていますが、このサンプルでは CSSの Flexbox でレイアウトしています。また、PukiWikiには、閲覧モードと編集モードの2つの画面モードがあるので、以下のような PHP の条件分岐により、2つのパターンの HTML を生成するようにしています。
--モードの分岐
 <?php if ($menu !== FALSE) { ?>
   <div id="readMode">
     // 閲覧モードで表示する内容
   </div>
 <?php } else { ?>
   <div id="editMode">
     // 編集モードで表示する内容
   </div>
 <?php } ?>
--生成される2種類の HTML 構造
 header + #readMode( nav + article ( #main + #note +・・) ) + footer
 header + #editMode(  ) + footer

-''CSSの仕様を変更しています(最新:2019.12.06)''。オリジナルCSS はそのまま残して、追加のCSSで上書きする方法を採用しています。''CSSのカスタマイズの際は、additional.css を編集して下さい。''なお、pukiwiki.skin.php の head 部分は、以下のように、最初に pukiwiki.css を読み込んで、その後で additional.css を読むかたちで、スタイルの上書きを行なっています。
 <link rel="stylesheet" href="skin/css/pukiwiki.css" />
 <link rel="stylesheet" href="skin/css/additional.css" />

-付記:これを拡張したプロジェクトの事例
--学内プロジェクト用 サンプル事例
https://design.kyusan-u.ac.jp/SampleSite/pukiwiki_sample
https://design.kyusan-u.ac.jp/ZIP/pukiwiki_sample.zip
// ID:user
// PW:password
//--情報科学研究科 初期サンプル
//https://design.kyusan-u.ac.jp/SampleSite/informationscience
//--情報科学研究科 2019.12.06 開発中のものは以下
//http://apus.is.kyusan-u.ac.jp/~user01/

~
~

**構造のカスタマイズ
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 == ' トップページのページ名 ' ) { }

-例)トップページにのみ、(例えば)スライドショーを埋め込みたい
 <?php if ( $title == ' トップページのページ名 ' ) { ?>
     <div id="slideShow">
    ここにスライドショーのためのコードを記述
     </div>
 <?php } ?>

-例)トップページにのみ、他のページを埋め込みたい
 <?php if ( $title == ' トップページのページ名 ' ) { ?>
     <?php echo convert_html(get_source('(埋め込みたいページ名)')) ?>
 <?php } ?>

-例)トップページ''以外''に、◯◯を埋め込みたい
if 文の条件式を「現在のページ Not Equal トップページ」とすればOKです。
 <?php if ( $title != ' トップページのページ名 ' ) { ?>
      ここに埋め込みたい内容のコードを書く
 <?php } ?>

~
~

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

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

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

|33|33|33|c
|要素|Wikiの記法|HTMLタグ|h
|ページ名|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の編集

-リスト構造の左マージンを変更
 // リスト構造の左マージン
 $_ul_left_margin = 0;   // リストと画面左端との間隔(px)
 $_ul_margin = 16 → 0;       // リストの階層間の間隔(px)
 $_ol_left_margin = 0;   // リストと画面左端との間隔(px)
 $_ol_margin = 16 → 0;       // リストの階層間の間隔(px)
 $_dl_left_margin = 0;   // リストと画面左端との間隔(px)
 $_dl_margin = 16 → 0;        // リストの階層間の間隔(px)
 $_list_pad_str = ' class="list%d" style="padding-left:%dpx;margin-left:%dpx"';

-見出し右上に表示されるナビゲータへのリンク(↑)を消去
 //$top = $_msg_content_back_to_top  ; ← この行をコメントアウトして
 $top = '';  ← このよう(シングルクオーテーション2つ)にする

-ユーザー定義ルールに以下の2つを追加
 $line_rules = array(
    "SUP{([^}]*)};" => '<span style="vertical-align:super; font-size:60%;">$1</span>',
    "SUB{([^}]*)};" => '<span style="vertical-align:sub; font-size:60%;">$1</span>',
   :
 );

~


***ja.lng.php
-見出しに自動生成されるダガー:†を消す
アンカー機能を残しつつ、「†」が表示されないように変更する
 //$_symbol_anchor   = '&dagger;'; ← この行をコメントアウトして
 $_symbol_anchor   = ' ';   ←全角スペースを定義する

~
~