WordPressの勉強(3)~子テーマをつくる~

2014-03-20

20140310-0

練習のためのローカル環境をXAMPPで作成できましたので、やっと本来の目的の子テーマをつくります。

関連
WordPressの勉強~ただの決意表明~
WordPressの勉強(1)~ローカル環境を複数つくるためXAMPPのインストール~
WordPressの勉強(2)~WordPressのローカル環境を複数つくる~

今、私が使用しているテーマはSTINGER3です。これはSEOに強いということで多数の方が使用していますが、私が選んだ理由は以下の4つです。

①作成した方が日本人の@ENJILOGさんで、説明が日本語でわかりやすい。
②カスタマイズを幾らしても構わない。
③多くの方が使っていらっしゃるので検索するとカスタマイズ方法が豊富にある。
④もともとのテンプレートが私の作成したいものに近い。

多くの皆さんが使っていらっしゃるだけあって、とても使いやすいです。

親テーマをインストールする

私はSTINGER3を使用するので、それで説明します。ほかのテーマでも同様です。

まず親テーマであるSTINGER3を公式サイトからダウンロードします。
STINGER3ダウンロードページ

これをWordPressにインストールします。

WordPressのダッシュボードの〔外観〕→〔テーマ〕を選び上の〔新規追加〕をクリックします。
20140313-1

上の〔アップロード〕をクリックします。
20140313-2

〔ファイルを選択〕をクリックし、先ほど公式サイトからダウンロードしたSTINGER3のzipファイルを選び、〔いますぐインストール〕をクリックします。
20140313-3

インストールが完了しましたと出たらOKです。(別に有効化しなくても大丈夫です)

子テーマのフォルダーをつくる

フォルダー名は何でも構いませんが、後で何の子テーマだとわかるほうが便利だと思います。
私は「stinger3childmoorver20131217」としました。

このフォルダーを親テーマのSTINGER3と同じ階層に入れます。

今回はXAMPPで作成したローカルですので、コンピューター内の〔xampp〕→〔htdocs〕→〔wordpress(番号)〕→〔wp-content〕→〔themes〕の中に入れました。
20140313-4

※実際の公開サイトの場合は、ftttp等でサーバを開き、親テーマと同じ階層に入れてください。

この段階ではダッシュボードの〔テーマ〕のところを見ると以下のようになっています。

20140313-5

子テーマ内にスタイルシートをつくる

子テーマのフォルダーの中に【style.css】を作成します。
必須項目は下記の2点です。

/*
Theme Name: stinger3childmoorver20131217
Template: stinger3ver20131217
*/

〔Theme Name:〕には子テーマのフォルダーの名前を、〔Template:〕には親テーマのフォルダーの名前を入れます。
※追記
親テーマのフォルダーの名前は大文字、小文字忠実に入れてください。テーマ名が大文字から始まっていてもフォルダー名が小文字の場合、小文字で入力しないと認識してくれません。

あとは自由記載ですが、何もわからない場合は取りあえず親テーマをコピーして、後から変更していけばいいと思います。

私は、既に公開している当ブログで親テーマを思いっきり変更していたので、それをそのままコピーしました。

作成した【style.css】を子テーマのフォルダーに入れると下記のように認識されますので〔有効化〕をクリックして反映します。

20140313-6

あとは、自由にそのテーマにある【header.php】【single.php】等、触りたいところを子テーマに追加していけば大丈夫、なはずです。

(・ー・;).。oO(さて、これで子テーマができたので、いろいろ触って、仕事ホームページをできるだけ早く元に戻したいと思います)

参考サイト
テーマの作成 – WordPress Codex 日本語版
【重要】WordPressテンプレートのカスタマイズ前に子テーマをつくる方法CSS篇|ThePresentNote

 

このBlogはXserverを使用しています



スポンサーリンク

PC, WordPress

Posted by moor