ファイルのパスを変更
index.php
WordPressではCSSや画像のパス、ハイパーリンクなどは絶対パスでないといけません。
相対パスの状態で見ると次の画像のようにCSSや画像などのリンクが切れているのはわかります。
まずは、CSSと画像の相対パスを絶対パスに直すコードを加えましょう。
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet"> <img src="<?php echo get_template_directory_uri(); ?>/images/logo.gif" alt="">
<?php echo get_template_directory_uri(); ?>次にリンクを修正しましょう。
<a href="<?php echo home_url(); ?>/index.html">ホーム</a>
<?php echo home_url(); ?>※PHPコードとファイル名の間には「/」が必要ですので忘れないように入力しましょう。 これを忘れるとパスがおかしくなります。
WordPressの機能を十全に活かすためのコード記述
index.php
こちらのコードは必須です。
WordPressの基本機能やプラグイン機能が使えるようになります。
例えば、画面上部に管理バーが表示されるなど…
「</head>」の前に
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet"> <title>フルーツアンドフラワーショップ タブロ</title> <?php wp_head(); ?> </head> <body> <!-- .containerここから --> <div class="container">
<?php wp_head(); ?>「</body>」の前に
<!--フッターここから--> <p class="footer"> タブロ生花果物店<br> Copyright Fruits and Flowers Shop Tableau. All rights reserved. </p> <!--フッターここまで--> </div> <!-- .containerここまで --> <?php wp_footer(); ?> </body> </html>
<?php wp_footer(); ?>サイトのタイトルとキャッチフレーズをhead内に入れるコード
functions.php
functions.phpを作成し、以下のコードを記述しましょう。
add_theme_support( 'title-tag' );ソースコードを見るとtitleタグが２つあります。
上のtitleタグは元からあるコードで、下のtitleタグは先ほどのPHPコードを追加したことにより、自動的に挿入されたものです。
WordPressで設定したキャッチフレーズも入ります。
上のtitleタグは不要なので消しましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet"> <title>フルーツアンドフラワーショップ タブロ</title> <?php wp_head(); ?> </head> <body> <!-- .containerここから --> <div class="container">
コピーできました！