WordPress初心者でも安心してCSSを編集できる子テーマ作成法
wordpress
WordPressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃらないでしょうか？子テーマを作成すれば親テーマを変更せず、レイアウトを変更できるので大丈夫です。初心者でも安心して子テーマを作成する方法をご紹介します。
このようなメリットがあります。
- 親テーマを編集しないので元のテーマに戻すことができる。
- テーマのアップデートの時に、カスタムした部分が影響を受けない
子テーマ作成に必要なもの
子テーマに必要なディレクトリ、ファイル
子テーマのディレクトリ
style.css
functions.php
子テーマのディレクトリ
子テーマのディレクトリ名はreeds-childにします。「親テーマ名ーchild」としました。
子テーマのstyle.css
|
1 2 3 4 |
/* Theme Name: Reeds child Template: reeds */ |
Theme Name:は子テーマの名称を入力します。Template:は親テーマのディレクトリを入力します。ただし、大文字と小文字は区別されますので、間違いがないように入力します。
子テーマのfunctions.php
|
1 2 3 4 5 |
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } |
親テーマのCSSが子テーマに反映されるようになります。(子テーマのCSSに手を加えることで該当部分が親テーマのCSSより優先されます。)
親テーマが子テーマよりも後に読み込まれている場合
header.phpファイルを見ると親テーマの読み込みが wp_head() の内部で行っている場合がありますが、その時は、子テーマが反映されない時があります。今回使用しているテーマもその内の一つです。その場合の対応ですが、親テーマのheader.phpに記載してあるwp_head()の下の行に、子テーマの呼び出しコードである下のコードを入力して下さい。
|
1 |
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime(get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen" /> |
※当ブログを参考にさせていただきました。
子テーマをアップロードする
子テーマのディレクトリとstyle.cssとfunctions.phpを「wordpress/wp-content/themes」のテーマディレクトリにアップロードして、子テーマ作成の完了です。子テーマを利用してテーマのレイアウトを変更できるようになりました。有効化して編集を行うことができます。
テーマをカスタマイズする場合は、自己責任でバックアップを取ってから行うようにして下さい。
実際にカスタマイズした時の記事です。
バイラルメディア風facebookボタンを設置した時の解説をしています。よかったらご覧下さい。
この記事が気に入ったらいいね！しようというバイラルメディア風オリジナルSNSボタンの設置方法について、動画で解説しました。
前回は、プラグインを使って設置した のですが、簡単に設置できてよかったのですが、固定ページにも反映されたので、記事のみにバイラルメディア風facebookボタンを...
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterでshare lifeをフォローしよう！
Follow share life