#author("2023-10-03T11:48:55+09:00;2020-03-06T20:16:03+09:00","default:inoue.ko","inoue.ko") #author("2023-10-03T11:50:59+09:00","default:inoue.ko","inoue.ko") *PukiWiki Customize ~ ***CONTENTS #contents2_1 ~ ~ **カスタマイズの基本 ここで概説するカスタマイズとは、システムの基幹部分はそのままで、ページのフレーム構造（HTML）とスタイル（CSS）を書き換えることを意味します。PukiWikiの場合、skinフォルダの中にある以下の２つのファイルを編集するだけでカスタマイズが可能です。 ~ ***ページの文書構造の変更： ./skin/pukiwiki.skin.php このファイルは、ページ構築するHTMLの雛形情報が書かれています。このHTML構造を編集し、スタイル用の id や class を下の pukiwiki.css と関連づけることでデザインのカスタマイズが可能です。この作業には、HTML+CSSによるページデザインの知識と、phpの基本的な仕組みについての理解が必要です。 ~ ***スタイルの変更： ./skin/pukiwiki.css このファイルは、pukiwiki.skin.php がもつ文書構造にスタイルを与えます。このCSSには、代表的なプラグイン利用時のデザインも含め、すべてのスタイル情報が書かれています。スタイルのカスタマイズには、以下の２通りが考えられます（おすすめは後者かも？）。 -これ（pukiwiki.css）を直接改修する。 -これはそのままにして、追加のCSSファイルを作成してリンクする。 ~ ~ **SAMPLE｜2019.12.06 **SAMPLE 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の構造を変更しています'' 元のデザインは tableタグでレイアウトされていますが、このサンプルでは CSSの Flexbox でレイアウトしています。また、PukiWikiには、閲覧モードと編集モードの２つの画面モードがあるので、以下のような PHP の条件分岐により、２つのパターンの HTML を生成するようにしています。 --モードの分岐 <?php if ($menu !== FALSE) { ?> <div id="readMode"> // 閲覧モードで表示する内容 </div> <?php } else { ?> <div id="editMode"> // 編集モードで表示する内容 </div> <?php } ?> --生成される２種類の HTML 構造 header + #readMode( nav + article ( #main + #note +・・) ) + footer header + #editMode( ) + footer -''CSSの仕様を変更しています'' オリジナル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 ***付記：これを拡張した学内プロジェクト サンプル事例 -DEMO：https://design.kyusan-u.ac.jp/SampleSite/pukiwiki_sample -Download：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''| |箇条書き レベル１|''-'' |''ul.list1 li''| |箇条書き第 レベル２|''--'' |''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 = ''; ← このよう（シングルクオーテーション２つ）にする -ユーザー定義ルールに以下の２つを追加 $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 = ' '; ←全角スペースを定義する ~ ~