Pukiwikiカスタマイズの履歴(No.6)

Pukiwiki1.5.1を弄りまくってたらPukiwiki1.5.2にバージョンアップするときにちょっと苦労したので変更箇所をメモ書き。

まだ書きかけ

追加した機能

AutoAlias

概要

指定した文字列を自動的にリンクに変換する。詳細

参考

質問箱/4436 - PukiWiki-official

https://pukiwiki.osdn.jp/?%E8%B3%AA%E5%95%8F%E7%AE%B1/4436

備考

RecentにAutoAliasNameを表示したくなかったのでpukiwiki.ini.phpの$non_listに追加。
対象とするページの設定いじった方が良かった気もする (先頭にコロン追加)。

変更前

// Regex of ignore pages
$non_list = '^\:';

変更後

// Regex of ignore pages
$non_list = '^\:|^AutoAliasName';

タグ入力支援

概要

編集時にボタン1つで様々なタグを入力できるようにする。

参考

Software/wiki自作プラグイン/instag.inc.php - DEX Lab

https://dexlab.net/pukiwiki/index.php?Software%2Fwiki%BC%AB%BA%EE%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%2Finstag.inc.php

備考

スキンのheadに追加する記述で、paraeditを使っていないので代わりにseceditとareaeditを追加

変更前

<?php if ($_GET['cmd']=='edit'|| isset($_POST['preview']) || isset($_POST['template']) || $_GET['cmd']=='paraedit' ) { ?>

変更後

<?php if ($_GET['cmd']=='edit'|| isset($_POST['preview']) || isset($_POST['template']) || $_GET['cmd']=='secedit' || $_GET['plugin']=='areaedit' ) { ?>

スパムフィルタ

概要: Akismet等を利用した1.5.2用汎用スパムフィルタ。
参考: PukiWiki1.5.2にスパム対策メールフォームを設置！Googleアドセンスに備える！

PukiWikiのコメントをFacebookコメントに変更して実装したが、PukiWikiとしてメールフォームがあれば、専用のページを作成して各種お問い合わせを受け付けることが可能だ。確かにFacebookページのページプラグインを導入し

https://dajya-ranger.com/pukiwiki/setting-mail-form/
参考: recaptchalib.phpが同梱されていなかったので別途用意。
seceditとareaeditをAkismetの対象に指定すると誤検知しまくるのでどうにかしたいところ。
メニューバーを編集しても誤検知しまくる。なぜ。

URL短縮

概要: 日本語ページなど長過ぎるURLを短い文字列に置換する。
参考: PukiWikiのクソ長いURLをURL短縮ライブラリを組み込んで解決する！

PukiWikiだけの問題ではないが、一般的にWikiでは日本語ページのURLがクソ長くなり、特に各種SNSへ連動するときにネックになる。そこで、PukiWikiのURLを短縮する方法を検討し、実際にURL短縮ライブラリを作成して組み込んで解決したので、図入りで詳細に解説する。

https://dajya-ranger.com/pukiwiki/embed-url-shortener/
備考: 編集を完了した後だと元々のURLが表示される。

OGPタグ

概要

ページ内容から自動的にOGPを出力する。

参考

ソフトウェア/pukiwiki/Open Graph Protocol (OGP)

公開メモtwitterやFacebookに張られたリンクをキレイに表示することを目的に、OpenGraphProtocol対応のタグを仕込むことにしました。これにより、みたいに表示されていたのが、みたいに表示されるようになりました。https://www.a

https://dora.bk.tsukuba.ac.jp/~takeuchi/?%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%2Fpukiwiki%2FOpen%20Graph%20Protocol%20%28OGP%29

備考

・Descriptionの改変。
・1.5.2でページ内のURLが相対パスで出力されるようになったので画像のパスを修正 (このやり方であっているのだろうか)。
・各見出しに使用するparaedit.pngなどimageフォルダ内の画像を除外するよう調整。
・ついでに画像がないページは設定したアイキャッチが表示されるようにしてみる。

などを経て最終的にこうなった

<meta property="og:title" content="<?php echo $title ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>" />
<?php // descriptionを作成
	$str = $body;
	$str = preg_replace('/<table.*class="toc"(.|\n)*?<\/table>/', '', $str); // 目次を取り除く
	$str = preg_replace('/<h[1-6].*?<\/h[1-6]>/', '', $str); // 見出しを取り除く
	$str = preg_replace('/<script(.|\n)*?<\/script>/', '', $str); // スクリプトを取り除く
	$str = preg_replace('/<span.*class="tag".*?<\/span>/', '', $str); // tag.inc.phpを取り除く
	$str = preg_replace('/<\/td>|<\/th>/', '-', $str); // 表を変換
	$str = strip_htmltag($str, $all = TRUE); // タグを取り除く
	$str = htmlspecialchars($str); // & などをエスケープ
	$str = str_replace(array("\r\n","\r","\n","	"), '', mb_strcut($str,0,400,"UTF-8"));//改行を削除
?>
<meta property="og:description" content="<?php echo $str ?>" />
<meta property="og:site_name" content="<?php echo $page_title ?>" />
<meta property="og:image" content="<?php // imageフォルダの画像を除外して探す
   $str = $body;
	 $uri = get_base_uri(PKWK_URI_ABSOLUTE);
	 $result = preg_match_all('/<img.*?(data-lazy|src)=(["\'])\.\/(.+?)\2.*?>/i', $str, $imgurl);
   if($result) {
     echo $uri . htmlspecialchars_decode($imgurl[3][0]);
   } else {
		 echo $uri . 'image/eyecatch.jpg';
	 }
 ?>" />

各種SNSボタン

概要: ページ上部に各種SNS用のシェアボタンを表示する。
参考: シェアされるシェアボタンとは。CSSだけで作られた12のオリジナルレスポンシブシェアボタン【無料ダウンロード】

ソーシャルメディアでのシェアは、そのサイトの人気を左右する非常に重要な要素であることは多くの方が認識していることだと思います。だからこそ多くのWEBページにはシェアボタンが設置され […

https://fit-jp.com/sharebtn/
備考: レスポンシブ対応の一環でモニタサイズによってデザインが変わるようCSSで調整。

スライドメニュー

概要: ボタンを押すと横からスライドしてくるサイドメニュー。
参考: レスポンシブでハンバーガーメニューになる固定サイドバー

近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応し

https://www.webopixel.net/javascript/1289.html
備考: スマホ用。画面上部に常に表示。
スクロールボタンとか加えたほうが良いかも。

PC/スマホ切り替えボタン

概要: PC/スマホでページの幅を切り替えるボタン
参考: スマホサイト・PCサイトの切り替えボタンを設置する方法｜お小遣い稼ぎSite

https://okodukai-cho.com/website/switch.html
備考: 正直あんまり存在意義が感じられない機能。