サイト構築覚書

サイト構築覚書 †

↑

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

変更前 ↓↓ 400行目

(?:(?:https?|ftp|news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+

変更後 ↓↓

(?:(?:\+?https?|\+?ftp|\+?news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+

変更前 ↓↓ 425行目

		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

52行目挿入

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

141行目変更
```
background-color:#D0D8E0; → #EEEEEE
```

151行目変更
```
margin:auto; → 15px
```

154行目変更
```
background-color:#ccd5dd; → #DDDDDD
```

167行目変更
```
background-color:#ccd5dd; → #FFFFFF
```

↑

タイトル・ロゴ †

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

80行目変更

変更前 ↓↓

<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

22行目変更

define('SKIN_DEFAULT_DISABLE_TOPICPATH', 1); → 0

95行目追加
```
<?php echo '　' ?>
```

↑

レスポンシブルデザイン †

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

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

63行目の下に1行追加

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CONTENT_CHARSET ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

70行目の下に1行追加

<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" />

157-166行目変更

変更前 ↓↓

<?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 { ?>

skin/pukiwiki-respnsv.css を追加（内容は参考サイトから）

↑

メニューの変更 †

メニューバーが複雑でわかりにくいので、修正する。参考サイトは下記。
まちゅダイアリー PukiWiki のカスタマイズ

「リロード」→　削除
「バックアップ」→　「履歴」いま見ているページの更新履歴（バックアップ）を表示するという機能なので。

●ログオフ状態のとき
　[トップ][一覧|検索|履歴|ヘルプ|ログアウト]

●ログイン状態のとき
　[トップ][新規|編集|凍結|差分|添付][一覧|検索|履歴|最終更新|ヘルプ|ログアウト]

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

113-151行目変更

変更前 ↓↓

 [ <?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

108行目変更

$_LANG['skin']['backup']    = 'バックアップ'; → '履歴'

↑

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

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

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

92-93行目変更

$rule_page = 'FormattingRules'; → 'テキスト整形のルール'
$help_page = 'Help';            → 'ヘルプ'

「FormattingRules」をコピーして「テキスト整形のルール」ページを作成。
「Help」をコピーして「ヘルプ」ページを作成して、冒頭の FormattingRules のリンクを変更する。

↑

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

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

lightbox プログラムをダウンロード・コピーする。
ダウンロードファイル: lightbox2-master.zip　lightbox2 ダウンロード
使用するファイル (ファイルがあるフォルダー名）

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

354行目変更

変更前 ↓↓

$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

74行目追加

 <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の「？」(はてな)を表示しないように

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

158行目変更
```
$nowikiname = 0 → 1
```

↑

動画ファイルの埋め込み †

対象ファイル名：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>';
}

使用上の注意点
- ファイルは絶対パスのURLで指定する。
参考サイト　自作プラグイン/tinyvideo.inc.php

↑

Site adminの表示 †

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

122行目変更
```
$modifier = 'Masahiro Izutsu';
```

125行目変更

$modifierlink = 'http://izutsu.aa0.netvolante.jp/';

↑

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

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

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

84行目の下あたり<body>タグの下に追加

<!-- 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/page-top-button.js を追加（内容は参考サイトから）
パーミッションは「644」
image/page-top-button.png を追加（内容は参考サイトから）
パーミッションは「644」

サイト構築 覚書

最新の20件