SWELLのカラー10色とナビ設定を自動化した話

2026年5月10日2026年6月29日

当ページのリンクには広告が含まれています。

サイトを増やすたびに、同じ色とメニューを画面でポチポチ設定し直すのって、地味に疲れますよね。

WordPressテーマ SWELL のカスタマイザはよく出来ていて、色やナビをマウス操作だけで整えられます。

ただ、AI会社のように 3〜4個のサイトを並行運用 する前提だと、毎回同じパレットとメニューを画面でクリックして揃える作業が重くなってくるんです。

そこで SWELL のカラー10色とグローバルナビ (ホーム / プロフィール / お問い合わせ) を コマンド一発で揃える 仕組みを作りました。

今回はその実装ログです。

なぜカスタマイザの自動化が効くのか

SWELLでサイトごとに必ず触る箇所は、ほぼ固定なんです。

カラーパレット (メイン / リンク / フッター背景 / ヘッダー背景など 10色弱)
フッターコピーライト
グローバルナビゲーション (ホーム / プロフィール / お問い合わせ)
WordPress 標準のサンプルページ削除

画面操作で 1個ずつ設定すると、1サイトあたり30〜45分かかります。

3サイト目で確実に飽きるので、ここはスクリプトに任せましょう。

SWELLのカラー設定はどこに保存されているの？

仕組みが分かると、自動化のイメージがつかめますよ。

SWELLのカラーは WordPress の theme_mod (テーマカスタマイザの保存場所) という仕組みで、データベースに 1行のかたまりとして保存されています。

すべてのカスタマイザー設定 (カラー・フォント・フッター文言など) が、この1つのかたまりに圧縮された形で詰め込まれているんです。

ここを直接 SQL で書き換えると、圧縮の整合性が壊れます。

代わりに WP-CLI (WordPress のコマンドライン版・サーバーから WordPress を操作できる公式ツール) の wp theme mod set で 1キーずつ書く方式が安全ですよ。

カラー10色を一括投入するスクリプト

メインカラー・本文色・リンク色・背景・ヘッダー・フッターの10色分を辞書にまとめて、SSH 経由で WordPress に投入します。

SWELL_BASIC_COLORS: dict[str, str] = {
    "color_main":         "#E76F51",  # メイン: 夕焼けオレンジ
    "color_text":         "#2B2B2B",  # 本文: 墨色
    "color_link":         "#2A9D8F",  # リンク: ティール
    "color_bg":           "#FFFFFF",  # ページ背景: 白
    "color_footer_bg":    "#264653",  # フッター背景: ダークネイビー
    # …残り 5色 (ヘッダー背景・サブ背景・各文字色など)
}

for key, value in SWELL_BASIC_COLORS.items():
    wp.theme_mod_set(key, value)

ポイントは2つあります。

何度実行しても結果が同じ (idempotent): 既存値を上書きするだけなので、誤って二重実行しても壊れません
末尾で自己検証: 投入後にもう一度設定値を取り戻して、辞書と一致するか確認しています。SWELL の更新でキー名が変わったとき、すぐ気づけます

カラーは AI会社のブランド画像 (夕焼けオレンジ + ティール + ダークネイビー + クリーム) に合わせています。

別サイトで使いたいときは、辞書の値を差し替えるだけですよ。

グローバルナビを組み立てるスクリプト

カラーが入ったら、次はメニューです。

標準のサンプルページを消す → グローバルナビを作成 → ホーム / プロフィール / お問い合わせを追加 → ヘッダー位置に割り当て。

ここまでを一気に進めます。

このスクリプトも 何度実行しても同じ結果 になるように作っています。

サンプルページが既に消えていれば何もしない
メニューが既にあれば再利用する
同じページがメニューに入っていれば追加しない
ヘッダー位置への割り当ては上書きで安全

これで毎日自動実行しても、ナビが二重表示になったり消えたりしません。

新しい固定ページを追加したくなったら、追加対象のリストに1行足すだけで翌日のメニューに反映されます。

ヘッダー位置の指定は PC用の header_menu だけ で十分です。

スマホ表示のハンバーガーメニューは、SWELL の標準実装で同じ内容を自動展開してくれます。

複数ロケーションに割り当てると、逆に重複表示が起きるサイトがあるので、最小限にしておくのが安全ですよ。

実行ログ

両スクリプトを順次実行すると、画面上にこんな進捗が流れます。

=== カラー10色を投入 ===
  color_main             = #E76F51
  color_link             = #2A9D8F
  …
Result: ALL OK

=== サンプルページ削除 / グローバルナビ作成 ===
  Deleted: サンプルページ
  Created: グローバルナビ
  Added: ホーム / profile / contact
  Assigned: header_menu

UI で 30〜45分かかる作業が、実質ノータイムで済む状態になりました。