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で初めてのCSS編集これで画像装飾…

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

  2. お名前.comから独自ドメインを取得してwordpressをイン…

    これからwordpressの運営をやっていこうと思っている方、必見です。wordpressを…

  3. ul、liのドット部分を画像でリスト化する方法

    ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の…

  4. wordpressど素人がWordCamp Kansai 201…

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

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

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

  6. wordpressのドメインを変更しGoogleに通知する方法

    wordpressを始めてから、ドメインを変更したいなと思ったことありますよね。だけど、変更…

  7. 【動画版】wordpress初心者でもバックアップし復元する方…

    wordpressを使ってブログを運営していると、カスタマイズして画面が真っ白になったり、ウィルスに…

  8. 初心者必見contact form 7基本操作からカスタマイズ方…

    contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと…

PAGE TOP