*

WordPressテーマ【STINGER】子テーマのスマホ用スタイルシート「smart.css」を自力でカスタマイズする

公開日: : 最終更新日:2014/04/22 初心者がWordPressでブログを作る , , ,

stinger3_logo_140415

WorpPressテーマ「STINGER」は、WordPressの初心者でも簡単に設定できるテンプレートとして人気です。
しかもSEOに強く、アフィリエイトも簡単にできるとなれば、使わない手はありません。

そんな人気のWorpPressテーマ「STINGER」なので、自由にカスタマイズしたい!と思うのが親心。でも、実現したいことをそのまま形にするには、多少のハードルがあります。

そこで、筆者がこのサイトを作る際に実際に手間取った部分について、記録しておきます。今後どなたかのお役に立てますように。。。

このページを読むだけなら、html, css, php, FTPの知識は不要ですが、これらの知識があるとより理解が容易になります。

子テーマカスタマイズの基本的な部分は分かっているよ!という方は、前半部分を飛ばして「WordPressテーマ【Stinger3】子テーマの「style.css」「functions.php」以外をカスタマイズする」をご覧ください。

WordPressテーマ【Stinger3】の子テーマを設定する

子テーマの設定に関しては沢山の情報がありますので、本記事では簡単に記述しておきます。「WorePress 子テーマ」でググればいくらでも出てきますので、詳細はそちらにお任せします。

しかし、たまに古い情報があるため、注意が必要です。
最も確実と思われる情報は、WordPress Codex 日本語版なので、そちらをご覧ください。
→「子テーマ – WordPress Codex 日本語版

※もしかすると日本語版の情報が古い可能性もありますので、念のため英語版もご覧ください。
→「Child Themes – WordPress Codex

【Stinger3】の子テーマを設定する手順

親テーマとなる【Stinger3】をインストールする

STINGERのHPからファイルをダウンロードします。
ダウンロードしたファイルを解凍し、解凍したフォルダごとFTPでWordPressのテーマフォルダにアップロードします。
ここでは便宜上、アップロードしたフォルダ名を「stinger3」としておきます。
例)public_html/wp-content/themes/stinger3/

子テーマ用のフォルダを作成する

次に、子テーマ用のフォルダを作成します。こちらもWordPressのテーマフォルダに作った「STINGER」のフォルダと同じ階層に適当な名前のフォルダを作成します。
ここでは便宜上、子テーマのフォルダ名を「stinger3kid」としておきます。
例)public_html/wp-content/themes/stinger3kid/

子テーマフォルダ内にファイル「style.css」を作成し、ファイル内に以下を記述する

最低でもこれだけ書いていれば大丈夫です。注意点は、「Template: stinger3」と「@import url(‘../stinger3/style.css’);」の中の「stinger3」という文字は、1.で作ったSTINGERのテーマフォルダ名と一致させることです。
「Theme Name:」は自由ですが、次のテーマ一覧に表示される名前なので、分かり易い名前にしておきましょう。

子テーマを有効にする

「ダッシュボード>外観>テーマ」に、子テーマが表示されているので、「有効化」をクリックします。その際、表示される名前は、4.で「Theme Name:」で決めた名前になっています。

これで、Stinger3の子テーマの設定が完了します。簡単ですね。

子テーマのカスタマイズの基本

スタイルシート「style.css」をカスタマイズする

親テーマのファイルをオーバーライドするので、「@import…」の行で親テーマのCSSをインポートして、追記したい内容のみをその下に記述します。
※親テーマのCSSを継承しない場合は、「style.css」の以下の記述を削除して、全てのスタイルを記述します。

テーマ関数ファイル「functions.php」をカスタマイズする

親テーマの同ファイルをオーバーライドせず、親の「functions.php」に追加して読み込まれます。よって、子テーマフォルダ内に「functions.php」ファイルを新規作成し、必要なコードを記述します。

その他のファイルをカスタマイズする

親テーマのファイルをオーバーライドするので、親テーマから子テーマへ同名ファイルをコピー&ペーストして、当該ファイルの変更点を書き換えます。

この時の注意点は、ファイルによっては、当該ファイルをコピー&ペーストするだけでは適用されない可能性があるということです。【STINGER】は構造がシンプルでカスタマイズが容易なのでそういうことはそんなに起こりませんが、一部ファイルで発生するので、詳しくは後述します。

WordPressテーマ【Stinger3】子テーマの「style.css」「functions.php」以外をカスタマイズする

この記事の本題は、これ以降の部分です。
「wordpress 子テーマ」などでwebでググると、大抵上記までの情報は出てきます。
また、子テーマにまたテンプレートを適用させる方法なども、沢山出てきます。

しかし、「メンテナンスを容易にするために極力自力でカスタマイズしたい!」「プラグインなんかも最小限に抑えたい!」というニーズを満たす情報は、なかなか見つからないものです。

よってここでは、【Stinger3】の子テーマの「style.css」「functions.php」以外をカスタマイズするという、ニッチな内容でお伝えします。

「style.css」「functions.php」以外のカスタマイズの基本

親テーマのファイルをオーバーライドするので、親テーマから子テーマへ同名ファイルをコピー&ペーストして、当該ファイルの変更点を書き換えます。

前述の通り、これだけでは動作しない場合もあります。
他のファイルから呼び出されている場合、呼び出し元のファイルも書き換える必要があったりします。
【Stinger3】の子テーマの場合は、スマートフォン用スタイルシート「smart.css」がそれにあたります。

では、順を追って説明してゆきます。

ヘッダー情報「header.php」を子テーマ内でカスタマイズする

まずは、他のファイルとの依存関係がないファイルの場合です。

この場合は、親テーマから子テーマへ同名ファイルをコピー&ペーストして、当該ファイルの変更点を書き換えます。

例えば、「single.php」や「header.php」、「footer.php」、「sns.php」&「sns02.php」なんかが、これに当てはまる使用頻度の高いファイルでしょうか。

スマホ用CSS「smart.css」を子テーマ内でカスタマイズする

次に、他のファイルと依存関係にあり、単体のコピペだけでは動作しないものです。

これの代表格が、スマホ用スタイルシート「smart.css」です。

今はスマホからのアクセスが半数を超えるようになりました。スマホ画面のカスタマイズをする必要性が高まってきているのですが、ここで躓く人も多いようなので、紹介しておきます。

基本は「style.css」と同様です。

子テーマフォルダ内に「smart.css」ファイルを作成し、以下のコードを記述する

「smart.css」は「style.css」と同様に親テーマのファイルをオーバーライドするので、以下に示す「@import…」の行で親テーマのCSSをインポートして、追記したい内容のみをその下に記述します。
※親テーマのCSSを継承しない場合は、「style.css」の以下の記述を削除して、全てのスタイルを記述します。

注意点は、「@import url(‘../stinger3/smart.css’);」の中の「stinger3」という文字は、親テーマである【Stinger3】のテーマフォルダ名と一致させることです。

ただ、これだけでは子テーマの「smart.css」は適用されません。
これ以降の手順を踏まないと、「smart.cssが適用できない!困った!!だからカスタマイズは難しいんだ!!!」なんてことになってしまいますww

とは言え、とても簡単なので、一緒についてきてください。

親テーマフォルダのファイル「header.php」を子テーマフォルダにコピーする

デフォルトでは「smart.css」は親テーマ内の同ファイルを読み込むようにプログラムが記述されているので、「header.php」内のスタイルシートを読み込む部分の記述を書き換える必要があります。

上述のやり方に倣って、「header.php」を子テーマでカスタマイズします。

まず、子テーマフォルダ内に「header.php」が無い場合は、親テーマフォルダ内のファイル「header.php」を、子テーマフォルダ内にコピー&ペーストします。

子テーマフォルダ内のファイル「header.php」内の記述を以下のように変更する

変更前(44行目あたり)

変更後

要するに、変更前の「get_template_directory_uri()」という関数を「get_stylesheet_directory_uri()」に書き換えるだけです。

この「get_template_directory_uri()」と「get_stylesheet_directory_uri()」という関数は何を表しているかは、ググれば詳細は山ほど出てきますが、簡単に言うと、

  • 「get_template_directory_uri()」は親テーマのディレクトリのURIを取得する関数
  • 「get_stylesheet_directory_uri()」は子テーマのディレクトリのURIを取得する関数

ということです。

子テーマを使っていなければどちらも同じURIを取得する関数です。
実はこれ、【Stinger3】に限らず、子テーマをカスタマイズする場合は必須の情報です。

これだけで「smart.css」が読み込まれます!

簡単でしたねっw

【Notice】「style.css」,「functions.php」以外をカスタマイズする場合の注意点

親テーマである【Stinger3】がアップデートされた場合には、「header.php」や「single.php」のソースコードが変更になっている場合があります。

その場合は、アップデート部分を子テーマファイルに追加する必要があります。
差分ツールは以下に紹介するものが便利かと思います。

Macの場合の「FileMerge.app」は、以下のディレクトリにあります。
(要デベロッパーツールXcodeのインストール。最近のMacははじめからインストールされている場合もあります。)

HD > Developer > Applications > Utilities

Macユーザーの私は「FileMerge.app」のエイリアスをアプリケーションフォルダに置き、いつでも簡単に使えるようにしてあります。

長期間アップデートをせずに、変更点が大量にある!という事態を避けるためにも、アップデート・ファイルマージはこまめに実行することをお勧めします。

あとは自由に【Stinger3】のカスタマイズを楽しむだけ!

レッツ、カスタマイズ!!

WordPressでブログを作るなら

PageSpeedってユーザービリティとSE0に大きく関わってきます。
PageSpeedに大きく関わってくるのは、何やかんやでサーバーの応答スピードです。
優良なサーバーを選びたいものです。

WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』



WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』

大容量無制限レンタルサーバー「X2」



大容量無制限レンタルサーバー「X2」

月額980円からのハイスペックVPS 【GMOクラウドのVPS】



月額980円からのハイスペックVPS 【GMOクラウドのVPS】

GMOインターネット株式会社【お名前.com レンタルサーバー】



スポンサードリンク

「いいね!」と思ったらシェアしてもらえると...大感謝です。
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

New WordPress Buttons and Stickers / Nikolay Bachiyski

WordPress記事内でプラグインを使わずにPHP,JavaScriptプログラムを動かす

WordPressのカスタマイズをしていると、 「記事内や固定ページ内にPHPやJavaScr

記事を読む

jqplot-jquery-graph-in-wordpress

【WordPress】見栄えのいいグラフを動的に描画できるjQueryプラグイン「jqPlot」をWPで使用する方法

当サイトの以下の記事では、数値計算を実行した後、計算結果をグラフ表示しています。 >>

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スポンサードリンク

kitanomakoto140514
【FX】北野誠さんが荻野金男さんと語る「主要通貨の行方を握る、世界の”裏”の動き」をPodcastで学ぶ

お笑い芸人でFXトレーダーの北野誠さんが、元インターバンクディーラーの

【FX】誰も教えてくれなかったRSI!陳満咲杜の「FXトレンドの真実」eyecatch
ラジオNIKKEI陳満咲杜さんの『FXトレンドの真実「RSIにポリンジャーバンドを掛けようその5~ポリンジャーバンド×ポリンジャーバンド2.0」』をPodcastで学ぶ

ラジオNIKKEIの番組『陳満咲杜の「FXトレンドの真実」誰も教えてく

【FX】誰も教えてくれなかったRSI!陳満咲杜の「FXトレンドの真実」eyecatch
ラジオNIKKEI陳満咲杜さんの『FXトレンドの真実「RSIにポリンジャーバンドを掛けようその4~ポリンジャーバンド×ポリンジャーバンド」』をPodcastで学ぶ

ラジオNIKKEIの番組『陳満咲杜の「FXトレンドの真実」誰も教えてく

EURJPY_20140519115218_140515
FX自動売買結果 ST2ユーロ円 2014/5/13-15 負け-26.6pips

ネオシオン氏のST(スナイパートレード)シグナルを用いた自動売買ソフト

USDJPY_20140519115129_140515
FX自動売買結果 ST1ドル円 2014/5/12-15 勝ち+9.5pips

ネオシオン氏のST(スナイパートレード)シグナルを用いた自動売買ソフト

→もっと見る

  • FX自動売買マネジメントサービス
    XEMarkets 口座開設
    海外FXランキング
    アフィリス パートナー募集
PAGE TOP ↑