WordPressでサイトを作ったあと、「この見出しの色を変えたい」「サイドバーの並びを入れ替えたい」という要望が出てきます。ところが、いざ設定画面を探しても該当する項目が見つからない。あるいは、思いきってファイルを編集したら画面が真っ白になった。よくある展開です。
カスタマイズには段階があります。管理画面の設定でできること、追加CSSでできること、テーマファイルの編集が必要なこと。この3段階を区別せずに手を出すと、高い確率でサイトを壊します。
この記事では、初心者の方が安全にWordPressをカスタマイズするための手順を、リスクの低い順に解説します。あわせて、壊してしまったときの戻し方もお伝えします。
作業を始める前にやること
バックアップを取る
これを飛ばして進めるのは、綱渡りと変わりません。データベースとファイルの両方をバックアップしてから作業してください。バックアッププラグインを使うか、レンタルサーバーの自動バックアップ機能を利用します。
「ちょっと色を変えるだけだから」という作業ほど、思わぬところに影響が出ます。5分の準備で、半日の復旧作業を回避できます。
使っているテーマの種類を確認する
| テーマの種類 | 編集の入口 |
|---|---|
| ブロックテーマ | 外観 → エディター（サイトエディター） |
| クラシックテーマ | 外観 → カスタマイズ（カスタマイザー） |
管理画面の「外観」メニューに「エディター」があればブロックテーマ、「カスタマイズ」があればクラシックテーマです。ネット上の解説記事は、どちらを前提にしているかで手順がまったく違います。読み始める前に、自分のテーマがどちらかを確認してください。
管理画面の構成やテーマの仕組みは、WordPressの入門書で一度全体を押さえておくと、解説記事の手順も読み解きやすくなります。
段階1：管理画面の設定で変える（リスクなし）
まずはコードを書かずにできる範囲を探します。実は、初心者が「できない」と思い込んでいる調整の多くが、ここで解決します。
・サイトのタイトル、キャッチフレーズ、ロゴ
・配色、フォントの種類とサイズ（テーマが対応していれば）
・メニューの並び順、階層
・ウィジェットの配置
・トップページに表示する内容（固定ページか投稿一覧か）
・パーマリンク（URLの形式）
とくにブロックテーマのサイトエディターは、ヘッダーやフッターのテンプレートまで画面上で編集できます。詳しい操作はWordPress公式のサイトエディター解説にまとまっています。
この段階のいいところ
設定画面での変更は、元の値に戻せば復旧できます。壊れても取り返しがつく範囲なので、まずここで試行錯誤してください。ファイルを触るのは、ここで足りないと分かってからで十分です。
段階2：追加CSSで見た目を変える（リスク小）
追加CSSはどこにあるか
クラシックテーマなら「外観 → カスタマイズ → 追加CSS」、ブロックテーマならサイトエディターのスタイル設定内に、CSSを書き込める場所があります。ここに書いたCSSは、テーマを更新しても消えません。
変えたい場所のセレクタを調べる
CSSを書くには、対象を指定するセレクタが必要です。これはブラウザの開発者ツールで調べられます。
1. 変えたい場所を右クリックして「検証」を選ぶ
2. 開いたパネルで、その要素のクラス名を確認する
3. 適用されているCSSを見て、どのプロパティを上書きすればいいか判断する
4. 追加CSSに同じセレクタで新しい指定を書く
CSSプロパティの意味を確認したいときは、MDN Web DocsのCSSリファレンスが日本語で読めて正確です。
効かないときの原因
書いたCSSが反映されない場合、原因はだいたい3つです。テーマ側のCSSのほうが優先されている（詳細度の問題）、キャッシュが残っている、セレクタが間違っている。キャッシュ系プラグインを使っている場合は、変更後にキャッシュを削除するのを忘れないでください。
詳細度やセレクタの考え方は、CSSの解説書で基本を押さえておくと、効かない原因を切り分けやすくなります。
段階3：子テーマでファイルを編集する（リスク中）
なぜ子テーマが必要なのか
テーマのファイルを直接編集すると、テーマが更新された瞬間に編集内容がすべて上書きされて消えます。これを防ぐのが子テーマです。
子テーマは、親テーマの機能を引き継ぎながら、変更したい部分だけを上書きする仕組みです。親テーマが更新されても、子テーマに書いた内容は残ります。
子テーマの作り方
1. テーマフォルダの中に、子テーマ用のフォルダを作る
2. style.cssを作り、先頭のコメントに親テーマの名前を書く
3. functions.phpを作り、親テーマのスタイルを読み込む記述を入れる
4. 管理画面の「外観 → テーマ」で子テーマを有効化する
市販テーマの多くは、公式サイトで子テーマを配布しています。自作するより、配布されているものをダウンロードして使うほうが安全です。まずはテーマの公式サイトを確認してください。
編集するファイルの見当をつける
| ファイル名 | 担当している場所 |
|---|---|
| header.php | ページ上部の共通部分 |
| footer.php | ページ下部の共通部分 |
| single.php | 投稿の個別ページ |
| page.php | 固定ページ |
| archive.php | カテゴリーやタグの一覧ページ |
| functions.php | 機能の追加・変更 |
やってはいけないこと
・管理画面の「テーマファイルエディター」でPHPを直接編集する
・親テーマのファイルを直接書き換える
・バックアップなしでfunctions.phpを触る
・コピーしたコードの意味を確認せずに貼り付ける
1つ目は特に危険です。管理画面からPHPを編集して構文エラーを起こすと、サイトも管理画面も同時に表示できなくなり、ブラウザからは何も操作できなくなります。復旧にはFTPやサーバーのファイルマネージャーが必要になります。
PHPを触るならローカル環境で
functions.phpのようなPHPファイルを編集するなら、自分のパソコンの中にテスト用のWordPressを用意するのが安全です。Localのようなローカル環境構築ツールを使えば、公開中のサイトに影響を与えずに試せます。
壊してしまったときの戻し方
1. 直前に何を変更したかを思い出す
2. 管理画面に入れるなら、その変更を元に戻す
3. 管理画面に入れないなら、FTPやファイルマネージャーで該当ファイルを元に戻す
4. プラグインが原因ならフォルダ名を変更して強制的に無効化する
5. どうにもならなければバックアップから復元する
3番目のために、ファイルを編集する前に元のファイルをコピーして保管しておく習慣をつけてください。これがあるかないかで、復旧時間が数分と数時間に分かれます。
作業環境を整えておく
カスタマイズは、管理画面・実際のサイト・開発者ツールの3つを行き来する作業です。1画面で切り替えながら進めると、「いま何を変更した結果なのか」が分からなくなり、原因の切り分けができなくなります。
27インチのWQHD（2560×1440）モニターを1枚足して、左に管理画面、右にサイトと開発者ツールを並べる構成にすると、変更が即座に確認できます。CSSを1行書き換えるたびにタブを切り替えていた時間が、そのまま消えます。設置スペースが厳しい場合はクランプ式のモニターアームで机の奥行きを確保してください。
FTP接続の情報やデータベースのパスワードなど、控えておくべき情報も増えます。パスワード管理ツールを使うか、鍵付きのファイルボックスに印刷して保管するなど、置き場所を決めておくと安心です。
知識面では、WordPressのテーマ構造を扱った解説書を1冊持っておくと、どのファイルがどこを担当しているのかを調べる時間が減ります。ネット検索だと断片的な情報になりがちな部分なので、体系的にまとまった資料は効きます。
よくある質問
Q. 子テーマは作らないといけませんか
CSSだけの変更なら、追加CSSで済むため子テーマは不要です。PHPファイルを編集する場合や、テンプレートを差し替える場合に必要になります。無理に用意せず、必要になった段階で作れば十分です。
Q. コードをコピーして貼り付けても大丈夫ですか
出所が信頼できるものであれば問題ありません。ただし、何をしているコードなのかを理解しないまま貼るのは避けてください。動かなくなったときに原因が分からず、質問もできない状態になります。
Q. カスタマイズするとテーマの更新ができなくなりますか
子テーマや追加CSSを使っていれば、親テーマは通常どおり更新できます。親テーマを直接編集していた場合のみ、更新で消えてしまいます。この違いが子テーマを使う理由です。
Q. ブロックテーマとクラシックテーマ、どちらを選ぶべきですか
これから作るならブロックテーマが今後の主流です。ただし、既存の日本語テーマにはクラシックテーマも多く、情報量も豊富です。使いたいテーマがどちらかで決まる、というのが実際のところです。
Q. プラグインでカスタマイズするのはどうですか
手軽ですが、数が増えると表示速度と管理の負担が増えます。CSSを数行書けば済む内容なら、追加CSSで対応するほうが軽量です。プラグインは、自作が難しい機能に限って使うのが健全です。
Q. 変更が反映されないときはどうすればいいですか
キャッシュを疑ってください。キャッシュプラグイン、レンタルサーバーのキャッシュ、ブラウザのキャッシュの3層があります。順番に削除して、それでも反映されなければCSSの詳細度やセレクタを見直します。
Q. どこまで自分でやって、どこから依頼すべきですか
設定画面と追加CSSの範囲までは、独学でも十分に対応できます。PHPの編集やデータベースを触る作業は、失敗したときの影響が大きいため、業務で使うサイトなら専門家に依頼する判断も合理的です。
まとめ
WordPressのカスタマイズは、管理画面の設定 → 追加CSS → 子テーマでのファイル編集という順番でリスクが上がっていきます。下の段階で解決できないかを確かめてから、上に進んでください。
そして、どの段階でも作業前のバックアップは欠かせません。戻せる状態を作ってから触る。これが身についていれば、カスタマイズは怖い作業ではなくなります。
まずは開発者ツールで、変えたい場所のクラス名を調べるところから始めてみてください。ここができるようになると、カスタマイズの世界が一気に広がります。
