クリエイティブライフハック

写真とオンラインメディアの話をしよう。ブログ、ソーシャルメディア、オウンドメディア、ホームページ、ハンドメイドマーケット、Etsy、minne、Creema、iichi…

オンラインメディア

WordPressを子テーマでカスタマイズする方法。

投稿日:2014/05/08 更新日:

WordPress デフォルトテーマ Twenty Fourteen の子テーマを作る。

WordPress のテーマに変更を加えようと思った時どうしてます?
直接テーマを触ってしまいます?

テーマがアップデートされた時にまた同じ修正を加えなければならなくて困ったことはありませんか?
どこをどう修正したか覚えてなくて困ったことはありませんか?

スポンサーリンク

テーマを直接修正するのではなく、子テーマを作ってそちらを修正したり追記することで、アップデートしても再修正しなくて済みます。

今回は、WordPressのデフォルト公式テーマ「Twenty Fourteen」のcssを子テーマで変える方法で解説していきます。
もちろん、他のテーマを使ってる人も同じようにすれば、子テーマを作ることができます。

Home画面。

Twenty Fourteen HOME画面

何か気付きませんか?
英文字が何カ所か大文字になってるんです。

これはデフォルトのテーマ Twenty Fourteen の CSS でそうなってるからなんです。

これを解除するためにはテーマファイルのスタイルシートを少し修正することになります。

但し、Twenty Fourteen を直接修正してしまうと Twenty Fourteen がアップグレードしたときに、また同じ修正をしなければならなくなります。
それは面倒であるし、ミスも起こりやすい。

ということで、WordPress は子テーマでのカスタマイズを推奨しているようです。

子テーマの作り方は、WordPress Codex 日本語版(子テーマ)にも書かれていますし、難しいことはありません。

子テーマの作り方

Twenty Fourteen と同じディレクトリに任意の名前で新しくフォルダを作ります。(例:kid)
その中に子テーマ用のスタイルシート style.css を作成します。
子テーマに最低限必要なのは、このフォルダ1つとファイル1つだけです。

/wp-content/themes/kid/style.css

style.css の書き方のルール

  1. Theme Name (必須) 子テーマ名
  2. Theme URI (任意) 子テーマのウェブページ
  3. Description (任意) テーマの説明。例: わたしの最初の子テーマ。
  4. Author URI (任意) 作者のウェブページ
  5. Author (任意) 作者の名前
  6. Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
  7. Version (任意) 子テーマのバージョン。例: 0.1, 1.0, etc

これだけの要素が必要になります。

参考までに style.css の書き出しを載せておきますので参考にしてください。

@charset "UTF-8";
/*
Theme Name:     tf-photo
Theme URI:      http: //hatamoto.biz/photo/
Description:    写真を編むのための Twenty Fourteen 子テーマ
Author:         aoneko
Author URI:     http: //hatamoto.biz
Template:       twentyfourteen
Version:        1.0
*/

@import url("../twentyfourteen/style.css");

この後にスタイルを追加修正していきます。

英文字の大文字を解除するスタイル

Twenty Fourteen の style.css を検索してみると
text-transform: uppercase;
がたくさん見つかります。
それを text-transform:none;
にしたものを子テーマの style.css に追加します。

Twenty Fourteen の style.css を修正するのではなく、
子テーマの style.css に追加します。

管理画面>外観>テーマ
を開くと Twenty Fourteen の右横に子テーマができています。
子テーマを有効化すると適用されます。

英文字の大文字が解除されました

英文字の大文字が解除されました。

今日も元気に楽しく♪

 

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

最新情報をお届けします

Twitter で畑本伸一|CreativeLifeHackをフォローしよう!

-オンラインメディア
-, ,

運営者プロフィール

畑本伸一

icon-maleSINTO Hatamoto (畑本伸一)
写真とオンラインメディアの話が大好きです。ワードプレス、インスタグラム、ピンタレストの活用方法、初心者ハンドメイド作家さん向けの商品写真の撮り方、編集方法、オンラインメディア活用などをセミナー講師としてお伝えしています。 I Love Fujifilm X-E2
icon-arrow-circle-right 詳しいプロフィール

共著

Facebookページ「Creative Life Hack」TwitterGoogle+ページ「自分メディアの育て方」instagramPinterestFeedly RSS

Copyright© クリエイティブライフハック , 2016 AllRights Reserved.