「初心者でもできる」STINGERワードプレス子テーマの作り方

ワードプレス(Wordpress)を使うときに「小テーマ」を作ったほうがいいという話を聞きますよね。

ワードプレスに詳しくないと子テーマ?となってしまいます。

子テーマを作るメリットとSTINGERを使った子テーマの作り方をまとめました。

子テーマを作るといっても初心者には難しいんです。

私も何度も試してようやく設定することができました。

ワードプレスに詳しくない私ができた子テーマの設定方法を、同じ初心者の方にもわかるように簡単にまとめています。

目次

子テーマとは

子テーマとは、ワードプレスで使っているテーマのオプションのようなものです。

子テーマを作るメリット

簡単に言うと元々のテーマ(ここでは、親テーマとします。)のバージョンアップ等のアップデートがあった時に、子テーマが活躍します。

親テーマがアップデートされるとテーマの設定が初期設定に戻ってしまいます。

初期設定に戻ってしまうということは、これまでしてきたテーマの変更が無駄になるということです。

アップデートしたあとに一から修正するのは大変ですよね。

もし、子テーマを作って子テーマに修正をしていれば、親テーマがアップデートされても以前の修正が初期化されないんです。

親テーマがアップデートされても修正をしなくても済むことが子テーマを作るメリットです。

子テーマの作り方(STINGER7)

子テーマの作りかたを「STINGER7」を例に説明します。

子テーマを作るのは、基本的には、サイトを作り始めるときです。

サイトがある程度できている状態で子テーマを作ってもそれ以前に変更している箇所が反映されません。

子テーマのファイルを作る

stinger7chi

デスクトップにフォルダを作りましょう。

フォルダの名前を「stinger7-child」としてください。

ファイルを作る

ファイル

作るファイルは2つです。functions.phpとstyle.cssです。

親ファイルで変更する予定があれば、その分のファイルが必要です。

簡単に子テーマを作ることを前提とすると、最低限この2つあれば子テーマを作成できます。

ファイルの記入方法(functions.php)

ワードパットかメモ帳を開きます。

<?php から ?> までをコピーして貼り付けます。

functions.phpと名前を付けて保存してください。

今の段階では、functions.php.txtとなっていても問題ありません。

 

fanctionphp

<コード>

<?php
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と名前を付けて保存します。

今の段階では、style.css.txtとなっていても問題ありません。

stylecss

/*
Theme Name: STINGER7Child
Template: stinger7
*/

作成したファイルをフォルダにまとめる

先ほど作成した2種類のファイル(functions.phpとstyle.css)をフォルダ(stinger7-child)に移動します。

stinger7子テーマをアップロード

作成した子テーマ(stinger7-child)をアップロードします。

方法は2種類あります。

ワードプレスのテーマの追加でアップロードをする方法とFFFTPを使う方法です。

今回はFFFTPを使ってアップロードします。

アップする場所は以下です。

/ドメイン名/public_html/tsumemizumushi/wp-content/themes

FF

 

stinger7子テーマファイル修正

先ほどファイル名の後ろに.txtがついていたファイルがあれば、名前を変更して削除しておきます。

削除して以下のようになれば終了です。

 

名前変更

 

stinger7子テーマ有効化

ワードプレスの外観を開くとsinger7childが表示されています。

singer7childを有効化します。

有効化されたら、正確に反映されているかホームページを確認します。

反映されていれば、singer7の子テーマ作成は無事終了です。

singer7childが正確に反映されていない場合

私も最初正確に反映されていないことがありました。

要因1

ヘッダー画像が表示されない。

これは、singer7childの問題ではないんです。

なぜかヘッダー画像の登録ができていない状況になっているので、

外観ーカスタマイズーヘッダー画像 でヘッダーに表示したい画像を選びましょう。

これで解決です。

要因2

ホームページに表示されたフォントが崩れている。

これは、functions.phpの表記が間違っている可能性があります。

内容を確認しましょう。

まとめ

ワードプレスで、STINGER子テーマを作るのも初心者には一苦労です。

インターネットを見ると専門的なことが書いてあるサイトを見かけます。

詳しい方には分かるかもしれませんが、初心者の私には、内容を理解することも難しいです。

今回、一番シンプルな方法をまとめましたが、この方法で子テーマを作成することができるはずです。

テーマについても、singer7を例に作成しましたが、他のテーマでも応用ができます。