1分でできるstinger3カスタマイズ用のベース子テーマの作り方

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

子テーマの作り方

この記事は、現在のstinger3最新バージョン(stinger3ver20140327)がインストールされていることを前提に書かれています。

新しいバージョンや古いバージョンを使っている場合は、「stinger3ver20140327」をお使いのバージョンのものに合わせてください。

Stinger3子テーマの最も基本となるところだけを作成するので、手馴れた人がやれば作業時間1分で終わる作業です。

photo by Serge Kij

スポンサーリンク
レクタングル(大)広告

フォルダの作成

まずは、お使いのパソコンのデスクトップにフォルダを作成してください。

名前は何でも良いのですが、今回は「Stinger3child」としました。

Stinger3childfolder

その中に、「images」フォルダを作成してください。

imagesフォルダー

これは、スタイルシート(CSS)で使用する画像を入れるために使います。

とりあえずこれで、フォルダの作成は終了です。

ファイルの作成

次に、子テーマの核となる「style.css」ファイルを作成します。

先程作成したフォルダ「Stinger3child」の中に「style.css」ファイルを作成してください。

スタイルシートファイルの作成

「style.css」ファイルをエディターで開いて編集します。

今回は以下のように編集しました。

「stinger3ver20140327」の部分は、お使いのバージョンに置換してください。

それぞれの用途について簡単に説明しておきます。

「Theme Name: stinger3child 」は、子テーマの名前です。好きな名前でも大丈夫です。

「Template: stinger3ver20140327 」は、親テーマとなるテーマのフォルダ名を入力します。

「@import url(‘../stinger3ver20140327/style.css’);」は、親テーマのスタイルシート情報を引き継ぐ場合に入力します。親テーマの「style.css」の相対パスを記入します。

これで、子テーマの基本となる作成作業は終了です。

アップロード

あとはお使いの、FTP、SFTPのソフトなら何でもいいので、作成した「Stinger3child」フォルダをサーバーにアップロードします。

アップロード場所は、「Wordpressインストールフォルダ→wp-content→themes」直下にアップロードします。

アップロード後は、こんな感じのファイル構造になります。

Stinger3テストのファイル構造

WordPressテーマに適用

あとは、Wordpress管理画面にログインして、「外観→テーマ」から作成した「Stinger3child」子テーマを有効化します。

子テーマの有化

あとは、テーマに変更を入れていく場合は、子テーマの「style.css」に変更書き加えていけば、子テーマのスタイルが優先して適用されます。

テスト

一応ここで、子テーマの設定に誤りがないか確認しておきます。

子テーマの「style.css」に以下のような背景色を赤にするスタイルシートを書き込んでテストしてみます。

背景色が、デフォルトのものから赤に変われば、子テーマは正しく設定されています。

STINGER3のテストデフォルト STINGER3のテスト赤色

まとめ

今回は、わかりやすさを重視するため、子テーマのベースとなる部分に絞って説明しました。

基本となる部分だけを作成したので、とても簡単ではありました。しかし、今後テーマをカスタマイズするのにも、この状態からプラスアルファで変更を加えていくことになるので、重要な部分です。