まずはひとつの宣言から。

 

当ブログのStinger5-Cheetahのカスタマイズを全て公開します!

目次はこちら:

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし! ←今ここ

基礎編 第03回 管理画面でデザインを変更しよう

基礎編 第04回 ナビゲーションやフッターを設定しよう

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する

基礎編 第07回 コンテンツのサイズを表示域に合わせる

 

急にどうした?と思われるかと思いますが、マイナーなテーマが多い僕のブログ、ブログ名やnot providedを除くと、初めての検索キーワードがなんと『Stinger5 Cheetah 使い方』。

start-theme-child-01

 

せっかく比較記事も作り、オススメするための記事も書いたことだし、困っている人がいるなら、全力で情報を公開しようじゃないか!!

 

というわけで、このブログを公開するまでに行ったカスタマイズをまとめてみます。

Stinger5-Cheetah使ってみたい方!丸パクでも良いよ!

でもコンテンツはパクっちゃダメ絶対!(笑)

 

 

さて、まず記念すべき第01回は子テーマの導入から!

2015年12月13日追記

コンテンツ構成を見直し、第01回としてWordPressへStinger5-Cheetahをインストールする手順を公開しました。

それに伴い、記事のナンバリングが変更になっておりますのでご注意ください。

 

『それStinger5-Cheetahのカスタマイズって言わない』って?

 

なんかごめんなさい(-_-;)

でも、絶対、必要なんです。

でも、いろんなサイトを『Ctrl+U』でソースコード表示してみると、意外とやってる人少ないんです。

 

カスタマイズするつもりの人も、今は予定が無い人も、後から実施するともろもろ面倒なので、『最初に』やっときましょ。

 

 

WordPressの子テーマってなんで必要?

テーマのバージョンでカスタマイズした箇所が元に戻るのを防ぐため

WordPressには本当にたくさんのテーマが存在します。

その中の一つを選ぶだけでも相当な時間と労力が必要です。

 

※テーマ選びに苦労している貴方は↓の記事とか参考にどうぞ。

 

そして、悩みに悩んでやっとテーマを決めるわけですが、使っているうちに、『もっとコンテンツの横幅が広ければ!』とか、『ナビゲーションにSNSのフォローボタン追加したいなぁ』とか、『カスタマイズ欲』がむくむくと湧き出すことがあります。

 

 

そんな時、テーマファイルを直接編集することで、もちろんカスタマイズは可能です。

 

しかし!もしそのテーマがバージョンアップした場合、『あなたのカスタマイズしたテーマファイル』は残念ながら上書きされてしまいます_| ̄|○ il||li

 

 

Q.じゃあテーマの更新しなければ良いんじゃ?

おすすめしません。

テーマが更新されるということは、作者様がユーザーの声やご自身のブログ運営の経験をもとに表示の改善や機能追加などを実施して下さったということです。

単純な機能の追加ならまだしも、何かしら上手く行ってなかったエラーを改善した、という場合もあり得るので、テーマは最新にしておきましょう。

 

Q.自分のカスタマイズした履歴を残しておいて、同様のカスタマイズをすれば良いのでは?

ほんの1,2箇所変えただけ、とかならそれもアリかもしれません。

でも、テーマのアップデートのたびに同じ作業をするのはきっとめんどくさいのではないでしょうか…(-_-;)

 

Q.自分のカスタマイズしたテーマファイルを残しておいて、上書きするのはどう?

これはやっちゃダメです。

それぞれのテーマファイルは、意外と密接に関わっていたりします。

ブログのトップページの内容がカテゴリーアーカイブと関連していたり、個別の記事の内容でナビゲーションの一覧が作られていたり、そのテーマごとに全く違います。

仮に、テーマがバージョンアップした場合、『○○な機能を追加しました~』みたいな内容はあっても、『□□.phpと△△.phpのどこを変更しました』といった細かいことは告知されません。

ということは、新しいバージョンになった時、下手に過去のテーマファイルで上書きしてしまうと、表示の崩れや、最悪の場合、表示されなくなる等トラブルの元になるのでやめときましょう。

 

 

じゃあどうすればいいの!?ε=(怒゚Д゚)ノノ

 

ってなりませんか?

 

だからこそ、『子テーマ』なんですよね

 

 

じゃあ、そもそも『子テーマ』とは何でしょうか?

 

子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。

WordPress Codex 日本語版

とのこと。

 

ここでいう『親テーマ』というのは、例えばStinger5やSimplicityなど、あなたが選んだWordPressテーマのことですね。

 

 

一番大事なのは、『子テーマ』を導入すると、『親テーマに変更を加えることなく、機能の追加やデザインの変更が可能』ってことなんです。

 

ものすごくざっくり言うと、貴方の選んだテーマの上に、一枚の透明なカバーをかぶせるような感じでしょうか?

そのカバーに色を塗ったり、パーツを付け加えたりするので、親テーマにはなんの影響も無いってわけです。

 

子テーマを導入しておくことによって、仮に親テーマがバージョンアップしたとしても、カバーの中身が新しくなるだけで、外からの見た目は変わりません。

なので、安心してバージョンアップすることが可能です。

 

 

後から導入しようとすると地味にめんどくさい

かなり地味な理由ではありますが、子テーマを後から導入しようとすると、管理画面で変更した内容をやり直す必要があります

↓のような、WordPressの管理画面で『外観』→『カスタマイズ』とクリックして表示されるカスタマイザーで変更した内容や、

start-theme-child-02

 

↓のようなウィジェット

start-theme-child-03

 

が初期化してしまうため、もう一度同じように設定しなければなりません。

 

ちょっと色変えただけ、とかパーツ設置しただけ、とかならまだしも、プラグイン入れてカスタマイズして~とかしてると、地味にめんどくさいんですよね。

 

別に子テーマを入れたからといって、デメリットなんてありません。

 

今の時点では、カスタマイズなんてするつもり無いですけど?って人も、悪いことは言わないから子テーマだけは入れておこう。

 

 

トラブルが起こった時、原因を探るため

『ガンガンカスタマイズをするぞ~』、って人しか関係ありませんが、いろんなプラグインを入れたり、テーマファイルを修正したりする中と、『上手くいかない!』ってことも起こります。

 

『自分の修正内容が悪いのか』とか、はたまた『プラグイン同士の相性が悪いのでは?』とか、いろいろ悩みます。

 

そして、トラブルの原因として、ごくまれにではありますが、『そもそもテーマとの相性が悪い』、ってこともあり得るんですよ。

 

わざわざもう一度、テーマをダウンロードして、インストールし直して、ってやるより、子テーマのON/OFFを使い分けて検証しどこに問題点があるのか判別したほうが、圧倒的に楽です

 

 

スポンサーリンク

子テーマはどうやって作るの?

用意するのは下記の5つの内容ですね。

 

絶対必要)子テーマを格納するフォルダ

子テーマの↓の4種類のファイルを入れるためのフォルダです。

名前は任意のもので大丈夫ですが、『○○-child』などわかりやすいものをつけましょう。

 

絶対必要)style.css

『style.cssが含まれるフォルダは、○○ってテーマの子テーマですよ!』と宣言する内容を記載したり、子テーマ用のCSSを書き込んだりするためのモノになります。

これが無いと、そもそもWordPressの管理画面のテーマ選択で、表示されません(テーマとして認識してもらえないので)

基本的な書き方は↓の通りです。

@charset "utf-8";

/*
Template:stinger5-cheetah ■親テーマのフォルダ名■
Theme Name:stinger5-cheetah-child ■子テーマの名前■
Theme URI:http://stinger5cheetah.komaroku.com/ ■サイトURL■
Description:stinger5-cheetahの子テーマです ■子テーマの説明■
Author:新1983 ■子テーマの作者■
Version:0.1 ■子テーマのバージョン■
*/

@import url(“../stinger5-cheetah/style.css”);  ■親テーマのCSSの相対パス■

 

できれば)screenshot.png

用意しないからといってエラーになったりはしませんが、用意することで『ああ、今、有効化しているのは子テーマだな』というのが分かりやすくなります。

 

必要なら)テーマファイル

home.phpやsingle.phpなど、カスタマイズする必要があるテーマファイルを、親テーマからコピーして、子テーマのフォルダに配置することによって、親テーマより優先して読み込んでくれます。

 

必要なら)function.php (取り扱い注意!)

function.php とは、WordPressテーマに独自の処理を追加する『関数』を記載するためのファイルです。

たとえば、管理画面から設定可能な『ウィジェット』を追加したり、カスタマイザーの項目を追加したり、様々な変更が可能ですが、その分、取り扱いには最新の注意が必要です。

 

↑のテーマファイルは親カテゴリからコピーして配置するだけで良かったですが、function.phoは絶対にコピーしては行けません

重複した関数のせいで、正常に稼働しなくなり、最悪の場合、管理画面にすらログインできなくなります。

 

子テーマでfunction.phpの運用をする場合、

親テーマで記載の無い関数→そのまま記載でOK

親テーマで記載の有る関数→いったん親テーマの処理を除外する関数を書いてから、新しい処理を記載する

という2つの場合がありますので、細心の注意を払って運用してください。

 

 

スポンサーリンク

Stinger5-Cheetahの子テーマ導入方法

さて、前置きがだいぶ長くなってしまいましたが、いよいよStinger5-Cheetahへ子テーマを導入する方法です。

 

公式サイトから子テーマをダウンロードする

たいへんありがたいことに、Stinger5-Cheetahは子テーマが準備されています。

松原さん(@Junichi_Santa)、ありがとう~

STINGER5のオリジナルカスタマイズテーマ『Stinger5-Cheetah』のダウンロードページです。こちらから無料でダウンロードすることができます。ご利用は無料ですが、ご使用は、自己責任でお願いします。いかなる責任も負いかねます。利用による幸せは次の人へ繋いでください。

 

①上記のページにアクセスしたら、『本体ダウンロードはこちら』のすぐ下の『子テーマのダウンロードはこちら』をクリック

start-theme-child-04

 

ダウンロードした子テーマをWordPressにアップロードする

②管理画面にログインしたら、『外観』→『テーマ』の順にクリック

 

③最上段の『新規追加』をクリック

start-theme-child-05

 

④最上段の『テーマをアップロード』をクリック

start-theme-child-06

 

⑤『ファイルを選択』をクリックし、①でダウンロードしたファイルを選択

start-theme-child-07

 

⑥『今すぐインストール』をクリック

start-theme-child-08

 

⑦有効化をクリック

start-theme-child-09

 

⑧完成

start-theme-child-10

 

 

TSUNJI(@tsunji1983)的まとめ

冒頭に宣誓したとおり、、Stinger5-Cheetahでブログを始めるための手順を記事にします。

Stinger5-Cheetahはブログマーケッターの松原 潤一さん(@Junichi_Santa)がご自身のノウハウを詰め込んで作られたテーマです。

Stinger5-Cheetahカスタマイズ速習』は当ブログのカスタマイズの履歴を残し、すこしでも同じようにStinger5-Cheetahを使ってみたいという人の助けになるように作りました。

書いている内容で分かりにくいところや、もっと知りたいところなどあれば、お気軽にお問い合わせやTwitter(@tsunji1983)へご連絡ください。

Stinger5-Cheetahカスタマイズ速習 目次

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし! ←今ここ

基礎編 第03回 管理画面でデザインを変更しよう

基礎編 第04回 ナビゲーションやフッターを設定しよう

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する

基礎編 第07回 コンテンツのサイズを表示域に合わせる