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でテキストにアイコン付き背景をワンクリックで挿…

    ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよ…

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

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

  3. wordpressど素人がWordCamp Kansai 201…

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

  4. サムネイルを活したセンスが良いTCDのテーマVIEW!使用感をレ…

    私がブログを始めて1年経ち、研究のために他のブログを参考にすることがあるんですが、余計な文字が多いと…

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

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

  6. ul、liのドット部分をアイコンでリスト化する方法

    ulやolで箇条書きにする際に、ドットや数字の代わりにアイコンを使いたい時ってありますよね。…

  7. facebook投稿のリンク画面をアイキャッチ画像にする設定方法…

    ブログ記事をfacebookに投稿したけど、アイキャッチ画像が表示されないって時って悩ましい…

  8. TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    最近、TCDのVIEWというテーマに変更しまして、TCDテーマのSNSボタンはデザインが良くて使いた…

スポンサーリンク

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

3/31までドメイン無料キャンペーン

最近の記事

PAGE TOP