vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

Stinger5の導入&子テーマの作成方法

      2017/02/01

LINEで送る
Pocket

wp-stinger5-c
こんにちは、okutani(@okutani_t)です。WordPressはブログなどのサイトがかんたんに作れる便利なツールとして有名ですね。

WordPressがわかれば、もうりっぱなWebデザイナー・エンジニアと言っても過言ではありません(と私は思ってます)。

今回はStinger5というWordPressテーマを導入し、子テーマの作成方法までを説明します。

テーマを利用してサイトを作るときは、「子テーマを作ってから」構築することが好ましいです。

なぜなら、編集したテーマのバージョンが上がった際に、「設定が上書きされてしまって今までのデータが全て消えてしまう」なんてことが起こりうるからです。

また、子テーマを利用することで親テーマと子テーマでサイトデザインを分けて記述できるので、サイト管理がしやすくなるメリットも。

では、Stinger5の導入&子テーマの作成方法を見ていきましょう。

スポンサーリンク

Stinger5のテーマを取得

まずは下記の公式ページからStinger5のテーマを取得しましょう。公式ページの「Download」からダウンロードできます。

LINKSTINGER5 ダウンロードページ

wp-stinger5

記事掲載の時点では「stinger5ver20141227.zip」がダウンロードされました。42kbと軽量です。ver以降の数字はそのときのバージョンによって違いますので、以降の作業はその数字に合わせて進めてください。

解凍したフォルダを

(WordPressをインストールした場所)/wp-content/themes/stinger5ver20141227

のように丸ごとthemesフォルダの下に置きましょう。

ファイルの置き方がわからない方は、ご利用のサーバーでFTPというツール(厳密には通信規約)で調べてみましょう。ロリポップサーバーであれば、「ロリポップ FTP」等で調べるか、公式のマニュアルを読むことをオススメします。

参考ロリポップ!FTPについて / ユーザー専用ページ / マニュアル

子テーマの作成

では、次にStinger5の子テーマを作成していきます。

子テーマ作りが初めてな方は、少々わかりにくい部分がいろいろあるかと思います。焦らずに1つ1つゆっくり見ていきましょう。

まずは「stinger5child」という空のフォルダを、先ほどの「themes」フォルダの中に作成します。

(WordPressをインストールした場所)/wp-content/themes/stinger5child

「stinger5ver20141227」と「stinger5child」が同じ場所にあるのを確認しましょう。下の画像はFinderを例に表示しているので、皆さんが使っているFTPソフト上で確認してみてください。

wp-stinger5-1

次にstinger5childフォルダの中に、「style.css」という名前のファイルと「images」という名前のフォルダを設置しましょう。

PC上で作成して、FTPでアップロードすると楽ちんです。

wp-stinger5-2

  • style.css
  • サイトのデザインを変更するファイルになります。CSSは原則、このファイルに記述していきます。

  • imagesフォルダ
  • 子テーマで使用する画像置き場です。背景画像、ヘッダー画像などのデザインに関係する画像はここに置くようにしましょう。

では、子テーマで使うCSSファイルの初期設定をおこないます。

style.cssに下記のおまじないを記述しましょう。

/*
Theme Name: stinger5child
Template: stinger5ver20141227
*/

@import url('../stinger5ver20141227/style.css');

このおまじないの意味は、「stinger5ver20141227を親テーマとして使います」という意味です。

「@import ~ 」の部分で親テーマのstyle.cssを読み込んでいます。もちろん、親テーマのファイル名は各自変更しておきましょうね。

ここまで問題なくできたでしょうか?うまくできなかった人は急がず、ゆっくりでいいので自分のペースで設定を見直してみましょう。

CSSの利用設定(テーマカスタマイザーの削除)

Stinger5では「functions.php」というファイルの、ある箇所を削除しないと先程のstyle.cssの一部設定が読み込まれない場合があります(文字色の変更ができない等)。

全てのレイアウトをCSSファイルからおこないたいという方は「stinger5ver1227/functions.php」の下記部分をごっそり削除しておきましょう。

//テーマカスタマイザーで編集しない方は削除して下さい(ここから)

…省略

//カスタマイザーで色を設定しない方は削除して下さい(ここまで)

この意味がよく分からない方はここでは記述を削除せず、のちのち見直すという方法でもOKです。

これで子テーマを使用する準備が整いました。

子テーマを有効にする

Stinger5の子テーマが作成できたので自分のサイトに反映させてみましょう。WordPressの管理画面からログイン後、「外観」→「テーマ」をクリックします。

wp-stinger5-3

その中に「stinger5child」がありました。ポインタを乗せると有効化ボタンが現れます。有効化をクリック。

wp-stinger5-4

すると、画面左上に「サイトを表示する」と現れるのでクリックします。

wp-stinger5-5

Stinger5のテーマが表示されていれば、無事Stinger5の導入&子テーマの設定完了です!

子テーマのstyle.cssでデザインを変えてみる

試しに、先ほど作成したstyle.cssを使って、デザインを少し変更してみましょう。

子テーマ(stinger5child)のstyle.cssの一番下に、下記コードを追記してみてください。

header .sitename{
  font-size: 50px;
}

タイトルをfont-sizeで変更してみました。

wp-stinger5-6

子テーマを使うことで、このように親テーマのstyle.cssを汚さずに、現在のサイトのデザインを変更することができます。

WordPressでは、先に親テーマのCCSを読み込んだ後、子テーマのCSSを上書きして表示するため、このようにスッキリとコードを記述することができるのです。

これからは子テーマを使ってサイトデザインを行えますね。お疲れ様でした。

まとめ

Stinger5の導入から、子テーマの作成までを紹介しました。

ここでは必要最低限の設定に留めましたが、親テーマの.phpファイル等も、子テーマに移動(コピー)してCSSファイルと同じように設定することができます。

注意する点として、functions.phpだけは子テーマから上書きが不可なので、頭に入れておいてください。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
基本的には子テーマをいじってレイアウトしていくのがオススメです。少しずつカスタマイズしていきましょう。なお、設定する際はバックアップを取る癖をつけておきましょうね。

 - Stinger5

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

Stinger5にファビコンを設置する方法

こんにちは、okutani(@okutani_t)です。本記事ではWordPre …

Stinger5にiPhone用のアイコンを設置する

こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面 …

[Stinger5] 固定ページにSNSシェアボタンを追加する

こんにちは、okutani(@okutani_t)です。私はWordPressテ …

[Stinger5] スマホのブログタイトルを画像に変更する

こんにちは、okutani(@okutani_t)です。WordPressのテー …

[Stinger5] スマホレイアウトのナビメニューをカスタマイズしてみよう

こんにちは、okutani(@okutani_t)です。Stinger5のスマー …

[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

こんにちは、okutani(@okutani_t)です。AdSenseの広告サイ …

Simplicity,Stinger5で超簡単にアイコンを使う方法

こんにちは、okutani(@okutani_t)です。あ、もう一度言いますね。 …

[Stinger5] 関連記事の見出しを任意の文字に変更する

こんにちは、okutani(@okutani_t)です。 このサイトはWordP …

[Stinger5] デフォルトのツイートボタンからブログ名を含めて投稿する

こんにちは、okutani(@okutani_t)です。Stinger5では初め …

Stinger5で文字色が変更できない!テーマカスタマイザーの削除で解決しました

こんにちは、okutani(@okutani_t)です。先日、Stinger5で …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。