wordpressでオリジナルテーマを作ってみよう⑨~分割~

2017-03-04

今回は今後のことも考えて、今まで全て「index.php」に書いてたコードを「header.php」や「footer.php」に分割していきます。

まず以下のファイルを作成します。
・header.php
・footer.php
・sidebar.php

その後index.phpの１行目から

までをheader.phpへ移します。
そして、の直前に、

<!--?php wp_head(); ?-->

1	<!--?php wp_head(); ?-->

を追加します。
こんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;" />
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="utf-8">
  <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $('header').ready(function () {
      hsize = $('header').height();
      $('#con-sid-foo-wrapper').css("top", hsize + "px");
    });
    $('header').resize(function () {
      hsize = $('header').height();
      $('#con-sid-foo-wrapper').css("top", hsize + "px");
    });
  </script>
 <span style="color: #ff0000;"><strong> <?php wp_head(); ?></strong></span>
</head>
<body <?php body_class(); ?>>
  <!-- hedaer -->
  <header>
    <div class="wrap-header">
      <div class="title-wrapper">
        <h1 class="site-title"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
        <h2 class="site-description"><?php bloginfo('description'); ?></h2>
      </div>
    </div>

  </header>

<!DOCTYPE html>

<head>

$('header').ready(function () {

hsize = $('header').height();

$('#con-sid-foo-wrapper').css("top", hsize + "px");

});

$('header').resize(function () {

hsize = $('header').height();

$('#con-sid-foo-wrapper').css("top", hsize + "px");

});

</script>

</head>

</div>

</header>

こんな感じです。
次にフッターです。
先ほどと同じようにしてindex.phpの

<footer>

から一番最後の行までをfooter.phpにコピペします。
そしての直前にを追加しておきます。

<!-- footer -->
<footer>
  <address>
    Copyright &copy; Sainome-craft,All rights reserved.
  </address>

</footer>
</div>
  <?php wp_footer(); ?>
</body>
</html>

</address>

</footer>

</div>

<?php wp_footer(); ?>

</body>

</html>

header.phpとfooter.phpに書き加えた赤字のところはなくても動作するのはするのですが、何かプラグインを入れたときにそのプラグインが上手く動作しないことがあるので、書いておきましょう。

ちなみにこのブログのコード貼り付けにはcrayonっていうプラグインを使っているんですけど
今回の作業のどれのおかけかちゃんと表示されるようになりました。

サイドバーはサイドバーの部分をsidebar.phpに入れるだけでOKです。

<!-- right-sidebar -->
<div class="sidebar">
  サイドバーだよー
</div>

サイドバーだよー

</div>

最後にだいぶすっきりしたindex.phpにヘッダーなどを読み込んでもらうためのwordpress専用のタグを追加します。
ヘッダーがあったところへ
サイドバーがあったところへ
フッターがあったところへ
で完成形がこんな感じになります。

<?php get_header(); ?>

  <!-- con-sid-foo-wrapper -->
  <div id="con-sid-foo-wrapper">
    <!-- contents -->
    <div class="contents">
      <div class="content-wrapper">
        <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <div class="content">
          <h1 class="page-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
          <div class="content-left">

              <div class="category-box"><?php the_category(); ?></div>
              <div class="readmore"><?php the_content('<span>続きを読む</span>'); ?></div>

            </div>
          <div class="content-right"><?php the_post_thumbnail(); ?></div>

        </div>
        <?php endwhile; endif; ?>
      </div>
      <?php get_sidebar(); ?>
    </div>

<?php get_footer() ?>

<?php get_header(); ?>

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="readmore"><?php the_content('<span>続きを読む</span>'); ?></div>

</div>

</div>

<?php endwhile; endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer() ?>

こんな感じで分割作業は終わりです。
次からは記事ページを作っていきます。

関連