Archives 12月 2025

前置き

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

前置き

WordPressの通知などメールでのシステムメッセージ送信は自身のWebページのホスト名のメールアドレスからしか送れないらしい？
少なくともプラグインの Contact Form 7 はそういう仕様。

なのでメールサーバを用意して、hoge@bassdig.ddns.net を使えるようにする必要がある。

使用パッケージ

使用するパッケージは Synology Mail Server と Antivirus Essential の2つ。

基本、前提パッケージは自動で入れてくれるのに、これは自動で入れてくれない。
メール送受信でエラーが起きてハマった。

設定方法

基本的な設定は以下。

これらと、「エイリアス」画面で @ より前の部分を設定する。
メアド全て乗ってるので画像は割愛。

LAN外に解放してるわけじゃないので載せても大丈夫だとは思うけど念の為。

SMTPリレー

メールの大量送受信の予定はないけどセキュリティ的にも設定しておいたほうが良さそう？それとも設定必須？
この辺専門範囲外なのであんまりよくわかってない。

gmailのリレーサービスを利用するよう設定した。

ちなみに、2025年03月14日以降 gmail は基本認証（Basic Authentication）を廃止。Synology Mail Server でSMTPリレーの設定を行うには「アプリパスワード」を使用する必要がある。

アプリパスワードは、2段階認証を有効にしたGoogleアカウントで、OAuthに対応していないアプリからの接続を許可するための代替認証方式。Googleが生成する16桁の一時的なパスワードを使って認証する。

この辺見るといいかな。
https://support.google.com/mail/answer/185833?hl=ja

最後に。

Antivirus Essentialがクソ重い。メールのスキャンを切ればいらなくなるのかな…。
LAN外に公開しないし切るのも手かなと思ってる。

他にわからないことあればこことか見る。
https://kb.synology.com/ja-jp/DSM/help/MailServer/mailserver_desc?version=7

前置き

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はデフォルトで怪しい通信等をブロックしたり公開範囲絞ったりしてくれてるらしいのでできればこのまま使うほうがセキュアなサイトを作れそうかなという判断。

前置き

SynologyのNASでWebサイトを構築する場合に必須というか、使わなきゃならないのがWebstaionというアプリ。

こいつがなかなかにクセが強いというかなんというか。という感じ。
特に複雑な設定なしにWebページを作成できるという点は良いんだけど、本職の人とか、逸般の誤家庭の人とかだと、なんでこれ設定するのにこんなことしなきゃいけないの…って感じになる。

設定について

このWebページはSynologyのNASにWordpressを導入して構築しているが、NASじゃなくきちんと鯖を用意するべきかなぁ…とも思ってる。

メイン鯖はProxmoxVE入れて遊んでるんだけど、やっぱり色々と遊ぶのでよく壊れがちというか…。備忘録も消えたら意味ないのでRAID組んでバックアップもあるNASのが安心というか…。

少し話がそれたが、以下が現状の設定。

デフォルトポータルのphpMyAdminやWordpressは無効化しておくのが良い。

wordpressをインストールしたばかりのデフォルト設定だと、wordpressへのアクセスは http://ローカルIP/wordpress/ になる。

つまり、せっかくドメインとか取得してローカルからのアクセスもDNSサーバを構築とかしても
アクセスするには https://bassdig.ddns.net/wordpress とかになる。クソダサい。

ユーザー定義して、bassdig.ddns.netへのアクセスはすべてwordpressにしておくと良い。

最後に

ちなみにphpMyAdminとかもそのままにしておくとdigコマンドとかでドメイン名からIP見られて、直接IPでアクセスされるとhttp:/IPアドレス/phpmyadmin とかでアクセスできるのでデフォルトポータルは基本無効化しておくべき。