menu

WordPress初心者でも安心してCSSを編集できる子テーマ作成法

WordPressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃらないでしょうか?子テーマを作成すれば親テーマを変更せず、レイアウトを変更できるので大丈夫です。初心者でも安心して子テーマを作成する方法をご紹介します。

 このようなメリットがあります。

  • 親テーマを編集しないので元のテーマに戻すことができる。
  • テーマのアップデートの時に、カスタムした部分が影響を受けない

 子テーマ作成に必要なもの

子テーマに必要なディレクトリ、ファイル

子テーマのディレクトリ
style.css
functions.php

 子テーマのディレクトリ

f_051_48

子テーマのディレクトリ名はreeds-childにします。「親テーマ名ーchild」としました。

 子テーマのstyle.css

Theme Name:は子テーマの名称を入力します。Template:は親テーマのディレクトリを入力します。ただし、大文字と小文字は区別されますので、間違いがないように入力します。

 子テーマのfunctions.php

親テーマのCSSが子テーマに反映されるようになります。(子テーマのCSSに手を加えることで該当部分が親テーマのCSSより優先されます。)

 親テーマが子テーマよりも後に読み込まれている場合

header.phpファイルを見ると親テーマの読み込みが wp_head() の内部で行っている場合がありますが、その時は、子テーマが反映されない時があります。今回使用しているテーマもその内の一つです。その場合の対応ですが、親テーマのheader.phpに記載してあるwp_head()の下の行に、子テーマの呼び出しコードである下のコードを入力して下さい。

当ブログを参考にさせていただきました。

 子テーマをアップロードする

スクリーンショット 2015-10-20 0.10.54

スクリーンショット 2015-10-20 0.13.34

子テーマのディレクトリとstyle.cssとfunctions.phpを「wordpress/wp-content/themes」のテーマディレクトリにアップロードして、子テーマ作成の完了です。子テーマを利用してテーマのレイアウトを変更できるようになりました。有効化して編集を行うことができます。

テーマをカスタマイズする場合は、自己責任でバックアップを取ってから行うようにして下さい。

実際にカスタマイズした時の記事です。

バイラルメディア風facebookボタンを設置した時の解説をしています。よかったらご覧下さい。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

スポンサーリンク

動画編集初心者でも簡単にかっこいいテロップを作ることができるVideo Blocksの活用方法

初心者必見contact form 7基本操作からカスタマイズ方法をご紹介します。

関連記事

  1. 【動画版】wordpress初心者でもデータベースを復元できる方…

    wordpressを使っていたら、思わぬことでウィルス感染してしまい、バックアップしていたデータを復…

  2. スライダー表示可!wordpressでサイドバーを固定するQ2W…

    スクロールする際に、サイドバーのウィジェットを常に表示させたい時ってありますよね。いろいろ探した…

  3. 簡単すぎる!wordpressで初めてのCSS編集これで画像装飾…

    wordpressを使っていて、画像を装飾をする際にCSSを編集したい時ってありますよね。じ…

  4. 【動画解説】wordpressをさくらからエックスサーバーへ引っ…

    当ブログはさくらインターネットのスタンダードプランに契約していたのですが、80記事を超えてきてから、…

  5. WordPressを始める初心者におすすめ!テーマ選びの5つのポ…

    これから、Wordpressを始める人にとって、Wordpressテーマを決めるのは、重要ですよね。…

  6. wordpressど素人がWordCamp Kansai 201…

    平成28年7月9、10日の2日間、WordCamp Kansai 2016のスタッフとして参加しまし…

  7. 【動画版】子テーマでのバイラルメディア風facebookボタン設…

    この記事が気に入ったらいいね!しようというバイラルメディア風オリジナルSNSボタンの設置方法について…

  8. 絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

    上の画像のようなバイラルメディア風facebookいいねボタンを記事の下に設置したい方は必見…

スポンサーリンク

さくらとXサーバーの速度比較

4/28まで初期設定費用半額

最近の記事

PAGE TOP