前置き

特に何も考えず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 は、今使用しているテーマではこうだっただけで、もしかしたらテーマごとに違うかも。
もし違ったらデベロッパーツールを駆使して自分の環境に合わせて。

投稿 画像クリックでの拡大と背景色変更 は はんだとキーボードのあいだ に最初に表示されました。

前置き

synologyのnasでwordpressを構築すると、

ルーター>NASポート>WebStation>WordPress と、
Webstation(nginx)を経由することになる。

WebstationではWebポータルというものを定義するのだが、ここでサービス毎に独立した仮想ホストとして扱うらしい。

Webstationの設定と仕様

以下は現状の設定。
WANのIPでアクセスされるとデフォルトのWebサーバに転送し、bassdig.ddns.netへのアクセスはすべてwordpressへ転送する。

ユーザー定義ポータルは内部的にリバースプロキシのような動作をする。

このとき REMOTE_ADDR に渡されるのは、ポータルが処理した接続元IPである。つまりLAN内のデバイスからアクセスした場合でもグローバルIPになるっぽい。

やっと本題になるが、つまりはローカルからでも外からアクセスしているように見えるので.htaccessで192.168.1.0/24のみwp-adminへのアクセスを許可、とかの設定ができない。致命的。

X-Forwarded-Forで元のIPを読むとか色々試したけどどうにもうまくいかなかった。

バッチでなんとかする。

そこで、htaccessの自動更新スクリプトを作成し、常に自身のグローバルIPを設定しそこからのアクセスのみWordpressの管理画面を表示するようにした。

以下はスクリプト。

#!/bin/sh

# ======================================
# BASSDIG WordPress IP 自動更新スクリプト
# ======================================

# === 外部IP取得（DDNS から） ===
NEWIP=$(curl -s https://ifconfig.me/ip)

if [ -z "$NEWIP" ]; then
    echo "$(date '+%Y-%m-%d %H:%M:%S') ERROR: Failed to resolve bassdig.ddns.net" >> /var/log/bassdig_ip_update.log
    exit 1
fi

# === .htaccess の場所 ===
HTA="/volume1/web_packages/wordpress/.htaccess"

# === バックアップ（初回または上書き用） ===
if [ ! -f "$HTA.bak" ]; then
    cp "$HTA" "$HTA.bak"
fi

# === BASSDIG SETTINGS ブロック内だけ書き換え ===
sed -i "/# BEGIN BASSDIG SETTINGS/,/# END BASSDIG SETTINGS/ s/^RewriteCond %{REMOTE_ADDR}.*/RewriteCond %{REMOTE_ADDR} !^$NEWIP$/" "$HTA"

synologyのデフォルトのタスクスケジューラを利用して自動実行する。
コントロールパネル>タスクスケジューラ>作成>予約タスク>ユーザー指定のスクリプト

実行時のメール送信設定などもここから。

あと肝心のhtaccessの設定は最終行に以下を追加。
スクリプトでBEGIN BASSDIG SETTINGS～END BASSDIG SETTINGSの間のみ変更を行う。

# BEGIN BASSDIG SETTINGS

# ============================
# admin-ajax.php は常に許可
# ============================
RewriteCond %{REQUEST_URI} ^/wp-admin/admin-ajax\.php$
RewriteRule .* - [L]

# ============================
# wp-login.php を制限
# ============================
RewriteCond %{REQUEST_URI} ^/wp-login\.php$
RewriteCond %{REMOTE_ADDR} !^218.41.146.89$
RewriteRule ^.*$ - [R=404,L]

# ============================
# wp-admin ディレクトリを制限
# ============================
RewriteCond %{REQUEST_URI} ^/wp-admin
RewriteCond %{REMOTE_ADDR} !^218.41.146.89$
RewriteRule ^.*$ - [R=404,L]

# END BASSDIG SETTINGS

これで自身のグローバルIP以外からの管理画面へのアクセスは404へと誘導される。

最後に

Webstation経由じゃなく直接Wordpressにという手も使えるらしいけど、調べた感じ結構Webstationはデフォルトで怪しい通信等をブロックしたり公開範囲絞ったりしてくれてるらしいのでできればこのまま使うほうがセキュアなサイトを作れそうかなという判断。

投稿 管理ページへのアクセス制限と.htaccessの自動更新 は はんだとキーボードのあいだ に最初に表示されました。

ただここで問題になるのがSynology NASのWebStation。

synologyはデフォルトでnginxを使用してユーザーごとにwebページを作成する機能がある。
アクセスされたポートやエイリアスによってどのサービスに転送するかを決定しており、
このサイトの場合はbassdig.ddns.netからのアクセスはすべてwordpressへと転送する設定にしている。

その過程でアクセス元のIPはグローバルIPに書き換えられる。
htaccessで192.168.1.0/24に制限とかするのが一般的だが、それをしてしまうとローカルからのアクセスでも既にグローバルIPに書き換えられているため弾かれてしまうっぽい。

解決するためにChatGPTに聞きながら色々試してみたけどどうもうまくいかない。とりあえずは二要素認証を有効にしといたけど、なんかいい方法ないかなぁ。。

投稿 WordPressの管理ページへのアクセス制限の話 は はんだとキーボードのあいだ に最初に表示されました。