single.phpを作る

single.phpを作る

index.phpが分解できました。
同じ要領でsingle.phpを作りましょう。
まず新規でsingle.phpを作成します。

index.phpの

<?php get_header(); ?>

と

<?php get_footer(); ?>

をsingle.phpの一番上と一番下にコピペします。

あらかじめ作成していたsingle.htmlを開きます。

single.htmlの中のmainタグの部分をコピーしてsingle.phpの<?php get_header(); ?>と<?php get_footer(); ?>の間にペーストします。

記事などをテンプレートタグに差し替えていきます。
まずは
アイキャッチ画像の部分のimgタグを<?php the_post_thumbnail(); ?>に差し替え、
記事タイトルを<?php the_title(); ?>に差し替え、
日付を<?php the_date(); ?>に差し替え、
カテゴリーを<?php the_category(); ?>に差し替え、
本文を<?php the_content(); ?>に差し替えます。

その差し替えた部分をまとめてループのテンプレートタグで囲みます。

確認してみましょう。トップページから記事ページであるHello worldの記事をクリックしてみて下さい。

ページが切り替わって記事の内容が表示されたでしょうか。

ここまで作れたら個人的には8割はCMSが完成です。最低限ここまで作れればオリジナル・デザインのCMSは運用できます。
ポイントはHTMLの段階でしっかりCSSデザインを構築しておいた方が後が楽です。

サイドバー

次にブログでは必須なサイドバーを構築していきます。
現在、single.phpの中のサイドバーの部分はこんな感じです。

サイドバーを表示するためにウィジェットを使用します。場所は管理画面の「外観」の中にありますが見てみるとありません。

functions.phpの中にウィジェットを使用できるように下記のphpコードを追加します。

/*
 * サイドバーを定義*/
      function lab_widgets_init() {
        register_sidebar( array(
          'name'          => 'Sidebar',
          'id'            => 'sidebar-1',
          'description'   => 'ここにウィジェットを追加',
          'before_widget' => '<section id="%1$s" class="widget %2$s">',
          'after_widget'  => '</section>',
          'before_title'  => '<h3 class="widget-title">',
          'after_title'   => '</h3>',
        ) );


      }
      add_action( 'widgets_init', 'lab_widgets_init' );

リロードしてもう一度、管理画面の「外観」をみてみると「ウィジェット」という項目が増えています。

クリックするとウィジェットに関する設定ができるようになりました。利用できるウィジェットをドラッグ&ドロップしてSidebarに追加していきます。

私は「最近の投稿」と「アーカイブ」「カテゴリー」を追加しました。
それではこのウィジェットをsingle.phpに表示させてみましょう。
asideタグの中の

<section>
      <h3>項目</h3>
      <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
      
</section>

を削除して

<?php get_sidebar(); ?>

を記述してみます。
リロードするとウィジェットの中身がサイドバーとして表示されます。

最終的なsingle.phpの中身は

<?php get_header(); ?>



<!-- main -->

<main class="single-wrap clearfix">
  <aside>
    <?php get_sidebar(); ?>
  </aside>
  <div>
    <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>

        <figure class="thumbnail">
          <?php the_post_thumbnail(); ?>
        </figure>
        <h3><?php the_title(); ?></h3>
        <p><?php the_date(); ?></p>
        <?php the_category(); ?>
        <?php the_content(); ?>

      <?php endwhile; ?>
      <?php else : ?> <p>コンテンツがありません</p>
    <?php endif; ?>

  </div>
</main>

<!-- main -->



<?php get_footer(); ?>

になります。