カスタマイズノトリセツ

STINGER PLUS+ を始めとした、WordPressテーマのカスタマイズ情報を中心に取り扱うブログ。取扱説明書の様な丁寧な記事を心がけています。

Stingerシリーズ関連

【STINGER PLUS+ カスタマイズ】子テーマの作成と導入方法

2016/07/10

皆さんお疲れ様です。

「カスタマイズノトリセツ」と言っておきながら、カスタマイズが始まる気配を見せませんがお疲れ様です。

この記事を含めてあと2回、事前準備にお付き合いください。そこからはガシガシとカスタマイズ進めていきますから。

ちなみに今回は子テーマの導入方法。現在は作成者のENJIさんの公式サイトで配布されておりますので適用はあっという間です。

ただ、今後は子テーマも公開されなくなると思いますので、簡単な作成方法も後半に記載しておきますね。

なるべく簡潔に済ませたいと思いますので、どうぞお付き合いをよろしくお願いします。

 

STINGER PLUS+ 子テーマの導入

上にも書いた通り、現在はSTINGERの公式サイトで子テーマを配布してくれているので、基本的なテーマ適用方法は以前書いた記事の内容とほぼ一緒です。

関連ダウンロードしたWordPressテーマをアップロードして適用する - カスタマイズノトリセツ

ただ一つだけ、子テーマの中で指定する親テーマをインストール済である事が必須条件になりますので、ご注意ください。

それでは上の関連記事の中でも書いた通り、下記の公式ページからSTINGER PLUS+の子テーマをダウンロードしてきてください。

参考ダウンロード及び規約 - 無料ブログ作成ツール「STINGER」

で、管理画面にログインしたら[外観] - [テーマ] - [新規追加] - [テーマのアップロード]の順にクリックで以下の画面にたどり着く。

Torisetu0054

ので、ダウンロードしてきた子テーマを指定して、「今すぐインストール」をクリック。

Torisetu0055

「インストールが完了しました」のメッセージが表示されている事を確認して「有効化」をクリックです。

Torisetu0056

テーマの一覧から子テーマが適用されている事を確認して完了。サイト本体は特に見た目に変更がないので注意。

Torisetu0057 Torisetu0058

 

「STINGER PLUS+」用 の子テーマ作成方法

ここからは、配布されている子テーマをダウンロードし忘れて配布が終了してしまった人向けに、子テーマの作成方法を記載しておきます。

ちなみに今回利用している親テーマは「STINGER Plus ver20160612」。子テーマは「STINGER Plus+子テーマβ ver20160525」を元に作成しています。

 

子テーマの中身を確認する

まずは[STINGER Plus+子テーマβ ver20160525」のZipファイルを解凍して中のファイルを確認していきます。

Torisetu0059

中に入っているファイルとフォルダはこんな感じ

Torisetu0060

  • images(フォルダ)
  • function.php(ファイル)
  • screenshot.png(ファイル)
  • style.css(ファイル)

の4つが入っていました。この中の「screenshot.png」は無くても動きます。管理画面のテーマ一覧に表示する画像になりますので、動作には特別な影響はありません。

「images」はこの名前の通りの空フォルダを作成すればOKです。

残り2ファイルについては以下で解説しておきましょう。ちょっとめんどくさいので。

 

function.php

こちらはWordPress内部で動作する処理を書いていく為のファイルなのですが、デザインを弄るだけなら基本的には変更不要です。デフォルトの記述のままで保存しておきましょう。

デフォルトの記述は以下の通りとなります。

上のコードをそのままコピペでテキストファイルに貼り付けて、UTF-8で保存したら出来上がり。深いことは考えちゃダメ。

 

style.css

こっちのファイルにデザイン変更のコードをいっぱい書きます。見た目を変える時はだいたいここに書きます。

今はとりあえず子テーマの作成が目的なので、こちらもデフォルトの記述通りのファイルを作成すればOKです。

デフォルトの記述は以下の通り。

こちらは色々書いてありますが、今意識しなければいけないのは2行目と3行目。

2行目はアップロードした後に表示される子テーマの名称。3行目は既にインストール済の親テーマの名称を指定する必要があります。必要に応じて記述を変更してください。

あ、6行目の「@import url('../stingerplus/style.css');」についても親テーマの名称に合わせる必要があるのでご注意ください。

上記で指定した「STINGER Plus ver20160612」を親テーマにしているのであれば、上記のコードをコピペでOK。こちらもテキストファイルに貼り付けて、UTF-8で保存しておいてください。

8行目以降はスマホでもPCでもキレイなレイアウトを作るための枠組みみたいなものです。今後利用しますが今は気にしちゃダメ。

 

作成したファイルをZIP形式で圧縮する

あとは上で作成した4ファイル(もしくは「screenshot.png」を除いた3ファイル)を一つのフォルダに集めて、zip形式で圧縮するだけ。

ここではzipへの圧縮方法は割愛しますので、圧縮方法がわからない方はGoogle先生にお尋ねするか、このサイトの問い合わせボタンから個人的に聞いてください。あ、ごめんまだ問い合わせボタンないや。待ってて。

圧縮したzipファイルが完成したら、最初に書いた手順の通りに子テーマのアップロード・有効化が可能になります。

 

補足:zipで圧縮しない場合の子テーマ適用方法

上で書いた方法がおそらく一番簡単な方法だと思いますが、慣れた方であれば直接FTPでサーバにファイルを置く事も可能です。

その場合「公開ディレクトリ(public_html)/wp-content/themes」に1フォルダに集めた子テーマファイル群をアップロードするだけ。

Torisetu0061

アップロードしただけではサイト本体には適用されないので、忘れずに有効化してくださいね。

以上、子テーマの導入方法でした。

次回からようやくデザインのカスタマイズ!と言いたいところではありますが…

 

カスタマイズを進める前にアクセス解析の設定をする必要がありました。ので先にそちらを実施です。

関連StingerPlus+でアクセス解析!WordPressにGoogleアナリティクスを導入する方法【サーチコンソール連動対応]】 - カスタマイズノトリセツ

 

-Stingerシリーズ関連
-,