前回、テーマファイルを有効化させてトップページを開きました。しかし、まだCSS,JavaScript,画像ファイルが読み込まれていなかったので、それらのファイルが読み込まれるようにfront-page.phpファイルを変更して行きます。VScodeでfront-page.phpファイルを開きましょう。
何故、CSS,JavaScript,画像ファイルが読み込まれなくなっってしまったのか？と言うと、WordPressのテーマファイルにした際に、ファイルのパスが変わってしまったからです。そこで、まずCSSファイルが読み込まれるように、front-page.phpファイル内にある
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">と言う部分を、
<link rel="stylesheet" href="<?php echo get_theme_file_uri(); ?>/css/reset.css">
<link rel="stylesheet" href="<?php echo get_theme_file_uri(); ?>/css/styles.css">に変更してみましょう。するとCSSファイルが読み込まれるようになったと思います。
PHPファイル内では、基本的にHTMLコードをそのまま記述できます。ファイル内でPHPのコードを書く場合は、以下のように<?php ?>に囲った中に記述するので、覚えておきましょう。
<?php /* ここにphpのコードを記述 */ ?>また、以下のechoはphpで文字を出力するための機能で、get_theme_file_uri();は現在有効化しているテーマファイルまでのパスを呼び出すことができるWordPressの関数です。
<?php echo get_theme_file_uri(); ?>これらの関数は今後、何度も使うので全て覚えておきましょう。
この状態だとまだ、ファビコン、JavaScript、画像ファイルが読み込まれていないので、それらのファイルパスも変更して行きます。まず、先ほどと同じようにheadタグ内の
<link rel="icon" href="img/favicon.png">を、
<link rel="icon" href="<?= get_theme_file_uri(); ?>/img/favicon.png">と変更しましょう。これでファビコンが表示されるようになると思います。
次にmainの閉じタグ直前にある、
<script src="js/front-page.js"></script>と、bodyの閉じタグ直前にある、
<script src="js/main.js"></script>と言う部分をそれぞれ、
<script src="<?= get_theme_file_uri(); ?>/js/front-page.js"></script><script src="<?= get_theme_file_uri(); ?>/js/main.js"></script>に変更します。これでJavaScriptが読み込まれるようになったと思います。
最後に、front-page.php内にある全てのimgタグを、
<img src="<?= get_theme_file_uri(); ?>/img/ファイル名" alt="">に変更します。こう言う時、VScodeの検索機能を使って変更し忘れがないかを、確認しながら行うと便利です。
これでサイトを表示してみると、本家のサイトと同じ見た目のTOPページになっていると思います。
しかし、headerのロゴ画像をクリックしてみて下さい。すると、ファイルパスとファイル名が変わっているため、TOPページにリダイレクトされず、エラーが出てしまいます。
front-page.php内の、
<h1><a href="index.html"><img src="<?= get_theme_file_uri(); ?>/img/logo.png" alt=""><span>和みグループ</span></a></h1>の部分を、
<h1><a href="<?= home_url(); ?>"><img src="<?= get_theme_file_uri(); ?>/img/logo.png" alt=""><span>和みグループ</span></a></h1>と変更しましょう。
<?= home_url(); ?>とは、サイトのトップページを取得するWordPressの関数です。これで、headerのロゴをクリックしても、エラーが出ずにトップへリダイレクトされるようになったと思います。
これでTOPページの見た目はほぼ完成したので、次回からは下層ページを作るための準備として、ファイルの共通化を行なっていきたいと思います。
