• SEO
    ブログのPVを3日間で1.5倍上げる方法
  • ランディングページはテンプレートを使えばデザイン性の高いページが簡単に作れる ブログ運営
    ランディングページはテンプレートを使えばデザイン性の高いページが簡単に作れる!
  • アドセンス以外の広告で稼ぐには ブログ運営
    アドセンス以外の広告で稼ぐ!おすすめクリック広告をご紹介
  • 無料オプトインアフィリエイトの始め方!初心者にオススメな案件とASP ブログ運営
    オプトインアフィリエイトの始め方!初心者にオススメな案件とASP
  • 私が実際に使っている便利な無料ツールと書いてあるイラスト お得情報
    便利な無料ツール!私が実際に使っている3選
  • ランディングページ(LP)の作り方と構成について ブログ運営
    ランディングページ(LP)の作り方・構成!重要な7つの要素とデザイン
  • WordPress
    初めてのブログの作り方!初心者が最低限抑えておきたいこと
  • ランディングページ
    初心者がたった1時間でプロ並みのキャッチコピーを手に入れる方法
  • 便利ツール
    検索順位チェックツール!変動や推移まで保存出来るオススメツールをご紹介
  • ランディングページが作れない!そんな悩みで作るのを後回しにしてませんか? ブログ運営
    ランディングページが作れない!そんな悩みで作るのを後回しにしてませんか?

WordPressのテーマの編集やカスタマイズをする前に絶対に準備しておいて欲しい子テーマの作成方法について説明します。

テーマをカスタマイズする際に、元の親テーマを編集するのもいいですがそのテーマのアップデートなどで毎回消えてしまうので、子テーマでのカスタマイズがオススメです。なので、今回は私自身が最初に苦戦した部分も含めて、「子テーマの作り方」と「有効化」に関してご紹介します。

子テーマを作成しておけば、購入したテーマや無料のテーマが更新された時でも、自分がカスタマイズしたCSSなどは、しっかり保存されているので、安心なのですが、子テーマを最初に作った時、解決できないことが1つあって、ハマったのでその部分を抑えながら、子テーマの作り方・有効化の方法をご紹介していきます。

子テーマとは?

まず、子テーマとは簡単にいえば今使っているテーマの分身とか子供みたいなイメージです。

wordPressで利用するテーマは主に、phpファイルやCSSファイルの集まりで構成されています。その1つ1つのファイルが1つのテーマの中に沢山入っています。

子テーマを作ると親テーマの情報を引き継ぎながら、子テーマの設定が優先されますのでカスタマイズがしっかり、あなたのブログで表示される形になります。

子テーマ有効化までの流れ

子テーマ作成の大まかな流れ


  1. 子テーマのフォルダをFTPで作成する
  2. 子テーマのファイルをFTPで作成する
  3. 子テーマを有効化する

このような流れになります。

1.子テーマのフォルダをFTPで作成する

まず、FTPにログインしてください。

私は、ロリポップ!のレンタルサーバーを使っているので、ロリポップの画像での説明になります。

ロリポップ以外をお使いの方は恐らく、各レンタルサーバーの機能としてFTPが備わっているはずですので、レンタルサーバーのサイトに接続して探してみてください。

FTPにログインしたら「wp-content」⇒「themes」まで進んでください。

wp-child1


wp-child2


「themes」まで進んだら、フォルダを作成するボタンを押してください。

wp-child3

押すとフォルダ名を編集する画面になるので、子テーマだということが分かるように名前を付けてください。 私は見本としてTwenty Twelveの子テーマを作るので「tt-child」とつけました。

wp-child6

みなさんも、分かりやすい名前を付けて下のほうにある「保存ボタン」を押してください。

そうすると新しいフォルダが出来ているのでそこをクリックし中に入ってください。今は、そのフォルダの中に何もないと思いますのでこれから1つ、ファイルを作ります。

2.子テーマのファイルをFTPで作成

では、次にファイルを追加していきます。 ファイル追加を押してください。

この時、私はフォルダとファイルを間違えました(*´ω`*)

「ファイル」の作成をしてくださいね。

wp-child4

ファイル新規追加を押すと、ファイル名を編集する画面になりますので下記のように入力してください。

style.css

wp-child16

そして、本文に下記をコピーして保存してください。※お使いのテーマによって、記載内容が異なるので詳しくは下記で説明します。

実際の画面は下記のようになります。

wp-child7

※これは、親テーマの情報をこの子テーマで引き継いで使います。みたいな命令で親テーマの情報を呼び出してくれます。

記載した内容の説明

まず、Theme Name: tt-child

この部分のTheme Name:の後ろはその子テーマの名前です。さっき自分で付けたフォルダ名のことですね。それをここに記入してください。


そして次に、Template: twentytwelve

この部分は、元の親テーマの名前です。あなたが使っているテーマの名前をここに入れてください。

テーマ名はどこに書かれているのか?

親テーマのスタイルシート (style.css)の上部に書かれていることがほとんどです。

WordPressの管理画面の「外観」⇒「テーマの編集」⇒「style.css」と進むとあります。

wp-child13

Twenty Twelveは、このように書かれてました↓

Theme Name: Twenty Twelve Theme URI: https://wordpress.org/themes/twentytwelve/

この名前部分とURIのthemes/よりも後ろをそのまま当てはめればOKです。


そして、最後に、@import url('../twentytwelve/style.css');

この部分はどのテーマからデータを引き継ぐのか命令をしている部分です。

/twentytwelve/

この「twentytwelve」の部分は、あなたがお使いのテーマ名に変えてください。


まとめると下記のような感じです。

【スポンサーリンク】

3.子テーマを有効化する

上記が終わりましたら次に今回作った子テーマを有効化していきます。

WordPressの管理画面の「外観」⇒「テーマ」と進んでください。右側にテーマが色々出てくると思いますが、その中にさっき作った「tt-child」があるはずです。それを選択して有効化してください。

wp-child8

※もし、ない場合は1番下まで進んでください。

「tt-child」はエラーです。といったメッセージが出ていたら、恐らく今までの過程で何かしらミスがあったんだと思います。

上記の手順を最初からよく確認しながら行ってみてください。私もそうでしたが、最初は子テーマCSSの本文の部分

上記のこの部分で何かしらミスがあり、エラーになってました。

もし、エラー表示が出てる方は、親テーマの名前などに間違いがないかどうか確認してください。

子テーマにあると便利なファイル

子テーマが無事、有効化出来たら同じ要領で今後、カスタマイズで使うであろうメインのファイルをコピーしておくと後々、便利です。

主にカスタマイズで使うのは

  • content.php
  • header.php
  • single.php

このあたりですかね。

functions.phpのファイルだけ要注意

ここで、1つ注意ですが、「functions.php」これ

functions.phpのファイルだけは特殊で、この操作を誤るとブログが表示されなくなります。管理画面にも入れなくなるので、最初はパニックになります。

なので、今はこのファイルはいじらないようにしたほうが無難です。

他のファイルも子テーマに追加する方法

CSS以外のファイルを子テーマにて作る場合の手順は先ほどとほぼ、同じなのですが説明しておきます。

ここでは例として、content.phpを追加していきます。ロリポップのFTPにログインし wp-content⇒themes⇒tt-child(あなたが作った子テーマのフォルダ)まで進んでください。

そして、そこでファイル新規追加を押して、追加したいphpファイルの名前

content.php

をファイル名に入れてください。

wp-child11

本文のところは、元の親テーマのcontent.phpファイルを全部コピーしちゃいます。方法は、別タブでWordpressの管理画面を出し外観⇒テーマの編集と進んでください。

そして右上の編集するテーマを選択:からあなたが使いたい親テーマを探し、選択を押してください。

wp-child10

右側にphpのファイルが出てくると思いますのでその中からcontent.phpを探してクリックしてください。

content.phpのファイルの中身が表示されますので全てコピーしてください。

wp-child14

そしたら、FTPの画面に戻り下の本文部分に貼り付けてください。貼り付けたら保存して完了。

wp-child15

これで、子テーマ(tt-child)の中に親テーマの情報を引き継いだcontent.phpのファイルが出来ました。

content.phpをカスタマイズする時は、子テーマ内のcontent.phpのファイルを編集していく形になります。

以上で、子テーマの作成と有効化は完了です。

【スポンサーリンク】
関連キーワード
  • 賢威7の装飾タグ一覧!WordPressバージョン
    賢威7の装飾タグ一覧!WordPressバージョン
  • 記事内にphpを直接使わずPCとスマホの条件分岐する方法
    記事内にphpを直接使わずPCとスマホの条件分岐する方法
  • リストのデザインを装飾するCSSサンプルについて
    リストのデザインを装飾するCSSサンプル!HTMLの書き方も!
  • 賢威7のトップページの記事一覧の間に広告を挿入する方法について
    賢威7のトップページの記事一覧の間に広告を挿入する方法
  • パソコンのみで表示されるテキストウイジェットを作る方法について
    賢威7ウイジェット追加!パソコンのみで表示されるテキストウイジェットを作る方法
  • スマホのみで表示されるテキストウイジェットを作る方法について
    賢威7ウイジェット追加!モバイル(スマホ)のみで表示されるテキストウイジェットを作る方法
ついに浮気しちゃいました!

ついに、浮気をしてしまいました・・・そう、ワードプレスのテーマです。

これまで、有料のテーマは何個も購入してますが、この便利屋のブログはCSSの記事とかの変更が面倒なので、なるべくテーマの変更を控えてましたが、一目ぼれをしてしまい衝動を抑えられず、ついに変更に踏み切りました。

見てもらいたい記事をスライダーで表示させることが出来たり、CSSが分からない人でも「入力補助」の機能を使って記事作成画面で、簡単にボタンの作成とかランキングの作成、会話の吹き出しの作成などが出来るので、マジで楽!

これまで、CSSやらいじってカスタマイズをしてきましたが、それがこのテーマには最初から入っているので、驚き。1年半前に出会っていれば、もっと記事に時間がかけられて、収益も上がってたのかな。。と思いつつ苦笑。

とりあえず、ブログを始めたばかりの人にとっても始めて1年以上経ってる私のような人にとっても、このテーマは欲しかった機能が揃ってる!という感じでした。まー私の説明よりも公式ページでその魅力を確認してみてください。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事
ブログのPVを3日間で1.5倍上げる方法
SEO
2017年の6月に立ち上げた別のブログがある事をしたおかげで、1.5倍アクセスがアップしました。 この期間中、新しい記事の投稿は一切してませ...