てがろぐでPhotoSwipeを使う

てがろぐの画像拡大表示にPhotoSwipe v5を使う。

  • 投稿内の複数画像をスワイプで切替
  • 「画像クリックで閉じる」オプション
  • 余計なフレームやアニメーション無し
  • △ data属性で画像サイズ指定必須
    • JSで自動付与対応
  • △ マウスホイールで画像切替非対応
    • スクリプト改変で実装

動作サンプル(稼働中のてがろぐ)

続きを読む てがろぐでPhotoSwipeを使う

Prism.jsのSASSハイライトを修正

WordPressのHCBに言語を追加でSASSのシンタックスハイライトを追加したが、判定が不完全なので修正する。

修正前
修正後

疑似クラス、疑似要素の:にマッチしてセレクタ行がプロパティ判定されている(6,9行目)。

続きを読む Prism.jsのSASSハイライトを修正

WordPressのjQuery読込削除

WordPressのヘッダで古いjqueryとjquery-migrateが読み込まれているので、削除した上で高速なjsDelivrのCDNで新しいverを読み込む(プラグイン等で使用されている為)。

function.php編集

function enqueue_scripts() {
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery-js', '//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js');
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');
参考

WordPressにミニマップ実装

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

続きを読む WordPressにミニマップ実装