CentOS6 サーバー構築/Wikiサイト構築/PukiWiki改造３

PukiWiki改造　その３（Skin）

概要：ここではSKINを変更したのでその時の内容を説明する。その後SKINを新規作成したので、現在のSKINとは異なっている。この時の経験が新規SKINの作成に役立った。

１. Skinの変更
概要:PukiWikiの公式サイトのSkinの一覧からPukiwiki本体に影響のなさそうな、iridのcloudwalkを導入する。
上記HPの利用方法に従って導入・設定する。

)　ダウンロード
- 最新のファイル[ この時点050213irid.zip ] を上記HPからダウンロードし、/tmp/workディレクトリーに保存する。

)　導入

# cd /tmp/work
# unzip 050213irid.zip　　　　　　　←　解凍するとiridディレクトリーができる。
# cp -Rp irid /var/www/pukiwiki/skin/

)　設定

# vi pukiwiki.ini.php　　　←　編集する。

// Skins / Stylesheets
//define('SKIN_DIR', 'skin/');
define('SKIN_DIR', 'skin/irid/');

)　SiteNavigatorとPageNavigatorの名前で、通常のWikiページとして作成する。それぞれ、サイトのナビゲーションとして表示される。
)　スタイルを変更する場合には、irid/pukiwiki.skin.phpをエディタで開き、使用するスタイル名の設定を行う。iridwire、cloudwalk、orangeboxの３種類から選べる。
```
# vi irid/pukiwiki.skin.php
```
```
// 使用するスタイル
$irid_style_name = "cloudwalk";　←　ここを変更する。
```
)　Pukiwikiにアクセスして表示が変更されているのを確認する。

２. Skinの改造

)　編集操作項目の追加
Wikiサイトの作成のため編集操作項目に「名前変更」、「複製」、「一覧」があると便利なので追加する。

plugin.cssの編集

#vi /var/www/pukiwiki/skin/irid/orangebox/plugin.css

@charset "Shift_JIS";

/* PageAction
----------------------------------------------------------------------------- */
/* 表示 */
#page_action .pa_edit,
#page_action .pa_attach,
#page_action .pa_diff,
#page_action .pa_rename,　←　追加
#page_action .pa_template,　←　追加
#page_action .pa_list,　←　追加
#page_action .pa_backup{
        height:20px;
        background-repeat:no-repeat;
        padding-left:20px;
}
.pa_edit{
        background-image:url("../../../image/edit.png");
}
.pa_attach{
        background-image:url("../../../image/file.png");
}
.pa_diff{
        background-image:url("../../../image/diff.png");
}
.pa_rename{
        background-image:url("../../../image/rename.png");　←　追加
}
.pa_template{
        background-image:url("../../../image/copy.png");　←　追加
}
.pa_list{
        background-image:url("../../../image/list.png");　←　追加
}
.pa_backup{
        background-image:url("../../../image/backup.png");
}
/* 非表示 */
.pa_reload,
.pa_newpage,
.pa_freeze,
.pa_unfreeze,
/* .pa_list, */　←　削除
.pa_serch,
.pa_whatnew,
.pa_help{
        display:none;
}

pukiwiki.skin.phpの編集

# vi /var/www/pukiwiki/skin/irid/pukiwiki.skin.php

<?php if ($is_page) { ?>
 :
 :
       <li class="pa_edit"><a href="<?php echo $link_edit ?>">編集</a></li>
       <li class="pa_rename"><a href="<?php echo $link_rename ?>">名前変更</a></li>　←　追加
       <li class="pa_template"><a href="<?php echo $link_template ?>">複製</a></li>　←　追加
 :

注：「一覧」は元々設定があるので追加は不要。

) メニューの欄の表示文字サイズの変更
内容：メニューの欄に表示する項目が長く折り返して表示されるので、表示領域を広げて、文字サイズを小さくして、一行で表示されるようにする。

サイドバーの幅の拡張

# vi /var/www/pukiwiki/skin/irid/orangebox/base_3float.css

div#wrap_content{
        float:right;
        width:75%;        ←　変更
/*      min-width:74%;*/
}
div#wrap_sidebar{
        float:left;
        width:25%;        ←　変更
}

メニューバーの文字サイズの縮小

メニューバーの変更部分のCSSを別ファイルとしてimportするようにする。

# vi /var/www/pukiwiki/skin/irid/cloudwalk/cloudwalk.css

@import url("../orangebox/base_3float.css");
@import url("../orangebox/plugin.css");
@import url("color_cloudwalk.css");
@import url("../orangebox/menubar.css") screen;　     ←　追加
@import url("../orangebox/menubar_print.css") print;　←　追加

# vi /var/www/pukiwiki/skin/irid/orangebox/orangebox.css

@import url("base_3float.css");
@import url("plugin.css");
@import url("color_orangebox.css");
@import url("menubar.css") screen;　                 ←　追加
@import url("menubar_print.css") print;　            ←　追加

メニューバーのフォントサイズを変更する。
このスキンは領域の角が丸くなるようにしているためpaddingを.barの設定と同じにする。

# vi /var/www/pukiwiki/skin/irid/orangebox/menubar.css  ←　新規作成
@charset "Shift_JIS";
 
div#menubar {
        padding:7px 15px 15px 15px; ← .barの設定と同じ
        word-break:normal;
        font-size:70%;  　　　　　　←　70%に小さくした。
        overflow:hidden;
}

) サイドバーの印刷時の除外
PukiWikiの元々の仕様では印刷時にサイドバーは印刷されないようになっていたが、このスキンではその設定がないので、元々の仕様通り印刷時にはサイドバーは印刷されないようにする。
注：FireFoxではこの設定は有効であるが、IEでは無効である。
```
# vi /var/www/pukiwiki/skin/irid/orangebox/menubar_print.css  ←　新規作成
@charset "Shift_JIS";
 
div#wrap_sidebar {
        display:none;
}
div#attach {
        display:none;
}
div#toolbar {
        display:none;
}
div#related {
        display:none;
}
div#logo {
        display:none;
}
```

) 画像の表示を左側に寄せる

# vi /var/www/pukiwiki/skin/irid/orangebox/plugin.css

div.img_margin{
        margin:1em;　　        　←　追加
/*      margin-left:32px; */   　←　コメントアウト
/*      margin-right:32px; */  　←　コメントアウト
}

３. メニュー表示順番の変更
左サイドの欄の表示順番を変更する。検索を最上部にその下にメニューを表示する。編集操作をなくする。

前へ　上層へ　一覧へ　次へ

Last-modified: 2014-03-11 (火) 02:00:03 (3692d)