WordPressの子テーマをつくるところまで

こんにちは、Wordpressのテーマはtwentyfourteenを利用しているばいろんです。

このtwentyfourteenというテーマは素晴らしいものです。

モバイル用の表示も勝手にしてくれるのです。

しかし、PC用の表示を見ると…

すごく左に寄ってる

 

hidariyori

右の空白いらなくね?

ということで右の空白の消し方の探究者として生きることにします。

唐突ですが、どうやらWordpressのテーマには子テーマというものを設定することができるらしい。

テーマはtwentyfouteenとかそのあたりのものだと思うけど、子テーマって?

子テーマとは

  • Webページの中の自分が使っているテーマの気に食わないところ(余白とかフォント)を修正するときに利用
  • 修正したいところだけピンポイントで記述するだけでいい(全部記述する必要なし)
  • テーマの更新をかけても変更箇所を残すことができる

つまるところ自分のページのいやなところをピンポイントで修正する手段ということらしい

また、親テーマ(僕の場合はtwentyfourteen)の中身を編集するってのも手段としてはアリですが、更新したら修正内容がすべて吹っ飛びますよね。親テーマの更新は子テーマには影響はないのでこちらを使えばよさそうです。

 

子テーマのつくりかた

WordPressのディレクトリ

/wp-content/themes/twentyfourteen(自分が使うテーマ)

と同じ階層にtwentyfourteen_childというディレクトリを作ります。

ディレクトリ名は「テーマ名_child」という記述がよく使われるらしいです。どのテーマの子テーマかはcssの内容を見て判別するのでわかりやすければ何でもいいです。

/wp-content/themes/twentyfourteen

/twentyfourteen_child

ディレクトリの構成はこんな感じ

この/twentyfourteen_childの中にfunctions.phpとstyle.cssというファイルを作成します。

style.cssの中身はこんな感じ(最低これだけ必要)

/*
 Theme Name:   twentyfourteen_child
 Template:     twentyfourteen
*/

 

functions.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' );

}

 

以前は@import url(“../●●●/style.css”);というコードを書いていたそうですが、この方法だと読み込み速度の低下につながるみたいです。

自前のPCで作ったファイルをFTPでWebページを動かしているサーバーに送ってやります。

この後Wordpressのダッシュボードのテーマから子テーマを有効化して終了です。

 

ちなみにFTPのクライアントはWinSCPを使っています(以前はffftpを使っていましたがどちらでも大丈夫です。なんならFileZillaでもok)

 

何とか左寄せを直したい。

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top