タイトルの下のメニュー
はじめに
最後は「タイトルの下のメニュー（[ リロード ] [ 新規 | 編集 ・・・）」である．ここのメニューは表示しているページの性格により変化する．例えば，トップの場合はと一覧の場合を比較しよう．
トップ
[ リロード ] [ 新規 | 編集 | 凍結 | 差分 | 添付 ] [ トップ | 一覧 | 単語検索 | 最終更新 | バックアップ | ヘルプ ] 一覧
[ トップ | 一覧 | ファイル名一覧 | 単語検索 | 最終更新 | バックアップ | ヘルプ ]
各画面共通で表示するメニューの場所は固定というのが好みである．なので，各画面共通部分（トップ～ヘルプ/リロード）と編集可能画面のみ表示部分（新規～添付）でメニューを分け，共通部分の表示箇所を固定しよう．
navigatorの編集
PukiWikiが出力しているソースを見ると，タイトルのしたのメニューにはnavigatorという名前でidが付いている．{PUKIWIKI}/skin/pukiwiki.skin.jp.phpの該当部分（59行目付近）を修正する．修正箇所は以下の通り．
- navigatorに表示するリンクは以下の６個．それ以外は新設するページ編集メニューへ移動
- トップ
- 一覧
- 検索
- 更新日
- バックアップ
- ヘルプ
- ブロックタグをdivタグからulタグへ変更
- 文字だけでは寂しいので，画像を文字の前につけた
<!-- 修正前 --> <div id="navigator"> <?php if ($is_page) { ?> [ <a href="<?php echo "$script?$r_page" ?>">リロード</a> ] [ <a href="<?php echo "$script?plugin=newpage&refer=$r_page" ?>">新規</a> | <a href="<?php echo $link_edit ?>">編集</a> <?php if ($is_read and $function_freeze) { ?> <?php if ($is_freeze) { ?> | <a href="<?php echo $link_unfreeze ?>">凍結解除</a> <?php } else { ?> | <a href="<?php echo $link_freeze ?>">凍結</a> <?php } ?> <?php } ?> | <a href="<?php echo $link_diff ?>">差分</a> <?php if ((bool)ini_get('file_uploads')) { ?> | <a href="<?php echo $link_upload ?>">添付</a> <?php } ?> ] <?php } ?> [ <a href="<?php echo $link_top ?>">トップ</a> | <a href="<?php echo $link_list ?>">一覧</a> <?php if (arg_check('list')) { ?> | <a href="<?php echo $link_filelist ?>">ファイル名一覧</a> <?php } ?> | <a href="<?php echo $link_search ?>">単語検索</a> | <a href="<?php echo $link_whatsnew ?>">最終更新</a> <?php if ($do_backup) { ?> | <a href="<?php echo $link_backup ?>">バックアップ</a> <?php } ?> | <a href="<?php echo $link_help ?>">ヘルプ</a> ] <?php if ($trackback) { $tb_id = tb_get_id($_page); ?> [ <a href="<?php echo "$script?plugin=tb&__mode=view&tb_id=$tb_id" ?>">TrackBack(<?php echo tb_count($_page) ?>)</a> ] <?php } ?> <?php if ($referer) { ?> [ <a href="<?php echo "$script?plugin=referer&page=$r_page" ?>">リンク元</a> ] <?php } ?> </div> <div class="clear"/> <!-- 修正後 --> <ul id="navigator"> <li class="link_top"><a href="<?php echo $link_top ?>"> <img src="./image/top.png" width="20" height="20" alt="トップ" title="トップ" />トップ</a></li> <li><a href="<?php echo $link_list ?>"> <img src="./image/list.png" width="20" height="20" alt="一覧" title="一覧" />一覧</a></li> <li><a href="<?php echo $link_search ?>"> <img src="./image/search.png" width="20" height="20" alt="検索" title="検索" />検索</a></li> <li><a href="<?php echo $link_whatsnew ?>"> <img src="./image/recentchanges.png" width="20" height="20" alt="更新日" title="更新日" />更新日</a></li> <?php if ($do_backup) { ?> <li><a href="<?php echo $link_backup ?>"> <img src="./image/backup.png" width="20" height="20" alt="バックアップ" title="バックアップ" />バックアップ</a></li> <?php } ?> <li><a href="<?php echo $link_help ?>"> <img src="./image/help.png" width="20" height="20" alt="ヘルプ" title="ヘルプ" />ヘルプ</a></li> <?php if ($trackback) { $tb_id = tb_get_id($_page); ?> <li><a href="<?php echo "$script?plugin=tb&_mode=view&tb_id=$tb_id" ?>">TrackBack(<?php echo tb_count($_page) ?>)</a></li> <?php } ?> <?php if ($referer) { ?> <li><a href="<?php echo "$script?plugin=referer&page=$r_page" ?>">リンク元</a></li> <?php } ?> </ul> <div class="clear"/>
ページ編集メニューの作成
navigatorブロックからなくした編集可能ページ用のメニューを作成する．${PUKIWIKI}/skin/pukiwiki.skin.ja.phpの119行目付近を書換える．新しくpageeditブロックをdivタグで作成している．
<!-- 修正前 --> <?php if (arg_check('read') and exist_plugin_convert('menu')) { ?> <table border="0" style="width:100%"> <tr> <td class="menubar"> <div id="menubar"> <?php echo do_plugin_convert('menu') ?> </div> </td> <td valign="top"> <div id="body"><?php echo $body ?></div> </td> </tr> </table> <?php } else { ?> <div id="body"><?php echo $body ?></div> <?php } ?> <!-- 修正後 --> <?php if (exist_plugin_convert('menu')) { ?> <div id="body" class="right"><?php echo $body ?></div> <div id="menu" class="left"> <?php if ($is_page) { ?> <div id="pageedit"> <h5>ページ編集</h5> <ul> <li><a href="<?php echo "$script?plugin=newpage&refer=$r_page" ?>"> <img src="./image/new.png" width="20" height="20" alt="新規" title="新規" />新規</a></li> <li><a href="<?php echo $link_edit ?>"> <img src="./image/edit.png" width="20" height="20" alt="編集" title="編集" />編集</a></li> <li><a href="<?php echo $link_template ?>"> <img src="./image/copy.png" width="20" height="20" alt="複製" title="複製" />複製</a></li> <li><a href="<?php echo $link_rename ?>"> <img src="./image/rename.png" width="20" height="20" alt="改名" title="改名" />改名</a></li> <li><a href="<?php echo $link_diff ?>"> <img src="./image/diff.png" width="20" height="20" alt="差分" title="差分" />差分</a></li> <?php if ($is_read and $function_freeze) { ?> <?php if ($is_freeze) { ?> <li><a href="<?php echo $link_unfreeze ?>"> <img src="./image/unfreeze.png" width="20" height="20" alt="凍結解除" title="凍結解除" />凍結解除</a></li> <?php } else { ?> <li><a href="<?php echo $link_freeze ?>"> <img src="./image/freeze.png" width="20" height="20" alt="凍結" title="凍結" />凍結</a></li> <?php } ?> <?php } ?> <?php if ((bool)ini_get('file_uploads')) { ?> <li><a href="<?php echo $link_upload ?>"> <img src="./image/file.png" width="20" height="20" alt="添付" title="添付" />添付</a></li> <?php } ?> </ul> </div> <?php } ?> <div id="menubar"><?php echo do_plugin_convert('menu') ?></div> </div> <?php } else { ?> <div id="body"><?php echo $body ?></div> <?php } ?> <div class="clear"/>
cssの修正
まずnavigatorブロック関連の修正を行う．${PUKIWIKI}/skin/default.ja.cssの356行目付近である．
<!-- 修正前 --> div#navigator { clear:both; padding:4px 0px 0px 0px; margin:0px; } <!-- 修正後 --> ul#navigator{ clear:both; padding:4px 0px 0px 0px; margin:0px; } ul#navigator li{ display:inline; list-style-type:none; }
続いてmenubarブロック関連の修正である．${PUKIWIKI}/skin/default.ja.cssの363行目付近である．
<!-- 修正前 --> td.menubar { width:9em; vertical-align:top; } div#menubar { width:9em; padding:0px; margin:4px; word-break:break-all; font-size:90%; overflow:hidden; } div#menubar ul { margin:0px 0px 0px .5em; padding:0px 0px 0px .5em; } div#menubar ul li { line-height:110%; } div#menubar h4 { font-size:110%; } <!-- 修正後 --> div#menu{ margin:0 0 0.5em 0; padding:0; } div#menubar { margin:0; padding:0; word-break:break-all; overflow:hidden; } div#pageedit{ word-break:break-all; overflow:hidden; margin:0px; margin-bottom:1em; } div#menubar h5,div#pageedit h5{ font-size:110%; } div#menubar ul,div#pageedit ul { margin:0px 0px 0px .5em; padding:0px 0px 0px .5em; } div#menubar ul li,div#pageedit ul li { list-style-type:none; } div#menubar h4,div#pageedit h4 { font-size:110%; }
最終形
一通り修正が終った状態はこのようなものである．
修正前（デフォルト）
修正後
