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

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

関連記事

  1. font-533232_1280

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

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

  2. 50743432_m

    たったそれだけで?PVを増加させたSNSボタンのカスタマイズ方法…

    ブロガーなら、誰でも悩むと思うのですが、バズを狙ったり、自分のfacebookやtwitterに投稿…

  3. wordpressでテキストにアイコン付き背景をワンクリックで挿入する方法(コピペできます)

    wordpressでテキストにアイコン付き背景をワンクリックで挿…

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

  4. データベース復元

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

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

  5. 40762277_m

    誰でもできる!jQueryを使ってwordpressでもスクロー…

    wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラ…

  6. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの使い方

    たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

  7. thumb-575033_1280

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

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

  8. お名前.comから独自ドメインを取得してwordpressをインストールする方法(さくらインターネット)

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

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

PAGE TOP