超絶初心者(自分)のためのWordPressのテーマ作成-2

プログラミング備忘録

今回はどのようにCSSとJSファイルを適応させるかを書いていきます.

まずテーマのフォルダーの中に、cssフォルダーとjsフォルダーを作ります.

その中に、style.cssファイルとmain.jsファイルを作っていきます.

*ここでのファイルの名前は自由でOK.

その後テーマのフォルダーにfunctions.phpファイルを作り、以下を記述していく.

<?php

function FUNCTIONS_NAME(){

    wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/sytle.css', array(), '1.0.0', 'all');
    wp_enqueue_script('customjs', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true);
}

add_action('wp_enqueue_scripts', 'my_theme_script_enqueue');

*FUNCTIONS_NAMEはテーマ内や他のプラグインなどで使われていないユニークなものにする。複数の同じ名前の関数があると呼び出し時にプログラムをブレークしてしまう可能性がある.

*このファイルの名前はfunctions.phpではないとダメなので気をつける.

*CSSとJSファイルの名前は先ほど作ったファイル名を使う.

functions.phpができたら、cssを反映させるために、header.phpに以下を記述.

 <?php wp_head();?>

挿入後はこんな感じになる.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my_theme site</title>
    <?php wp_head();?>
  </head>
  <body>

同様にJSファイル反映用のコードをfooter.phpに追加する.

<?php wp_footer();?>

記述後

<footer>
  <p>This is footer</p>
</footer>
<?php wp_footer();?>
</body>
</html>

これで先ほど作ったcssファイルとjsファイルが反映されるようになる.

今回はここまで、次はカスタムメニューの作り方です.

超絶初心者(自分)のためのWordPressのテーマ作成-3

Posted by cabc-1234