読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

WordPress のテンプレートタグを記述

style.cssを読み込む

  • index.php – <head>内の一部
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="style.css" media="screen">
テンプレートタグを記述します
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">

TEMPLATE TAG

get_template_directory_uri … テンプレートのあるディレクトURI を取得します。つまりテーマディレクトリです。
get_stylesheet_uri … style.cssURI を取得します。

CSSが反映された状態

f:id:webmaster-web:20160625025220p:plain

WordPress に合わせて index.php を分割

header.php
  • index.phpから分離する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOP PAGE</title>
... 省略 ...
</head>
<body>
<div id="container">
<!-- header -->
<div id="header" class="clearfix">
... 省略 ...
</div>
<!-- /header -->
index.php のヘッダー部分
  • header.php を index.php の上部に読み込む
  • get_header() は、header.php を読み込むテンプレートタグ
<?php get_header(); ?>
<!-- main -->
<div id="main">
… 以下省略 …
サイドバー部分を分割
<!-- sidebar -->
<div id="sidebar">
<div class="widget">
<h2>Category</h2>
<ul>
<li><a href="#">ケーキ</a></li>
<li><a href="#">コーヒー</a></li>
</ul>
</div>
...省略...
</div>
<!-- /sidebar -->

sidebar.php を index.php に読み込む

...省略...
<?php get_sidebar(); ?>
</div>
<!-- /container -->
<!-- footer -->
<div id="footer">
...省略...
</div>
<!-- /footer -->
</body>
</html>
フッター部分を分割
</div>
<!-- /container -->
<!-- footer -->
<div id="footer">
<p id="copyright" class="wrapper">© Simple x Simple All Rights Reserved.</p>
</div>
<!-- /footer -->
</body>
</html>

footer.php を index.php に読み込む

  • get_footer() は、footer.php を読み込むテンプレートタグ
…省略...
</div>
<!-- /main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

ここまでのまとめ

  • ヘッダー部分は header.php にする
  • サイドバー部分は sidebar.php にする
  • フッター部分は footer.php にする
  • index.php 側は、各インクルードタグで読み込む