今回は、wordpressの子テーマの作り方についてお話したいと思います。

wordpressをカスタマイズするためには、プラグインを導入すればできることは「ワードプレス(wordpress)をカスタマイズして使い方を覚えよう!!」でお話ししましたが、それだけでは、対応しきれない場合が出てきます。

たとえば、ホームページの一番下のフッター部に「Proudly powered by wordpress」という表示がありますね。これを無くすか、自身のコピーライト(著作権)を表示したいとは思いませんか。

「Copyright © テストサイト All Rights Reserved.」のようにです。

そこで必要になるのが「テーマの編集」なんです。それでは、早速始めましょう。

wordpressの親テーマの設定方法をおさらいしましょう。

初心者必見!!ワードプレス(WordPress)でホームページを簡単に作成する方法Ⅳ「HP編」でも紹介していますので、参考にしてくださいね。

wordpressの親テーマ設定方法

どれを使用するか決まっていれば簡単に設定できます。

今回は、私が使用してます「Twenty Twelve」を設定してみましょう。

設定方法は、これだけです。

親テーマを使用するとどんなメリットがあるの?

自身で制作しようとするとプログラムの知識が必要になり、習得するまでに時間がかかります。また、習得出来たとしても、制作する時間も必要になってきます。

既存のものを使用すると、それぞれ開発者が制作されていますので、あらゆる種類が存在し、あとはサイトにあったものを選ぶだけで済むんです。

特に、wordpressに登録されているものはすべて無料で、wordpress自身が審査していますので安心なんです。

なんといっても、いちばんのメリットは、一瞬で設定することが出来る事です。使用してみて使いにくければ、すぐに他に変更することが出来ますのでとっても便利なんです。

wordpressの親テーマって何?

wordpressの親テーマって何なんでしょうか。一度、「Twenty Twelve」をみてみましょう。

「外観」の「テーマの編集」をクリックしますと、「Twenty Twelve: スタイルシート (style.css)」が表示されましたね。

右には、cssやphpで書かれた言語が表示されています。これらが、親テーマの本体なんです。プログラム言語の一種なんです。

ちなみに、cssは、カスケーディング・スタイル・シートの略で、デザインを設定できる言語なんです。HTMLと組み合わせて使用します。

PHPは、「PHP: Hypertext Preprocessor」の略で、処理はWebサーバーで行います。

wordpressの子テーマって何?

子テーマは、その名の通り親の子テーマなんです。たとえば、子テーマは、「Twenty Twelve-child」などという名前で登録します。このように、子テーマを作ることによって、親の内容を変更せず、子テーマで変更します。

では、なぜ、このような方法をとるのでしょうか。

なぜwordpressに子テーマが必要なの?

親テーマが決まればそれでいいんじゃないのって思いますよね。実際、親テーマを編集しても正常にカスタマイズできます。

しかし、そのまま編集し続けていますと、ある日突然、元に戻ってしまいます。今まで苦労して作り上げてきたサイトがダメになってしまいます。

なぜ、そうなるのでしょうか。それは、wordpressがバージョンアップしたからなんです。

wordpressがバージョンアップされますと、親テーマの編集したところは、すべて元に戻ってしまうのです。

ですので、編集を行う場合は、子テーマを作成し、編集する必要があるんです。

テーマを読み込む順番は、親テーマを読み込んでから子テーマを読み込みます。wordpressのバージョンアップは、親テーマしかされませんので、子テーマで編集した内容は、そのままなんです。

wordpressのテーマの編集は、子テーマですることが必須になりますので、ぜひ、覚えてくださいね。

wordpressの子テーマの作り方!

当サイトは、ロリポップサーバーを使用していますので、それに沿って説明していきますね。

ロリポップにログインできましたら、「サーバーの管理・設定」から「ロリポップFTP」と進んで下さい。

※まだ、ロリポップサーバーを登録されていない方は、先に登録する必要かあります。

まだの方は、当サイトの「初心者必見!!ホームページをワードプレス(WordPress)で簡単に作成する方法Ⅰ「準備編」」と「初心者必見!!ワードプレス(WordPress)でホームページを簡単に作成する方法Ⅱ「準備編2」」を参考にしてくださいね。

それでは、先に進めたいと思います。わたしのテストサイトで説明していきます。

「test-site」→wp-content→themes→新規フォルダ作成」というボタンをクリックします。

フォルダー名を「Twenty-Twelve-Child」と名づけます。フォルダ名を決めたら「保存」をクリックします。

「themes」フォルダー内に「Twenty-Twelve-Child」が追加されている事を確認します。

「Twenty-Twelve-Child」フォルダーをクリックし、「新規ファイルを作成」をクリックします。

新規ファイル名に「style.css」と入力します。

下記の赤色のデーターをコピーし、貼り付けて保存してください。

/*
Theme Name: twentytwelve-Child
Template: twentytwelve
*/

@import url(‘../twentytwelve/style.css’);

次に、サイトの「外観」、「テーマ」を開けると「Twenty-Twelve-Child」ができていますので、「有効化」をクリックしてください。そうしますと、有効化されます。

「テーマの編集」をクリックしますと子テーマのスタイルシート(style.css)が表示されているはずです。

スタイルシート(style.css)に追加・変更する場合は、ここで編集してください。

他のテーマファイル作成の注意点

他の子テーマファイルも必要に応じて作成してくださいね。

テーマヘッダー (header.php)・テーマフッター (footer.php)・サイドバー (sidebar.php)は、事前に作成しておいた方が便利です。

この場合は、それぞれの「選択したファイル内容」をそのままコピーし、貼り付けてください。

それ以外のテーマファイルの中で、

「テーマのための関数 (functions.php)」だけは、できれば、子テーマを作成しない方がいいです。コピーし、貼り付けるとサイト自体表示されなくなってしまう場合があります。

どうしても編集したい場合は、子テーマに何も書かずに登録して、そこに追加してください。ただし、同じ内容の記述は、絶対にしないでください。あくまでも、追加するだけです。

wordpressの子テーマをカスタマイズして見よう!

あなたのサイトをカスタマイズしてみてくださいね。

ホームページの一番下のフッター部に「Proudly powered by wordpress」という表示を、「Copyright © テストサイト All Rights Reserved.」に変更してみましょう。

この場合は、テーマフッター (footer.php)の子テーマが、必要になってきます。作成出来てない場合は、先に作成してくださいね。

twentytwelve-Child: テーマフッター (footer.php)の赤色の部分を青色部分に置き換えてください。

<div class=”site-info”>
<?php do_action( ‘twentytwelve_credits’ ); ?>
<?php
if ( function_exists( ‘the_privacy_policy_link’ ) ) {
the_privacy_policy_link( ”, ‘<span role=”separator” aria-hidden=”true”></span>’ );
}
?>
<a href=”<?php echo esc_url( __( ‘https://wordpress.org/’, ‘twentytwelve’ ) ); ?>” class=”imprint” title=”<?php esc_attr_e( ‘Semantic Personal Publishing Platform’, ‘twentytwelve’ ); ?>”>
<?php printf( __( ‘Proudly powered by %s’, ‘twentytwelve’ ), ‘wordpress’ ); ?>
</a>
</div><!– .site-info –>

 

Copyright © <a href=”<?php echo home_url( ‘/’ ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?> </a>All Rights Reserved.

 

置き換えると、このように変更されます。

Proudly powered by wordpress

　　　　↓↓↓↓↓↓↓↓↓↓↓↓

Copyright © テストサイト All Rights Reserved

 

テストサイトのところは、あなたのサイト名になっていれば成功です。

wordpressの子テーマを編集することにより、簡単にカスタマイズできますので、ぜひ、覚えてくださいね。