YouTubeチャンネル「AndoTV」の公式Blogです。

AndoTV Officialブログ

STINGER5

Blogテーマを「STINGER5」に変更、初めての『子テーマ』作成!

投稿日:

こんにちは。
AndoTV@andohiroyukiTVです。

Blogのデザインを話題のWordPressテーマ「STINGER5」にしてみました!
このBlogはずっと「STINGER」のお世話になっているのですが、無料でこれだけ機能が付いているテーマはなかなか無いので、他の人にもおすすめしています!

stinger5

今後は「STINGER3」からレスポンシブウェブデザインに対応した「STINGER5」で行った変更点などを備忘録的に書いていこうと思います。

スポンサーリンク

初めて「小テーマ」を作ってみました!

STINGERだけでなく、WordPressでは様々なテーマが無料でダウンロード出来ます。
そのテーマを使わせてもらいながら、自分らしくカスタマイズを色々としていくわけなのですが、Webの初心者であるAndoTVはカスタマイズの事はよく分かりません。(苦笑)
STINGERは使われている方が非常に多いので、カスタマイズの記事を書かれている方がいらっしゃるので、その記事を参考に(ほとんどコピペww)Blogに様々なカスタマイズをしています。

それだけにカスタマイズをしたテーマを上書きしてしまうと、今までやってきたカスタマイズがゼロからスタートなんて可能性がありますよね?
STINGERの場合は、製作者のENJIさんが日付をつけて下さっているので、そうした上書き事故は起こらないので、ご安心を。
ですが、こまめにアップデートしてくださるので、その度に今までのカスタムしたコードをコピペしていました。。。

『もっと効率良くやる方法って無いのかな?』と思っていたら、ある時にENJIさんのこんなツイートを見つけました。

『子テーマってなに?』というのが、AndoTVの最初の疑問でした。
調べてみたら、どうやらこの方法、

『WordPressでは基本、というか常識だそうです。。。』

知らなかった。。。
で、今回STINGER5に変更するのと同時に『子テーマ』を作る事にしました!

子テーマってなに?

子テーマとは、

WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

参照:子テーマ – WordPress Codex 日本語版

ということなのですが、1回読んだだけでは全く理解が出来ませんでした。。。
色々と調べていたら、こちらのサイトに詳しく書かれていました。

参照サイト:【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-

簡単にまとめると親のテーマの仕様を基本に、カスタマイズをしたい部分だけ子テーマで変更を加えると、子テーマでの変更内容が優先的に反映される様に出来るということです。
カスタマイズした内容は、全て子テーマにあるので、親テーマである『STINGER5』のバージョンアップしたものに変更しても、カスタマイズした内容をイチから書くという手間が省けます。
これはかなり時間を短縮できますし、今までのカスタマイズが無駄にならないので、やっておいて損はないと思います。
って言うか、やらない理由無いですよね!(笑)

子テーマってどうやって作ればいいの?

子テーマ用のフォルダを用意。

AndoTVのBlogのサーバーは、ロリポップなので、ロリポップの画面を例に話をさせて頂きます。
まず、ロリポップにログインをして、『Webツール』→『ロリポップFTP』を開きます。

ロリポップFTP

そして、Blogのフォルダを開き、『wp-content』→『themes』の順に開いていきます。

wp-content

themes

そうするといよいよ、WordPressのテーマのフォルダにたどり着きます。
そしたら、ツールバーから『新規フォルダ作成』を選び、子テーマのフォルダを作成します。

新規フォルダ作成

フォルダの名前は何でもいいのですが、STINGER5の子テーマだと分かるように今回は『stinger5_child』と名前を付けました。
すると『themes』のフォルダの中に『stinger5_child』というフォルダが出来ます。

スクリーンショット 2014-10-21 22.24.06

子テーマ内にスタイルシートを作成する。

『stinger5_child』のフォルダを開き、 ツールバーから『新規ファイル作成』をクリックして、

新規ファイル作成

『style.css』ファイルを作成します。

style.css

作成したファイルに以下の様に書き込みます。(親テーマが「stinger5ver20141011」の場合)

/*---------------------------------------------
Theme Name: stinger5_child
Template: stinger5ver20141011
Description: Customize css for stinger5
Author: (製作者名)
---------------------------------------------*/
@charset "UTF-8";
@import url('../stinger5ver20141011/style.css');

「Theme Name(stinger5_child)」「Template(stinger5ver20141011)」「@import url('../stinger5ver20141011/style.css')」の部分は親テーマにするファイルによって、適宜変更をお願いします。

この記述は最低限の記述なので、基本的な記述ルール等を知りたい方は、以下のサイトをご覧下さい。
参考サイト:WordPress 子テーマにおける『style.css』の記述方法

あとは、子テーマを有効化して、見た目が親テーマの時と同じなら、子テーマの作成は終了です!
その他にも子テーマにファイルを作ったのですが、それは後日のBlogに書かせて頂きます!

これからカテゴリー『Stinger5』の中でご紹介します。
これまでのカスタマイズは、『Stinger3』をご覧ください!

LINE@はじめました!
登録はこちらから。
友だち追加数

-STINGER5

Copyright© AndoTV Officialブログ , 2021 All Rights Reserved.