WordPressテーマファイルの編集方法と注意点

WordPressテーマファイルの編集にあたっての注意事項

テーマファイルの編集（カスタマイズ）を行うには大きく分けて以下の2種類の方法があります。

• ワードプレスの管理画面から行う方法
• FTPソフトを使用し、編集対象ファイルをローカルにダウンロードして編集する方法

当記事では、一つめのワードプレスの管理画面から行う方法について解説しております。FTPソフトの使用方法は、こちらの記事を参考にどうぞ。

注意点テーマファイル編集はテーマの動作に直接的な影響を与えるので、コードの記述を誤ると正常に動作しなくなったり、お使いのプラグインなどに干渉する恐れもあります。
カスタマイズに関しましてはバックアップをご用意頂くことを強く推奨いたします。

 

ワードプレスの管理画面からテーマファイルを編集する

テーマファイルの編集は、管理画面の「外観」＞「テーマエディター」で管理画面から行う事ができます。お使いのテーマをプルダウンより選択してテーマファイルの編集をはじめてみましょう。

▼テーマエディター画面（クリックで画像を別タブにて拡大表示します。）

今回はテーマNANOの下記カスタマイズ事例記事を題材にして実際に編集の流れをご説明します。

各カスタマイズ事例記事には編集するファイルと編集箇所が記載されていますので、それを参考に該当箇所を編集していきます。
さきほどのNANOの参考記事ではトップページのお知らせ記事タイトルの表示文字数を変更するカスタマイズが紹介されています。
編集するファイルはtemplate-parts/news-panels.phpとなっていますので、テーマ編集画面の右列に表示されているテーマファイル群からまず「template-parts＞」をクリックすることで「template-parts」フォルダ内のファイルを表示させ、「news-panels.php」を選択します。

▼テーマエディター画面（クリックで画像を別タブにて拡大表示します。）

次に「template-parts/news-panels.php」ファイルの中から編集箇所を探します。

記事に編集箇所が「〇行」のように表記されていることがありますが、テーマのアップデートにて記述位置が変更になっている場合もあります。あくまで一つの参考・目安として頂けますと幸いです。

編集箇所を目安にしたり、コードを上から順に見ていくことで編集箇所を探すこともできますが、検索を使うことでより早く探すことができます。今回の場合ですと例えば「<h3 class=”p-article04__title”>」を検索対象ワードにしてみます。
テーマファイルの記述内容部分を一度クリックしてからCtrlキーとFキーを同時に押し、検索ボックスを表示させ、「<h3 class=”p-article04__title”>」を記事からコピーペーストすることで入力し、エンターキーを押下します。

▼テーマエディター画面（クリックで画像を別タブにて拡大表示します。）

検索対象ワードがハイライト表示され、記事に記載されている「編集箇所」と一致しました。
カスタマイズ内容はお知らせ記事タイトルの表示文字数の変更で「43,」の数字部分を任意の数に変更と説明があるので、デフォルトの43から任意の数に変更して、「ファイルを更新」ボタンを押して完了します。

弊社デザインプラスの公式YouTubeチャンネルでもTCD LABOの活用方法について紹介しております。テーマエディターを用いたファイルのカスタマイズについても動画で解説しておりますので、ぜひ併せてご参照くださいませ。

 

カスタマイズ後のテーマアップデートについて

テーマファイルをカスタマイズされている場合、FTPで個別での上書きが必要となります。TCD公式サイト内の「テーマ更新情報」に更新したファイルを記載しておりますので、そちらの情報と比較しながら必要なファイルを個別にアップロードしてください。

カスタマイズされている場合の詳しいアップデート方法については、下記をご参照くださいませ。

 

テーマ自体を変更する際の注意点

カスタマイズとは少し話は逸れますが、WordPressテーマを変更したい場合のお問い合わせもよく頂きます。テーマ独自の機能や引き継がれない機能があるか、などを事前に確認するにはテスト環境があると便利です。

こちらの記事で確認事項を紹介していますので、テーマ変更を検討、もしくはまさに変更の最中だという方はご参考ください。