WordPressにミニマップ実装

IDEによくあるミニマップ。近年どんどん細く掴みにくくされるスクロールバーの代わりになり大変便利。
Vivaldiのページアクション機能でWebページにも適用出来て感動し、検索するとスクリプトが配布されていたのでWordPressに設置してみた。

設置

配布元: pagemap · mini map for web pages · larsjung.de
設置は簡単で、JSを読み込み、<canvas>タグとスクリプトを一行追加し、CSSで調整。同梱のdemoからコピーできる。

JS読込

DLしたpagemap-1.4.0.min.jsを任意のフォルダにUP。
function.phpに以下を追加、(設置URL)を編集。

function js_footer()
{
	echo <<< EOM
	<canvas id='map'></canvas>
	<script src="(設置URL)/pagemap-1.4.0.min.js"></script>
	<script>
		pagemap(document.querySelector('#map'));
	</script>
	EOM;
}
add_action( 'wp_footer', 'js_footer' );

BODY最下部で読み込むようになる。
WordPress以外(静的Webページ)の場合は、</body>直前に3～7行目を手動で貼り付け。

CSS追加

テーマCSSに以下を追加し、位置とサイズを調整。

#map {
	position: fixed;
	top: 0;
	right: 0;
	width: 200px;
	height: 100%;
	z-index: 100;
}

このサイトではwidth: 80px、height: 60%。レスポンシブ対応で画面幅1080px以下はdisplay: none。

運用

ページ全体を把握出来、ページ途中にも一瞬で飛べ、少ない移動量で高速スクロール。いい事しかないミニマップを置こう。