画像クリックでの拡大と背景色変更
前置き
特に何も考えずWordPressの投稿ページに画像を貼るだけだとクリックでの画像拡大とかしてくれない。
画像クリックでの拡大方法と、拡大したときの背景色変更方法を備忘録として残す。
設定の有無でどう変わるか
これが特に何も設定してない状態。クリックしても何も起こらない。
でこっちが設定後。
設定方法
画像を選択してリンクから「クリックで拡大」を設定する必要がある。
背景色の設定方法
デフォルトだと画像の描写範囲外は全て白になり大変目に悪い。
また、動的に生成してる関係上、子テーマのCSSに追加するだけでは適用されない。
なので生成部分を書き換える。
自作の子テーマ、大体 wordpress/wp-content/themes/hogehoge-child とかに作ってるはずなのでそのディレクトリのそれぞれのファイルの最終行に以下を追加。
custom.js
document.addEventListener('click', function() {
setTimeout(() => {
const scrim = document.querySelector('.wp-lightbox-overlay.zoom.active .scrim');
if (scrim) {
scrim.style.setProperty('background-color', '#202020', 'important');
}
}, 0);
});function.php
// ==========================
// custom.js読み込み
// ==========================
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script(
'child-custom-js',
get_stylesheet_directory_uri() . '/custom.js',
array(),
false,
true // フッターで読み込む
);
});最後に。
セレクタの .wp-lightbox-overlay.zoom.active .scrim は、今使用しているテーマではこうだっただけで、もしかしたらテーマごとに違うかも。
もし違ったらデベロッパーツールを駆使して自分の環境に合わせて。
