エックスサーバーで、ワードプレス（DigiPress）テーマの子テーマを作成する方法

ワードプレステーマを直接編集してはダメ！

先日、Googleアドセンスの設定をしたときに、ワードプレスのテーマを変更しました。

そろそろGoogle AdSenseを貼ってみようブログを開設して、1年超。記事数も100記事超。そろそろGoogle AdSenseを貼ってみたい。ブログに広告が入っていることを嫌う人もいます。ごちゃごちゃして見にくくなり、リーダビリティが損なわれるという恐れもあります。また、当ブログは広告を貼ったとしても、まだまだ収益が期待できるようなアクセス数もありません。そういうわけで、これまで広告設置は見送っていました。しかし、ブログといえば広告。多少、広告が入っていた方がなんとなくブログっぽい。そして、僕自身たまに広告を見て、...

ところが、テーマを直接変更するのは良くないようなのです。

とても基本的なことでしょうが、テーマを直接変更した場合、そのテーマをアップデートすると変更が失われるようなのです。

一方、子テーマがあればコードが独立しているので、親テーマをアップデートしても子テーマで編集した内容を引き継ぐことができるのだとか。

現在使っているテーマを親とするなら、その親とそっくりの子どものようなテーマを作っておくということのようです。

やり方は全くわかりませんが(-｡-;　こういうことは先に手を打っておかねば。
ブログ開設から1年超もなりますが、かいてるだけで全然調べたりしておらず、どうすればいいのか(^_^;)

『WordPress Codex』（WordPress の公式オンラインマニュアル）にも簡単に作成方法が掲載されています。

wpdocs.osdn.jp

子テーマ - WordPress Codex 日本語版

その他、下記サイト等を参考にしました。

• WordPressにおける子テーマの作り方

•【WordPress】DigiPressテーマで子テーマを作る方法

•「@import」を使わないWordPress子テーマの正しい作り方

テキストエディタで子テーマ用のファイル作成

まずは、子テーマ作成のために、テキストエディタで2つのファイル(style.css と functions.php)を作成します。

ブログを書くのにもテキストエディタを使われている方も多いと思いますが、僕は今のところEvernoteに下書きしているので、まずはテキストエディタをインストールします。

一瞬、どれにしようかと悩みそうでしたが、今回の目的はテキストエディタではありません。
突き詰めていくと、テキストエディタにもいろいろあって迷いますね。

とりあえず、macOS 専用プレーンテキストエディタ　CotEditor　をインストール。

早速、ファイルを作ります。

style.cssの入力項目は、いろんな記載が見受けられますが、とりあえず ↓ のように必要な項目だけを入れて試してみることにします。

編集したファイルをレンタルサーバーにアップロード

ここまでは良かったのです。
問題はここからでした。
さぁ、これをどこにどうおけばいいのか？
子テーマディレクトリを作成し、そこにアップロードするようですが、ググっても詳しい方法が見つかりません。
あまりにも基本的で説明するまでもないようなことだから、皆さんさらっと流しているのでしょうか？？

パソコンのハードディスクのワードプレスフォルダには、デフォルトで無料で使えるtwentyfifteen等のテーマフォルダが入っていますが、こんなところに並べて入れても仕方ないし。

▼　下記サイトで、FTPサーバーに作成するということをようやく理解し、ほとんどログインすることのないレンタルサーバー（僕はエックスサーバーを使っています）にログインし、作成することができました。ふーっ。やはり、ブログ運営には知識が必要です。

WordPress 子テーマのメリットと作成方法

僕のような方がきっと他にもいらっしゃる？　でしょうから、以下に、流れを記載します。
▼　エックスサーバーにログインします。

▼　最初に画面右下の「ファイル名の文字コード」を「UTF-8」に切り替えます。

▼　以下のようにフォルダを見ていきます。

▼　ここに、先ほど作成したファイルをアップロードします。

作成した子テーマを有効化

おーっ、ようやくです！　テーマ一覧に作成した子テーマが表示されました！！！
子テーマを有効化します。

子テーマを有効化したあと、念のため表示を確認すると、親テーマのときと同じ画面がきちんと表示されています。

子テーマ内には何もファイルを入れていないのにサイトが表示されるのは、親テーマから引用されているからのようですね。
あとは、修正したい内容だけ、該当する親テーマからファイルをコピーしてきて修正し、子テーマにアップデートすればいいようです。

まとめ

先日は、テーマファイルを直接編集してしまったわけです。
先日の例だと、Googleアドセンスの広告コードはheader.phpを編集するので、親テーマからheader.phpをコピーしてきて、それに広告コードを貼り付けて子テーマにアップロードすればよかったということですね。

編集したいファイルを親テーマからダウンロードしてきて

編集したファイルを子テーマにアップロード。

これで今後心置きなくテーマを編集できます。
（今のところ、予定ないですが）

いやー、なかなか大変でした(^_^;)

この記事を読んだ人は、こんな記事も読んでいます

この記事を書いた人
最新の記事

よっしー

アラフォーサラリーマン。人生100年時代を迎え、今後のライフデザイン、ワークススタイルをどうするか。自分らしいネクストステージを模索中。最近は珈琲と文房具にハマってます。スタバ好きだけど、スタバのコーヒーは深煎り過ぎて苦手。スタバでいつも頼むのはカフェアメリカーノ。パンを焼くと高確率で真っ黒にします。フリック入力も苦手ではないですが、キーボード入力が好きです。このブログは親指シフトで書いています。ブログタイトルは「木が３つで森になるブログ」、１記事書くごとに、１本ずつ木を植えていくイメージをしています。そうして、どんどん植樹して、森のようにブログも自分自身も豊かに成長していくことを目指しています。 Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。