サイトアイコン 日々の気づきを共有しよう!!

WordPressを、子テーマを作らずにカスタマイズして運用する方法

ぴょん

１つ前のエントリーで、WordPressを子テーマによって運営するリスクを指摘しました。
個人的な事ですが、子テーマによる運営をしない理由が、実はもう１つあります。

CSSの読み込み順の制御が、複雑すぎる

と言う事です。

テーマのオリジナルCSSが1つの場合は,、子テーマでの運用は簡単です。
しかし私が使用しているテーマは、全てオリジナルのCSSファイルが複数あります。
このブログのテーマPointも、オリジナルCSSが4つあります。

CSSの読み込み順の制御は、子テーマに新たに作成したfunctions.phpに記述して行います。
これら複数のオリジナルCSSと、カスタマイズしたCSSの読み込み順を正しく記述するのは、phpに精通していない私にはとても無理な話でした。

 

では、今回は小テーマを作らずに如何にしてテーマのアッフデートを行なったかを説明します。

大まかな手順は、下記の通りです。

記

<以上>

【ご注意】 使用環境やテーマ、カスタマイズ内容が違えば何が起こるか分かりません。実施については自己責任でお願い致します。

①テンプレートファイルへの追加記述は、出来るだけプラグイン等で行うようにする。

私の場合、Head, Footer and Post Injectionsというプラグインを使用し、テンプレートファイへのコード挿入を行いました。

このプラグインを使って、これまではテンプレートに直接追加していた

等を追加しました。
これで、テンプレートファイルの直接カスタマイズを随分減らせました。

 

②テンプレートファイルの直接カスタマイズを行う。

【ご注意】 テンプレートのカスタマイズは、非常にリスクが伴います。
特に、私の様にphpに精通していない場合は尚更です。
よって少しでも手を加える場合は、正常なテンプレートファイルをバックアップした上で、手を加えて下さい。

テンプレート内のコード変更や、Head, Footer and Post Injectionsでカバー出来ないコードの追加は、慎重にテンプレートファイルをカスタマイズします。
私の場合は、Macのメモアプリに変更内容を記録しています。

こうする事により、テーマアップデート時に速やかな復元が可能になりなります。

メモには、どのテンプレートの、どこの記述に編集を加えたのかを記録します。
さらに、カスタマイズしたコードにコメント（<!〜>）を入れておくと、何処を、何のためにカスタマイズしたかが、分かりやすいです。

 

③テーマ付属のカスタマイザーで、カスタマイズを行う

CSSを記述しなくてもテーマ付属のカスタマイザーで、ある程度はカスタマイズ出来ます。

WordPress管理画面の【外観】⇒【カスタマイズ】

ここで、サイトの基本カラーやメニューなどのカスタマイズを行います。

カスタマイズが完了すれば、最上部の「公開」(上の例では、published)で確定します。

 

④CSSのカスタマイズは「追加CSS」（③の例では「additional css」）で管理する

子テーマを作らない場合、 CSSの変更は

  1. 直接オリジナルCSSを編集する。
  2. カスタマイズ用のCSSファイルを作成し、テーマフォルダにアップロードする。
  3. テーマ付属の「カスタムCSS」などに記入する。
  4. WordPress 4.7で導入された「追加CSS」に記入する。

等の方法がありますが、
1.と2.はテーマをアップデートすると消失してしまいます。
3.は記入したCSSが反映されない場合がああります（恐らく、CSS読込み順が原因）

との理由から、4.の「追加CSS」を使用します。

WordPress管理画面の【外観】⇒【カスタマイズ】⇒【追加CSS】に変更を加えたいCSSを全て記入します。

入力支援機能があるためCSSが入力し易く、さらに右にブレビューが表示されので、結果を確認しながら記述していけます。（※Pointのように、何故か入力支援機能が使えないテーマもあります）

ここでもカスタマイズ内容にコメント（/*〜*/）を入れておくと、後々役に立ちます。

CSS入力欄下のボタンでPC、タブレット、スマホでの、大まかなプレビューを確認する事ができます。下は、スマホでのプレビューです。

カスタマイズが完了すれば、記入内容をバックアップしておきます。
私の場合は、前出のMacのメモアプリにコピーしてます。

「追加CSS」の使用には注意点があります。
「追加CSS」は、ファイルとしては存在せずに、データベースに保管されています。
よって、「FTPでダウンロードして、編集の上アップロードする」事が出来ません。
また、テーマに紐ついていますので、テーマを変えれば失わてしまいます。

カスタマイズが完了すれば、最上部の「公開」(上の例では、published)で確定します。

 

⑤旧バージョンのバックアップ

上の①〜④が完了後、バックアッブを行います。
私はサーバ上のテーマフォルダを、FTPでバックバックアップしておきます。
/wp-content/themesに、テーマごとのフォルダがあります。

また、このテーマフォルダ内に独自に加えたファイルは、テーマアップデート時に消失しますので、別途まとめておきます。

  1. 追加CSSで独自に追加した画像ファイル
  2. 独自作成したファビコンやWebクリップのファイル
  3. 独自に加えたテンプレート

などがありますが、
1.はCSSの記述段階で保存場所を1つのフォルダにまとめておけば、復元も楽です。

更に、管理画面の【ツール】⇒【エキスポート】でのバックアッブも行なっておけば安心です。

 

⑥テーマアップデートの実施

※↑上はテーマPR Newsを使っている場合の例

この後に行う⑦〜⑩を一気に行う必要がある為、時間的に余裕がある時に実施します。
出来れば、googleAnalytics等でアクセスが少ない時間帯を調べてから行うのが望ましいです。

私はした事ないですが、業務で使っている場合などは、ローカルのWordPress環境でテスト後に実施するのが望しいのではと思います。

 

⑦テーマアップデート実施直後の、テーマフォルダをFTPでバックアッブする。

※⑤の旧バージョンバックアップと混同しないよう別に管理して下さい。

⑨のテンプレートファイルの編集で不具合が有った時に役立ちます。

 

⑧テーマフォルダ内に独自に加えたファイルを復元する

⑤でバックアップしておいた、テーマフォルダ内に独自に加えたファイルを、FTPでしかるべき位置に復元します。

 

⑨テンプレートファイルのカスタマイズ内容を復元する

②でテンプレートファイルをスタマイズした時に記録したメモを元に、別途ブラウザでサイトの表示を確認しながら、慎重にカスタマイズ部をコピペして編集して行きます。

メモに残したコメントごとペーストすると、どこをカスタマイズしたか一目瞭然です。

特にfunctions.phpに間違いがあれば全体が真っ白なになる場合がありますので、優先して行います。

不具合がある場合は、⑦のバックアッブ（テーマアップデート実施直後の、テーマフォルダ）から該当するテンプレートファイルを復元してやり直します。

 

⑩体裁で気になる所があれば、追加CSSを修正または追加記述する。

追加CSSはテーマに紐ついていますので、テーマがアップデートされても消失したりはしません。
しかし、テーマ本体のCSSはアップデートされているので、注意が必要です。

追加CSSを触る前に、③テーマ付属のカスタマイザーでカスタマイズ出来る所は、そこでカスタマイズします。

スマホの大画面化を受けてか、 CSSメディアクエリのブレイクポイントがアップデートされている場合があります。
メディアクエリを使ったカスタマイズを行なっている場合は、要注意です。

 

以上で作業は終了です。

万が一⑥〜⑩の過程で大きな不具合が発生した場合は、決してお勧めする方法ではないですが、

⑤でバックアップしたテーマフォルダ（テーマアップデート実施直前の）を、フォルダごと上書きすれば元のバージョンに戻ります。

 

最後になりましたが、オリジナルテーマのCSSファイルが１つだけで、かつfunctions.php以外のテンプレートに一切変更を加えない場合は、子テーマを作成する方が、ずっと楽な方法だと思います。

子テーマでの運用方法は、ネット上に山ほど紹介記事がありますので、そちらを参考にして下さい。

私の場合、Webクリエイターボックスさんの「 子テーマを作ってWordPressの既存テーマをカスタマイズする方法」が解り易かったです。

モバイルバージョンを終了