MAMPを使ったWordpressでのWEB制作方法5 初心者向け


MAMPを使ったWordpressでのWEB制作方法5 初心者向け

前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法4 初心者向け

CSSファイルの読み込み

まず③の記事で作成したstyle.cssでメインのCSSファイルを読み込みます
テーマ情報の下にコピペしましょう。以下のような感じです。
cssディレクトリ内のメインCSSファイルは不要なので削除してもOKです。

次にheader.phpファイルのCSS読み込み箇所を以下のように変更します

header.php
<!--書き換え前--> 
<link rel="stylesheet" href="css/style.css">
<!--書き換え後-->                                            
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet">  

以下のようにCSSは当たりました。
しかしcssディレクトリ内のリセットCSS(reset.css)が当たっていません。

そこでリセットCSSを読み込みます。
CSSのファイルを分けている場合は同様にパスを指定できます。
スラッシュのつけ忘れに気をつけましょう。
※JSシートを使う場合の読み込みも同じです。

header.php
<!--書き換え前-->
<link rel="stylesheet" href="css/reset.css">
<!--書き換え後-->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css" type="text/css" />

<?php echo get_template_directory_uri(); ?> の記述でパスを読み込んでいます

bloginfoを使った書き方もありますが、現在は非推奨なのでget_template〜を使用しましょう

以下のようにresetCSSも当たりました。

画像の読み込み

次に画像を読み込んでいきます。
imgタグを入れている部分を以下に書き換えましょう。
wordpressタグを使ってパスを書き換えています。
※リンクのaタグは別の処理をしますのでまだ修正は不要です。

cssでbackground-imageを使用している場合は
backgroundに書き換えてパスを修正しましょう。
例)background: url("images/画像名");

index.php
<!--書き換え前--> 
<img src="./images/person_02.jpeg" alt="" />
<!--書き換え後-->
<img src="<?php echo get_template_directory_uri();?>/images/person_02.jpeg" alt="" />

以下のように画像の読み込みができました。

wordpressタグの追加(head/body部分)

次にheader.phpのhead部分閉じタグ前と
footer.phpのbody部分閉じタグ前に
以下のwordpressタグを入れてください

header.php
<head><!--headstart-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">                    <!--レスポンシブ-->
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">    <!--fontawsome-->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css" type="text/css" />    <!--reset.css-->
  <link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet"><!--書き換え-->
  <title>corporate_sample</title>
  <?php wp_head(); ?>    <!--追加-->
</head><!--headend-->
footer.php
<div id="footer">
      <div class="copyright">Copyright &copy; 2013 YOUR SITE NAME <br class="br-sp">All Rights Reserved.</div>
    </div><!-- /#footer -->
  </div><!--container end-->

<?php wp_footer(); ?>  <!--追加-->
</body><!--body end-->
</html>

これでトップページ(index.php)のビューが完成しました。
次回はリンク(aタグ)の書き換えです。

MAMPを使ったWordpressでのWEB制作方法6 初心者向け