WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

【配布】WordPressで子テーマの作り方をわかりやすく解説

この記事は約3分42秒で読めます

WordPress 子テーマ 解説
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

以前にWordPressの子テーマについての記事を書きました。
分かりにくかったというメッセージをいただきました。

子テーマをどこに配置すればいいのか? など。


いうことで。

もう少しわかりやすく解説したいと思います。

TF-Child.zipファイル(サンプルファイル)

TF-Child 子テーマ

img
– favicon.ico
– favicon_admin.ico
functions.php
style.css
screenshot.png

TF-Child.zipの中身は上記のファイル・フォルダとなっております。

※サンプルでは「Twenty Fourteen」を親テーマとしています
※「Twenty Fourteen」は最初から入っているテーマです(削除してないこと前提です)

TF-Childの機能

大した機能は作っていませんが、
私が新しくブログを作る際のテンプレート(ひな形)にしています。

  • フォントサイズ、太字、下線の定義
  • 文字色の定義
  • 文字背景色の定義
  • YouTube動画を中央表示
  • ハイライトの設定
  • ファビコンの設定
  • ファビコンの設定(管理者画面)
  • 自動整形の無効化

※赤字の機能はコメントアウト化(無効)にしています。
お好みで有効にしてご使用ください。

試しに「Twenty Fourteen」の子テーマを使ってみよう

子テーマを用意する

子テーマのサンプルファイルを作りました。
ご自由にダウンロードください。

注意


導入は全て自己責任で行ってください。
公式サイトを経由されていないテーマ、プラグインのダウンロードは常に危険が伴います。


導入前にバックアップを取るなど、万が一には備えてください。

自分で作ってみたい場合はこちらの記事を参考にどうぞ!
→ WordPressのテーマを変更する場合は子テーマを使おう

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

子テーマ TF-Child

子テーマ TF-Child

子テーマ TF-Child

外観→テーマ→新規追加→テーマのアップロード

子テーマファイル「TF-Child.zip」を選択して
「いますぐインストール」を押下からテーマがアップロードされます。

※既に同じ名前でファイルがアップロードされている場合は
テーマを削除してからインストールしてください。

子テーマを有効化する

子テーマ TF-Child

おつかれさまでした!

これで「Twenty Fourteen」を引き継いだ子テーマが適用されました!

見た感じはまったく変わりません(当たり前ですが)

サンプルの子テーマでは
よく使いそうなフォントサイズ、文字色・文字背景など定義しています。

赤色の文字を原色じゃなくて、薄めて見やすい色に変更したいなーと思ったときに
子テーマのスタイルシート(Style.css)の対象箇所を変更してあげれば、一括変更できます。

プラグインの「AddQuickTag」に登録しておけばさらに使いやすくなると思います。

他のテーマを親テーマにするにはどうしたらいいの?

子テーマサンプルでは「Twenty Fourteen」を親テーマとしました。
では、「Twenty Fourteen」以外を親テーマにするにはどうすればいいの?

まずは、テーマをアップロードする前にテーマファイルを編集します。

今回は最初から入っているテーマ「Twenty Thirteen」を親テーマとするように変更します。

「TF-Child.zip」を解凍する

子テーマのサンプルとして配布している「TF-Child.zip」ファイルを解凍してください。

フォルダ名を変更する

解凍してできたフォルダ「TF-Child」の名前を変更します。
Twenty Thirteen を親テーマとするので「TT-Child」という名前にしてみます。

フォルダ名は他のテーマと被っていなければ、なんでもOKです。
テーマ名+Childがわかりやすいのでおすすめです。

「Style.css」ファイルをテキストエディタで開く

スタイルシート(Style.css)ファイルを開きます。

メモ帳以外のテキストエディタを使用してください。
「秀丸」「EmEditor」「サクラエディタ」が使いやすいと思います。

Style.css

ハイライトされている行を変更します。

Theme Name: 子テーマの名前
Template: 親テーマのフォルダ名

@import 文を書くと親テーマのstyle.cssに追記する形になります。

Style.css(変更後)

「TT-Child」フォルダをzip圧縮する

「TT-Child」→「TT-Child.zip」というようにzip圧縮してください。

「TT-Child.zip」をアップロードして、テーマの有効化をする

この先は上と同じ手順になります。

その他・補足

テーマの管理画面で表示されている画像は「screenshot.png」が表示されます。
見分けが付きやすいように、ファイルを差し替えるといいですよ。

読者からは見えないものなので、「screenshot.png」はなくても構いません。

※子テーマの導入に関しては自己責任で行ってください。

子テーマを導入してWordPressの画面が真っ白になって動かなくなってしまった場合は、
子テーマのフォルダを直接削除してみてください。

パーミッション(権限)で見れなくなっている場合もあるので確認してみてくださいね

関連記事

  1. MacBook Airのキーボードを入力する手
  2. おにぎり おむすび イラスト
  3. アクセサリー ビーチ 青 女性 フリップフ ロップ 帽子 休日 レジャー 海 砂 サンダル
  4. パソコン
  5. 鉛筆削り消しゴムハサミ
  6. 記事タイトルで指定した文字を超えた場合「・・・」と表示する

コメントをお待ちしております

PR

カテゴリー