2019
すでにカスタマイズを加えているpukiwikiカスタマイズ箇所/2018の項目に加えて、2019年に新たに下記の改変を加えた。
- Pukiwiki 1.5.2へのアップデート
- PukiWikiのSSL対応(https化)
- PukiWikiのSEOとは
- 画像圧縮とサイト表示の高速化
- PukiwikiのAMP対応
- PukiwikiスキンのOGP対応
- URL短縮ライブラリの組み込み
- HTML5対応とmetaタグの変更
- レスポンシブメニュー
- FrontPageだけトップにロゴとサイト名を表示させる
- その他
- 2カラムへの変更
- search.inc.phpプラグインでGETメソッドを可能にする
- 言語設定とタイムゾーンの変更
- htmlinsert.inc.phpプラグインの導入
- alias.inc.phpの導入
- スタイルシート pukiwiki.css
- 存在しないページへのアクセスを404にする
- X-Robots-Tag http ヘッダーのnoindexをコメントアウト
- インデックスされたくないページにrobots.txtを設定する
- pukiwiki.ini.php
- recent.inc.phpの呼び出し回数
- 検索ページや編集ページでもMenubarを表示する
- 「関連ページ」に改行を(lib/func.php)
- デフォルトで「タイムスタンプを更新しない」に(lib/html.php)
- パンくずリストで存在しないページへのリンクを張らない
- AutoTicketLinkNameというページが何度削除しても自動生成されるのを完全に防ぐ
- autolink作成時のコメントを入れない
- スマホでページを見た際に数字が並んでいても電話番号としてのリンクを貼らない
Pukiwiki 1.5.2へのアップデート
これによりlibフォルダ内にあるlib/html.phpなどは再修正を強いられることになった。なお、検索などが高速化したとのことだが100ページ程度の当wikiではこれまでもサイト内検索は一瞬であったため、あまり恩恵を実感できるほどの違いはない。
ja.lng.php, lib/html.phpなどはpukiwikiカスタマイズ箇所/2018に記載したのと同様の修正を再度加えた。
PukiWikiのSSL対応(https化)
サイト全体をSSL対応(https化)とした。コスト削減のためにレンタルサーバーで提供されている無料SSLを用いている。最近のモダンブラウザの仕様ではSSLに対応していないサイトでは「安全ではないサイトです」というような警告が表示されるものもある。またSEO的にもHTTPS対応しているか否かが評価対象となるという話もある。
10年ほど前までは個人のウェブサイトにSSLを導入するには数万円の費用を要することもあったが、最近は個人用であれば安価なSSLも利用可能となっている。
当サイトの具体的な実施内容
SSL化したサイトでは、サイト内リンク(画像などのページ内要素も含む)が全てSSL化されていることが必要である。ページによって https:// ではなく http:// へのリンクがのこっていると「安全ではないサイトです」の警告が表示されてしまうこともある。サイトをSSL化した場合は .htaccess でhttpへのアクセスをhttpsへ転送する設定をしておくと良い。
Google search consoleでは、ドメインごとDNSで登録しているのではなくサーバに置いた認証ファイルかmetaタグなどでサイトのプロパティを登録している場合、SSL化に伴ってhttpとは別のhttpsのサイトを登録しなおす必要があることがある。またサイトマップもSSL対応後も書き換えがなされていないと意味がないので、https対応のURLを記載すること。
PukiWikiのSEOとは
画像圧縮とサイト表示の高速化
Google Pagespeed Insightでウェブページの表示速度などを測定し軽量化の評価をすることができる。これで高得点であることはサイトの高評価につながる。なお、PukiWiki自体はwordpress などに比べるとずっと表示速度は速く、当サイトもサーバが不安定でない限りほぼ99点〜100点であることが多い。
画像ファイルの圧縮
サイトそのものを軽くする方法はいろいろなものがあるが、特に効果が大きいのは画像の圧縮である。PNGファイルはTinyPNGやCompressPNGなどのPNG圧縮サイトで徹底的にサイズを小さくしよう。複数のPNG圧縮サイトに繰り返しPNGファイルを投入するとどんどん圧縮できる。
他のファイルの軽量化や省略
複数のCSSのincludeを1つにまとめたり、javascriptを軽量化するか省略するなどするのも効果的であると思われる。当サイトはもともとほとんどjavascriptを使用していないので、これについては言及しない。
htaccessでのキャッシュの設定
画像ファイルやwebフォントなどについては下記を.htaccessに記載してキャッシュ設定をすることで高速化が図れる。下記では画像ファイル(gif,jpg,png,ico)とwebフォント、それに別に記載したOGPプラグインで使用しているimgファイルを2592000秒(30日間)キャッシュするようにしている。
<Files ~ ".(gif|jpe?g|png|img|ico|woff)$">
Header set Cache-Control "max-age=2592000, public"
</Files>
なお今回はjavascriptなどについてはキャッシュしていない(このサイトでほとんど使用していないので)。
PukiwikiのAMP対応
PukiwikiスキンのOGP対応
URL短縮ライブラリの組み込み
URL短縮ライブラリを組み込んで、URLの短縮を試みる。lib/shroturl.php(shorturl.php)のアップロード、lib/pukiwiki.php lib/func.php lib/make_link.php(make_link.php)の修正が必要である。他のプラグインの改造などに比べてこのURL短縮ライブラリははるかに構造が複雑で、現在は開発元のサイトの方がPukiWiki 1.5.2まで精力的にアップデート対応をしてくださっているが、今後このアップデートが対応できなくなった場合にはメンテナンスを独力で続けるのは難しそう。。。
lib/pukiwiki.phpの31行目に挿入
// URL短縮ライブラリロード
require(LIB_DIR . 'shorturl.php');
lib/pukiwiki.phpの45行目に挿入
// ページ名上書きセット
$vars['page'] = get_pagename_from_short_url($vars['page']);
lib/func.phpの815目に挿入(これは1.5.3から不要になった)
{
return get_base_uri($uri_type) . get_short_url_from_pagename($page); // ※ライブラリの仕様を一部変更し、2019/06/03記事公開当初の記述に戻した
/* コメントアウト
global $defaultpage;
if ($page === $defaultpage) {
return get_base_uri($uri_type);
}
return get_base_uri($uri_type) . '?' . pagename_urlencode($page);
*/
}
lib/make_link.php の780行目を下記に変更
(Pukiwiki 1.5.3では848行目)(これは1.5.3から不要になった)
$r_page = pagename_urlencode($page); //780行 修正前
$r_page = get_short_url_from_pagename($page); //780行 修正後
lib/make_link.php の802行目の ? を削除
(Pukiwiki 1.5.3では870行目)(これは1.5.3から不要になった)
return $al_left . '<a ' . 'href="' . $script . '?' . $r_page . $anchor . //802行 修正前
return $al_left . '<a ' . 'href="' . $script . $r_page . $anchor . //802行 修正後
HTML5対応とmetaタグの変更
レスポンシブメニュー
別名ハンバーガーメニューとも。スマホなどのモバイルブラウザのみで表示される、クリックすると左の画面外からせり出してくるタイプのメニューである。
FrontPageだけトップにロゴとサイト名を表示させる
特定ページだけで表示される機能の実装 http://design.kyusan-u.ac.jp/OpenSquareJP/?pukiwiki/Customize#q=%E4%BB%A5%E5%A4%96 で記載されている機能を使って、タイトルが「FrontPage」となっているトップページだけでページタイトルを非表示とし、一方でロゴとサイト名を表示させることにした。
具体的には
<?php if ( $title == 'FrontPage' ) { ?> AAA <?php } else { ?> BBB <?php } ?>
としておくとページタイトルがFrontPageに合致するページのみでAAAが実行される一方でBBBは実行されない。このAAAやBBBには好みのHTMLや <?php echo $title ?> などを挿入すると、FrontPageだけで特定の画像を表示したり、逆にh1ページタイトルを非表示にしたりできる。一方で <?php if ( $title != 'FrontPage' ) { ?> とすればFrontPage以外でこれを実行するようにも設定できる。
これの応用で、FrontPage以外のページでモバイルブラウザから閲覧した場合のみ左上にサイトアイコンとサイト名を記載することにした。FrontPageではこの左上のサイトアイコンとサイト名を非表示にしている。このまま設置しただけでは右上のレスポンシブメニュー(ハンバーガーメニュー)の≡アイコンと高さが微妙にずれてしまい見栄えが良くないので、縦位置を揃えるために、position:relative と top:3px; などを併用して見栄えを整えている。
その他
2カラムへの変更
従来は760px以下のブラウザは1カラム、960px以上のブラウザは3カラムとしてその間を2カラムとしていたが、2019年9月から760pxを境に1カラムと2カラムをレスポンシブに切り替えるデザインとした。
(2019.9.14追記)
その後に1カラムに変更しました。
search.inc.phpプラグインでGETメソッドを可能にする
言語設定とタイムゾーンの変更
htmlinsert.inc.phpプラグインの導入
あらかじめコードしておいたHTMLをPukiwiki内で表示するためのhtmlinsert.inc.php(htmlinsert.inc.php)をインストールする。このプラグインでは、Pukiwikiを設置しているフォルダ内にhtmlinsertのフォルダを新たに置いておき、この中にHTMLを記載したtxtファイルを置いておくとPukiwiki内でincludeすることができる。サイドバーでTwitterへのリンクや検索ボックスを設置するためにこのプラグインを利用している。
なお、自由にHTMLを挿入できるhtml.inc.php(html.inc.php)もある。こちらはセキュリティに問題があるので不特定多数が自由に編集できるpukiwikiへのインストールは勧められないが、編集者が限られているpukiwikiでは有用。
関連ページ: https://pukiwiki.osdn.jp/?自作プラグイン/htmlinsert.inc.php
alias.inc.phpの導入
ページ名の変更などを行った際に旧ページから新ページに転送するためのaliasプラグイン(alias.inc.php)を導入した。なお、公式サイトで公開されていたはずの旧版はすでに入手できなくなっているようで、有志の方が新たに作り直してくださったものが公開されている。
http://tomose.dynalias.net/junk/index.php?pukiwiki%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3/alias
スタイルシート pukiwiki.css
h1,h2,h3などのborderの変更、行間の拡大などデザイン上の微修正。
存在しないページへのアクセスを404にする
X-Robots-Tag http ヘッダーのnoindexをコメントアウト
lib/html.php内に設定されている X-Robots-Tag http ヘッダーでnoindexを吐くようになっているが、これがどうも必要なページにまでnoindexのhttpヘッダーを送っているようで行儀が悪い。Google search consoleでみると表示されるべきページでもインデックスされていないものが多数あり、その理由を確認すると「httpヘッダーでnoindexを検出したのでインデックスの登録を外した」と表示されてしまうページが多数ある。
正規表現でnoindexをつけるページを振り分けることもできるが、ひとまずHTML内ではなくhttpヘッダーでnoindexをつける設定は下記のようにコメントアウトしておくという方法がある。しかしこれは、本来はインデックスされてほしくないPukiwikiの編集ページや添付ファイルページまでインデックスされそうになるというデメリットもあります。また、noindexがあってもなくてもGoogleにインデックスされるときはされるようなので、あまり実効性はないかもしれません。利用は慎重に判断すること。
//if (!$is_read || $nofollow) {
// if (!headers_sent()) {
// header("X-Robots-Tag: noindex,nofollow");
// }
//}
インデックスされたくないページにrobots.txtを設定する
Pukiwikiの内部ページはやたらと検索サイトにインデックスされるのを避けたい。Googleのbotが勝手にPukiwikiを書き換えることはないと思うが、検索された時にcmd=newpageなどプラグインページばかりが検索されるのは避けたいものである。検索インデックスを避ける方法は色々とあるが、ひとまず単純にrobots.txtに下記の事項を書いておいてGoogle botを避けることとする。
User-agent: *
Disallow: /*plugin=*
Disallow: /*cmd=diff*
Disallow: /*cmd=newpage*
Disallow: /*cmd=freeze*
Disallow: /*cmd=rename*
Disallow: /*cmd=edit*
Disallow: /*cmd=backup*
pukiwiki.ini.php
- nowikinameを0から1に変更(CheckMateなどのキーワードへの自動リンクを回避するため)
recent.inc.phpの呼び出し回数
recentプラグインはサーバーへの負荷対策として、PukiWiki 1.4.6から一度に呼び出せる回数に制限が2度までとかけられている。しかし、これではレスポンシブ対応のサイトでFrontPageにrecentプラグインを使うと、本文内・サイドバー・スマホ用ハンバーガーメニューの3箇所で呼び出すことになりエラーが生じる。呼び出せる回数を3回に増やしておくことで回避できる。
関連ページ: https://pukiwiki.osdn.jp/dev/?BugTrack/2090
define('PLUGIN_RECENT_EXEC_LIMIT', 3); // ここを2から3に変更しておく
検索ページや編集ページでもMenubarを表示する
Pukiwikiの初期設定のままではread設定されているページ(検索ページや編集ページなど)ではMenubarが表示されないので、read設定されているページでもMenubarが表示されるようにする。これを設定しておかなければレスポンシブメニューをクリックした時に白紙が表示されるだけになってしまって寂しい。pukiwiki.skin.phpに少し手を加えることで回避できる。
‘’関連ページ:’’ https://pukiwiki.osdn.jp/dev/?PukiWiki/1.4/ちょっと便利に/編集や検索ページでも常にMenubarを表示する
<?php if (arg_check('read') && exist_plugin_convert('menu')) { ?> //編集前
<?php if (exist_plugin_convert('menu')) { ?> //編集後
「関連ページ」に改行を(lib/func.php)
308行目 return '<span class="page_passage" data-mtime="' . $date_atom . '"></span>'; の</span>の直後に<br />を挿入して「このページに関連するページ」の各項目を改行させて縦に並べるようにした。
return '<span class="page_passage" data-mtime="' . $date_atom . '"></span><br />'; //編集後は<br />を加えている
デフォルトで「タイムスタンプを更新しない」に(lib/html.php)
398行目のinputタグに checked="checked" をつけて、「タイムスタンプを変更しない」をデフォルトにした。
(Pukiwiki 1.5.3では402行目)
$add_notimestamp = '<input type="checkbox" name="notimestamp" checked="checked" ' .
'id="_edit_form_notimestamp" value="true"' . $checked_time . ' />' . "\n" .
ついでにタイムスタンプを編集するプラグインtimestamp.inc.php(timestamp.inc.php)もインストールしておきます。
パンくずリストで存在しないページへのリンクを張らない
plugin/topicpath.inc.php の56行目で PKWK_READONLY && をコメントアウト
AutoTicketLinkNameというページが何度削除しても自動生成されるのを完全に防ぐ
plugin/edit.inc.php の一番下にある
init_autoticketlink_def_page();
の前にスラッシュ2本(//)を置いてコメントアウトして、AutoTicketLinkNameが自動生成されるのを完全に防止することに成功した。
autolink作成時のコメントを入れない
lib/makelink.phpの861行目と862行目にある、HTMLにautolinkのコメントを挿入する部分を削除する。コメントが残っていてもHTML的には問題ないはずなのだが、iOSのSafariからページを見るとHTMLコメントで微妙にスペースが空くのが気になったため。
スマホでページを見た際に数字が並んでいても電話番号としてのリンクを貼らない
iPhoneのSafariの場合であれば8〜11桁の数字は勝手に電話番号だと認識されてアンカーをふかされてTELリンクを貼られてしまう。これ自体はサイトによっては便利な機能であり、特に予約の電話などを受け付けたい小売店・飲食店ではこの機能はありがたいのだが、当サイトのような電話をかけることと直接関係しない場合はこの機能はじゃまになってしまう。むしろ文献の発行年とページ数が勝手にTELリンクになってしまい、不用意にクリックすると電話を発信しそうになるのは勘弁していただきたい。
そこで、ブラウザがTELリンクを貼ることをmetaタグで制限しておく。ただしこれをつけると本来ならTELリンクを張りたいところでもTELリンクにならないことに注意する。
<meta name="format-detection" content="telephone=no">
- pukiwikiカスタマイズ箇所/2019/AMP HTML対応の断念
- pukiwikiカスタマイズ箇所/2019/AMP HTML対応の断念のその後
- pukiwikiカスタマイズ箇所/2019/pukiwikiで存在しないページへのアクセスを404にする
- pukiwikiカスタマイズ箇所/2019/search.inc.phpプラグインでGETメソッドを可能にする
- pukiwikiカスタマイズ箇所/2019/レスポンシブメニュー
- pukiwikiカスタマイズ箇所/2019/言語設定とタイムゾーンの変更
添付ファイル: timestamp.inc.php 853件 [詳細] shorturl.php 765件 [詳細] htmlinsert.inc.php 870件 [詳細] make_link.php 932件 [詳細] alias.inc.php 855件 [詳細] html.inc.php 805件 [詳細] pukiwiki.20190913.css 602件 [詳細] pukiwiki.skin.20190913.php 566件 [詳細]
更新日:2021-06-20 閲覧数:3783 views.