【子テーマ】STINGERの子テーマ「SIMPLESTER」のインストール方法

2016/04/08

【子テーマ】STINGERの子テーマ「SIMPLESTER」のインストール方法

ワードプレスでブログWordPressのブログをカスタマイズするために子テーマの準備をした方がいいと学んだ、たのちん管理人なむ。

たのちんで使わせていただいているテーマSTINGER5には、「SIMPLESTER」というステキな子テーマがありました。

早速設定させていただきました(*´ω`)♪

 

スポンサーリンク

ado

 

「STINGER」の子テーマ「SIMPLESTER」をインストールする

STINGER5をインストールしたばかりのたのちんはこんな感じのブログでした。

s1

 icon-hand-o-up 子テーマ「SIMPLESTER」を導入したらどうなるかやってみましょう。

SIMPLESTER」はこふすさんという方が作られたSTINGER専用の子テーマです。

上の記事でも少し触れましたが、SIMPLESTERはステキにデザインされたCSSファイルだけの子テーマで、導入した瞬間にデザインのカスタマイズはほぼ終了してしまうという素晴らしい子テーマです。

 icon-angle-right ん?

  じゃあもしさらにSIMPLESTERをカスタマイズしたくなったら…。

  子テーマの子テーマを作るのか??

と思いましたが、さすがにそれはよくわからないのでSIMPLESTERを直接触ります(すみません)。

  ではSIMPLESTERのインストールを行っていきましょう。

作業自体はテーマのインストールのやり方と全く同じです。

まずは公式ページ「SIMPLESTER」へGO→

s2

「SIMPLESTERとは」→「Version」で、ダウンロードできるバージョンのリストが出てきます。

たのちんは「Ver5」を利用させていただいています。

ダウンロードボタンをクリックして、ファイルをパソコンに保存しましょう。

s3

ダウンロードしたら、WordPressの管理画面を開きましょう。

サイドバーから「外観」→「テーマ」へ移動して、「新規追加」をクリックします。

s4

「テーマのアップロード」をクリック。

s5

「テーマを追加」する画面に移りますので「ファイルを選択」します。

s6

さきほどダウンロードしたSIMPLESTERをアップロードします。

保存先からzipファイルを選択して開きましょう。

s7

ファイルが選択できたら「今すぐインストール」をクリック。

s8

インストールが完了したら「有効化」をします。

s9

SIMPLESTERを有効化するとSTINGERの有効化が外れたように見えますが、SIMPLESTERは子テーマですから、親テーマのSTINGERがないと稼働できません。

連動していますから大丈夫です。

s10

これで無事SIMPLESTERのインストールは完了です。

ブログ画面を見てみましょう。
たいぶ今のたのちんに近づいてきましたね~。
あとちょっとですよ♪
あと少しいじくったらたのちんくらいのブログになります♪

おつかれさまでした(*´ω`)

…といいたいところですが、ちょっと見てください。

s11

ヘッダーの画像の横幅が少し足りませんね?

STINGERとSIMPLESTERは横幅の設定が少し違うようなのですが、これを修正するためにちょこっとだけ手動で変更をしなくてはいけないところがあるみたいです。

うっかり忘れちゃう前に、さっさと済ませちゃいましょう。

 

STINGERのヘッダー画像の横幅設定をSIMPLESTERに合わせる

SIMPLESTERの公式ページに詳しくありますので、その通りに変更します。

s12

*参考:変更箇所

親テーマであるSTINGER5の数値を変更する必要があります。

管理画面を「外観」→「テーマの編集」に移して、編集するテーマで「STINGER5」を選びます。

s13

テンプレートファイルの中の「テーマのための関数(function.php)」を編集します。

 icon-exclamation-circle function.phpの編集には注意が必要です。必要以上の編集をしないように気をつけましょう。

*参考:functions.phpの編集時に気を付けること!

s14

「テーマのための関数(function.php)」を開いて少しスクロールすると「カスタムヘッダー」と書かれた箇所があります。

s15

幅を「980」から「1116」に、高さを「250」から「270」に書き換えます。

s16

変更したら「ファイルを更新」します。

s17

ブログ画像を確認してみましょう。

 icon-hand-o-up 無事横幅が広がりましたね。

s18

以上でSIMPLESTERの設定は完了です。

おつかれさまでした(*´ω`)

 

NEXT

*【子テーマ】エックスサーバーで子テーマのテーマフォルダを作成する

 

-ワードプレスの使い方
-, ,