SWELLでコードを修正するときに気をつけること

WordPressテーマの「SWELL」で作られたサイトを、コードから修正する機会がありました。

私は普段、オリジナルテーマを作ることが多いため、最初はSWELLも通常のテーマと同じ感覚で編集できると思っていました。

しかし、SWELLには独自の設定やブロック、CSSが多く用意されているため、何も考えずにコードを変更すると、表示崩れやアップデート時の上書きにつながる可能性があります。

今回は、SWELLでコードを修正するときに気をつけたいポイントをまとめます。

親テーマを直接編集しない

最も重要なのは、SWELL本体のファイルを直接編集しないことです。

WordPressのテーマには、親テーマと子テーマがあります。

SWELL本体が親テーマで、「SWELL CHILD」が子テーマです。

親テーマのファイルを直接修正すると、SWELLをアップデートした際に変更内容が上書きされる可能性があります。

せっかく修正したコードが消えてしまうため、基本的には子テーマ側で編集します。

SWELL CHILDがインストールされていない場合は、修正を始める前に子テーマを準備した方が安全です。

いきなり本番環境で修正しない

少しのCSS修正であっても、できるだけ本番環境で直接編集しない方がよいです。

特にPHPファイルを修正する場合、記述を一文字間違えるだけで、サイト全体が表示されなくなることがあります。

可能であれば、LocalやDockerなどを使ってローカル環境を用意し、動作を確認してから本番へ反映します。

最低限、修正前にはバックアップを取っておく必要があります。

「少しだけだから大丈夫」と考えて、そのまま編集するのが一番危険です。

管理画面の設定で対応できないか確認する

SWELLは、WordPressの管理画面から変更できる項目が非常に多いテーマです。

ヘッダー、フッター、ボタン、カラー、余白、フォント、記事一覧など、多くのデザインを管理画面から調整できます。

そのため、コードを書く前に、SWELLのカスタマイザーや各ページの設定で対応できないか確認した方がよいです。

管理画面で変更できる内容を、わざわざコードで上書きすると、後から別の人が管理画面を変更した際に反映されないことがあります。

コードを書くことが目的ではありません。

安全で管理しやすい方法を選ぶことが重要です。

追加CSSだけで無理に対応しすぎない

簡単なデザイン調整であれば、「外観」から追加CSSを記述する方法でも対応できます。

ただし、すべてを追加CSSだけで修正しようとすると、後から管理が難しくなります。

例えば、次のような状態です。

.post_content .wp-block-group > div:nth-child(2) p {

  margin-top: 10px !important;

}

このように階層が深く、特定の順番に依存したCSSを書くと、ブロックの並びを変更しただけで効かなくなる可能性があります。

また、!importantを増やしすぎると、さらに強い指定を追加しなければならなくなります。

長期的に管理するサイトであれば、子テーマ内にCSSファイルを用意し、修正内容を整理して記述した方が分かりやすいです。

SWELL独自のクラス名を理解する

SWELLには、独自のHTML構造やクラス名が使われています。

例えば、ボタンや投稿コンテンツ、ヘッダー、記事一覧などにもSWELL独自のクラスが付与されています。

見た目だけを確認して、予想でCSSを書くのではなく、ブラウザの検証ツールを使って実際のHTML構造を確認する必要があります。

親要素のクラスや、どのCSSが優先されているかを確認せずに修正すると、関係のないページまでデザインが変わることがあります。

特に共通クラスを上書きするときは注意が必要です。

トップページだけを変更したつもりが、投稿ページや固定ページにも影響する可能性があります。

セレクタの影響範囲を限定する

SWELLの既存クラスをそのまま上書きすると、サイト全体に影響することがあります。

例えば、次のようなCSSです。

.swell-block-button a {

  background: #000;

}

この指定では、SWELLブロックで作られたすべてのボタンが黒くなります。

特定のページやセクションだけを変更したい場合は、専用のクラスを追加して範囲を限定します。

.top-contact-button .swell-block-button a {

  background: #000;

}

影響範囲を限定することで、予期しない表示崩れを防げます。

CSSを書く際は、「どこを変えるか」だけではなく、「どこまで影響するか」も確認する必要があります。

テンプレートファイルの上書きは慎重に行う

SWELLのテンプレートを大きく変更したい場合、子テーマ側にファイルをコピーして編集する方法があります。

ただし、この方法には注意点があります。

子テーマにコピーしたテンプレートファイルは、親テーマがアップデートされても自動では更新されません。

親テーマ側でセキュリティ対応や構造変更が行われても、子テーマには反映されない可能性があります。

テンプレートファイルを上書きする場合は、なぜ上書きが必要なのかを明確にしておくべきです。

CSSやフックで対応できる修正まで、テンプレートを丸ごとコピーする必要はありません。

functions.phpの記述ミスに注意する

機能を追加するときは、子テーマのfunctions.phpを編集することがあります。

しかし、functions.phpは記述を間違えると、管理画面を含めてサイトが表示されなくなることがあります。

コードを追加するときは、一度に大量の処理を追加せず、少しずつ確認した方が安全です。

また、インターネット上で見つけたコードを、そのまま貼り付けるのも危険です。

コードが古かったり、SWELLや現在のWordPressの仕様に合っていなかったりする可能性があります。

何をしているコードなのか理解した上で追加する必要があります。

プラグインとの競合も確認する

表示や機能の不具合が発生した場合、SWELL本体や自分が書いたコードだけが原因とは限りません。

プラグインが読み込んでいるCSSやJavaScriptと競合している可能性もあります。

特に、キャッシュ、最適化、ブロック追加、フォーム、目次などのプラグインは、テーマ側の処理に影響することがあります。

コードを修正しても直らない場合は、プラグインを一時的に停止して原因を切り分けることも必要です。

ただし、本番環境でいきなり停止するのではなく、バックアップや動作への影響を確認してから行います。

キャッシュを削除して確認する

コードを修正したのに表示が変わらない場合、キャッシュが残っている可能性があります。

WordPressのキャッシュプラグイン、サーバーキャッシュ、ブラウザキャッシュなど、複数のキャッシュが影響することがあります。

特にCSSを変更した直後は、変更が反映されていないように見えることがあります。

コードを何度も書き換える前に、まずキャッシュを削除して確認した方がよいです。

実際には修正できているのに、キャッシュが原因で無駄な変更を重ねてしまうケースがあります。

スマートフォン表示も確認する

パソコンで問題なく表示されていても、スマートフォンでは崩れていることがあります。

SWELLはレスポンシブ対応されていますが、独自のCSSを追加すると、そのバランスを崩す可能性があります。

特に注意したいのは、次のような部分です。

横幅を固定している

余白を大きく指定している

文字サイズを固定している

横並びの要素を追加している

画像に固定の高さを指定している

パソコンだけで確認を終わらせず、タブレットやスマートフォンの幅でも確認する必要があります。

修正内容を記録しておく

コードを修正したら、どのファイルのどこを変更したか記録しておくことも重要です。

時間が経つと、自分で修正した内容でも忘れます。

また、別の制作者が管理することになった場合、何を変更しているか分からないと調査に時間がかかります。

可能であればGitを使い、修正履歴を残しておくと安心です。

最低限、コード内にコメントを残したり、修正内容を別の資料にまとめたりしておくと、後から確認しやすくなります。

まとめ

SWELLは、コードを書かなくても高機能なサイトを作れるテーマです。

その一方で、独自の設定やCSS、HTML構造が多いため、通常のオリジナルテーマと同じ感覚で修正すると、思わぬ影響が出ることがあります。

SWELLでコードを修正するときは、次の点を特に意識する必要があります。

親テーマを直接編集しない

子テーマを使用する

本番環境で直接修正しない

管理画面で対応できないか確認する

CSSの影響範囲を限定する

テンプレートの上書きは最小限にする

パソコンとスマートフォンの両方で確認する

修正履歴を残す

コードを書けるからといって、すぐにコードで解決するのが正解とは限りません。

SWELLの機能を理解した上で、管理画面、CSS、PHPのどの方法が最適かを判断することが、安全な修正につながると感じました。