Official2Plus

Article

Top > SkinDev > Official2Plus

PukiWiki 本家用スキンを PukiWiki Plus! i18n 用に移植する

Table of Contents

まえがき
本題
参考

まえがき

基本的には PukiWiki EUC-JP 版用のスキンを PukiWiki Plus! i18n 用に移植するには、文字コード EUC-JP を UTF-8 に変換するだけで、コードそのものは特に修正することもなく動作するはずです。

ただし、それでは PukiWiki Plus! i18n 版の利点をいかせません。 PukiWiki Plus! i18n の利点を生かすための修正方法解説です。

本題

SKIN_URI, IMAGE_URI

SKIN_DIR 定数を SKIN_URI に、IMAGE_DIR 定数を IMAGE_URIに変更します。

PukiWiki Plus! 用各種 javascript の読み込み

以下のコードを <head></head> 内におきます。

 <script type="text/javascript">
 <!--
<?php if (exist_plugin_convert('js_init')) echo do_plugin_convert('js_init'); ?>
 // -->
 </script>
 <script type="text/javascript" src="<?php echo SKIN_URI.'lang/'.$language ?>.js"></script>
 <script type="text/javascript" src="<?php echo SKIN_URI ?>default.js"></script>
 <script type="text/javascript" src="<?php echo SKIN_URI ?>ajax/textloader.js"></script>
 <script type="text/javascript" src="<?php echo SKIN_URI ?>ajax/glossary.js"></script>
<?php if (! $use_local_time) { ?>
 <script type="text/javascript" src="<?php echo SKIN_URI ?>tzCalculation_LocalTimeZone.js"></script>
<?php } ?>

lang/*.js （マルチ言語設定関係）
default.js (編集支援、リアルタイムプレビュー、など全体の初期設定)
ajax/textloader.js (ajax ライブラリ)
ajax/glossary.js (Glossary ページに登録した用語をポップアップ）
tzCalculation_LocalTimeZone.js (タイムゾーン計算)

他にも

kanzaki.js （見出し周辺をクリックする際に表示される目次ポップアップ）

が必要ならば入れます。個人的には kanzaki.js は邪魔な気がしますし、css デザインをしなければならないのでとりあえずはずしておきました(#poptoc 関連)。

Plus! の TITLE: コマンドに対応

PukiWiki Plus! には TITLE: コマンドで Wiki 文書中で HTML タイトルを指定できる仕組みがあります。が、もちろんスキンがサポートしていなければいけません。この時指定された文字列は $newtitle 変数に格納されています。

スキンによって <title></title> 用文字列の生成流儀が異なるので一般的な修正方法は書けないのですが、私の流儀を例にすると、

// Title
if ($is_read) {
    if ($newtitle) {
        $display_title = $newtitle . ' - ' . $page_title;
        $heading_title = make_pagelink($vars['page'], $newtitle);
    } elseif ($vars['page'] == $defaultpage) {
        $display_title = $page_title;
        $heading_title = make_pagelink($vars['page'], $page_title);
    } else {
        $display_title = htmlspecialchars($vars['page']) . ' - ' . $page_title;;
        $heading_title = make_pagelink($vars['page'], get_short_pagename($vars['page']));
    }
} else {
    $display_title = $title . ' - ' . $page_title;
    $heading_title = $title;
}

をスキン上部に書いておき、<title></title> を

<title><?php echo $display_title ?></title>

$body 出力直前の h1 を

<h1 class="firstHeading"><?php echo $heading_title ?></h2>

のようにしています。

サイドバーに対応

PukiWiki Plus! i18n には MenuBar だけでなく SideBar も用意されており、３カラムデザインを取ることができるようになっています。$side 変数に格納されています。

<?php if ($side) echo '<div id="sidebar">' . $side . '</div>' ?>

元々が２カラムデザインだった場合、修正には手間取るでしょう。

    if (exist_plugin_convert('navibar2') && plugin_navibar2_search_navipage($vars['page']) != '') {
        $navi = do_plugin_convert('navibar2');
    } elseif (exist_plugin_convert('navibar')) {
        $navi = do_plugin_convert('navibar','list,search,recent,help,|,new,edit,upload,freeze,rename,backup,diff');
    }

を上部に書いておき

<?php if ($navi) echo $navi ?>

navibar2 プラグインでは、サイト管理者は Navigation というページを編集することでナビゲーションメニューを設定できます。サイト管理者が独自設定をしたい場合にスキンをいじらずにすむので親切です。参照：plus:Plugin/navibar2.inc.php css デザインは #navigator2, .navi* 関連

$foot_tag

PukiWiki 本家には、プラグインが動的にスキンのヘッダー (<head></head>) にコードを追加できる仕組み $head_tag がありますが、PukiWiki Plus! i18n にはそれに加えて、フッターにコードを追加できる仕組み $foot_tag があります。

どこか </body> の直前辺りに

<?php if ($foot_tag) echo $foot_tag ?>

を追加しておきます。<div id="footer"> .... $foot_tag</div></body> のような形が良いかもしれません。

css デザイン

PukiWiki Plus! i18n デフォルトスキンの css default.css を参照すると、

/* PukiWiki Plus! */

という行があるので、それ以下をとりあえずコピーしておきます。後は各プラグインの名称が書いてありますので、それらに正式に対応したスキンにしたい場合は、確認、編集していきます。

参考

もちろん PukiWiki Plus! i18n のデフォルトスキンが参考になります。

拙作の PukiWiki Plus! i18n 用スキンも参考になるかもしれません。