PAGES

GUIDE

DATA

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通りが考えられます(おすすめは後者かも?)。

  • これ(pukiwiki.css)を直接改修する。
  • これはそのままにして、追加のCSSファイルを作成してリンクする。



SAMPLE|2019.12.06

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

DEMOとSkinの配布

サンプルの利用方法

以下、デモサイトのトップページに記載しています。
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" />




構造のカスタマイズ

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 の編集が必要です。
上記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の編集

  • リスト構造の左マージンを変更
    // リスト構造の左マージン
    $_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   = ' ';   ←全角スペースを定義する




添付ファイル: filesample.zip 17件 [詳細]
Last-modified: 2020-02-14 (金) 19:24:28