サイト構築覚書の履歴(No.2)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
サイト構築覚書へ行く。
- 1 (2025-09-29 (月) 18:51:21)
- 2 (2025-09-30 (火) 05:49:39)

わたしの忘備録 > 忘備録 > サイト構築覚書

サイト構築覚書2†

　 php8.X に対応するため pukiwiki 1.5.4 でサイトを再構築する

▲　目　次

サイト構築覚書2

※ 最終更新:2025/09/30　

↑

pukiwiki-1.5.4-utf8 でサイト構築†

今後のバージョンアップに備え、変更箇所はできるだけ少なくする。
色のトーンを全体的にグレー・薄いグレー系にする。以下、行数はオリジナルを基準とする
標準でレスポンシブルデザインに対応しているので、1.5.2 のこの項目は対応不要

↑

PukiWiki 1.5.4 の設置†

前準備
・PukiWiki-1.5.4-utf8.zip のダウンロード
・インストール手順

ファイルを解凍
```
$ unzip pukiwiki-1.5.4_utf8.zip
```

/var/www/html 配下にコピーしてフォルダ名を「wiki_bs」とする

$ sudo cp -r PukiWiki-XXXXXX /var/www/html/
$ cd /var/www/html/
$ mv PukiWiki-XXXXXX/ wiki_bs/

所有権変更
・ユーザー：グループ（mizutu:mizutu）
```
$ sudo chown -R mizutu:mizutu wiki_bs
```

ファイル・ディレクトリのパーミッション設定

sudo chmod 777 attach

ファイル・ディレクトリ	属性	内容
ディレクトリパーミッション
attach	777	添付ファイル格納ディレクトリ
backup	777	バックアップファイル格納ディレクトリ
cache	777	キャッシュファイル格納ディレクトリ
counter	777	カウンタファイル格納ディレクトリ
diff	777	差分ファイル格納ディレクトリ
image	755	画像ファイル
image/face	755	(画像ファイル)フェイスマーク
lib	755	ライブラリ
plugin	755	プラグイン
skin	755	スキン、CSS、JavaScirptファイル
wiki	777	データの格納ディレクトリ
ファイルパーミッション
.htaccess	644
.htpasswd	644
*/.htaccess	644
ファイルパーミッション
*.php	644
/.php	644
attach/*	666	(はじめは存在せず)
backup/*.gz	666	(インストール時は存在せず)
backup/*.txt	666	(多くの環境では存在せず)
cache/*	666	(一部のプラグインはバイナリファイルを保存します)
counter/*	666	(はじめは存在せず)
diff/*.txt	666	(はじめは存在せず)
wiki/*.txt	666
image/*	644
image/face/*	644
lib/*	644
plugin/*	644
skin/*	644

↑

アップロードサイズ拡張†

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

画像表示のとき左と下に空白を開ける
・427行目に挿入
```
div#body img {
  margin: 0px 0px 8px 8px;
}
```

↑

画像表示の時の左右の空白†

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

空白を詰める
・665-666行目変更

/* ref.inc.php */
div.img_margin {
  margin-left:8px;
  margin-right:8px;
}

↑

外部リンクを別窓にする†

参考サイト: ロンさん非公式ウイキ
対象ファイル名: lib/make_link.php

外部ページのリンクの際、http:// の先頭に + を付ける(+http:) と別窓でリンクするようにした
・変更前 ↓↓ 403行目

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

・変更後 ↓↓

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

・変更前 ↓↓ 428行目

        return '<a href="' . $this->name . '"' . $rel . '>' . $this->alias . '</a>';

・変更後 ↓↓

        if (preg_match("/^(\+)(.*)/", $this->name, $regs)) {        # 2020/0121
            return '<a href="' . $regs[2] . '" target="_blank" ' . $rel . '>' . $this->alias . '</a>';
        }else{
            return '<a href="' . $this->name . '"' . $rel . '>' . $this->alias . '</a>';
        }

・InterWikiでも別窓に
・変更前 ↓↓ 591行目

            $this->name . '" rel="nofollow">' . $this->alias . '</a>';

・変更後 ↓↓

    function toString()
    {
        return '<a href="' . $this->url . $this->anchor . '" title="' .
            $this->name . '" target="_blank rel="nofollow">' . $this->alias . '</a>';
    }

↑

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

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

外部リンクを識別する
・56行目挿入

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研究会'
```
// Default page name
$defaultpage  = 'FrontPage';     // Top / Default page
```

管理者パスワード

192行目 $adminpass = '{x-php-md5}!'; → $adminpass = '{x-php-md5}パスワード文字列';

// Default: always fail
$adminpass = '{x-php-md5}*******************************';

ユーザー名
・変更前 ↓↓ 259- 行目

$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}パスワード文字列',
);

グループ名
・変更前 ↓↓ 267- 行目

    // 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',
);

ログインしたユーザーのみ編集許可
・変更前 ↓↓ 293- 行目

$edit_auth = 0;

$edit_auth_pages = array(
    // Regex           Username
    '#BarDiary#'        => 'bar',
    '#HogeHoge#'        => 'hoge',
    '#(NETABARE|NetaBare)#' => 'foo,bar,hoge',
);

・変更後 ↓↓

// Edit auth (0:Disable, 1:Enable)
$edit_auth = 1;

$edit_auth_pages = array(
    // Regex           Username
    '##'=> 'edit-user',
);

↑

全体の色†

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

テキスト・テキスト背景色

a:visited {
  color:#888888;        /* #a63d21 */

h1, h2 {
  font-family:verdana, arial, helvetica, Sans-Serif;
  color:inherit;
  background-color:#DDDDDD; /* #DDEEFF */

h3 {
  font-family:verdana, arial, helvetica, Sans-Serif;
  border-bottom:3px solid #DDDDDD;  /* #DDEEFF */
  border-top:1px solid #DDDDDD;     /* #DDEEFF */
  border-left:10px solid #DDDDDD;   /* #DDEEFF */
  border-right:5px solid #DDDDDD;       /* #DDEEFF */

h4 {
  font-family:verdana, arial, helvetica, Sans-Serif;
  border-left:18px solid #DDDDDD;     /* #DDEEFF */

h5, h6 {
  font-family:verdana, arial, helvetica, Sans-Serif;
  color:inherit;
  background-color:#DDDDDD;      /* #DDEEFF */

pre {
  border-top:#DDDDEE 1px solid;
  border-bottom:#888899 1px solid;
  border-left:#DDDDEE 1px solid;
  border-right:#888899 1px solid;
  padding:.5em;
  margin-left:1em;
  margin-right:2em;
  white-space:pre-wrap;
  word-wrap:break-word;
  color:black;
  background-color:#EEEEEE; /* #F0F8FF */

メニュー・バー背景色
・365行目変更 padding:4px 0px 0px 0px → 4px 0px 2px 0px
・316行目追加 background-color: #F1F1F1;
```
div#navigator {
  clear:both;
  padding:4px 0px 2px 0px;
  margin:0;
  background-color: #F1F1F1;
```

↑

テーブル†

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

テーブル配色の変更
・149行目変更

tfoot td.style_td {
  color:inherit;
  background-color:#EEEEEE; /* #D0D8E0 */

・159行目変更 margin:auto; → 15px
・162行目変更 background-color:#ccd5dd; → #DDDDDD

.style_table {
  padding:0;
  border:0;
  margin:15px;          /* auto */
  text-align:left;
  color:inherit;
  background-color:#DDDDDD; /* #ccd5dd */

・175行目変更 background-color:#ccd5dd; → #FFFFFF

.style_td {
  padding:5px;
  margin:1px;
  color:inherit;
  background-color:#FFFFFF; /* #EEF5FF */

↑

タイトル・ロゴ†

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

タイトル・ロゴをサイトに合わせて変更
・>変更前 ↓↓ 96行目

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

変更後 ↓↓

<div id="header">
 <a href="/"><img id="logo" src="../images/photo02pk.jpg" width="60" height="60" alt="Izutsu's Web site 2" title="Izutsu's Web site 2" /></a>

↑

タイトルのurlを消す†

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

タイトル表示をシンプルに
・22行目変更 define('SKIN_DEFAULT_DISABLE_TOPICPATH', 1); → 0

    define('SKIN_DEFAULT_DISABLE_TOPICPATH', 0); // 1, 0

・105行目追加 <?php echo '　' ?>

 <?php if(SKIN_DEFAULT_DISABLE_TOPICPATH) { ?>
   <a href="<?php echo $link['canonical_url'] ?>"><span class="small"><?php echo $link['canonical_url'] ?></span></a>
 <?php } else { ?>
   <span class="small">
   <?php echo '　' ?>
   <?php require_once(PLUGIN_DIR . 'topicpath.inc.php'); echo plugin_topicpath_inline(); ?>

↑

メニューの変更†

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

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

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

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

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

メニュー表示をカスタマイズする
・変更前 ↓↓ 129- 行目

 [ <?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 ($rw && (bool)ini_get('file_uploads')) { ?>
    | <?php _navigator('upload') ?>
   <?php } ?>

   ] &nbsp;
 <?php } ?>
<?php } ?>

 [
 <?php _navigator('list') ?>
 <?php if (arg_check('list')) { ?>
    | <?php _navigator('filelist') ?>
 <?php } ?>
 | <?php _navigator('search') ?>
   <?php if ($do_backup) { ?>
    | <?php _navigator('backup') ?>
   <?php } ?>
<?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 ?>

↑

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

誤植の修正・説明の追加などをできるようにする。修正後は「凍結」を忘れずに。
対象ファイル名: ja.lng.php

「FormattingRules」をコピーして「テキスト整形のルール」ページを作成。
「Help」をコピーして「ヘルプ」ページを作成して、冒頭の FormattingRules のリンクを変更する・92-93行目変更
```
// Page name
$rule_page = 'テキスト整形のルール';    // Formatting rules
$help_page = 'ヘルプ';          // Help
```

↑

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

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

lightbox プログラムをダウンロード・コピーする（1.5.2 で使用しているモジュールをコピーしても可）
ダウンロードファイル: 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

画像をクリックするとポップアップで表示できるようにする
・変更前 ↓↓ 375行目変更

 $params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";

・・変更後 ↓↓

    if ($is_image) { // 画像
        $params['_body'] = "<img src=\"$url\" alt=\"$title\" title=\"$title\" $info/>";
        if (! $params['nolink'] && $url2)
            // 2025/0928 -375L
            // $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

・83行目追加

 <script type="text/javascript" src="skin/search2.js" defer></script>

 <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

リンク切れ表示を消す
・160行目変更 $nowikiname = 0 → 1
```
// _Disable_ WikiName auto-linking
$nowikiname = 1;
```

↑

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

対象ファイル名：plugin/tinyvideo.inc.php

下記のコードをコピーして、plugin ディレクトリに tinyvideo.inc.php というファイル名で保存する
（1.5.2 で使用しているモジュールをコピーしても可）

<?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>';
}
?>

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

↑

Site adminの表示†

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

サイト管理者の表示を変更
・122行目変更 $modifier = 'Masahiro Izutsu';
```
// Site admin's name (CHANGE THIS)
$modifier = 'Masahiro Izutsu';
```
・125行目変更 $modifierlink = 'http://izutsu.aa0.netvolante.jp/';
```
// Site admin's Web page (CHANGE THIS)
$modifierlink = 'http://izutsu.aa0.netvolante.jp/';
```

↑

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

ページの途中から最初に戻るボタンを配置する
【jQuery不使用】PukiWikiにページトップボタンを設置する！

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

「最初に戻る」ボタンの設置
・90行目の下あたり<body>タグの下に追加

<body onload="prettyPrint();">
 <!-- 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.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」

↑

ページ下部のアイコン表示†

ログイン時のみ表示するように変更。
対象ファイル名: skin/pukiwiki.skin.php

ページ編集アイコンの表示
・238,271 行目あたりに2行追加 >変更後(//2025.09.28 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) { //2025.09.28 ?>
 <?php _toolbar('top') ?>

<?php if ($is_page) { ?>
 &nbsp;
 <?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 } ?>
 &nbsp;
<?php if ($rw) { ?>
    <?php _toolbar('new') ?>
<?php } ?>
 <?php _toolbar('list')   ?>
 <?php _toolbar('search') ?>
 <?php _toolbar('recent') ?>
 &nbsp; <?php _toolbar('help') ?>
 &nbsp; <?php _toolbar('rss10', 36, 14) ?>
<?php } //2025.09.28 ?>
</div>
<?php } // PKWK_SKIN_SHOW_TOOLBAR ?>

↑

「codeprettify.inc.php」プラグインを導入†

ソースコードの表示が簡単になるプラグインを入れる。(google-code-prettifyを利用してソースコードをハイライト表示)

参考サイト

「pukiwiki.codeprettify.inc.php」

Google Code Prettifyでソースコードを読みやすく色分けする

Google Code Prettifyダウンロード

インストール手順（1.5.2 で使用しているモジュールをコピーしても可）
1. pukiwiki.codeprettifyをダウンロードする
2. ファイルを解凍し、codeprettify.inc.phpをpluginフォルダの下に配置する
3. google-code-prettifyをダウンロードする
  smallがついてるのはコメントや改行などを縮小化したバージョンで機能的にはどちらも同じ、small をダウンロード。
4. google-code-prettifyのファイルを解凍し、下記ファイルをskinフォルダの下に置く
```
prettify.css
prettify.js
```
  「prettify.css」の中の list-style-type:none を list-style-type: decimal に変更しておく。(1行ごとに行番号を表示)
5. skin/pukiwiki.skin.phpファイルを編集し、google-code-prettifyのcssファイルとjsファイルを追加する
  ● 78行目あたりに下記を追加
```
 <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();">
```
6. 複数行の引数を有効にする
  pukiwiki.ini.phpを編集し、PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACKのdefineを探して、値を0にする
  ● 56行目あたり
```
define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
```

使い方
- ブロック型
```
#codeprettify{{
<?php
echo 'test';
?>
}}
```
- インライン型
```
&codeprettify{<?php echo 'test'; ?>};
```
- cssクラスの追加
  codeprettifyプラグインでは関数の第一引数で追加するcssクラス指定ができる。
```
#codeprettify(lang-html linenums:1){{
```

↑

ページの一部を折り畳み表示†

「divregion.inc.php」プラグインを導入してページの一部を折りたためるようにする。

参考サイト

pukiwikiプラグイン/divregion

インストール手順（1.5.2 で使用しているモジュールをコピーしても可）
1. 上記サイトより「divregion.inc.php_1.1」「enddivregion.inc.php」をダウンロードする。
2. 「divregion.inc.php_1.1」を「divregion.inc.php」に変更。
3. 2つのファイルを UTF-8 に変更して保存したものを「plugin」フォルダにコピーする。
4. 対象ファイル名: skin/pukiwiki.css の最後に追加する。
```
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(タイトル)
本文
#enddivregion
```
上記記載により、以下のような表示となる。「タイトル」部分をクリックすることで、折り畳みが開閉される。

▼タイトル

▲タイトル
本文

パラメータ
divregion には、以下のパラメータを使うことができる。
- open, close
  折り畳みの初期状態を指定する。省略は「close」と同じ。
- hstyle:xx タイトル行のスタイルを指定。「hstyle:h1」と書くと、「h1」指定と同じ意味になる。
```
例
#divregion(タイトル,hstyle:h1)
本文
#enddivregion
```
  ▼タイトル
  
  ▲タイトル
  本文
- cstyle:xx 本文用のスタイルを指定。
  指定されたxxを利用して「div.divregion_contents_xx」のスタイルを適用する。
- color:#xxxxx, background-color:#xxxxxx スタイルシート指定を無視して、タイトル部分の文字色/背景色を変更。
  xxxxxは16進（0-9,A-F)指定。「Red」などの文字指定はできない。
```
例
#divregion(タイトル,color:#FF0000,background-color:#dddddd)
本文
#enddivregion
```
  ▼タイトル
  
  ▲タイトル
  本文
- content-color:#xxxxx, content-bgcolor:#xxxxxx スタイルシート指定を無視して、本文部分の文字色/背景色を変更。
  xxxxxは16進（0-9,A-F)指定。「Red」などの文字指定はできない。
```
例
#divregion(タイトル,content-color:#0000FF,content-bgcolor:#eeeeee)
本文
#enddivregion
```
  ▼タイトル
  
  ▲タイトル
  本文

↑

faviconの設定方法†

favicon.ico ファイルを用意しパスを設定する

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

・16行目変更
$_IMAGE['skin']['favicon']  = 'image/favicon.ico'; // Sample: 'image/favicon.ico';

↑

サイトアイコンの設定方法†

apple-touch-icon-precomposed.png ファイルを用意して、wiki サイトフォルダに設置する。
(image/ フォルダではうまくいかなかったので、Wikiルートに置く)

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

・75行目追加
 <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

↑

音声ファイルの埋め込み†

対象ファイル名：plugin/tinyaudio.inc.php

下記のコードをコピーして、plugin ディレクトリに tinyaudio.inc.php というファイル名で保存する。
（1.5.2 で使用しているモジュールをコピーしても可）

<?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>';
}
?>

使用上の注意点
- ファイルは絶対パスのURLで指定する。

↑

ページ下部の「添付ファイル一覧」を消す†

ログイン時のみ表示するように変更。
対象ファイル名: lib/html.php

編集時以外の不要表示を削除
・126,130 行目あたりの2行変更変更後(//2025.09.28 2か所) ↓↓

    // List of attached files to the page
    $show_attaches = $is_read || arg_check('edit');
    $attaches = ($attach_link && $enable_logout && $show_attaches && exist_plugin_action('attach')) ? // 2025/09/28
        attach_filelist() : '';

    // List of related pages
    $related  = ($related_link && $enable_logout && $is_read) ? make_related($_page) : '';  // 2025/09/28

↑

カスタマイズ動作確認†

PukiWiki 1.5.4 カスタマイズ・テスト

↑

忘備録†

↑

コンテンツのバックアップ・サーバー移行†

サイト「wiki_bs」バックアップ

$ cd /var/www/html
$ sudo tar cvzf wiki_bs_XXXXXXXX.tar.gz wiki_bs

サイトの再構築

$ cd /var/www/html
$ sudo tar xvzf wiki_bs_XXXXXXXX.tar.gz

↑

Ubuntu 環境設定覚書†

vi エディタの設定
```
$ vi ~/.vimrc
set number
set nocompatible
set backspace=indent,eol,start
set expandtab
set tabstop=4
set shiftwidth=4
set autoindent
```
・sudo 付きで vi を実行した場合は、root の設定が使用されるので、rootの .vimrcを ~/vimrc のシンボリックリンクにする

vi エディタの設定

$ sudo ln -s ~/.vimrc /root/.vimrc
$ sudo ls -la /root
合計 24
drwx------  4 root root 4096  3月 31 19:07 .
drwxr-xr-x 20 root root 4096  3月 31 17:29 ..
-rw-r--r--  1 root root 3106 12月  5  2019 .bashrc
drwx------  2 root root 4096  2月 10 03:51 .cache
-rw-r--r--  1 root root  161 12月  5  2019 .profile
lrwxrwxrwx  1 root root   19  3月 31 19:07 .vimrc -> /home/mizutu/.vimrc
drwxr-xr-x  3 root root 4096  3月 31 17:33 snap

↑

更新履歴†

2025/09/28 1.5.2「サイト構築覚書」をもとに再構成

サイト構築 覚書 の履歴(No.2)

サイト構築覚書2†

pukiwiki-1.5.4-utf8 でサイト構築†

PukiWiki 1.5.4 の設置†

アップロードサイズ拡張†

アップロード権限変更†

画像一覧の表示†

画像表示の時の左右の空白†

外部リンクを別窓にする†

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

システム設定†

全体の色†

テーブル†

タイトル・ロゴ†

タイトルのurlを消す†

メニューの変更†

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

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

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

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

Site adminの表示†

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

ページ下部のアイコン表示†

「codeprettify.inc.php」プラグインを導入†

ページの一部を折り畳み表示†

faviconの設定方法†

サイトアイコンの設定方法†

音声ファイルの埋め込み†

ページ下部の「添付ファイル一覧」を消す†

カスタマイズ動作確認†

忘備録†

コンテンツのバックアップ・サーバー移行†

Ubuntu 環境設定 覚書†

更新履歴†

サイト構築覚書の履歴(No.2)

Ubuntu 環境設定覚書†