- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-04-03T11:14:27+00:00","default:mizutu","mizutu")
#author("2023-06-23T03:46:59+00:00","default:mizutu","mizutu")
* サイト構築 覚書 [#s1730b68]
#contents
RIGHT:&size(12){※ 最終更新:2021/03/31 };
RIGHT:&size(12){※ 最終更新:2023/06/23 };~
** pukiwiki-1.5.2-utf8 でサイト構築 [#ia103bcf]
> 今後のバージョンアップに備え、変更箇所はできるだけ少なくする。~
色のトーンを全体的にグレー・薄いグレー系にする。以下、COLOR(#993333){行数はオリジナルを基準}とする。
*** アップロードサイズ拡張 [#u0f9a958]
> アップロードサイズはデフォールトでは 1MB
> COLOR(blue){対象ファイル名: plugin/attach.inc.php}
- サイズを拡張する。~
> 変更前 ↓↓ 20行目~
define('PLUGIN_ATTACH_MAX_FILESIZE', (1024 * 1024)); // default: 1MB
COLOR(red){変更後 ↓↓}
define('PLUGIN_ATTACH_MAX_FILESIZE', (1024 * 1024) *30); // default: 1MB
*** アップロード権限変更 [#kcedfeae]
> ログインユーザーはアップロード許可。削除は管理者のみとする。
> COLOR(blue){対象ファイル名: 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
*** 画像一覧の表示 [#lf67504e]
- 画像表示のとき左と下に空白を開ける
> COLOR(blue){対象ファイル名: skin/pukiwiki.css}
> 384行目に挿入~
div#body img {
margin: 0px 0px 8px 8px;
}
*** 画像表示の時の左右の空白 [#q813b2cf]
- 空白を詰める
> COLOR(blue){対象ファイル名: skin/pukiwiki.css}
> 599-600行目変更~
margin-left:32px; → 8px
margin-right:32px; → 8px
*** 外部リンクを別窓にする [#sc12c577]
> 外部ページのリンクの際、http:// の先頭に + を付ける(+http:) と別窓でリンクするようにした。~
参考サイト: [[ロンさん非公式ウイキ>+https://lonwiki.com/?3f411d410a#b1a0b4f2]]~
COLOR(blue){対象ファイル名: lib/make_link.php}
- 変更前 ↓↓ 400行目~
(?:(?:https?|ftp|news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+
COLOR(red){変更後 ↓↓}
(?:(?:\+?https?|\+?ftp|\+?news):\/\/|mailto:)[\w\/\@\$()!?&%#:;.,~'=*+-]+
- 変更前 ↓↓ 425行目~
return '<a href="' . $this->name . '"' . $rel . '>' . $this->alias . '</a>';
COLOR(red){変更後 ↓↓}~
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>';
}
*** 外部リンクにマークを付ける [#n5983cd8]
> COLOR(blue){対象ファイル名: skin/pukiwiki.css}
- 52行目挿入
a[target=_blank] {
padding-right: 20px;
background:url(../image/external-link.png) right center/11px auto no-repeat;
}
*** システム設定 [#x8f32928]
> COLOR(blue){対象ファイル名: 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'
);
COLOR(red){変更後 ↓↓}
$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',
);
COLOR(red){変更後 ↓↓}
// Group definition
$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',
);
COLOR(red){変更後 ↓↓}
$edit_auth = 1;
$edit_auth_pages = array(
// Regex Username
'##'=> 'edit-user',
);
#br
*** 全体の色 [#l7e9505e]
> COLOR(blue){対象ファイル名: 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;
*** テーブル [#j79b5560]
> COLOR(blue){対象ファイル名: skin/pukiwiki.css}
- 141行目変更~
background-color:#D0D8E0; → #EEEEEE
- 151行目変更~
margin:auto; → 15px
- 154行目変更~
background-color:#ccd5dd; → #DDDDDD
- 167行目変更~
background-color:#ccd5dd; → #FFFFFF
*** タイトル・ロゴ [#r72027ea]
> COLOR(blue){対象ファイル名: 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>
COLOR(red){変更後 ↓↓}
<a href="/"><img id="logo" src="../images/photo02pk.jpg" width="60" height="60" alt="[PukiWiki]" title="[PukiWiki]" /></a>
*** タイトルのurlを消す [#e116c15a]
> COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php}
- 22行目変更
define('SKIN_DEFAULT_DISABLE_TOPICPATH', 1); → 0
- 95行目追加
<?php echo ' ' ?>
*** レスポンシブルデザイン [#y8efb22e]
> スマートフォンなどのモバイル対応にする。以下のサイトを参考とした。~
[[SEの良心 PukiWiki1.5.2をレスポンシブデザインに変更する！>+https://dajya-ranger.com/pukiwiki/make-responsive-design/]]~
> COLOR(blue){対象ファイル名: 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 { ?>
COLOR(red){変更後 ↓↓}
<?php if ($menu !== FALSE) { ?>
<!-- ボディ部の構成を変更 -->
<div id="contents">
<div id="menubar"><?php echo $menu ?></div>
<div id="body"><?php echo $body ?></div>
</div>
<?php } else { ?>
- COLOR(blue){skin/pukiwiki-respnsv.css} を追加（内容は参考サイトから）
#br
*** メニューの変更 [#y67ded15]
> メニューバーが複雑でわかりにくいので、修正する。参考サイトは下記。~
[[まちゅダイアリー PukiWiki のカスタマイズ>+https://www.machu.jp/diary/20040927.html]]~
>「リロード」→ 削除~
「バックアップ」→ 「履歴」
いま見ているページの更新履歴（バックアップ）を表示するという機能なので。~
>●ログオフ状態のとき~
[トップ][一覧|検索|履歴|ヘルプ|ログアウト]~
>●ログイン状態のとき~
[トップ][新規|編集|凍結|差分|添付][一覧|検索|履歴|最終更新|ヘルプ|ログアウト]~
> COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php}
- 113-151行目変更
>変更前 ↓↓
[ <?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 ?>
COLOR(red){変更後 ↓↓}
[ <?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 ?>
> COLOR(blue){対象ファイル名: js.lng.php}~
- 108行目 変更
$_LANG['skin']['backup'] = 'バックアップ'; → '履歴'
#br
*** ヘルプを修正できるようにする [#r9b7f613]
> 誤植の修正・説明の追加などをできるようにする。COLOR(red){修正後は「凍結」を忘れずに。}~
> COLOR(blue){対象ファイル名: js.lng.php}~
- 92-93行目 変更
$rule_page = 'FormattingRules'; → 'テキスト整形のルール'
$help_page = 'Help'; → 'ヘルプ'
- 「FormattingRules」をコピーして「テキスト整形のルール」ページを作成。
-「Help」をコピーして「ヘルプ」ページを作成して、冒頭の FormattingRules のリンクを変更する。
#br
*** 表示画像のクリックで元画像をポップアップで表示する。 [#ibfa172c]
> Light Box を導入して画像表示を改善する。~
参考サイト: [[pukiwiki1.5.xにLightboxを導入する>+https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=19&cad=rja&uact=8&ved=2ahUKEwjGzezMupbnAhUHM94KHV-cBhIQFjASegQIBBAB&url=http%3A%2F%2Fblog.outdoorwalk.net%2F2017%2F12%2F18%2Fpukiwiki1-5-x%25E3%2581%25ABlightbox%25E3%2582%2592%25E5%25B0%258E%25E5%2585%25A5%25E3%2581%2599%25E3%2582%258B%2F&usg=AOvVaw3m_VjwzTqq5-o7KGhs127g]] [[lightbox2 オフィシャルサイト>+https://lokeshdhakar.com/projects/lightbox2/]]~
COLOR(blue){対象ファイル名: /lib/make_link.php}
- lightbox プログラムをダウンロード・コピーする。~
ダウンロードファイル: lightbox2-master.zip [[lightbox2 ダウンロード>+https://github.com/lokesh/lightbox2/tree/master/]]~
使用するファイル (ファイルがあるフォルダー名）~
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/ (イメージファイルすべて)
> COLOR(blue){対象ファイル名: plugin/ref.inc.php}~
- 354行目変更
>変更前 ↓↓
$params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";
COLOR(red){変更後 ↓↓}
$params['_body'] = "<a href=\" $url2\" title=\" $title\" rel='lightbox[aiueo]' > {$params['_body']}</a>";
> COLOR(blue){対象ファイル名: 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の「？」(はてな)を表示しない [#ma071758]
>参考サイト: [[Pukiwikiの「？」(はてな)を表示しないように>+https://qiita.com/t_n/items/cc23872b670c7ef4ea79]]
> COLOR(blue){対象ファイル名: pukiwiki.ini.php}~
- 158行目 変更~
$nowikiname = 0 → 1
*** 動画ファイルの埋め込み [#o629ccb7]
*** 動画ファイルの埋め込み [#vb59c980]
>&color(blue){対象ファイル名：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>';
}
- 下記のコードをコピーして、plugin ディレクトリに tinyvideo.inc.php というファイル名で保存する。~
#codeprettify(){{
<?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>';
}
?>
}}
- 使用上の注意点
-- &color(red){ファイルは絶対パスのURLで指定};する。
- 参考サイト [[自作プラグイン/tinyvideo.inc.php>+https://pukiwiki.osdn.jp/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/tinyvideo.inc.php]]
*** Site adminの表示 [#j88cfe7d]
*** Site adminの表示 [#gdb811c8]
> COLOR(blue){対象ファイル名: pukiwiki.ini.php}~
- 122行目 変更~
$modifier = 'Masahiro Izutsu';
- 125行目 変更~
$modifierlink = 'http://izutsu.aa0.netvolante.jp/';
*** ページトップボタンを設置 [#z0afa02d]
*** ページトップボタンを設置 [#wf989f08]
> ページの途中から最初に戻るボタンを配置する。以下のサイトを参考とした。~
[[【jQuery不使用】PukiWikiにページトップボタンを設置する！>+https://dajya-ranger.com/pukiwiki/page-top-button/]]~
> COLOR(blue){対象ファイル名: 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>
> COLOR(blue){対象ファイル名: 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％ */
}
- COLOR(blue){skin/page-top-button.js} を追加（内容は参考サイトから）~
パーミッションは「644」
- COLOR(blue){image/page-top-button.png} を追加（内容は参考サイトから）~
パーミッションは「644」
*** ページ下部のアイコン表示 [#l4229986]
*** ページ下部のアイコン表示 [#j44f9c5b]
> ログイン時のみ表示するように変更。~
> COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php}~
- 233-266行目あたりに2行追加
>&color(red){変更後(//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 ?>
*** 「codeprettify.inc.php」プラグインを導入 [#jfc504c5]
*** 「codeprettify.inc.php」プラグインを導入 [#t43d45ac]
> ソースコードの表示が簡単になるプラグインを入れる。(google-code-prettifyを利用してソースコードをハイライト表示)~
- 参考サイト~
-- [[「pukiwiki.codeprettify.inc.php」>+https://github.com/makotokw/pukiwiki.codeprettify]]
-- [[Google Code Prettifyでソースコードを読みやすく色分けする>+https://rfs.jp/sb/javascript/js-lab/code-prettify.html]]~
-- [[Google Code Prettifyダウンロード>+https://code.google.com/archive/p/google-code-prettify/downloads]]~
- インストール手順~
++ pukiwiki.codeprettifyをダウンロードする~
++ ファイルを解凍し、codeprettify.inc.phpをpluginフォルダの下に配置する
++ google-code-prettifyをダウンロードする~
smallがついてるのはコメントや改行などを縮小化したバージョンで機能的にはどちらも同じ、small をダウンロード。~
++ google-code-prettifyのファイルを解凍し、下記ファイルをskinフォルダの下に置く~
prettify.css
prettify.js
「prettify.css」の中の list-style-type:none を list-style-type: decimal に変更しておく。(1行ごとに行番号を表示)~
++ skin/pukiwiki.skin.phpファイルを編集し、google-code-prettifyのcssファイルとjsファイルを追加する~
● 74行目あたりに下記を追加~
<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();">
++ 複数行の引数を有効にする~
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){{
*** ページの一部を折り畳み表示 [#faba8b73]
*** ページの一部を折り畳み表示 [#v5d9619a]
> 「divregion.inc.php」プラグインを導入してページの一部を折りたためるようにする。~
- 参考サイト~
-- [[pukiwikiプラグイン/divregion>+http://tomose.dynalias.net/junk/?pukiwiki%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3/divregion]]
- インストール手順~
++ 上記サイトより「divregion.inc.php_1.1」「enddivregion.inc.php」をダウンロードする。~
++「divregion.inc.php_1.1」を「divregion.inc.php」に変更。~
++ 2つのファイルを UTF-8 に変更して保存したものを「plugin」フォルダにコピーする。~
++ COLOR(blue){対象ファイル名: skin/pukiwiki-rspnsv.css} の最後に追加する。~
#codeprettify(){{
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 とで本文を挟み込むように記載する。~
#codeprettify(){{
#divregion(タイトル)
本文
#enddivregion
}}
上記記載により、以下のような表示となる。「タイトル」部分をクリックすることで、折り畳みが開閉される。~
#divregion(タイトル)
本文
#enddivregion
- パラメータ~
divregion には、以下のパラメータを使うことができる。~
-- open, close~
折り畳みの初期状態を指定する。省略は「close」と同じ。
-- hstyle:xx タイトル行のスタイルを指定。「hstyle:h1」と書くと、「h1」指定と同じ意味になる。~
#codeprettify(){{
例
#divregion(タイトル,hstyle:h1)
本文
#enddivregion
}}
#divregion(タイトル,hstyle:h1)
本文
#enddivregion
-- cstyle:xx 本文用のスタイルを指定。~
指定されたxxを利用して「div.divregion_contents_xx」のスタイルを適用する。~
-- color:#xxxxx, background-color:#xxxxxx スタイルシート指定を無視して、タイトル部分の文字色/背景色を変更。~
xxxxxは16進（0-9,A-F)指定。「Red」などの文字指定はできない。~
#codeprettify(){{
例
#divregion(タイトル,color:#FF0000,background-color:#dddddd)
本文
#enddivregion
}}
#divregion(タイトル,color:#FF0000,background-color:#dddddd)
本文
#enddivregion
-- content-color:#xxxxx, content-bgcolor:#xxxxxx スタイルシート指定を無視して、本文部分の文字色/背景色を変更。~
xxxxxは16進（0-9,A-F)指定。「Red」などの文字指定はできない。~
#codeprettify(){{
例
#divregion(タイトル,content-color:#0000FF,content-bgcolor:#eeeeee)
本文
#enddivregion
}}
#divregion(タイトル,content-color:#0000FF,content-bgcolor:#eeeeee)
本文
#enddivregion
*** faviconの設定方法 [#r3399172]
- favicon.ico ファイルを用意しパスを設定する
> COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php}
> 16行目変更~
$_IMAGE['skin']['favicon'] = 'image/pukiwiki.ico';
*** サイトアイコンの設定方法 [#o5cc3bfd]
- apple-touch-icon-precomposed.png ファイルを用意して、wiki サイトフォルダに設置する。~
(image/ フォルダではうまくいかなかったので、Wikiルートに置く)~
> COLOR(blue){対象ファイル名: skin/pukiwiki.skin.php}
> 71行目追加~
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
*** 音声ファイルの埋め込み [#vadfbe2b]
>&color(blue){対象ファイル名：plugin/tinyaudio.inc.php};~
- 下記のコードをコピーして、plugin ディレクトリに tinyaudio.inc.php というファイル名で保存する。~
#codeprettify(){{
<?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>';
}
?>
}}
- 使用上の注意点
-- &color(red){ファイルは絶対パスのURLで指定};する。
*** ページ下部の「添付ファイル一覧」を消す [#x14f476d]
> ログイン時のみ表示するように変更。~
> COLOR(blue){対象ファイル名: lib/html.php}~
- 123行目あたりの2行変更~
#codeprettify(){{
>&color(red){変更後(//2023.06.23 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')) ?
attach_filelist() : ''; // 2023/06/23
// List of related pages
$related = ($related_link && $enable_logout && $is_read) ? make_related($_page) : ''; // 2023/06/23
}}
#br
** 更新履歴 [#uadbe6dc]
- 2021/04/01 「私的AI研究会」と同期
- 2021/05/21 サイトアイコン
- 2022/09/14 動画ファイル埋め込み修正／音声ファイル埋め込み追加
- 2023/06/23 ページ下部の「添付ファイル一覧」を消す~
#br
