前回作成したindex.phpをwordpressを構成するパーツに分割します。
header.php の作成
index.phpの先頭から「</header><!-- /header -->」までを切り取り、header.php に貼り付けます。
index.phpの切り取った箇所には「<?php get_header(); ?>」と入力します。 こうすることで index.php が読み込まれた時に、この部分に header.php を読み込んで追加してくれます。
タイトルの部分は「 bloginfo('name');」とすることで、タイトル部分にブログ名が表示される様になります。 個別ページのタイトルも入れたいので、「wp_title('|', true, 'right');」も入れます。これはブログ名の右側にこれを出力しなさいという意味です。
<title>ゼロからWordPressテーマを作ろう</title>
↓
<title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
cssを読み込むようにします。
<link rel="stylesheet" type="text/css" href="style.css">
↓
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
見出し h1 の部分にはブログ名を表示し、ホームへのリンクを貼っておきます。 ホームへのリンク先は、「<?php home_url('/'); ?>」 と入力します。
<h1><a href="">ゼロからWordPressテーマを作ろう</a></h1>
↓
<h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
管理画面で作成したメニューを出力できる様にメニューの部分には「”<?php wp_nav_menu(); ?>"」と入力します。
メニューが表示される様にするためには functions.php 側の設定も必要で、functions.php に「add_theme_support('menus');」を記述します。
これで管理画面で作成したメニューを表示することができます。
最後に、head 要素の一番最後に「<?php wp_head(); ?>」と入力します。 これでヘッダとして機能する様になります。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ゼロからWordPressテーマを作ろう</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header" class="container">
<h1><a href="">ゼロからWordPressテーマを作ろう</a></h1>
</header><!-- /header -->
↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
<?php wp_head(); ?>
</head>
<body>
<header id="header" class="container">
<h1>
<a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a>
</h1>
<?php wp_nav_menu(); ?>
</header><!-- /header -->
funtion.php
<?php
add_theme_support('menus');
sidebar.phpの作成
同様に、index.php の<div id=”sidebar”> … </div><!– /sidebar –> の部分を切り取ってsidebar.phpに貼り付け、切り取った箇所には<?php get_sidebar(); ?>と入力します。
サイドバーにはウィジェットを表示できる様にします。ウィジェットを出力する場所に「<?php dynamic_sidebar(); ?>」と記述します。
次に、ウィジットを使えるようにするため、functions.phpに処理を記述します。
「register_sidebar();」と記述します。
オプションを配列で渡します。
widget の前後のスタイルを設定します。 ウィジェットの前は「’before_widget’ => ‘<div class=”widget”>’,」と ウィジェットの後は「’after_widget’ => ‘</div>’,」とします。
widget のタイトルの前後もスタイルを設定できます。 「’before_title’ => ‘<h3>’, ‘after_title’ => ‘</h3>’,」と指定します。
これで、管理画面の「外観」メニューに「ウィジェット」が表示されます。
sidebar.php
<div id="sidebar"> <h3>サイドバー</h3> </div><!-- /sidebar -->
↓
<div id="sidebar"> <?php dynamic_sidebar(); ?> </div><!-- /sidebar -->
functions.php
<?php
add_theme_support('menus');
register_sidebar(
array(
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
)
);
footer.phpの作成
最後にフッターです。index.phpの「<footer id="footer" class="container">」から「</footer><!-- /footer -->」までを切り取り、footer.php に貼り付けます。 切り取った箇所には「<?php get_footer(); ?>」と入力します。
「</footer>」の後ろ、「</body>」の直前には「<?php wp_footer(); ?>」という記述を追加します。
footer.php
<footer id="footer" class="container"> <p>フッター</p> </footer><!-- /footer --> <?php wp_footer(); ?>
最終的にindex.phpは以下の様になります。
index.php
<?php get_header(); ?>
<div id="main" class="container">
<div id="posts">
<div class="post">
<h3>投稿記事</h3>
</div><!-- /post -->
<div class="navigation">
<div class="prev">前へ</div>
<div class="next">次へ</div>
</div>
</div><!-- /posts -->
<?php get_sidebar(); ?>
</div><!-- /main -->
<?php get_footer(); ?>
</body>
</html>
