今後のバージョンアップに備え、変更箇所はできるだけ少なくする。
色のトーンを全体的にグレー・薄いグレー系にする。以下、行数はオリジナルを基準とする。
アップロードサイズはデフォールトでは 1MB
対象ファイル名: plugin/attach.inc.php
変更前 ↓↓ 20行目
define('PLUGIN_ATTACH_MAX_FILESIZE', (1024 * 1024)); // default: 1MB変更後 ↓↓
define('PLUGIN_ATTACH_MAX_FILESIZE', (1024 * 1024) *30); // default: 1MB
ログインユーザーはアップロード許可。削除は管理者のみとする。
対象ファイル名: plugin/attach.inc.php
23行目変更
define('PLUGIN_ATTACH_UPLOAD_ADMIN_ONLY', TRUE); → FALSE
30行目変更
define('PLUGIN_ATTACH_DELETE_ADMIN_NOBACKUP', FALSE); → TRUE
33行目変更
define('PLUGIN_ATTACH_PASSWORD_REQUIRE', FALSE); → TRUE
対象ファイル名: skin/pukiwiki.css
384行目に挿入
div#body img { margin: 0px 0px 8px 8px; }
対象ファイル名: skin/pukiwiki.css
599-600行目変更
margin-left:32px; → 8px margin-right:32px; → 8px
外部ページのリンクの際、http:// の先頭に + を付ける(+http:) と別窓でリンクするようにした。
参考サイト: ロンさん非公式ウイキ
対象ファイル名: lib/make_link.php
(?:(?:https?|ftp|news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+変更後 ↓↓
(?:(?:\+?https?|\+?ftp|\+?news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+
return '<a href="' . $this->name . '"' . $rel . '>' . $this->alias . '</a>';変更後 ↓↓
if (preg_match("/^(\+)(.*)/", $this->name, $regs)) { return '<a href="' . $regs[2] . '" target="_blank" ' . $rel . '>' . $this->alias . '</a>'; }else{ return '<a href="' . $this->name . '"' . $rel . '>' . $this->alias . '</a>'; }
対象ファイル名: skin/pukiwiki.css
a[target=_blank] { padding-right: 20px; background:url(../image/external-link.png) right center/11px auto no-repeat; }
対象ファイル名: pukiwiki.ini.php
128行目 $defaultpage = 'FrontPage'; → '私的AI研究会'
179行目 $adminpass = '{x-php-md5}!'; → $adminpass = '{x-php-md5}パスワード文字列';
変更前 ↓↓ 245-250行目
$auth_users = array( // Username => password 'foo' => 'foo_passwd', // Cleartext 'bar' => '{x-php-md5}f53ae779077e987718cc285b14dfbe86', // PHP md5() 'bar_passwd' 'hoge' => '{SMD5}OzJo/boHwM4q5R+g7LCOx2xGMkFKRVEx', // LDAP SMD5 'hoge_passwd' );変更後 ↓↓
$auth_users = array( // Username => password 'mizutu'=> '{x-php-md5}パスワード文字列', 'tnitta'=> '{x-php-md5}パスワード文字列', 'hokegawa'=> '{x-php-md5}パスワード文字列', 'guest' => '{x-php-md5}パスワード文字列', );
変更前 ↓↓ 252-257行目
// Group definition $auth_groups = array( // Groupname => group members(users) 'valid-user' => '', // Reserved 'valid-user' group contains all authenticated users 'groupfoobar' => 'foo,bar', );変更後 ↓↓
$auth_groups = array( // Groupname => group members(users) 'valid-user' => '', // Reserved 'valid-user' group contains all authenticated users 'edit-user' => 'mizutu,tnitta,hokegawa', 'read-suer' => 'guest', );
変更前 ↓↓ 278-285行目
$edit_auth = 0; $edit_auth_pages = array( // Regex Username '#BarDiary#' => 'bar', '#HogeHoge#' => 'hoge', '#(NETABARE|NetaBare)#' => 'foo,bar,hoge', );変更後 ↓↓
$edit_auth = 1; $edit_auth_pages = array( // Regex Username '##'=> 'edit-user', );
対象ファイル名: skin/pukiwiki.css
39行目 color:#a63d21 → #888888 56行目 background-color:#DDEEFF → #DDDDDD 63行目 border-bottom:3px solid #DDEEFF → #DDDDDD 63行目 border-top:1px solid #DDEEFF → #DDDDDD 63行目 border-left:1px solid #DDEEFF → #DDDDDD 63行目 border-right:1px solid #DDEEFF → #DDDDDD 75行目 border-left:18px solid #DDEEFF → #DDDDDD 85行目 background-color:#DDEEFF → #DDDDDD 116行目 background-color:#F0F8FF → #EEEEEE
352行目変更 padding:4px 0px 0px 0px → 4px 0px 2px 0px 354行目追加 background-color: #F1F1F1;
対象ファイル名: skin/pukiwiki.css
background-color:#D0D8E0; → #EEEEEE
margin:auto; → 15px
background-color:#ccd5dd; → #DDDDDD
background-color:#ccd5dd; → #FFFFFF
対象ファイル名: skin/pukiwiki.skin.php
変更前 ↓↓
<a href="<?php echo $link['top'] ?>"><img id="logo" src="<?php echo IMAGE_DIR . $image['logo'] ?>" width="80" height="80" alt="[PukiWiki]" title="[PukiWiki]" /></a>変更後 ↓↓
<a href="/"><img id="logo" src="../images/photo02pk.jpg" width="60" height="60" alt="[PukiWiki]" title="[PukiWiki]" /></a>
対象ファイル名: skin/pukiwiki.skin.php
define('SKIN_DEFAULT_DISABLE_TOPICPATH', 1); → 0
<?php echo ' ' ?>
スマートフォンなどのモバイル対応にする。以下のサイトを参考とした。
SEの良心 PukiWiki1.5.2をレスポンシブデザインに変更する!
対象ファイル名: skin/pukiwiki.skin.php
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CONTENT_CHARSET ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>pukiwiki.css" /> <link rel="stylesheet" type="text/css" href="<?php echo SKIN_DIR ?>pukiwiki-rspnsv.css" />
変更前 ↓↓
<?php if ($menu !== FALSE) { ?> <table border="0" style="width:100%"> <tr> <td class="menubar"> <div id="menubar"><?php echo $menu ?></div> </td> <td valign="top"> <div id="body"><?php echo $body ?></div> </td> </tr> </table> <?php } else { ?>変更後 ↓↓
<?php if ($menu !== FALSE) { ?> <!-- ボディ部の構成を変更 --> <div id="contents"> <div id="menubar"><?php echo $menu ?></div> <div id="body"><?php echo $body ?></div> </div> <?php } else { ?>
メニューバーが複雑でわかりにくいので、修正する。参考サイトは下記。
まちゅダイアリー PukiWiki のカスタマイズ
「リロード」→ 削除
「バックアップ」→ 「履歴」 いま見ているページの更新履歴(バックアップ)を表示するという機能なので。
●ログオフ状態のとき
[トップ][一覧|検索|履歴|ヘルプ|ログアウト]
●ログイン状態のとき
[トップ][新規|編集|凍結|差分|添付][一覧|検索|履歴|最終更新|ヘルプ|ログアウト]
対象ファイル名: skin/pukiwiki.skin.php
変更前 ↓↓
[ <?php _navigator('top') ?> ] <?php if ($is_page) { ?> [ <?php if ($rw) { ?> <?php _navigator('edit') ?> | <?php if ($is_read && $function_freeze) { ?> <?php (! $is_freeze) ? _navigator('freeze') : _navigator('unfreeze') ?> | <?php } ?> <?php } ?> <?php _navigator('diff') ?> <?php if ($do_backup) { ?> | <?php _navigator('backup') ?> <?php } ?> <?php if ($rw && (bool)ini_get('file_uploads')) { ?> | <?php _navigator('upload') ?> <?php } ?> | <?php _navigator('reload') ?> ] <?php } ?> [ <?php if ($rw) { ?> <?php _navigator('new') ?> | <?php } ?> <?php _navigator('list') ?> <?php if (arg_check('list')) { ?> | <?php _navigator('filelist') ?> <?php } ?> | <?php _navigator('search') ?> | <?php _navigator('recent') ?> | <?php _navigator('help') ?> <?php if ($enable_login) { ?> | <?php _navigator('login') ?> <?php } ?> <?php if ($enable_logout) { ?> | <?php _navigator('logout') ?> <?php } ?> ] <?php } // PKWK_SKIN_SHOW_NAVBAR ?>変更後 ↓↓
[ <?php _navigator('top') ?> ] <?php if ($is_page) { ?> <?php if ($enable_logout) { ?> [ <?php if ($rw) { ?> <?php _navigator('new') ?> | <?php _navigator('edit') ?> | <?php if ($is_read && $function_freeze) { ?> <?php (! $is_freeze) ? _navigator('freeze') : _navigator('unfreeze') ?> | <?php } ?> <?php } ?> <?php _navigator('diff') ?> <?php if ($do_backup) { ?> | <?php _navigator('backup') ?> <?php } ?> <?php if ($rw && (bool)ini_get('file_uploads')) { ?> | <?php _navigator('upload') ?> <?php } ?> | <?php _navigator('reload') ?> ] <?php } ?> <?php } ?> [ <?php _navigator('list') ?> <?php if (arg_check('list')) { ?> | <?php _navigator('filelist') ?> <?php } ?> | <?php _navigator('search') ?> <?php if ($enable_logout) { ?> | <?php _navigator('recent') ?> | <?php _navigator('help') ?> | <?php _navigator('logout') ?> <?php } ?> <?php if ($enable_login) { ?> | <?php _navigator('login') ?> <?php } ?> ] <?php } // PKWK_SKIN_SHOW_NAVBAR ?>
対象ファイル名: js.lng.php
$_LANG['skin']['backup'] = 'バックアップ'; → '履歴'
誤植の修正・説明の追加などをできるようにする。修正後は「凍結」を忘れずに。
対象ファイル名: js.lng.php
$rule_page = 'FormattingRules'; → 'テキスト整形のルール' $help_page = 'Help'; → 'ヘルプ'
Light Box を導入して画像表示を改善する。
参考サイト: pukiwiki1.5.xにLightboxを導入する lightbox2 オフィシャルサイト
対象ファイル名: /lib/make_link.php
lightbox.min.js (lightbox2-master/dist/js/) lightbox-plus-jquery.min.js (lightbox2-master/dist/js/) lightbox.min.css (lightbox2-master/dist/css/) イメージファイル (lightbox2-master/dist/image/)圧縮ファイルを解答し、スキンフォルダーにコピーする。
/skin/lightbox2-master/js/lightbox.min.js /skin/lightbox2-master/js/lightbox-plus-jquery.min.js /skin/lightbox2-master/css/lightbox.min.css /skin/lightbox2-master/image/ (イメージファイルすべて)
対象ファイル名: plugin/ref.inc.php
変更前 ↓↓
$params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";変更後 ↓↓
$params['_body'] = "<a href=\" $url2\" title=\" $title\" rel='lightbox[aiueo]' > {$params['_body']}</a>";
対象ファイル名: skin/pukiwiki.skin.php
<script src="skin/lightbox2-master/js/lightbox-plus-jquery.min.js"></script> <script src="skin/lightbox2-master/js/lightbox.min.js"></script> <link href="skin/lightbox2-master/css/lightbox.min.css" rel="stylesheet" />
参考サイト: Pukiwikiの「?」(はてな)を表示しないように
対象ファイル名: pukiwiki.ini.php
$nowikiname = 0 → 1
対象ファイル名:plugin/tinyvideo.inc.php
<?php /* PukiWiki - Yet another WikiWikiWeb clone. tinyvideo.inc.php, v1.01 2020 M. Taniguchi License: GPL v3 or (at your option) any later version videoタグを出力するPukiWiki用プラグイン。 videoタグの全ての属性や複数source指定には対応しない簡易的なもの。 PukiWiki 1.5.2/PHP 7.3 で動作確認済み。 【使い方】 #tinyvideo(動画ファイルURL[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay]) &tinyvideo(動画ファイルURL[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay]); 【引数】 動画ファイル名 … 再生する動画ファイル(拡張子 mp4,mov,ogg,webm 等) 幅 高さ … 表示サイズ指定(単位:px)、指定なしなら幅100%・高さ自動 ポスター画像ファイル名 … 再生前に表示したい画像ファイル(拡張子 jpg,jpeg,png,gif,webp)※1 controls … 操作パネル表示 ※2 loop … ループ再生 muted … 音声ミュート autoplay … 自動再生 ※3 ※1 ブラウザー/バージョンによっては再生前に何も表示されないことがあるため、ポスター画像の指定を推奨します。 ※2 ブラウザー内蔵の標準操作パネル。デザインはブラウザーにより異なります。 ※3 実際に自動再生されるかはブラウザーに依存します。特にスマートフォンでは条件が厳しく、常に不可だったり、mutedが必須になるなど。くわしくは「HTML5 videoタグ」等でググって情報収集してください。 【使用例】 &tinyvideo(/videos/sample.mp4,controls); &tinyvideo(/videos/sample.mp4,/images/sample.jpg,controls,loop,muted,autoplay); &tinyvideo(/videos/sample.mp4,320 240,controls); 【CSS】 スキンCSSにおいて、次のセレクターで当プラグインが出力するvideoタグを指定することができます。 .plugin-tinyvideo */ function plugin_tinyvideo_convert() { list($file, $args[0], $args[1], $args[2], $args[3], $args[4], $args[5]) = func_get_args(); return plugin_tinyvideo_makeVideoTag($file, $args); } function plugin_tinyvideo_inline() { list($file, $args[0], $args[1], $args[2], $args[3], $args[4], $args[5]) = func_get_args(); return plugin_tinyvideo_makeVideoTag($file, $args); } function plugin_tinyvideo_makeVideoTag($file, $args) { static $argNames = array('controls', 'loop', 'muted', 'autoplay'); $attr = ' playsinline'; $size = 'width="100%" height="auto"'; $poster = ''; foreach ($args as $v) { $v = trim($v); if (in_array(strtolower($v), $argNames)) { $attr .= ' ' . $v; } else if (preg_match('/^.+\.(jpe?g|png|gif|webp)$/', $v) == 1) { $poster = ' poster="' . htmlspecialchars($v) . '"'; } else if (preg_match_all('/\d+/', $v, $match) == 2) { $size = 'width="' . (int)$match[0][0] . 'px" height="' . (int)$match[0][1] . 'px"'; } } return '<video class="plugin-tinyvideo" ' . $size . $poster . $attr . '><source src="' . htmlspecialchars($file) .'"/></video>'; } ?>
対象ファイル名: pukiwiki.ini.php
$modifier = 'Masahiro Izutsu';
$modifierlink = 'http://izutsu.aa0.netvolante.jp/';
ページの途中から最初に戻るボタンを配置する。以下のサイトを参考とした。
【jQuery不使用】PukiWikiにページトップボタンを設置する!
対象ファイル名: skin/pukiwiki.skin.php
<!-- TopPage Button --> <img id="page-top-button" src="<?php echo IMAGE_DIR . 'page-top-button.png' ?>"> <script type="text/javascript" src="skin/page-top-button.js"></script>
対象ファイル名: skin/pukiwiki-rspncv.css
/* ページ本体の画像のレスポンシブ設定 */ div#body img { max-width: 100%; /* 幅の最大値を100%指定 */ height: auto; /* 縦は幅により自動設定 */ } #page-top-button { position: fixed; /* 固定表示 */ right: 20px; /* 右から20ピクセル(任意の位置に設定) */ bottom: 60px; /* 下から60ピクセル(任意の位置に設定)*/ transition: opacity 1s; /* 透過変化時間(1秒) */ opacity: 0; /* 透過(非表示) */ } #page-top-button.fadeIn { position: fixed; /* 固定表示 */ display: block; /* ブロック表示 */ right: 20px; /* 右から20ピクセル(任意の位置に設定) */ bottom: 60px; /* 下から60ピクセル(任意の位置に設定)*/ outline-style: none; /* アウトライン非表示 */ box-shadow: none; /* 影表示なし */ cursor: pointer; /* ポインタカーソル設定 */ z-index: 9999; /* Zオーダで最上位に設定 */ transition: opacity 1s; /* 透過変化時間(1秒) */ opacity: 0.8; /* 非透過80% */ } #page-top-button.fadeIn:hover { transition: opacity 1ms; /* 透過変化時間(0.001秒) */ opacity: 1; /* 非透過100% */ }
ログイン時のみ表示するように変更。
対象ファイル名: skin/pukiwiki.skin.php
変更後(//2020.12.01 2か所) ↓↓
function _toolbar($key, $x = 20, $y = 20){ $lang = & $GLOBALS['_LANG']['skin']; $link = & $GLOBALS['_LINK']; $image = & $GLOBALS['_IMAGE']['skin']; if (! isset($lang[$key]) ) { echo 'LANG NOT FOUND'; return FALSE; } if (! isset($link[$key]) ) { echo 'LINK NOT FOUND'; return FALSE; } if (! isset($image[$key])) { echo 'IMAGE NOT FOUND'; return FALSE; } echo '<a href="' . $link[$key] . '">' . '<img src="' . IMAGE_DIR . $image[$key] . '" width="' . $x . '" height="' . $y . '" ' . 'alt="' . $lang[$key] . '" title="' . $lang[$key] . '" />' . '</a>'; return TRUE; } ?> <?php if ($enable_logout) { //2020.12.01 ?> <?php _toolbar('top') ?> <?php if ($is_page) { ?> <?php if ($rw) { ?> <?php _toolbar('edit') ?> <?php if ($is_read && $function_freeze) { ?> <?php if (! $is_freeze) { _toolbar('freeze'); } else { _toolbar('unfreeze'); } ?> <?php } ?> <?php } ?> <?php _toolbar('diff') ?> <?php if ($do_backup) { ?> <?php _toolbar('backup') ?> <?php } ?> <?php if ($rw) { ?> <?php if ((bool)ini_get('file_uploads')) { ?> <?php _toolbar('upload') ?> <?php } ?> <?php _toolbar('copy') ?> <?php _toolbar('rename') ?> <?php } ?> <?php _toolbar('reload') ?> <?php } ?> <?php if ($rw) { ?> <?php _toolbar('new') ?> <?php } ?> <?php _toolbar('list') ?> <?php _toolbar('search') ?> <?php _toolbar('recent') ?> <?php _toolbar('help') ?> <?php _toolbar('rss10', 36, 14) ?> <?php } //2020.12.01 ?> </div> <?php } // PKWK_SKIN_SHOW_TOOLBAR ?>
ソースコードの表示が簡単になるプラグインを入れる。(google-code-prettifyを利用してソースコードをハイライト表示)
prettify.css prettify.js「prettify.css」の中の list-style-type:none を list-style-type: decimal に変更しておく。(1行ごとに行番号を表示)
<link href="skin/prettify.css" rel="stylesheet" type="text/css" charset="utf-8"/> <script src="skin/prettify.js" type="text/javascript" charset="utf-8"></script>さらにbodyタグを変更する
<body onload="prettyPrint();">
define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
#codeprettify{{ <?php echo 'test'; ?> }}
&codeprettify{<?php echo 'test'; ?>};
#codeprettify(lang-html linenums:1){{
「divregion.inc.php」プラグインを導入してページの一部を折りたためるようにする。
- 参考サイト
div.divregion{ background-color:#FF0000; color:gray; border:gray 1px solid; } div.divregion_contents{ border-bottom: solid 1px #666e99; } div.divregion_h1{ color:white; background-color:#666e99; padding:1px 4px; } div.divregion_h2{ border-bottom: solid 1px #666e99; border-left: solid 10px #666e99; }
#divregion(タイトル) 本文 #enddivregion上記記載により、以下のような表示となる。「タイトル」部分をクリックすることで、折り畳みが開閉される。
例 #divregion(タイトル,hstyle:h1) 本文 #enddivregion
例 #divregion(タイトル,color:#FF0000,background-color:#dddddd) 本文 #enddivregion
例 #divregion(タイトル,content-color:#0000FF,content-bgcolor:#eeeeee) 本文 #enddivregion
対象ファイル名: skin/pukiwiki.skin.php
16行目変更
$_IMAGE['skin']['favicon'] = 'image/pukiwiki.ico';
対象ファイル名: skin/pukiwiki.skin.php
71行目追加
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
対象ファイル名:plugin/tinyaudio.inc.php
<?php /* PukiWiki - Yet another WikiWikiWeb clone. tinyaudio.inc.php, v0.01 2022 Masahiro Izutsu License: GPL v3 or (at your option) any later version audioタグを出力するPukiWiki用プラグイン。 audioタグの全ての属性や複数source指定には対応しない簡易的なもの。 PukiWiki 1.5.2/PHP 7.3 で動作確認済み。 【使い方】 #tinyaudio(音声ファイルURL[,controls][,loop][,autoplay]) &tinyaudio(音声ファイルURL[,controls][,loop][,autoplay]); 【引数】 音声ファイル名 … 再生する音声ファイル(拡張子 mp3, wav 等) controls … 操作パネル表示 loop … ループ再生 autoplay … 自動再生 【使用例】 &tinyaudio(/audios/sample.mp3,controls); &tinyaudio(/audios/sample.mp3,controls,loop,autoplay); &tinyaudio(/audios/sample.mp3,controls); 【CSS】 スキンCSSにおいて、次のセレクターで当プラグインが出力するvideoタグを指定することができます。 .plugin-tinyaudio */ function plugin_tinyaudio_convert() { list($file, $args[0], $args[1], $args[2]) = func_get_args(); return plugin_tinyaudio_makeAudioTag($file, $args); } function plugin_tinyaudio_inline() { list($file, $args[0], $args[1], $args[2]) = func_get_args(); return plugin_tinyaudio_makeAudioTag($file, $args); } function plugin_tinyaudio_makeAudioTag($file, $args) { static $argNames = array('controls', 'loop', 'autoplay'); $attr = ''; foreach ($args as $v) { $v = trim($v); if (in_array(strtolower($v), $argNames)) { $attr .= ' ' . $v; } } return '<audio class="plugin-tinyaudio" ' . $attr . ' src="' . htmlspecialchars($file) .'"/></audio>'; } ?>