【初心者にもわかる】WordPressのテーマDiverのインストール方法と『親テーマ・子テーマ』を具体例から解説!

こんにちは、やまかず(@yamakazu001)です。

WordPressのテーマをインストールをしていく作業は、意外と簡単です。でも、はじめての人って、ちょっと混乱しますよね。そうならないためにも、手順をしっかりお伝えしていきます。

30代会社員/木村さん
WordPressのテーマ、ちゃんとインストールできるかな・・・!?

やまむら
ちょっと心配だよね!わかりやすく順番に教えていくから、安心してね!
WordPressブログ構築のこれまでの流れ!

ムームードメインにて、ドメインを取得する作業
取得したドメインを「エックスサーバー」に設定する作業
「エックスサーバー」に「WordPress」をインストールする作業
「SSL化」する作業
パーマリンクの設定作業
タイトル・キャッチフレーズの設定作業
今日やること!
「テーマ(Diver)のインストール」作業をしていきます。

今回は、当ブログで使っていて、おすすめのWordPressテーマ「Diver」をインストールする方法についてお伝えしていきます。

「Cocoon」を使う方はコチラをご覧ください。

 「Diver」のテーマを選択する方に向けての記事です。

WordPressの「親テーマ」と「子テーマ」とは

すぐにインストール方法をお伝えしたいのですが、その前につまづく可能性が高い「親テーマ」と「子テーマ」について解説していきます。

WordPressのテーマ「親テーマ」と「子テーマ」を解説

WordPressのテーマには、「親テーマ」と「子テーマ」が存在するんです。(※もちろん、はじめから親テーマだけしかないものもあります)

やまむら
親と子!なんなのそれ!?

やまむら
僕もはじめて聞いた時、なんじゃそれ!?と思ったんだよね

「親テーマ」とは、そのテーマの大元なんです。この「親テーマ」が入っていないと、そもそも機能しません。逆に「子テーマ」とは何か!?親テーマをそのままコピーしたもの、つまり引き継いだものなんです。

親テーマと子テーマの説明

やまむら
まだまだわかりづらいと思うので、さらに噛み砕いていくよ

もっとわかりやすく表現をすると、コピー用紙の原本が「親テーマ」で、コピーして出てきた紙が「子テーマ」なんです。

親テーマと子テーマの説明 

コピーされた紙(子テーマ)はいくらでもカスタマイズは可能なんです。いくらでも、上からメモなどしたり、蛍光ペンで色をつけたりできますよね。

でも、もしですよ。その原本自体に、メモを書いたり、蛍光ペンで色をつけてしまったら、一から作り直さないといけませんよね。つまり、原本はいじっちゃダメってことなんです。

30代会社員/木村さん
なるほどー!たしかに原本に、メモしたらダメだよね。

それと同じなんです。たとえば、親テーマを元にカスタマイズをして、デザインの一部を変えたりしたとします。そこでテーマのアップデートをした場合、デザインが元に戻っちゃうんです。

これは、しゃれになれないですよね。こうならないようにするためには、どうすればいいのか!?はじめから「子テーマ」を利用していれば良いんです。コピーした用紙を使うのと同じってことです。

親テーマと子テーマの説明

「子テーマ」を使ってカスタマイズしていれば、親テーマがアップデートされても、一切デザインなどが元に戻ることがないんです。

「子テーマ」が必要になる場合とは

30代会社員/木村さん
カスタマイズしない人なら、「子テーマ」っていらないんじゃないかな?

やまむら
よく気づいたね!その場合は、必要ないかもね。「子テーマ」が必要になるケースを伝えていくね!

「子テーマ」が必要なときって、どんな時でしょうか?デザイン部分をいじったり...、独自のコードをプログラム部分に入れたり...、そういう場合なんですよね。

どういった時に「子テーマ」が必要になるのか?いくつか例を出したいと思います。

「子テーマ」が必要なケース①
デザインをカスタマイズしている場合
デザインを変更しているため、「子テーマ」を使っていないと、アップデートの時にデザインが元に戻ってしまいます。そのため、「子テーマ」を使用していないと大変なことになります。

 

「子テーマ」が必要なケース②
PHPファイル部分に、コードを入れている場合
PHP部分には、プログラムなどを入れたりする事ができます。ここにコードなどを入れていた場合、アップデート時、そのコード自体がなくなり、プログラムが正常に機能しなくなります。これも非常に困りますよね。

 

「子テーマ」が必要なケース③
CSS部分(スタイルシート)をカスタマイズしている場合
CSSは、文字の色や大きさ部分などを、独自にカスタマイズして、文字などの見た目を変える事ができる部分です。ここも、アップデート時に、せっかく入力したCSSコードが、消えるので、一からCSSコードを入力しないといけない事になります。

と、こんな感じで「子テーマ」が必要なケースを記載致しました。

基本的に、Diverはカスタマイズの必要はないのですが、「子テーマ」を使っていれば、いざカスタマイズしたくなった時に、安心です。そのため、僕は「子テーマ」の利用をおすすめしております。

次の項目から、インストール方法と、具体的な「子テーマ」の設定方法についてもお伝えしていきます。

WordPressのテーマ「Diver」のインストール方法

すでに、Diverをダウンロードされていると思いますので、ここからはどのようにインストールをしていけば良いのか!?それについてです。

Diverの購入がまだの方は、下記よりご購入いただけます。

\こちらからアクセス♪/

1WordPressの管理画面にログインをしていく

WordPressの管理画面にログインをしてください。「●●●●/wp-admin」というURLです。管理画面URLが何かわからなくなったら、こちらからご覧ください。

「ユーザー名」
「パスワード」
を入力

「ログイン」をクリックしてください。

ワードプレスへログイン      

2テーマを開く

ログインしましたら、左メニューから、下記の通り操作をしてください。

「外観」にカーソルを合わせる
「テーマ」をクリック

3Diverの「親テーマ」をインストール

まず、Diverの「親テーマ」をインストールしていきましょう。

新規追加をクリック

上部の「新規追加」をクリックしてください。

新規追加をクリック

 

テーマのアップロードをクリック

画面が変わりましたら、「テーマのアップロード」をクリックしてください。

手順インストール手順

ファイルを選択して、アップロード

アップロードするファイルを選択していきます。「ファイルを選択」をクリックしてください。

diver_install02-0

 

Diver「親テーマ」フォルダと「子テーマ」フォルダ の解説!
Diverには、下記のようにインストールすべきフォルダが2つ存在します。
「diver」フォルダ・・・『親テーマ』
「diver-child」フォルダ・・・『子テーマ』
となります。
diver親テーマ子テーマ

 

はじめに『親テーマ』をインストールしていきます。「diver」フォルダを選択しましょう。

「diver」フォルダをクリック後
②下部の「開く」をクリックしてください
(※もしくは、「diver」フォルダをダブルクリックでもOK)

diver親テーマ

 

インストールをしましょう

下記のように画面上に表示されましたら、下記手順で、インストールしていきましょう。

「diver.zip」が表示されていることを確認してください
「今すぐインストール」をクリックしてください

ファイルをインストール

 

インストール完了

すると、画面が切り替わりまして、下記のようにインストールが完了となります。

「テーマのインストールが完了しました。」という表示がでていれば、OKです
「テーマのページに戻る」をクリックしてください

インストールが完了

つぎの項目からは、『子テーマ』をインストールしていく作業をしていきます。

 

4子テーマをインストール

親テーマのインストールが完了しましたら、同じ要領で「子テーマ」をインストールしていきます。

新規追加をクリック

上部の「新規追加」をクリックしてください。

新規追加をクリック

 

テーマのアップロードをクリック

画面が切り替わりましたら、「テーマのアップロード」をクリックしてください。

手順インストール手順

 

ファイルを選択して、アップロード

アップロードするファイルを選択していきましょう。「ファイルを選択」をクリックしてください。

diver_install02-0

 

ここでは、『子テーマ』をインストールしていきます。「diver-child」フォルダを選択しましょう。

「diver-child」フォルダをクリック後
②下部の「開く」をクリックしてください
(※もしくは、「diver-child」フォルダをダブルクリックでもOK)

diver子テーマ

 

インストールをしましょう

下記画面のように、選択したファイルが表示されましたら、下記手順で、インストールしていきましょう。

「diver-child.zip」が表示されていることを確認してください
「今すぐインストール」をクリックしてください

ファイルをインストール

 

インストール完了

すると、画面が切り替わります。下記のようにインストールが完了となります。

「テーマのインストールが完了しました。」という表示がでていれば、OKです
「テーマのページに戻る」をクリックしてください

インストールが完了

 

5Diverの「子テーマ」を有効化

上記の続きの作業となります。現在、「親テーマ」と「子テーマ」の両方とも、インストールが完了している状態だと思います。

チェックポイント
「親テーマ」と「子テーマ」両方とも、インストールされているかご確認ください。

注意点をお伝えします!
ここでは、「親テーマ」と「子テーマ」両方とも、インストールされている状態ですが、『有効化』にするのは、「子テーマ」だけです。

 

diver親テーマと子テーマ

 

「子テーマ」を有効化

「子テーマ」のみ、有効化にしていく作業をしていきます。

「子テーマ」の上部にカーソルを合わせる
「diver-child」の表示を確認
「有効化」をクリック

この順番で、有効化にしてください。

diver子テーマを有効化

 

「有効化」の設定完了

「有効化」の設定が完了となりました。下記のように「有効」の表示がでていれば、大丈夫です。

diver子テーマを有効化

Diverのテーマが反映されているかチェック

Diverをインストールして、有効化に設定しましたね。念の為、テーマがどう変わったのか、チェックしていきましょう。

①左上の「ブログタイトル」部分にカーソルを合わせる
「サイトを表示」部分が現れたら、クリック

サイト表示操作

 

下記のように、テーマの反映を確認できました。このようになっていれば、大丈夫です。

diver有効化後のサイト状態

30代会社員/木村さん
これでDiverのインストールが完了だね!

記事も全然書いていないし、調整や設定もまだなので、こんな状態ですが、だいぶ形が出来上がってきました。あとは、必要な設定等をしていけば、様になってきます。

まとめ

Diverというテーマのインストール方法と有効化の設定方法について、かなり細かくお伝えしてきました。有効化する時に「子テーマ」を必ず選択するように、ご注意くださいね。

少しずつですが、だいぶ形が出来上がってきているんですよね。ここまでくれば、あとは残りも少ないので、頑張って設定等していきましょう。

あの人のようなブログが「迷わず作れる教科書」をプレゼント

WordPressでブログを作ってみたい…でも、難しそうだし、どうやるかわからない。一度作ってみたけど失敗してしまった。なぜか『あの人のようなブログにならない…』。

そんなあなたでも、スムーズにブログが作れるようになる
『あの人のようなブログが「迷わず作れる教科書」』
を期間限定特典としてプレゼントしています。

さらに・・・
今回プレゼントを受け取った方には、「ブログを使ってお金を稼ぐ方法」も教えています。

期間限定でお渡しておりますので、ぜひこの機会に手にいれてください。
※特典を手に入れられた方は、メルマガへ登録されます。

.

Twitterでフォローしよう

おすすめの記事