エックスサーバーで子テーマを作成する方法

以前の記事で子テーマ作成する方法を書いたのですが、ロリポップでのやり方だったので今回はエックスサーバーでの子テーマの作成方法を紹介していきたいと思います(コメントでリクエストも頂いたので)。

まず子テーマについておさらいしておくと、テーマが更新する度にカスタマイズしたファイル達は全部初期化されるので、親テーマをコピーした子テーマを作成して更新しても初期化されないようにしておくという感じです。

ただ、テーマを構成する全てのファイルをコピーする必要はなく、修正するファイルだけコピーしておけばOK。それ以外は親テーマのファイルを読み込むのでカスタマイズしたり、修正したりするファイルだけをコピーして子テーマに追加していきます。

今回は実際にどのように子テーマを作るのかという部分を解説していきます。

WordPressをカスタマイズする時に色々なphpファイルをコピーしていきますので、この手順はしっかりと覚えてしまいましょう。それから最後に重要な注意事項もありますので、必ず最後まで記事を読んで下さいね。

スポンサーリンク

親テーマのテーマ名を確認しておく

まずは今回利用するテーマ「Twenty Twelve」をインストールします。別のテーマでも構いません。

例えばStinger5を利用するのであればダウンロードサイトからStinger5をインストールという感じです。

※すでにインストール済みならそのまま次に進んで下さい。

WordPressの管理画面から「外観」⇒「テーマ」と進み、「新しいテーマを追加」という部分をクリックします。

新テーマ-1

検索窓があるので「Twenty Twelve」と入力して検索してインストールしておきます。

新テーマ-2

インストールできたら一度「有効化」しておきます。

これでテーマ(親テーマ)が有効化されますので、有効化できたらWordPressの外観⇒「テーマの編集」と進みます。

テーマの編集-1

テーマの編集をクリックすると「スタイルシート」が表示されますので、最初の方に書かれている「テーマ名(Theme Name)」を確認しておいて下さい。

Twenty Twelveの場合のテンプレート名は「Twenty Twelve」になってますね。

テーマの編集-2

スティンガー5(今現在のバージョン)の場合はこのようになってます。

子テーマ-1

このテーマ名(Theme Name)は後で使うのでメモ帳などに貼り付けておきましょう。

エックスサーバのファイルマネージャーから子テーマを追加

WordPressを構成するフォルダに子テーマを追加する必要があるのですが、WordPressを構成するフォルダへ行く場合には「ファイルマネージャー」にログインする必要があります。

エックスサーバーの「インフォパネル」にログインすると「ファイルマネージャー」にログインする項目があります(直接ファイルマネージャーにログインしてもOK)。

エックスサーバーファイルマネージャー-2

子テーマを追加するドメイン名を選択。

エックスサーバー子テーマ-11

次に「public_html」をクリックします。この「public_html」の中にWordPressのファイル達があります。

エックスサーバー子テーマ-8

ここからは「wp-content」⇒「themes」とクリックして行きます。

エックスサーバー子テーマ-9

これでWordPressのテーマが入っているフォルダ「themes」までやってきました。テーマフォルダの中に「子テーマのフォルダ」を作成すればいいという訳です。「themes」のフォルダで任意のフォルダ名(私の場合はchild)をつけて作成します。

画面右下にフォルダを作成するコーナーがありますので、ここで子テーマフォルダ名を入力して「フォルダの作成」をクリック。

エックスサーバー子テーマ-13

するとファイル一覧のところに今作成した子テーマのフォルダが表示されますのでそれをクリック。

エックスサーバー子テーマ-14

この子テーマの「フォルダ」の中にスタイルシート「style.cssファイル」を作成します。ファイルですのでフォルダと間違わないように。ファイル名は「style.css」と入力してファイルを作成をクリック。

エックスサーバー子テーマ-15

これで子テーマ(child)のフォルダの中にスタイルシート「style.css」というファイルが追加されましたので、「style.css」の左のチェックボックスにチェックを入れて右の「編集」をクリック。

エックスサーバー子テーマ-17

「style.css」の編集画面になります。この内容の部分に普通は親テーマのファイル(今回は「style.css」)をそのままコピぺして保存します。しかしながらこの「style.css」に関しては別の記入で簡単に作成する事ができます。次の記述をします。

テーマTwentyTwelveの場合の記述です。

/*
Theme Name: Child
Template: twentytwelve
*/
 
@import url('../twentytwelve/style.css');

これは作成するテーマ名と親テーマの名前(template)、それから@の部分がtwentytwelveの「style.css」をインポートして下さいという意味です。

「Theme Name」には子テーマの名前(私の場合はChildにしてます)。それから「Template:」の部分に最初に調べておいた親テーマのテーマ名を入れます。

また、「@import url(‘../●●●●/style.css’);」の●●の部分にも親テーマのテーマ名を入れます。

上記コードを便宜変更し、子テーマのスタイルシートの内容の部分に貼り付けます。貼り付けたら下の「保存文字コード」を「UTF-8」にしておき、「編集」をクリックすると保存されます。

エックスサーバー子テーマ-18

これで子テーマにスタイルシートが作成できたのでこの子テーマを有効化していきましょう。

子テーマを有効化してみる

ここまでで新しく「Child」という子テーマを作成しましたので、これを有効化して行きます。今度はWordPressの管理画面から「外観」⇒「テーマ」と進んで下さい。

テーマ構成-3

すると先ほど作った「Child」というテーマがありますので、「有効化」をクリック。

子テーマ-10

するとこの子テーマが有効化されます。以上でテーマの有効化は完了です。

一度サイトの表示を確認するとそのまま親テーマと同じように表示されるはずです。これで子テーマにスタイルシートが追加できました。

子テーマに追加したスタイルシートに関しては親テーマの記述がインポートされてますので、スタイルシートをカスタマイズする場合には変更したいコードだけをどんどん下に追加していけばOKです(CSSは後に書いた物が優先的に反映されるため)。

※スタイルシートの場合です。

Stinger-10

スタイルシート(CSS)以外のphpファイルを子テーマに追加するには

上記の手順でスタイルシートを子テーマに追加しましたが、他のphpファイル「header.php」とか「single.php」とかを子テーマに追加する場合もほとんど同じです。

ただ、スタイルシートのように「インポート」は使わずに親テーマの内容まるごとコピーして子テーマに追加します。

前回の記事で書いたようにWordPressのテーマは沢山のphpファイルでできています。

カスタマイズしたいファイルだけ子テーマに追加しておき、コピーしたファイルの方をカスタマイズします。

例えばコメント欄のカスタマイズをしたい場合は「comments.php」というファイルを子テーマにも作成し、親テーマから「comments.php」のファイルの中身をコピペして子テーマの「comments.php」に追加して保存。

それでコピーした子テーマの「comments.php」をカスタマイズする訳です。

ついでに子テーマに「single.php」も追加してみよう

練習も兼ねて子テーマに「single.php」も追加してみましょう。

まずは先ほど同様にエックスサーバーのFTPからログインし、最初に画面右下の「ファイル名の文字コード」が「UTF-8」になっているか確認。

エックスサーバー子テーマ-12

「ファイル名の文字コード」を「UTF-8」に切り替えたら子テーマを追加するドメイン名を選択。

エックスサーバー子テーマ-11

次に「public_html」⇒「wp-content」⇒「themes」⇒「Child(先ほど作った子テーマ)」とクリックして行きます。

子テーマ作成-1

この子テーマ「Child」の中に「single.phpファイル」を作成します。

ファイルですのでフォルダと間違わないように。ファイル名は「single.php」と入力して「ファイルを作成」をクリック。

子テーマ作成-2

これで子テーマ(child)のフォルダの中に「single.php」というファイルが追加されましたので、「single.php」の左にチェックを入れて「編集」をクリック。

子テーマ作成-3

ここまで準備できたらこのファイルの内容に親テーマの「single.php」を追加する必要がありますので、一度このまま放置します。

別ウィンドウもしくは別タブでWordPressの管理画面を開き、「外観」⇒「テーマの編集」をクリックして下さい。

テーマ構成-1

そして右上の「編集するテーマを選択」という部分から親テーマ(twenty twelve)を選び、「選択」をクリック。

テーマ構成-2

右側にずらりと沢山のphpファイルが並んでいると思いますので、その中から「単一記事の投稿 (single.php)」というのクリック。

子テーマ-11

すると親テーマ「twenty twelve」の(single.php)というファイルの中身が表示されていると思います。この中身をすべてそのままコピーします。

子テーマ-13

コピーしたら先ほどの放置いていたエックスサーバーのsingle.phpのファイルの中身にペースト。

子テーマ作成-5

それで後は「保存文字コード」を「UTF-8」にして「編集」をクリックで完了。

子テーマ作成-4

最後に子テーマに反映されているか確かめてみます。WordPressの管理画面から「外観」⇒「テーマの編集」と進みます。

テーマ構成-1

画面の右側の「編集するテーマを選択」で「Child」を選び「選択」をクリックすると最初に作った「style.css」と今作った「single.php」が表示されていればOKです。このコピーして追加する方法が子テーマの基本になります。

このような手順で作成して行きます(functions.phpだけは例外です)。注意点はCSSの時にも書いたように「保存文字コード」を「UTF-8」にしておく事です。

※親テーマの全部のファイルを子テーマに追加する必要はありません。子テーマに無いファイルは親テーマのファイルを読んでくれるので、変更する予定のファイルだけを子テーマにコピーしていけばOKです。

それと子テーマに「functions.php」を追加する場合には注意が必要です。このファイルはそのまま親テーマの記述をコピーしてしまうとエラーが発生してブログが表示されない状態になります。「functions.php」を子テーマに追加したい場合には先に次の記事を読んでおいて下さい。
子テーマにfunctions.phpを追加する時の注意点

それではいよいよカスタマイズ本編へ行きます。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

エックスサーバーで子テーマを作成する方法”に45件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. ノブ

    しげぞう様
    早速の返信ありがとうございます。
    こんなに早くお返事をいただけると思っていなかったので、本当に感謝しています。

    早速子テーマについてなのですが、やはり提案いただいたことを試してはみたのですが、
    前回と同じようにリンク先が真っ白な感じになってしまいます。
    使っているブラウザもオペラから変更してみたのですが、やはり改善できず…。

    「今後アフィリエイトをするのであればカスタマイズよりも先にどんどん記事を書いて経験を積む事を優先するべきかなと思います。」とおっしゃっていただいたように、確かにサイトのデザインなどの変更は後からでもできますし、サイトの主役はやはり記事なのだと思います。

    自分自身、どうしても見た目を気にしてしまうタイプなので、デザインにばかり意識を取られてしまい、大事なことを見落としていました。
    そこで私の場合は、twentytwelveでの作成はいったん諦めて、
    ご提案いただいたSimplicity2でサイトを作っていこうと思います。
    こちらだと子テーマの作成も一瞬で終わってしまいました(笑)
    (もちろんtwentytwelveでも子テーマは一瞬で作れてしまうのでしょうが…)

    今回は質問にお答えいただき、さらに新しい提案までしていただき
    本当にありがとうございました!
    いつかしげぞう様と肩を並べられることを夢見て日々精進したいと思います。
    またお世話になることもあるかもしれませんが、お時間があればよろしくお願いいたします。

    2年前にしげぞう様とお会いしたときは、WEBライターとしての自信がつき「こんなクライアント様と出会えてよかった。」と感じ、今回は「あのときしげぞう様と出会えてよかった」と心の底から感じております。

    長くなってしまい、申し訳ありません。
    今回は本当にありがとうございました!
    それでは失礼します。

  2. しげぞう 投稿作成者

    ノブ様

    コメントありがとうございます。今日はなんだか懐かしい方々がコメントくれてホント嬉しいです(^^)こちらこそおホントに世話になりました!

    パーマリンクの設定とか記事の投稿はそのままでOKです。
    これは子テーマの作成とは関係や影響のない部分ですので、それはそれで進めておいて大丈夫ですし、なんなら親テーマのままでとりあえず記事を投稿していき、子テーマが作成できた時点で切り替えでもOKです。

    えっと子テーマなんですが、考えられる原因ってかなり多いのです。ほとんどはコピペの問題だと思います。なぜかコピペしているのにちょっと違ってしまう部分があるようで、原因がよく分かりません。使っているブラウザとか?

    とりあえず以下チェック。

    ・エックスサーバー子テーマのスタイルシートのファイルの保存文字コードをUTF-8にして保存。
    ・「”」が全角になっていないか確認し、「”」半角に。
    ・スタイルシート(CSS)の最初の部分テーマ名や子テーマ名が半角になっているか確認。
    ・スタイルシート(CSS)の最初の部分テーマ名や子テーマ名が間違っていないか確認。
    ・半角のスペースを一度削除して再度半角のスペースを入れて試す。
    ・@import urlの前の空白の1行を削除して詰める。
    ・@import urlの前の空白の1行を削除してもダメなら再度1行あける

    他のサイトでも子テーマ作成のコードはありますので、他のサイトのコードをコピペして試しても良いと思います。「Twenty Twelve子テーマ」などで調べるとでてきます。
    それで上手く行かない場合には再度コメント頂けると助かります。

    ■もう1つの提案

    ちょっと私から1つ提案なんです。
    Twenty Twelveの場合はシンプルで使いやすいですが、必要な機能を実装するのにあちこちカスタマイズと知識が必要になります(少し時間がかかります)。

    ノブ様は2年前に「サイトに関してはほとんど知識がない」って言われていたと記憶してますし、今後アフィリエイトをするのであればカスタマイズよりも先にどんどん記事を書いて経験を積む事を優先するべきかなと思います。なのでカスタマイズとかに時間を使いたくない場合は他のテーマを使うのもありだと思います。

    もうほとんどカスタマイズしなくてもそのまま使えるようなテーマもありますし、全体的な色とかヘッダー画像とかの設定、簡単なカスタマイズがWordPressの外観⇒カスタマイズのページである程度できたりするので楽です。

    なので記事投稿だけに集中したいって場合には「Simplicity(Simplicity2)」とかも1度見てみる事をおすすめします。
    Simplicitymの場合は子テーマも既に作成されているので親テーマと子テーマ両方をサイトからダウンロードしてWordPressにインストールだけで完了します。
    ⇒https://wp-simplicity.com/

    もちろん1つ1つカスタマイズをしていきたいって場合にはTwenty TwelveでもOKです。あくまで上記は提案なので。

    格闘しても分からない部分があればコメントで聞いてもらえば返信もしていきますのでぜひまた上手く行かない場合にはコメント下さい(^^)

  3. ノブ

    しげぞう様

    突然のコメント失礼いたします。
    ノブと申します。

    今から2年ほど前に某サイトでしげぞう様に大変お世話になりました。現在も当時の仕事は続けているのですが、当時しげぞう様とお会いし、始めてアフィリエイトで報酬を得ている人と触れ合い、アフィリエイトの可能性を感じました。

    そこで紆余曲折ありましたが、自分が書いた記事を誰かに使ってもらうのではなく、私も自分で書いた記事を自分のサイトに投稿したいと考え、最近実行に移しました。

    その際にしげぞう様のサイトを参考にしていたのですが、子テーマの作成でつまづいてしまいました。

    私はエックスサーバーを使っており、こちらの記事の指示通りに子テーマを作成したのですが、子テーマを有効化すると記事のタイトルなどをクリックすると真っ白なページに飛ぶようになってしまいます。

    子テーマを有効化した状態の私のサイトのURLを添付いたします。

    例えば右のサイドバーにある最近の投稿の「てすと2」「ついに届いた!!ソルースジェルのキットの中身は?」をクリックすると真っ白なページに飛んでしまいます。

    子テーマではなく、twentytwelveの親テーマを有効化した場合は上のような症状はなく、タイトルをクリックするとしっかりと記事が表示されます。

    この症状の原因の見当はつくでしょうか?

    ちなみにテーマを有効化する際に、子テーマを選ぶと次のように表示されています。

    twentytwelve-Child
    バージョン:
    作成者: 匿名
    これは Twenty Twelve の子テーマです。

    またこちらのコメント欄を参考にして、スタイルシートの半角スペースや改行なども変えてみたのですが、変化はありません。

    しげぞう様のサイトを参考にサイトを作っていき、てっきり子テーマは無事作れたものだと思ってパーマリンクの設定や記事の投稿なども実際にしてみました。しかし、ある程度作業が進んだ時点で今回の症状に気づき、改善を試みています。
    しかし、すでに子テーマよりも先の部分にも着手してしまったため、自分にもどこに原因があるのか見当がつかない状態になってしまい、今日は本職の記事作成はできずに1日中この問題と格闘していました。

    もしこの症状の原因が分かれば、ご教授いただければ幸いです。
    お忙しいとは思いますが、よろしくお願いいたします。

    ノブ

  4. しげぞう 投稿作成者

    naminami様

    わざわざ報告ありがとうございます!解決して良かった(^^)自分の事のように嬉しいです(笑)
    また何かあればコメント下さい。

  5. naminami

    しげぞうさん☆

    やった~!できました!
    「’」が原因でした!ずっと英数字半角で作業していたから、
    何故この部分だけ違ったのか納得いかず、疑問は残りますが、
    とりあえずできたことに感動です!
    きれいに反映できています!
    先生、ありがとうございました。笑
    またイッーってなったらコメントします!

  6. しげぞう 投稿作成者

    naminami様

    返信ありがとうございます。私もWordPress始めた頃は何も上手くいかなくて1つの事をやるのにさえ1週間以上格闘していましたので、気持ちはスゴくよく分かります(^^)

    トップページも確認できました。これは上手く反映されてないですね。原因の推測難しいのですが、親テーマをカスタマイズしている影響か、前回も書いたようにコピペの時のスペースかなと思います。スタイルシートのコピペした部分のスペースを一度作成して自分で半角のスペースをするのも試してみてもらえますか?

    それからもう1点試してもらいたいのがスタイルシートのインポートの部分の「@import url(‘../●●●●/style.css’);」の部分の「”」←これです。
    「’」←全角と「’」←半角で違いますので一度この部分(囲っている部分2箇所です)を削除して、再度改めて半角の「’」の方で入力してみて確認をしてみて下さい。

    それで無理ならお手数ですが、一度別のテーマTwenty Twelveとかで試してもらえると助かります。Twenty Twelveの親テーマのインストールし、childのスタイルシートはインポートのtwentyelevenの部分をtwentytwelveに変更して子テーマを有効化という手順になります。

  7. naminami

    しげぞうさ~ん!

    とっても丁寧なお返事ありがとうございます。

    でも・・・子テーマ、表示のされ方、違うんです・・・。
    ライブビューで見ても違うんです・・・。

    親テーマのようにきれいに表示して欲しいのに、
    子テーマは背景がすごく主張していて、タイトルとか、下のほうの白いはずの部分も
    ぜーんぶ背景が表示されてて。でも設定何も触ってないのに・・・。
    何故???ってなってます。

    再度子テーマを作成してみて、ライブプレビュー見ましたが、
    やっぱりちょっと変です。
    twentyelevenが、子テーマの相性悪いとか?

    原因がわからなくて、またイーッてなってます 苦笑
    しげぞうさんが考えつかれる原因、ありますか?

    本当は画像を添付して違いを見てもらえたらと思ったんですけど、
    ここ、できないし。

    テーマ変えた方がスムースでしょうか・・・・・・・・・・?

  8. しげぞう 投稿作成者

    naminami様

    コメントありがとうございます。それぞれのテーマは時々アップデートというか新しく更新があります。WordPressの更新みたいに定期的ではないですが、不定期で更新できますよって通知がきます。
    で、テーマって更新すると親テーマは初期状態に戻ってしまいます。なので親テーマでカスタマイズしていてもテーマを最新の状態に更新をすると最初に戻ってしまうわけです。
    そうなると困るので子テーマを作成するというのが流れです。

    つまり、親テーマはどちらにしても初期状態に戻るので、親テーマは触らずに子テーマでカスタマイズをします。親テーマが更新しても子テーマが初期状態に戻る事はありません。こちらの記事にも書いてますので後で読んでみて下さい。
    ⇒https://affiliate150.com/about-wordpress-theme

    親テーマの表示と全然違うという事ですが、一度管理画面から「外観」⇒「テーマ」⇒「twentyeleven(親テーマ)のライブプレビュー」をクリックしてみて下さい。その表示と同じなら子テーマの作成はOKかと思います。もしそれとも表示が違うって場合は再度コメントもらえると助かります。

    もし子テーマの作成が問題ないようであればおそらく親テーマをカスタマイズしている思いますので、まずはカスタマイズした親テーマをコピペしてメモ帳などに貼り付けて保存しておき、いつでも元に戻せる状態にしておいて、親テーマのスタイルシートの内容を子テーマにコピペしたらカスタマイズした親テーマと同じ状態になるのではないかと思います。

    本来は子テーマのスタイルシートは親テーマのインポートをして、「カスタマイズしたい部分だけを子テーマのスタイルシートに追記」していくような感じになりますので全部コピペよりは変更部分だけ追記というのが本当は分かりやすいかもしれません(変更したい部分だけ追記すればOKなのはスタイルシートの話です)。
    なのでもし親テーマで自分がカスタマイズした部分が分かるのであればそれを部分的にスタイルシートに追記するのがベターです。

    それから子テーマのsingle.phpが上手くできているのか?という事ですが、ここが間違っていると自分のブログの個別ページの表示にエラーがでたり、見れなかったりします。なので、個別記事を見て表示できていればOKかと思います。

    とりあえず今の状態(カスタマイズされた状態)のスタイルシートなどのバックアップ(コピー)を取っておくことが大事です。失敗してもすぐに元に戻せる安心感があると作業も進めやすいです(^^)

  9. naminami

    しげぞうさん!

    お返事ありがとうございました。
    子テーマ、無事表示されました!
    原因は、twentyelevenのtとEが大文字になっていることでした。

    無事子テーマは作成できましたが・・・
    全然知識がないのでごめんなさい、親テーマの表示と全然ちがうのですが、
    これを編集していく形ですか?

    せっかく親テーマでつくったヘッダーも背景も元に戻っていて・・・。
    これは、また子テーマでも同じように作っていかないといけないのでしょうか?

    親テーマにもまだ何も色々な設定ができていないのですが、
    もしかしてある程度親で形ができてから子テーマを作成する方が
    いいのでしょうか?

    あと、single.phpというのを、しげぞうさんブログの記事通り、
    移してはみましたが、ちゃんと中身が伴っているか、
    どうしたら確認できますか?

    初心者過ぎてすみません。(なんだかWordPress、くじけそうな
    気がしてきました・・・)

    お返事お待ちしています。

  10. しげぞう 投稿作成者

    naminami様

    コメントありがとございます。親テーマをインストールして、子テーマ「child」(フォルダ)を作成して、そこにスタイルシート(ファイル)を追加。それで「twentyeleven」という事なのでスタイルシートは以下の記述になると思います。

    /*
    Theme Name: Child
    Template: twentyeleven
    */
      
    @import url('../twentyeleven/style.css');

    もしこれで上手く行かないという場合には、次の事を試してみて下さい。

    上記スタイルシートに記述したコードには空白のスペースの部分がありますよね。

    「Theme Name: Child」「Template: twentyeleven」「@import url」それぞれ半角のスペースがありますが、このスペースを一度削除して改めて「半角のスペース」を入れてみて下さい。時々コピペしたのに半角のスペースがちょっと変な事になっている場合があります。

    それから「@import url」の前の空白の1行(改行している所)も一度削除して再度Enterで改行してみて下さい。また改行なしバージョンも試してみましょうか。

    上記を一度試してみてもしだめなら再度コメントもらえたらありがたいです。

  11. naminami

    初めまして、しげぞうさん。
    アフィリを始めようと思って、いろいろネット検索で
    見ている内に、こちらのブログへやってきました。
    とっても丁寧に説明が成されているので、参考にしつつ最近やっと
    WordPressでブログを立ち上げるべく奮闘中です。

    が、この子テーマが、うまく作成できず、イーッとなってきたので(笑)
    コメントしてみようと思い立ちました。

    サーバーはXサーバーで、テーマはTwenty Elevenです。
    このページを参考に、何度やってみても、下記コメントがでています。
    【親テーマがみつかりません。Twenty Elevenの親テーマをインストールしてください】

    してるし!インストール、ちゃんとして絶賛作成中ですけど!イーッ(笑)

    このテーマは、しげぞうさんのやり方以外で子テーマを作る必要があるのでしょうか?
    なんだか全然わからないので、お返事いただけると助かります。

  12. しげぞう 投稿作成者

    すず様

    コメントありがとうございます!上手く解決できたようで良かったです。子テーマ作成の後のカスタマイズに関してはいくつか記事書いてますが、ベースにしているテーマがTwenty Twelveなので別のテーマのやり方とはかなり違う部分もあるかと思います。一応WordPress関連の記事まとめです。
    ⇒https://affiliate150.com/wordpress-summary

  13. すず

    助かりました!!全くの初心者でどこからファイルマネージャーに入るかすら分からず、こちらで子テーマを作ることが出来ました。ありがとうございます。
    Attitudeというテーマで作っていて、フッターにメニューを付けたかったのですが、親テーマ自体を触っているうちに変な風になってしまい、本当に困っていました。子テーマを作った後での進め方について、どちらかに記事を掲載されていらっしゃれば、ぜひご教示ください。

  14. しげぞう 投稿作成者

    カラス様

    返信ありがとうございました。サイトをチェックしてみたのですがテーマが違うためちょっと原因を特定できませんでした、すみません。今回サーバーが原因かも?という事でしたが、多分サーバーとかではなくて、テーマに原因がある可能性もあります。

    そういえば私も以前違うテーマで普通に子テーマを作っても反映されない事がありました。その時はそのテーマのサイト?で子テーマをダウンロードして使うように書かれていて、用意されていた子テーマをダウンロードしてそれをアップロードして子テーマの作成ができました。もしかするとそんな感じかもしれません。

    なので、使われているテーマ名で検索してみればそのテーマの公式サイト?的な所がヒットすると思いますのでそこに子テーマの記述がないか探してみて下さい。外国のテーマとかだと、ほとんど英語で書かれているので、探すのに苦労するかもしれません。

  15. しげぞう 投稿作成者

    カラス様

    コメントありがとうございます。そうですか、原因なんでしょうね?

    子テーマのスタイルシートの最初の部分をコピペされていると思うのですが、時々普通にコピペしてもスペースの部分に??のような文字が入っている場合あり、上手く反映されない場合もあります。
    なのでもし良かったら一度ブログのURLも教えてもらえると助かります。どうぞよろしくおねがいします。

  16. カラス

    しげぞう様

    お世話になります。泣いています。

    本当に泣けてくる話なのですが、やはりどのサイトを見てもエックスサーバーかロリポップの説明しかなくて、とうとう「子テーマ」の作成をあきらめてしまいました。本当になさけないです。

    しげぞうさんの説明はとてもていねいで分かりやすいのですが、私には「子テーマ」の作成は仕切りが高すぎたようです。

    なので今回、止むを得ず、以下のプラグインでゴマかしてみました。

    ◆ child theme configurator ◆

    結局、私はワードプレスのことを何も分かっていなかったみたいです。

    涙が止まりません。

  17. しげぞう 投稿作成者

    カラス様

    コメントありがとうございます。ネットオウル使った事ないので違いが分かりませんが、子テーマの作り方は基本的に同じだと思います。サーバーによって違う部分ってあるんですかね?一度ネットオウルの方へと問い合わせしてみて、子テーマは普通どおり作成できるって事であれば改めて原因を探してみるのが良いと思います。

    なのでお手数ですが、一度サーバーへ問合せをしてみて、再度コメント頂けると助かります。

  18. カラス

    しげぞう様
    お世話になります。カラスです。

    私も、今まで「子テーマ」のことをまったく分からずに数サイトを運営していました。
    なのですが、さすがに新サイトを立ち上げましたので本格的に子テーマに挑戦してみようと思います。

    今回、ネットオウルのクローバーサーバーを借りたのですが、ロリポップ、Xサーバーとは何だか
    違う感じなので、childの子テーマが作れない状態です。

    ◆「style.css」の編集画面になります。この内容の部分に普通は親テーマのファイル(今回は「style.css」)をそのままコピぺして保存します。しかしながらこの「style.css」に関しては別の記入で簡単に作成する事ができます。次の記述をします。

    テーマTwentyTwelveの場合の記述です。◆

    と、ここまでの作業は完了しているはずで、私の場合はそのままコピーしましたが、やはりテーマに反映されていない状態です。

    グーグル検索しても、しげぞう様の真似ばかりしているサイトばかりで、どれもXサーバーのことばかりです。
    ちなみに、ネットオウルで検索しても、子テーマ作成らしきものが出てきません。

    またまた答えにくい質問ばかりで申し訳ないですが、ぜひアドバイスをいただければと思います。

    以上です。

  19. しげぞう 投稿作成者

    yuu様

    コメントありがとうございます。どの部分がうまく行かないのか具体的に教えてもらえると助かります。子テーマフォルダはできてますか?子テーマの中にstyle.CSSファイルはできてますか?どこまで進めていてどのようなエラーがでているのか教えてください。

  20. yuu

    はじめまして。
    ワードプレスを始め、いろいろなことがわからな過ぎて、こちらにたどり着きました。

    現在子テーマの作成で悪戦苦闘しております。

    サーバーはさくらインターネットを使用しており、参照にさせていただきながら設定してみましたが、何度してみても子テーマの作成ができません。

    教えていただければ幸いです。

  21. しげぞう 投稿作成者

    れいん様

    返信ありがとうございます。子テーマで基本的に必要な事は次の4つです。

    1.親テーマをインストールする
    2.子テーマ(フォルダchild)を作成する
    3.作成した子テーマのフォルダの中に子テーマのstyle.css(ファイル)を作成する
    4.子テーマのstyle.css(ファイル)の中身に親テーマのCSSをインポートする記述をする

    以上の4つが通常必要な部分です。テーマによっては少し手順の違う部分があったりするのですが、とりあえず「フォルダとファイルを間違っていないか?」とか「CSSのインポートの記述が間違っていないか?」「そもそも親テーマはインストールされているか?」という部分をチェックしてみて下さい。

  22. れいん

    ありがとうございます!themnameとtemplateが逆だったみたいで、
    直したところ、wordpressの外観、テンプレートのところに、

    壊れているテーマ
    以下のテーマはインストール済みですが、足りない部分があります。
    名前 説明
    xeoryextension-child テンプレートが不足しています。独立したテーマには index.php テンプレートファイルが必要です。子テーマでは style.css スタイルシートにテンプレートヘッダーが必要です。

    と出ました。初心者過ぎてすみませんが、もしわかれば教えていただきたいです(泣)

  23. しげぞう 投稿作成者

    れいん様

    コメントありがとうございます。xeory extensionは使った事がないのですが、基本的な部分は同じかと思います。こちらの記事が参考になりそうです。
    ⇒https://soricity.com/xeory-child-them/

  24. れいん

    初めまして!こちらの方法で、xeory extensionの子テーマを頑張っているのですが、有効化しても、反映されません!泣
    (親テーマと全然違って題名と固定ページの文字がずらずら並びます)
    助けてもらえるとありがたいです!

  25. ルーナ

    子テーマの作成に苦戦しておりましたが、こちらにたどり着いたおかげで、無事できました!
    本当に感謝です。

  26. ゴムハヤシ

    わかりやすく丁寧な説明ありがとうございました。
    税所は「子テーマ」と聞いただけで面倒だなと思っていましたが初心者の私でも理解できました。

  27. 匿名

    悪戦苦闘し、やっと子テーマ作成出来ました!!
    助かりました!

  28. しげぞう 投稿作成者

    えり様

    わざわざ報告ありがとうございます。少しでも参考になった部分があったのであれば私も嬉しいです。今後ともどうぞよろしくお願い致します。

  29. えり

    先程の件は単なるスペル違いでした。
    解決し、無事子テーマができました。

    こちらに来れていなければ諦めていたかもしれません。
    本当にありがとうございます!!

  30. えり

    こちらにたどり着き救われた思いです。
    しかし、子テーマを作ることが出来たと思ったら、
    「壊れているテーマ
    以下のテーマはインストール済みですが、足りない部分があります。
    親テーマが見つかりません。”Twenty Sixteen” の親テーマをインストールしてください。」となってしまいます。有効化しているのですが、何が問題でしょうか。

  31. マヒナ

    初めまして。
    子テーマの作り方がわからなくて、こちらにたどり着きました。
    丁寧な説明でわかりやすく、子テーマを無事作成することができました^^
    ありがとうございました。
    またお邪魔させていただきます。

  32. ピーチ

    先ほど送りました疑問点、解決しました。
    「フォルダ作成」と「ファイル作成」の区別がわかりませんでしたが、この違いでした。
    すみませんでした。

  33. しげぞう 投稿作成者

    ピーチ様

    コメントありがとうございます。子テーマのフォルダの中にstyle.cssのファイル自体は作成された状態ですか?原因が特定できないのですが(すみません!)、一度画面を閉じて、再度エックスサーバーの管理画面から改めて操作して見て下さい。

    それでも上手く行かない場合には「フォルダ」それから「ファイル」の間違いがないかチェック。子テーマのchildは「フォルダ」で、style.cssは「ファイル」です。それからスタイルシートのファイル名「style.css」が間違っていないか?半角になっているか?など一度チェックしてみ下さい。

    もしそれでも上手く行かない場合には一度サーバーの方にも確認をしてみると良いと思います。サーバー側の一時的な不具合などが原因という事もあるかもしれません。それをチェックしてみて下さい。

    上記のチェックでも問題ないようであればお手数ですが、再度コメント頂けると助かります。どうぞよろしくお願い致します。

  34. ピーチ

    初めましてこんにちは。丁寧でわかりやすい解説、いつも参考にさせていただいております。

    →子テーマ(child)のフォルダの中にスタイルシート「style.css」というファイルが追加されましたので、「style.css」の左のチェックボックスにチェックを入れて右の「編集」をクリック。

    今この作業をしているのですが、「編集」をクリックしても「style.css」の編集画面が出てこないのですが、何が問題なのでしょうか。

  35. Okingatarashi

    しげぞう様
    こんにちは!ありがとうございます。
    しげぞう先生!すごぉッ!!!!!瞬速、速決!!!!!!

    完了です。ポンコツはポンコツなりに頑張るのですが...
    無駄な抵抗の鈍キホーテです(笑)‼
    もう少し頑張りますが、 HOME の営業時間を書いた背景画像の調整で
    HELP!する可能性が大です!その節は宜しくお願いします。

  36. しげぞう 投稿作成者

    Okingatarashi様

    コメントありがとうございます。色々と試行錯誤が見えますね(笑)再度自分でやってみれば色々と発見がありますし、勉強にもなります。

    まず、子テーマのスタイルシートなんですが、1箇所ミスがあります。スタイルシートに記述されている「#pagetop」の中身なんですが、「color」が「co;or」になっているので、これを訂正しておいた方が良いと思います。

    それで罫線なんですが、この部分はtableタグを使っていると思うのですが、元々のtableタグの装飾が優先されているようなので、table内の装飾の記述には「!important」を付けて試してみて下さい。こんな感じです。

    td { border: none !important;}

    これで線は消せると思うので、上記のコードを追加してみて下さい。それで反映されない場合には再度コメント下さい。

  37. Okingatarashi

    しげぞう様

    お世話になります・・・
    どんどんHPらしくなって来てます。
    又…罫線です。消えるか見えなきゃいいと思うのですが…
    以前に教えて頂いたコードはダメでした。

    ただ、以前に教わったコードで繰り返しとの戦いで、背景画像を入れて文字が入れられた!超!嬉しいいです。

    この2か所に使っています。
    HELP!の発動をお願いします。親切に甘えてごめんなさい。
    宜しくお願いします。

  38. しげぞう 投稿作成者

    Okingatarashi様

    おっ!上手く反映されたようで良かったです!私も結構すぐに忘れるタイプなので、このブログメモ代わりに使ってます。コメントから勉強になる事も多いので、今後も何かあれば遠慮なくコメント下さい。どうぞよろしくお願い致します。

  39. Okingatarashi

    しげぞう様

    こんばんは!
    最初はつまずて迷惑をかけました。
    習った事を駆使して考えて...
    頑張った結果です。後は本人が内容を書くだけの感じです。
    しげぞう様、本当にありがとうございます。これからもよろしお願いします。

    お友達の美容室のサイトです。

  40. Okingatarashi

    しげぞう様

    こんにちは!ありがとうございます。調べて下さった…んですね。
    本当にごめんなさい。
    そんなこと、あんだぁ…って、感じです。自分で調べてみるべきでした。

    本当は、泣きつかれた事もありますが、このサイトで習った事覚えた事の見直し、復習で、
    頼まれてみました。テーマが変わるとどんなふうになるのか?っていう興味もありました。
    「聞かないでしげぞう様のサイトを見ながら頑張る」って、決めたのに…頭から聞いています。
    ごめんなさい。本当にありがとうございました。

  41. しげぞう 投稿作成者

    Okingatarashi様

    返信ありがとうございます。テーマによって子テーマの作成が違う場合があるようですね。

    このテーマの作者の方が子テーマも配布しているようですので手順を説明しますね。

    まず以下のURLへアクセス。

    https://github.com/mignonstyle/chocolat-child

    1.サイトの右側に緑のボタン「clone or download」がありますので、これをクリック。「Download ZIP」をクリックしてダウンロード。

    2.WordPressの管理画面から「テーマ」をクリックして、「+新しいテーマを追加」をクリックします。

    3.次の画面で「テーマのアップロード」をクリックして、先ほどダウンロードしたファイルを選択しインストール。

    WordPressの管理画面から「テーマ」と進むと、「Chocolat Child」という新しい子テーマが作成されているので、これを有効化して下さい。

    これが子テーマになります。最初に作成された子テーマは削除してもOkと思いますので、ダウンロードした子テーマを使って見て下さい。

    また何かあれば連絡下さいね!

  42. Okingatarashi

    しげぞう様

    こんにちは!お世話をかけます。
    1.について テーマはインストール有効化して表示はされているので大丈夫と、思います。
    2.「以下のテーマはインストール済みですが、足りない部分があります。
       名前 説明
       child スタイルシートが見つかりません。 削除 」

    と書かれています。
    さっきとテーマが変わりました。友達に泣きつかれて5,6固定ページのサイトを作ります。
    テーマは「 Chocolat 」です。
    子テーマの入力内容
    /*
    Theme Name: child
    Template: Chocolat
    */

    @import url(‘../Chocolat/style.css’);

    どこが違うか…見てるけど見えてない感じです。
    宜しくお願いします。

  43. しげぞう 投稿作成者

    Okingatarashi様

    コメントありがとうございます。まず、親テーマはインストールされてます?壊れているテーマと表示される原因として考えられるのは

    1.親テーマをインストールしてない
    2.スタイルシートの記述ミス

    この2つのどちらかではないかと思います。子テーマ作成ではスタイルシートが必要になりますが、子テーマの最初に親テーマのスタイルシートをインポートする記述をしてます。この記述は親テーマのテーマ名を入れる部分がありますので、これが間違っていないか確認をしてみて下さい。

    もしそれでも上手く行かない場合にはお手数ですが再度コメント下さいませ。

  44. Okingatarashi

    しげぞう様
    こんにちは!
    ちょっとテストをしてみたくて別のテーマをダウンロードしました。
    「 Xeory EXTENSION 」と言うテーマです。色の類はチャレンジしたくて子テーマを作ろうとしました。xseverでFTPからいつも通りファイルとフォルダ―したのですが、”壊れているテーマ 親テーマが見つかりません親テーマをインストして下さい”と出ています。サポートへ行くとcodexへ。でした勿論、分りません。
    HELP!の発動です。出来ましたらわかる事を教えて下さい。