STINGER7　子テーマを使うのに最初にすること　色々

2016/04/20 2016/06/23

親テーマと子テーマは分かったけど　どう使えばいいの？　って実は一番最初に悩みました　笑　　そこをあえて記事にして間が開いた穴埋めの第一歩へ　笑

Contents　(目次)

1 子テーマには何も入ってない
2 テーマのインストールは親テーマの有効化→子テーマの有効化で
3 子テーマの「functions.php」へ追記　と「style.css」を少し直す
- 3.1 １　子テーマ　Functions.phpに追記する
- 3.2 ２　子テーマ　style.cssの中身を一部削除

子テーマには何も入ってない

STINGER７には最初から子テーマが用意されています。
使い始めて１ヶ月経過しましたが　今のところ親テーマのアップデート(更新)はないし　特に問題なく使っては居ますが　子テーマの存在　使い方を知ってからというもの　子テーマでのファイル更新やら改造やらしか行っていないので　万が一でも更新があった場合でも表示されているテーマ　WEBの形が崩れることは無いと思ってますが。

親テーマと子テーマの関係についてはこちらで書かせていただいてますので参考になさってくださいませ。　親テーマはベースで表現を子テーマでする　ということですね。

テーマの使い分け　親　と　子

テーマのインストールは親テーマの有効化→子テーマの有効化で

テーマのインストール方法は様々な方が書いてらっしゃるので割愛しますが　STINGER7の場合に限らず子テーマを使う場合　親テーマを最初に有効化して子テーマをインストールして有効化　という順序がよいと思います。　要は子テーマには何もWEBページの形を表示させるプログラムは何も入っていないわけで　子テーマの役割はベースとなる親テーマの上書きなので子テーマにはこれから自分で必要且つ改造して上書きしていくプログラムを作っていくわけですのでね。　初心者だと　あれ？　ってことでパニクったりしちゃうとグチャグチャになっちゃいますからね。　順序良く行きましょう～

そうそう　最初に親テーマをインストールして有効化したらWordPressの管理画面の左上　家マークがあるところにカーソル合わせると「サイトを表示」って出るのでクリックすると　テーマの有効化が問題なければサイトが表示されますのでね。　Ctrl+クリックだと別タグで表示してWordPressの管理画面から移動せず残るので確認しやすいかもね。

子テーマの「functions.php」へ追記　と「style.css」を少し直す

子テーマにはどんなファイルが入っているか？　「style.css」と「functions.php」しか入ってません。　しかもその中身は　凄く短い数行だけ　笑

先ず色々といじくる前に子テーマを使う前提で準備をしておくと後が楽
私自身が初心者なので何を最初にしたらいいのか分からなかったから　先ず最初はこれ　ってのを書いておきますね。

１　子テーマ　Functions.phpに追記する

Functions.phpの中身は最初はこんな感じ

<?php
// 直接アクセスを禁止
if ( !defined( 'ABSPATH' ) ) {
exit;
}

if (locate_template('/st-kanri.php') !== '') {
require_once locate_template('/st-kanri.php');
}

if (locate_template('/st-theme-customization.php') !== '') {
require_once locate_template('/st-theme-customization.php');
}

<?php

// 直接アクセスを禁止

if ( !defined( 'ABSPATH' ) ) {

exit;

}

if (locate_template('/st-kanri.php') !== '') {

require_once locate_template('/st-kanri.php');

}

if (locate_template('/st-theme-customization.php') !== '') {

require_once locate_template('/st-theme-customization.php');

}

ここに以下の文章を追加する　参照WEB→WordPress　codex　日本語版

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'child-style',

get_stylesheet_directory_uri() . '/style.css',

array('parent-style')

);

}

参照WEB内には２つ書かれていて上記に紹介したものよりも短いバージョンがある。　まぁこれは自動的に読み込まれない場合には先に紹介したものを使ってくれ　ということでSTINGER７を使う分には以下の短いもので良いらしい(以下)

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

とはいえ　自分が使っているのは最初に紹介した方なので一押しにしておく　笑
どっちもでいい　ということになるかな　笑

２　子テーマ　style.cssの中身を一部削除

style.cssの中身は最初はこんな感じになっている

/*
Theme Name: stinger7child
Template: stinger7
*/
@import url('../stinger7/style.css');

Theme Name: stinger7child

Template: stinger7

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

で　この一番下の一文

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

1	@import url('../stinger7/style.css');

っていう形式がｾｷｭﾘﾃｨｰとか色んな面でWordPress自体から推奨されてないそうなのでこの一文を削除する。　ここまで作業を説明したので説明が抜けているのだけど　最初にfunctions.php追記したものはこの一文と同じ役割をするものなので　この一文を削除をしても問題ない。
この一文は親テーマと子テーマを同期させて親テーマを指定しているものなので必要なものなのだけどプログラムの書き方が推奨されていないということで　代替案でfunctions.phpに追記して同じ働き　認識をさせた　ってことかね。

以上　先ず最初にすること　でした。
ここまでやってみたらサイトを確認してみてくださいませ。

シェアされると非常に嬉しいです　ありがとうございます！