ワードプレス

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

更新日:

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 の右横に子テーマができています。
子テーマを有効化すると適用されます。

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

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

今日も元気に楽しく♪

プロフィール

畑本伸一

 奏でる写真作家| 畑本伸一
1969年 大阪市生まれ 京都市在住。写真作家|写真は音を奏でるだろうか。そんな事を考えながら写真を撮っています。デジタル写真教室 講師フォトマスター検定1級写真印刷ツールデザイン制作|写真・カメラ・Webメディアに関する執筆。  共著:Pinterestビジネス講座(翔泳社出版)  詳しいプロフィール
 Facebook  Twitter  Instagram  Google+ RSS Feedly

PickUp

見上げる桜 1

トップページの記事一覧に表示されているサムネイル画像を大きくしたいと思いませんか? 当ブログで利用しているワードプレステーマを WING - AFFINGER5 に変えて数日が経ちます。多くの事が管理 ...

京都 円山公園の桜|2018.3.28 2

当ブログでも採用しているワードプレスのテーマ「AFFINGER」の最新版「AFFINGER5 WING」の公開及び販売が始まりました。今回も大幅に機能アップや高速化が図られている模様です。早速購入。AFFINGER4購入者は期間限定でお買い求め安くなっています。

-ワードプレス
-, ,

Copyright© フォトクリエイティブ|写真のある暮らし , 2018 All Rights Reserved.