【WordPress】SWELLで子テーマは必要？テーマ編集手順と注意点・エラー対処法

【WordPress】テーマファイルとは？

そもそもWordPressのテーマファイルとは、何を指すのでしょうか？

サイトのデザインや共通部分の関数などを定義するファイル

要は、サイト内のデザインや表示を繰り返したいページ・箇所などを入力したファイル全般のことです。

テーマファイルに含まれる「functions.php」では、管理画面への指示も入力できます。

SWELLに限らず他テーマでも認識は同じです。

それは、テーマファイルですでにコードやスタイルが定義されているからなのです。

これも、テーマファイルで条件に合わせた関数を定義しているからなのです。

これらのようなサイトの表示や管理画面に関するファイルをまとめて「テーマファイル」と呼んでいます。

WordPressでは、自分で作った“オリジナルテーマ”も使える

WordPressでは、SWELLなどのテーマを使用せず、自分でテーマファイルを作成して使うこともできます。

一般的に、オリジナルテーマやオリジナル構築などと表現することが多いです。

既存のテーマファイルを大幅に変更するなら、自分で使い勝手の良いものを作るという方もいます。

オリジナルテーマを使うメリット

オリジナルテーマを使うメリットは下記の通り。

• テーマアップデートの影響を受けない
• 自己流にカスタマイズできる
• サイトのデザインにオリジナル性を出せる

などがあります。

オリジナルテーマを使うデメリット

一方で、デメリットもあります。

• 制作の時間・工数がかかる
• phpを使用するので、知識がないと自分で構築・修正が難しい
• 制作者によってコードの書き方などが違うので、他者が触る場合に時間がかかることもある

今回は、初心者向けの記事なのでオリジナルテーマの詳細は割愛します。

今後テーマファイルを大幅にカスタマイズするかもしれないという方は、

「自分で作ることもできるんだ～」

ぐらいに捉えておいてください。

ここからは余談ですが、自分のブログサイトを作りたい場合。

デザイン・機能性によほどのこだわりが無い限りは「テーマの使用」をおすすめします！

理由は、制作にかかる時間が大幅に変わるため。

テーマを使えば、ブログの基本的な機能はすでに搭載されています。

テーマの中でも「SWELL」はデザイン・機能性・カスタマイズの幅など申し分ないです。

実際に、SWELLを使ってのサイト制作を請け負う会社もあるぐらいです。

有料テーマに抵抗がある場合は、まず無料テーマの「Cocoon」でカスタマイズの流れなどを把握してみると良いでしょう。

SWELLには、Cocoonやその他有料テーマからの乗り換えサポートプラグインがありますので、テーマの変更も安心です！

テーマファイルにアクセスできる方法は2つ

テーマファイルの編集をしたい場合のアクセス方法は主に2つ。

• WordPressの管理画面から直接開く
• FTPソフトなどを使って開き「編集」or「コピーを編集」

WordPressのプラグインを使用することもできますが、基本は上記の方法でテーマファイルのカスタマイズをします。

phpを使うテーマファイルは、括弧や1つの記号抜けでもエラーになります。

そして、エラーの程度によっては、管理画面にアクセスできなくなることもあるので注意が必要なのです。

そのため、バックアップを取ってから編集するか、②の方法でまずはコピーを作成して編集しましょう。

という注意喚起をしているわけです。

【SWELL子テーマ】テーマファイル編集の流れとエラー時の対処法

WordPressのテーマとして通常使用するものは「親テーマ」であり、そもそも子テーマがないものもあります。

SWELLなどの有料テーマの場合、テーマを購入する＝「親テーマの購入」です。

親テーマのテーマファイルでサイトのデザインや条件を定義しているため、子テーマがなくてもサイト制作はできます。

あくまで親テーマが基準で、必要な場合に子テーマを用意するといった感じです。

子テーマが必要なのは、親テーマのコードそのものをカスタマイズしたい場合

WordPressでテーマを使う場合、「functions.php」などのテーマファイルをカスタマイズするなら、SWELLに限らず「子テーマ」を編集するのが一般的です。

その理由は、親テーマのテーマファイルに追加編集しても、テーマのアップデートで消えてしまうからです。

そして、子テーマを使いたい場合。

子テーマだけでは機能しないので「親テーマ」と「子テーマ」の両方をインストールする必要があります。

SWELLには「子テーマ」が用意されていますが、ない場合は、自分で作らないといけません。

子テーマを「有効化」しますが、親テーマのインストールも必要です。
「外観」→「テーマ」で子テーマが有効になっているか確認をしましょう。

「テーマファイルなんて絶対触らない！」

「追加CSSは使うけど子テーマにした方が良い？」

という方は、子テーマを使う必要はないので、通常通りテーマをインストールしてカスタマイズしましょう。

子テーマで編集～ 管理画面で直接アクセスする場合～

ここからは、テーマファイルのカスタマイズ手順を紹介します。

今回は、例として「SWELL」で「functions.php」にコード追加する手順を解説します。

まずは、管理画面から直接編集をする場合。

phpファイルをよく触る人や対処に慣れている場合は、そのまま編集でも問題ないでしょう。

コードをそのまま貼り付けるだけの場合、直接編集の方がラクです。

しかし、エラーが起きた際の復元などは自己責任になりますのでご注意ください。

直接編集の場合は、作業前にバックアップや編集ファイルのコピーを取っておくようにしましょう。

functions.phpでエラーになる主な原因

直接「functions.php」を触る時の注意点をいくつか掲載します。

• 直接全角で入力しない（全角文字は貼り付ける）
• 改行やスペースに気をつける（スペースの全角には注意）
• ;(セミコロン)や括弧など記号の抜けがないようにする
• サーバーの設定が影響する場合もある（下記で紹介）
• コード自体に問題がなくても、プラグインとの相性などが原因の場合もある

サーバーの設定に関しては、さくらインターネットで「WAF(webアプリケーションファイアウォール)を有効」にしている場合、更新後に下記のようなエラーがでたことがあります。

解決方法としては、

さくらインターネットの「サーバーコントロールパネル」にログインし、「セキュリティ」→「WAF設定ドメイン」→対象ドメインの設定ボタンから「WAF設定を無効化」することで、直接テーマファイルを更新できるようになります。

編集後は、WAFの設定を「有効」に戻すのを忘れないようにしましょう。

サーバーの設定を変えたくない場合は、FTPソフト経由で編集できますので、参考にしてください。

functions.phpでエラーが出た場合

気をつけていてもエラーが出てしまった場合。

状況に合わせて冷静に対処しましょう。

• 何行目のエラーか表示される場合（管理画面で編集できる場合）
  →追加したコードをひとまず削除して更新し、コードの確認やエラーの原因を探しましょう。
• 管理画面にアクセスできなくなった場合
  →管理者アドレスにリカバリー用のメールが届いているはずです。リンクをクリックしてリカバリーモードでログインしましょう。エラーの箇所を取り除けば元の状態に戻すことができます。

リカバリー用のメールは来ないこともあるそうです。

その場合に備え、修正前にはバックアップを取っておくのが良いですね！

どうしても直せない場合は、コピーしておいた元のphpファイルをFTPソフトでアップして上書きしてみましょう。

子テーマで編集～ FTPソフトでコピーを作成する場合～

次に、FTPソフトからコピーを作成して編集する場合。

今回は「FileZilla」を使っています。

編集が反映されているか確認する場合

基本的に、更新内容がすぐに反映されない場合はキャッシュを疑いましょう。

キャッシュクリアやスーパーリロードをすることで、反映される可能性が高いです。

キャッシュクリアの手順はこちらの記事を参考にしてください！

「functions.php」に追加するコードによっては、ページ内や管理画面で表示確認できないことがあります。

その場合、コードが反映されているかで確認できることもありますので、参考までに記載します。

コード自体が追加されているかの確認

コードの反映確認は、デベロッパーツールからできます。

デベロッパーツールの開き方（ショートカットキー）を念のため載せておきます。

• Windowsでは「F12キー」もしくは「Ctrl + Shift + I（or C）」
• Macでは「⌘command + option + I（or C）」

デベロッパーツールで検索BOXを出して、追加したコードの一部を入力してみましょう。

コードの画面になっていない場合は、下記画像の「要素」を選択すると出てきますので、その状態で検索BOXを出しましょう。

検索BOXもショートカットキーで出せます。

• Windowsでは「Ctrl + F」
• Macでは「⌘command + F」

エラーが出ていないのにコードが確認できない場合は、キャッシュクリアを試してみましょう。

パーマリンク設定に関するコードを追加した場合

例えば、「functions.php」にカスタム投稿タイプでのパーマリンク指定を追加した場合。

パーマリンク設定に関する変更が反映されない場合、WordPressの管理画面からすぐに解決することが多いです。

手順としては下記画像の通り。

「設定」→「パーマリンク」→何もせず「変更を保存」をクリック

の方法で試してみましょう。

カスタム投稿・カスタムタクソノミー関連のカスタマイズをする場合は、参考にしてみてください。

まとめ：子テーマが必要なのは、テーマファイルカスタマイズ時

最後まで読んでいただきありがとうございます！

今回の記事では

1. WordPressのテーマファイルとは何か？
2. SWELL子テーマでのテーマファイルカスタマイズの手順とFTPソフト経由での手順
3. WordPressでテーマファイル編集をする時の注意点とエラー時の対処法

以上3点について解説させていただきました！

特に重要なポイントは、以下の3つです。

SWELLでテーマファイルのカスタマイズをしたい方や編集時のエラーでお困りの方、他のテーマを使用している方にもお役に立てれば幸いです。

今後もwebに関する運用情報を発信していく予定ですので、是非ご覧ください！