thumbnail 一問一答の一歩

0.ワードプレスの子テーマ作成について

本ぺージは、Wordpressの子テーマ作成にあたって必要なる事項を、以下の順番で記載していく。

  • 1.子テーマ作成の概要
  • 2.自作のPHP,CSSの反映
  • 3.自作のJavascriptの反映
  • おまけ.子テーマのJavaScriptへのJQueryの読み込みについて





1.子テーマ作成の概要

子テーマ作成するのに必要なこと概要は以下の通りです。

    • ・function,phpの作成
    • ・style.cssの作成

私が書いてもよいのですが、既に子テーマの作成について分かりやすく書かれていたものがあったのでそちらを紹介します。

子テーマの作成でファイルが反映されない原因となる確認事項は以下の4点です。

  • ・style.cssはコメントアウトされているか(コメントアウトされているのが正しい)
  • ・style.cssのTemplateのファイル名を書いているか(テーマ名を書いているのは間違い)
  • ・style.cssに書く親テーマのVersionは間違えていないか(意外とこれも作動しない原因になる)
  • ・function.phpに余計な空白や改行が存在していないか(最後に?>で閉じた後は忘れがちなので注意)

3つ目の補足として、親テーマのバージョンの確認方法は以下のようにしてすることができます
編集画面の「外観」→「テーマ」→親テーマにマウスを合わせると「テーマの詳細」が出てくるのでそこをクリックすると出てくる

また、4つ目の補足としてfunction.phpに余計な空白や改行が存在していた場合はwordpress内にログインできなくなることがあります。

2.自作のPHP,CSSの反映

最低限の子テーマが出来たら、phpファイルやCSSファイルを反映していく。

phpファイルの追加については上記のリンク先にかいてあるが、style.css以外のcssファイルや、Javascriptファイルを追加したときにwebページに反映させる方法についての記載がないのでこちらで補足する。

ここでは追加cssファイル名.cssを追加したときに反映させるためにfunction.phpに以下のコードを追記すればよい(追加cssファイル名.cssは自分で作成したファイル名に変更すること)

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
	wp_enqueue_style( '追加cssファイル名', get_stylesheet_directory_uri() . '/追加cssファイル名.css', array('child-style')
);
}
?>

3.自作のJavascriptの反映

javascriptについてはJavaScriptファイル名1.jsを一つだけ入れるにはfunction.phpに以下のコードを入力する。(JavaScriptファイル名1は自分で作成したファイル名に変更する)

wp_enqueue_script(
      'JavaScriptファイル名1',
      get_template_directory_uri() . '/JavaScriptファイル名1.js'
    );

なお、Javascriptファイルが2つ以上ある場合,2番目以降に読み込ませるファイルにはファイルの読み込み順を指定する(ここではJavaScriptファイル名1の直後にJavaScriptファイル名2を読み込む)ために以下のように入力する(JavaScriptファイル名1、JavaScriptファイル名2は自分で作成したファイル名に変更する)

wp_enqueue_script(
      'JavaScriptファイル名2',
      get_template_directory_uri() . '/JavaScriptファイル名2.js'
			array('JavaScriptファイル名1'),
    );





おまけ:子テーマのJavaScriptへJQueryの読み込みをする場合

PHP,CSS,Javascriptの読み込みができれば子テーマのカスタマイズとしては十分だがJavascriptと一緒にJQueryも一緒に読み込ませたい場合はfunction.phpに以下のコードを追記する

// WordPress提供のjquery.jsを読み込まない
    wp_deregister_script('jquery');
    // jQueryの読み込み
    wp_enqueue_script('jquery', '<https://code.jquery.com/jquery-3.6.0.min.js>');
    //初めに読込むJSのコードに後ろにarray('jquery'),を追記
    wp_enqueue_script(
      'JavaScriptファイル名1',
      get_template_directory_uri() . '/JavaScriptファイル名1.js',
      array('jquery'),
    );

なお、この文章だけ書き込んでもJQueryが繁栄されていない場合は以下の確認点を確認してみると良い

  • ・そもそもJqueryが入っているのかを「開発者ツール」内でCtrl+Fを押し、「Jquery」文字列検索することで確認
  • ・Javascriptファイル内の$ を jQuery;と書き換えて変数の問題を回避
  • ・キャッシュを更新を行う
問題ページに戻る