MAMPを使ったWordpressでのWEB制作方法⑤ 初心者向け
前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法④ 初心者向け
CSSファイルの読み込み
まず③の記事で作成したstyle.cssでメインのCSSファイルを読み込みます
テーマ情報の下にコピペしましょう。以下のような感じです。
cssディレクトリ内のメインCSSファイルは不要なので削除してもOKです。
次にheader.phpファイルのCSS読み込み箇所を以下のように変更します
<!--書き換え前--><linkrel="stylesheet"href="css/style.css"><!--書き換え後--><linkhref="<?phpechoget_stylesheet_uri();?>"rel="stylesheet">
以下のようにCSSは当たりました。
しかしcssディレクトリ内のリセットCSS(reset.css)が当たっていません。
そこでリセットCSSを読み込みます。
CSSのファイルを分けている場合は同様にパスを指定できます。
スラッシュのつけ忘れに気をつけましょう。
※JSシートを使う場合の読み込みも同じです。
<!--書き換え前--><linkrel="stylesheet"href="css/reset.css"><!--書き換え後--><linkrel="stylesheet"href="<?phpechoget_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/画像名");
<!--書き換え前--><imgsrc="./images/person_02.jpeg"alt=""/><!--書き換え後--><imgsrc="<?phpechoget_template_directory_uri();?>/images/person_02.jpeg"alt=""/>以下のように画像の読み込みができました。
wordpressタグの追加(head/body部分)
次にheader.phpのhead部分閉じタグ前と
footer.phpのbody部分閉じタグ前に
以下のwordpressタグを入れてください
<head><!--headstart--><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><!--レスポンシブ--><linkhref="https://use.fontawesome.com/releases/v5.6.1/css/all.css"rel="stylesheet"><!--fontawsome--><linkrel="stylesheet"href="<?phpechoget_template_directory_uri();?>/css/reset.css"type="text/css"/><!--reset.css--><linkhref="<?phpechoget_stylesheet_uri();?>"rel="stylesheet"><!--書き換え--><title>corporate_sample</title><?phpwp_head();?><!--追加--></head><!--headend--><divid="footer"><divclass="copyright">Copyright © 2013 YOUR SITE NAME <brclass="br-sp">All Rights Reserved.</div></div><!-- /#footer --></div><!--container end--><?phpwp_footer();?><!--追加--></body><!--body end--></html>これでトップページ（index.php）のビューが完成しました。