Kiri's Digital Workshop

カテゴリー: ブログ作成

  • 【初心者向け】本番サイトを壊さずにWordPressを改造！Local環境構築からダークモード化まで全手順

    【初心者向け】本番サイトを壊さずにWordPressを改造！Local環境構築からダークモード化まで全手順

    「WordPressでブログを始めたけど、テーマのCSSをいじったり、新しいプラグインを試したりするのが怖い…」「もしサイトが真っ白になったらどうしよう…」

    そんな悩みを抱えていませんか？僕もそうでした。しかし、その恐怖を完全に解決してくれる最高の解決策があります。それが、自分のPCの中に本番とそっくりの練習環境を作る「ローカル開発環境」です。

    この記事では、Windowsのパッケージマネージャーwingetを使って、人気のローカル環境ツールLocalをインストールし、本番サイトの完全なコピーを作り、CSSで見た目をクールなダークモードにカスタマイズするまでの一連の流れを、僕自身の体験談として記録します。この記事を読み終える頃には、あなたもきっと「自分もやってみよう！」と思えるはずです。

    なぜローカル環境が必要なのか？ サイトを直接いじる3つのリスク

    そもそも、なぜ面倒なひと手間をかけてまでローカル環境を作るのでしょうか？それは、本番サイトを直接編集することには、見過ごせない大きなリスクがあるからです。

    • リスク1：編集中にサイトが壊れて、訪問者に見られてしまう。
      サイト運営者の悪夢…それは、カスタマイズ中にサイトが真っ白になってしまうこと。ローカル環境なら、いくら壊しても誰にも見られません。
    • リスク2：サーバー上で作業するので、表示が遅かったり、元に戻すのが大変だったりする。
      自分のPC上での作業はサクサク快適。バックアップも簡単なので、いつでも好きな時点に戻せます。
    • リスク3：試したいプラグインが、実は自分のサイトと相性が悪くて不具合を起こす可能性がある。
      僕は以前、たった一つのプラグインが原因でサイトを半日止めてしまった苦い経験があります。ローカル環境なら、心ゆくまで安全にプラグインの相性チェックができます。

    これらのリスクを回避し、心穏やかにサイトを育てていくために、ローカル環境はまさに「必須科目」と言えるでしょう。

    コマンドラインで一瞬！ winget で Local をインストール

    それでは、早速ローカル環境を構築していきましょう。Windowsなら、標準のパッケージマネージャーwingetを使うのが最もスマートです。

    まず、PowerShellかコマンドプロンプトを開き、以下のコマンドで「Local」を検索します。

    winget search local

    いくつか候補が表示されますが、僕が試した時点ではLocal.LocalというIDではインストールできませんでした。よく見ると、ソースがwingetとなっているものにFlywheel.LocalというIDがあります。これが正解でした。

    winget search localの実行結果画面

    以下のコマンドでインストールを実行します。

    winget install Flywheel.Local

    僕の環境では5分ほどでインストールが完了し、スタートメニューに「Local」が追加されました。

    本番サイトをPCに丸ごとコピー！ All-in-One WP Migration が超便利

    次に、本番サイトの完全なクローン（複製）を、今インストールしたLocalの中に作ります。これには「All-in-One WP Migration」というプラグインが驚くほど便利です。

    1. 本番サイトで「All-in-One WP Migration」をインストール・有効化し、「エクスポート」→「ファイル」で.wpressファイルをダウンロードします。
    2. Localで「+」ボタンから新しい空のサイトを作成します。（サイト名やWordPressのログイン情報は任意のものでOK）
    3. 作成したローカルサイトで、同じく「All-in-One WP Migration」をインストール・有効化し、「インポート」から先ほどダウンロードした.wpressファイルをドラッグ＆ドロップします。

    これだけで、本番サイトと全く同じ記事、画像、設定を持つサイトが自分のPCの中に誕生します。初めてやった時は本当に感動しました。

    いざ、ダークモード化！「追加CSS」で見た目をハック

    さて、工房の準備は整いました。いよいよメインイベント、サイトの見た目をクールなダークモードに改造します。僕が使っているテーマ「TwentyTwenty-Five」はブロックテーマなので、「外観」→「エディター」→「スタイル」→「追加CSS」からCSSを追記しました。

    サイトのBefore/After画像

    以下が、僕が実際に記述した全CSSコードです。コピーしてそのまま使えますし、カラーコードなどを変更すればオリジナルデザインも作れます。

    /* --- 全体の基本設定（ダークモード） --- */
body {
    background-color: #1e1e1e; /* ダークグレーの背景 */
    color: #d4d4d4; /* 明るいグレーの文字色 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* --- リンクのスタイル --- */
a {
    color: #61dafb; /* 明るいブルーのリンク色 */
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* --- 記事タイトルや見出しのスタイル --- */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    border-bottom: 1px solid #444;
    padding-bottom: 0.5em;
}

/* --- コードブロックのスタイル（最重要！） --- */
pre {
    background-color: #282c34;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 1em;
    overflow-x: auto;
}

code {
    font-family: "Consolas", "Menlo", "Monaco", "Courier New", monospace;
}

p > code, li > code {
    background-color: #3a3f4a;
    color: #e6e6e6;
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

    まとめ：失敗を恐れず、自分だけの工房を育てよう

    今回の作業を振り返ると、

    • wingetでLocalをインストール
    • All-in-One WP Migrationでサイトを複製
    • 追加CSSでダークモード化

    という流れでした。一見複雑に見えますが、一つ一つは非常にシンプルです。そして何より、ローカル環境があれば、失敗を恐れずに、誰でも安全かつ自由にWordPressのカスタマイズを楽しめます！

    このブログ「Kiri’s DigitalWorkshop」も、この環境でどんどん育てていこうと思います。この記事が、同じように悩んでいるあなたの第一歩を後押しできれば、これほど嬉しいことはありません。