スポンサードリンク




メディア運営

ワードプレスでブログを始める前に「子テーマ」を設定しよう

更新日:

子供

 

どうも、だいちゃん(∀)(@syusoretujitu)です!

 

前回は、ワードプレスの達人が伝授! お勧めの「テーマ」教えます、という記事でWordPress(ワードプレス)のお勧めのテーマを紹介しました。

今回は、WordPress(ワードプレス)をカスタマイズする際に不具合が起きる場合などを想定して設定しておいたほうがいい「WordPress(ワードプレス)の子テーマ」の設定について書いていきます。是非、最後まで御覧ください。

ひめちゃん
ワードプレスのカスタマイズで不具合起こすなんて無能すぎだろwww そんな設定いらなくない?
だいちゃん(∀)
有能な人でも普通に不具合起こすわ! 子テーマの設定はやっておいたほうがいいから、今から説明していくね。

ワードプレスの子テーマって何?

まず、子テーマって何って思っている方もいると思います。

WordPress(ワードプレス)の子テーマというのは、「親テーマ(元のテーマ)」のCSSなどを引き継いでカスタマイズ出来る、ちょっとしたテーマのことなんだね。

イメージとしては、

これが親テーマ(元のテーマ)。

親

親テーマのデータを引き継ぐのが、「子テーマ」なんだ。

子供

ブログを見ている人はこの子供の部分しか見えていない。でも、この子供にはしっかりと親テーマのCSSなどのデザインやプログラムのデータが引き継がれている。

しかも、親テーマと子テーマ両方にCSSを作るんだけど(後でまた説明します。)、子テーマのCSSをいじるとちゃんとブログのデザインに反映されるけれど、親テーマのコードは一切変更されないんだ。

どういうことかというと、

「oyatyheme」という元のテーマがあったとする。その中に、

「oyatheme.css」

というCSSファイルがあります、と仮定します。

そして「Oyatheme_child」という子テーマを作るとします。このテーマにある設定をすると、「oyatyheme」のデータを全部引き継ぎます。(見た目上は全く別のフォルダのように、子テーマはシンプルになっています。)

設定は子テーマをメインテーマに設定するのですが、デザインや機能は全て親テーマと全く同じものになっています。そして、

「oyatheme_child」という子テーマの中に、

「oyatheme_child.css」

というCSSファイルを作って「Oyatheme_child.css」というファイルを作ります。

で、oyatheme_child.cssをいじると、親テーマには全く変更が無い状態で、CSSの変更がデザインに反映されるのです。

文字で見るだけじゃ、まだイメージが沸かないよね? 実際に作ってみようよ!

ひめちゃん
全然わかんね~!!
だいちゃん(∀)
ひめちゃんが子供を作るとひめちゃんの分身が出来る。その分身が服を着替えたりするイメージかな。子供が服を着替えても親ひめちゃんが服を着替えるわけじゃないでしょ? でも、見ている人は子ひめちゃんしか見えないんだ。

メモ

子テーマを作成してからワードプレスのカスタマイズを行うことで、カスタマイズに失敗してもすぐにやり直しが効くというメリットがあります。安全の為に、子テーマを作ってからワードプレスはカスタマイズしましょう。

ワードプレスの子テーマの作り方

前置きが長くなりましたが、WordPress(ワードプレス)の子テーマは、

  • style.css
  • functions.php

の2つのファイルを、

  • 子テーマフォルダ

に作る感じです。

【1】子テーマフォルダを作ってアップロード

まず、サーバー、今回はエックスサーバーを例に出します。

エックスサーバーで、

インフォパネルにログイン→ファイルマネージャー→(ドメイン名がuwasanoaitsu.comなら)uwasanoaitsu→public_html→wp-content→themes

この「themes」にデスクトップ上などでいいので、(もし親テーマの名前がoyathemeなら)「oyatheme_child」というフォルダを作ってアップロードします。

例えば、このテーマは「albatros」というテーマを使用しているので「albatros_child」といった分かりやすい名前のフォルダを作ってアップロードします。

【2】CSSファイルの作成

「oyatheme_child」のフォルダの中に「style.css」ファイルを作成します。

そして、そのCSSファイルの中に下記のように記述します。

/*
Template:oyatheme
Theme Name:oyatheme_child
*/

例えばこれが、親テーマ「albatros」、子テーマ「「albatros_child」なら、

/*
Template:albatros
Theme Name:albatros_child
*/

といった記述になります。

これで、子テーマのCSSファイルは完成です。

【3】functions.phpの作成

「oyatheme_child」というフォルダの中に、「functions.php」ファイルを作成します。

その「functions.php」ファイルに、

<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles()
{ wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
} ?>

と記述します。

 

これで子テーマの完成です!

ひめちゃん
なんだ、作り方は簡単じゃん。
だいちゃん(∀)
でしょ?

ワードプレス子テーマの有効化

最後に、WordPress(ワードプレス)の子テーマを有効化します。

WordPress(ワードプレス)の管理画面の、

「外観」→「テーマ」

から子テーマを有効化します。

アルバトロス

これは左が子テーマ、右が親テーマです。子テーマが有効化されている状態です。

親テーマではなく子テーマを有効化しましょう。

 

これでちゃんと親テーマのデザインが反映されて、WordPress(ワードプレス)を表示させた時に表示されれば成功です。

[aside type="normal"] ファイルが壊れています、というエラーメッセージが出たり、表示されなければ失敗なのでどこか間違いがないか見直してみて下さい。 [/aside]

ワードプレスの子テーマの設定方法 まとめ

ここまででWordPress(ワードプレス)の子テーマの作成は完了です。

カスタマイズは子テーマ側のファイルで行って下さい。

カスタマイズをする為に、「style.css」「functions.php」ファイル以外のファイルを子テーマ側にアップロードしておくと尚良いですよ。

ひめちゃん
最初はめんどくせ~、とか思ったけど、やってみたら意外と簡単だったし理解もできたわ。私みたいなバカ犬でも理解出来たわ。
だいちゃん(∀)
自分でバカ犬言うな!

ではでは。

だいちゃん(∀)

この記事が良かったらTwitterFacebookなどのSNSで拡散宜しくお願いします!

はてなブックマークボタン「B!」をポチッとも是非!

Twitterもやっていますので、フォロー宜しくお願いします!

次に読むと良い記事

【2018年度版】最低限ワードプレスに入れたほうが良いプラグイン”20選”

WordPressブログ制作の為の記事をまとめたもの

ワードプレスブログの作り方ーこの流れで作れば誰でも出来る!

スポンサードリンク







質問などLINE@で受け付けています! 良かったら友達登録してね!(∀)

※登録前に読んでおくと、だいちゃん(∀)LINE@の特典などが分かります!→【期間限定、特典付き!】だいちゃん(∀)LINE@始めました!ーだいちゃん.com

友達追加

だいちゃん.comのフェイスブックページです。良かったら、イイネ! してね!

だいちゃん(∀)You Tube動画

YouTubeチャンネル登録も宜しくお願いします!

  • この記事を書いた人
  • 最新記事
だいちゃん(∀)

だいちゃん(∀)

ブロガー&YouTuber&フリーライター 1級身体障害者 年間500冊ほどの本を読む読書マニア。勉強好きの資格マニア。簿記や法律に強い。 障害者関連の記事を執筆するのが得意。 暗い記事も書くけど、なんだかんだで自分の事をスーパー障害者だと思ってる変な人。お笑い好き。 インターネット上の嫌われ者www

-メディア運営
-

Copyright© だいちゃん.com , 2018 All Rights Reserved.