wordpress子テーマの作り方<さくらインターネット>

こんにちは、ピヨすけです!

私ごとで恐縮ですが、wordpressを使ってブログを運営し始めてはや4ヶ月が経ちました。(でもまだ20記事にも達していない涙)

wordpress完全ど素人の僕が色々調べながら必死に運営してきました当ブログ。

記事を投稿することにもだんだん慣れてきて、ど素人のくせに「こんな機能つけたいな」とか「もっとデザインこんな風にしたいな」なんて色気づいてきてしまいました(-_-)

とゆーことで、

wordpressの子テーマを作りたいと思います!(内心ビビってます)

まあすでに多くの先輩方が親切丁寧に説明してくれているので、今更僕が記事にする理由はないんですが(^^;)

ど素人なりに初心者にもわかりやすい視点で手順を説明できればと思います。

あと自分に向けての備忘録として笑

子テーマ作成手順

では早速手順を説明していきたいと思いますが、

その前になぜwordpressをカスタマイズするのに子テーマを作らないといけないのか?

もともとある親テーマをカスタマイズしたら、簡単にできるんじゃないの?と考える人もいるかと思います。
まさに僕がそうでした笑

ですが親テーマを直接書き換えてしまうと、テーマのアップデートがきたときにカスタマイズしたものが全部上書きされてしまうんです。

試行錯誤して作ったものが一瞬で元に戻ってしまいます涙

そしてまたカスタマイズして、アップデート………。

こんな無駄なイタチごっこありませんよね笑

そこで新たにフォルダを分けて子テーマを作ることによって、上書きされないで変更内容を保存しましょうってことなんです。

親テーマがアップデートされても、子テーマの内容が優先して反映されるので安心してカスタマイズしていくことができます( ^∀^)

ちなみに今回は、私が利用しているさくらインターネットを使って解説していきたいと思います。

ですが他のレンタルサーバー会社でも基本は同じなので、概要はつかめるかと思います。

今日は「style.css」というサイトのデザインを装飾するためのコードを記述するためのファイルを作っていきます。

手順紹介

簡単に流れをまとめると、

 

1. レンタルサーバーのコントロールパネルにログインし、子テーマのフォルダを作成す
る。

2. 作成したフォルダの中にstyle.cssファイルを作成する。

3. 新しく作った子テーマを有効化する。

 

ではまず始めに、今自分が使用しているワードプレステーマを確認します。

僕の場合は「lightning」というテーマを使用しています。各自使用しているテーマ名を覚えておきましょう。

次にレンタルサーバーにログインします。

さくらインターネットの場合は、

契約情報 → 契約サービスの確認 → サーバ設定 と進んで「サーバコントロールパネル」にログインします。

運用に便利なツールの中にある「ファイルマネージャー」をクリック

「wp-content」というフォルダをクリック

「themes」というフォルダをクリックして、表示アドレスへの操作からフォルダ作成を選択します。

ここでフォルダ名をつけますが、子テーマを作るので「テーマ名+child」としておけばわかりやすいでしょう。(僕の場合は、lightning-childとしました。)

今作ったフォルダを開いて、表示アドレスへの操作から今度は新規ファイルを作成します。

このファイルの中に、

/*
Theme Name: lightning-child
Template: lightning
*/
 
@import url('../lightning/style.css');

 

このようなコードを記入してください。

コピペしてもらって構いませんが、

Theme Nameには先ほど子テーマを作ったときに決めた名前

Templateとurlのカッコ内のテンプレート名は自分が使用しているものに変更してください。

そして、下にある文字コードを「UTF-8」に変更します。

「保存」をクリックして、ファイル名を「style.css」にします。

ここまでできたらwordpressにログインして、

外観 → テーマ ここに子テーマが追加されているはずなので、「有効化」をクリックします。

テーマを表示させて、自分のサイトと同じものが表示されればOKです。

表示されない場合は、style.cssのコードに間違いがあるかもしれません。

もう一度確認してみましょう。

 

これで「style.css」ファイルを作ることができました( ・∇・)

次回は子テーマを作ってサイトをカスタマイズするためにもう一つ必要な、

functions.phpというファイルを作っていきたいと思います♪

 

Follow me!

wordpress子テーマの作り方<さくらインターネット>” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です