STINGER7/Plus:テーマのインストールと子テーマの使用方法

      2016/11/23

eye_stinger7

このブログではWordPressテーマ「STINGER7」を使用させて頂いており、ちょこちょこカスタマイズしております。

今までは親テーマをそのまま修正していたんですが、STINGER や WordPress の初心者さん向けに子テーマを使用した方が良いかな?と今さらながら思ったので、改めてテーマのインストールと子テーマの使用方法をご紹介します!

【追記:2016.9.17】
※一部内容を修正しました。
この記事の内容はSTINGER Plusでもそのまま使えます。

スポンサーリンク

親テーマ・子テーマとは?

まずは親テーマ・子テーマについて簡単に説明したいと思います。

親テーマというのは「STINGER7」のようにWordPressで使用する「テーマ」そのもの。
テーマを変更することで、着せ替え感覚で手軽にサイトのデザインを変更できますよね!

WordPressを使うほとんどの人は、誰かが作ったテーマを使用されていると思います。
制作者さんがテーマを修正して新しいバージョンを公開する場合があり、アップデートすることで不具合が解消されたり、新しい機能が使えるようになる場合があります。

でもアップデートをすると、テーマを自分でカスタマイズしていた場合はその内容が上書きされてしまうので、また最初からカスタムしないといけなかったりします。めんどくさいですよね。

そこで子テーマの出番です!

子テーマのメリット

子テーマとは、親テーマを直接いじらないでも内容を上書きできるようにするためのテーマ。

親テーマをバージョンアップしても、カスタマイズの内容は子テーマに設定されているので消える心配がありません。

テーマの種類によっては更新ボタンを押さなくても自動でアップデートされてしまい、せっかくのカスタマイズした内容が意図せず元に戻ってしまうこともあります。

なので初心者の方はなるべく子テーマでカスタマイズをしておいた方が良いです。

ということで早速「STINGER7」で子テーマを使ってみましょう!
「STINGER Plus」でもやり方は同じです。

テーマのダウンロード

まずはテーマをダウンロードしましょう!
STINGERを提供してくださっているENJIさんのサイトへGo!

ダウンロード及び規約
STINGER Plus(プラス)のダウンロードについてサイト及びテーマに記載している機能は100%保障するものではありません。当テーマ使用による如何なる不具合やトラブル、損害の責任も負いかねます。当

20160310b

STINGER7本体(親テーマ)をすでに使用している方は子テーマのみダウンロードしてください。

テーマのインストール

STINGER本体(親テーマ)のインストール

WordPress管理画面のメニューから「外観 → 新規追加」をクリック↓

20160310c

次に「テーマのアップロード」をクリック↓

20160310d

ダウンロードした「stinger7」解凍せずにZIPフォルダのまま選択して「今すぐインストール」をクリック↓

20160310e

インストールできたら「有効化」をクリックしましょう↓

20160310f

これで「STINGER7」のインストールは完了です♪

子テーマのインストール

子テーマも親テーマと手順は同じです。
ダウンロードした子テーマのZIPフォルダ「stinger7child」をインストールして有効化します↓

20160310h

これで子テーマもインストール完了です!
追加したSTINGER7と子テーマが表示されていると思います↓

20160310i

子テーマの使用方法

子テーマは「有効化」した時点ですぐに使用可能になっています。
制作者様のおかげですね♪ありがたや〜

管理画面のメニューから「外観 → テーマの編集」をクリックしてみましょう。
こんな画面になると思います↓

20160310j

「style.css」の「@import」の指定で親テーマ「STINGER7」のスタイルシートを読み込んでいるんですが、現在この@importは推奨されていません。
詳細はCodexに書かれています↓

子テーマ - WordPress Codex 日本語版

ということで親テーマのstyle.cssの読み込み方法を変更してみましょう!

functions.phpでwp_enqueue_style()を使う

子テーマの「functions.php」に下記のコードを追記してください↓

次に子テーマの「style.css」の下記のコードを削除します↓

以上で完了です!
これであとは子テーマにcssなどの指定をしていけばサイトに反映されます。

初期状態では functions.php と style.css しかありませんが、親テーマからコピーしたファイルを子テーマのフォルダに入れることで、他のファイルも子テーマで編集できます。
次回はそのやり方を紹介したいと思います♪

【追記:2016.3.24】
STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

スポンサーリンク

この記事をシェアする!

 - WordPress