WordPressのテーマを「Stinger2」変更して最初に設定したヘッダー画像と子テーマとファビコンの件

何となくイイ感じ?

つい変更してしまった、WordPressのテーマ「Stinger2」ですが、表示までの速度も速くなり、気のせいかも知れませんが、まだ導入後1週間ですが、なんとなく、Googleからの流入も少しずつ増えて来たように感じられます。

とりあえず、サーバエラー(500)も回避出来たし。

「Stinger2」を導入して、とりあえずプラグインをリセットして、サーバエラーを回避して何となく動き始めて、このブログです。(この過程は、こちらのページをご覧下さい。)

WordPressのテーマを「Stinger2」したときに発生した「HTTP エラー 500」の対処方と安全なプラグインの一覧 | ふーたらのページ (GALAXY S4やAndroidやドコモとiPad miniもね)

ブログの顔となる、ヘッダー画像とファビコンを設定しました

基本的な初期設定に関しては、「Stinger2」の設定のページに詳しく書かれていますので、こちらのページを見ながら初期設定をしましょう。

WordPressテーマ「Stinger」の設定方法 | SEO対策に強い無料WordPressテーマ「Stinger」

ヘッダー画像のサイズが合わない

だいたいは、「Stinger2」の設定のページの通りで問題ないのですが、「Stinger2」の標準のヘッダー画像のサイズが「986px×150px」で、ふーたらのヘッダー画像のサイズが「940px×198px」です。

とりあえず、ふーたらのヘッダー画像の横幅を「986px」に変更しましたが、この縦横比を維持したままだと高さが「208px」になっちゃいました。

ふーたらのヘッダー画像の縦横比を変更するって手もありますが、ここは折角なんで、「Stinger2」の設定のページに書かれている方法で「Stinger2」のヘッダーのサイズを変更してみましょう。

functions.phpを変更しましょう

ヘッダー画像の表示サイズを変更するには、「functions.php」に変更を加えます。

スクリーンショット_090213_025045_AM変更箇所は上の図の➃の部分です。

この数字を変更するだけで、ヘッダー画像部分のサイズが変更されます。

ファビコンの設定の前に「子テーマ」を作ろう

さて、ファビコンの設定を皮切りに、これからブログを色々と弄くる予定ですので、バージョンアップの影響を受けないように、ここで「子テーマ」を作っておきましょう。

まずは、「wp-content/themes」の下に子テーマを置くフォルダを作成します。今回の私の場合は、「stinger_child」としてます。

スクリーンショット_090813_034502_PM

子テーマのフォルダ作ったら、ここに(今回の例だと「stinger_child」)必要事項を記述した「style.css」を作るだけです。

ちなみに、「style.css」に書く必要最低減の事項は、

  • Theme Name:子テーマ名
  • Template:親テーマのディレクトリ名
  • @import:親テーマのスタイルシート

だけです。

参考例として、このふーたらのブログでは、

と書いています。

「style.css」まで作成したら、「外観」→「テーマ」で、先程作って子テーマを有効化します。

スクリーンショット_090213_031557_AM

設定が完了したら、ブログの表示具合を確認しましょう。恐らく何も変わっていないはずです。何も変わっていなければ、子テーマの作成は完了です。

ファビコンを設定しよう

子テーマを作り終わったら、ファビコンをアップロードししょう。アップロード先は、親テーマの下の「images」をいうフォルダです。

スクリーンショット_090813_034841_PM

ファビコンをアップロードしたら、続いてソースの変更です。

子テーマでのソースの変更は、親テーマから変更したいソースを子テーマのフォルダにコピーしてから変更します。

今回はファビコンの設定ですので、変更するソースは「header.php」です。

スクリーンショット_090813_034618_PM

子テーマにコピーしてきた、「header.php」の部分のもともとあったファビコンの設定を先程アップロードしたファイル名に変更します。

修正前

修正後

これで、こんな感じで、ファビコンが表示されているかを思います。

スクリーンショット_090213_033442_AM

まとめ

以上の簡単操作で、ヘッダー画像とアイコンの設定が完了しました。また、子テーマの作成も完了しまたい。

今後は、この子テーマに、もっともっとカスタマイズを入れていく予定です。

では、よい「Stinger」ライフを!