WordPressテーマ「GUSH」で子テーマを作成する方法 ~備忘録~

WordPress, サンプルサイト, テーマ, ホームページを作ってみよう, 制作

前回あんだけ言っといてw

早速制作記事書くのか?と思ったのですが、制作については記していかないと忘れてしまうので…

決して賢い頭ではないので…書きますよ?w

今回はWordPressのテーマの子テーマ作成方法を記しておきます。

というのも、ちょっと今回WordPressのテーマ「GUSH」を使いたいのです。

え??今更??

すみません、基本がなってないものでして…www

様々なバージョンが公開されているようですが、

  • シンプルなので使いやすい
  • 自由にカスタマイズができる
  • レスポンシブ対応
  • 無料
  • SEOに強い

これが「GUSHシリーズ」の特徴。

自分で子テーマを作ってカスタマイズしていく方法をどうしてもやってみたくて。

早速「GUSH」を使って子テーマ作ってみようと思います。


1.WordPressでテーマ「GUSH」をインストールする。

まずはここからダウンロードします。☟

圧倒的にカスタマイズしやすいシンプルなWordPress無料レスポンシブテーマ

WordPressにインストールしましょう。

ダッシュボードから

外観 → テーマ → 新規追加

で、インストールできます。

インストールしたら有効化しておきましょう。

 

2.FTPソフトで子テーマのフォルダを作る。

FTPソフトを起動し、ご自分のホストに接続します。

私は今回「サンプルサイト7」で使いたくて、URLを「7.kanema09.com」にしてます。

ので、その「7」フォルダ内にある「wp-content」の中の「themes」に子テーマのフォルダを作ります。

子テーマのフォルダの名前は何でもよさそうですが私はわかりやすいように「gush-child」としました。

ここでの注意は、親テーマと同じフォルダ内に作るということです。

 

3.テキストエディタでstyle.cssを作る。

テキストエディタを起動してstyle.cssを作ります。

コードは次の通り。

/*
Theme Name: gush-child
Template: gush
*/

/*子テーマ用のスタイルを以下に記述 */

これを、先ほど作った「gush-child」にアップロードします。

 

4.テキストエディタでfunction.phpを作る。

次にテキストディタでfunction.phpを作っていきます。

コードは次の通り。

<?php
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’)
);
}
?>

こちらも、「gush-child」にアップロードします。

 

5.子テーマを有効化してカスタマイズを始める。

先ほどまでの作業で、テーマに「子テーマ」が表示されるようになります。

後は有効化してカスタマイズを始めましょう。

有効化の仕方は親テーマと全く同じ。

外観 → テーマ → 子テーマを有効化

 


 

意外と簡単でした(∩´∀`)∩

 

今回参考にさせていただいたサイト様をご紹介しておきます。

とても詳しく書いてあるので、ここの記事で分かりづらかったときは参考にしてください。

カスタマイズする時知っておきたいWordPressテーマの基礎知識

子テーマを作成して、WordPressのテーマを部分的にカスタマイズする方法