サイト構築 覚書

pukiwiki-1.5.2-utf8 でサイト構築

今後のバージョンアップに備え、変更箇所はできるだけ少なくする。
色のトーンを全体的にグレー・薄いグレー系にする。以下、行数はオリジナルを基準とする。

アップロードサイズ拡張

アップロードサイズはデフォールトでは 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

外部リンクにマークを付ける

対象ファイル名: skin/pukiwiki.css

システム設定

対象ファイル名: pukiwiki.ini.php

変更前 ↓↓ 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

テーブル

対象ファイル名: skin/pukiwiki.css

タイトル・ロゴ

対象ファイル名: 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>

タイトルのurlを消す

対象ファイル名: skin/pukiwiki.skin.php

レスポンシブルデザイン

スマートフォンなどのモバイル対応にする。以下のサイトを参考とした。
SEの良心 PukiWiki1.5.2をレスポンシブデザインに変更する!

対象ファイル名: skin/pukiwiki.skin.php

変更前 ↓↓

<?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') ?> ] &nbsp;

<?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') ?>
 ] &nbsp;
<?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 ?>

変更後 ↓↓

&nbsp; [ <?php _navigator('top') ?> ] &nbsp;

<?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') ?>
   ] &nbsp;
 <?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

 

ヘルプを修正できるようにする

誤植の修正・説明の追加などをできるようにする。修正後は「凍結」を忘れずに。

対象ファイル名: js.lng.php

 

表示画像のクリックで元画像をポップアップで表示する。

Light Box を導入して画像表示を改善する。
参考サイト: pukiwiki1.5.xにLightboxを導入する lightbox2 オフィシャルサイト
対象ファイル名: /lib/make_link.php

対象ファイル名: 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

Pukiwikiの「?」(はてな)を表示しない

参考サイト: Pukiwikiの「?」(はてな)を表示しないように

対象ファイル名: pukiwiki.ini.php

動画ファイルの埋め込み

対象ファイル名:plugin/tinyvideo.inc.php
下記のコードをコピーして、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(動画ファイル名[,幅 高さ][,ポスター画像ファイル名][,controls][,loop][,muted][,autoplay])
&tinyvideo(動画ファイル名[,幅 高さ][,ポスター画像ファイル名][,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>';
}

Site adminの表示

対象ファイル名: pukiwiki.ini.php

ページトップボタンを設置

ページの途中から最初に戻るボタンを配置する。以下のサイトを参考とした。
【jQuery不使用】PukiWikiにページトップボタンを設置する!

対象ファイル名: skin/pukiwiki.skin.php

対象ファイル名: skin/pukiwiki-rspncv.css