サイドバーテンプレートの作成

続いて、2カラムのレイアウトを想定して、右サイドバーを追加してみましょう。

まずは、home.phpに手を加えて、2カラム用に対応させていきます。

<?php 
get_header(); 
get_template_part( 'templates/recommend' );
?>
<main class="main_contents">
  <section class="content">
    <?php 
    while(have_posts() === true){
      the_post(); 

      get_template_part('templates/content'); 

    }
    get_template_part('templates/pagination');
    ?>
  </section>
  <?php get_sidebar(); ?>
</main>
<?php
get_footer();
?>

次に、sidebar.phpに仮のサイドバーを作成しておきます。

<aside class="sidebar">
    <h2>サイドバー</h2>
</aside>

次に、style.cssに2カラム用の設定を追記します。

body {
    font-size: 1.6rem;
    /*以下追記ぶん*/
    width: 960px;
    margin: 0 auto;
}

.main_contents {
    margin-top: 10px;
    display: flex;
}

.content {
    flex: 4;
}

.sidebar {
    flex: 1;
    /*わかりやすくするため仮設定*/
    background-color: gray;
    height: 500px;
}

それでは、投稿一覧ページを表示させてみましょう。 ([ブログurl]/blog)

メイン部分のテンプレート化

home.phpがごちゃごちゃしてきたので、 テンプレート化しておきましょう。

<?php 
get_header(); 

get_template_part( 'templates/recommend' );

get_template_part('templates/main_contents');


get_footer();

templatesフォルダにmain_contents.phpを作成します。

<main class="main_contents">
  <section class="content">
    <?php 

    while(have_posts() === true){
      the_post(); 

      get_template_part('templates/content'); 

    }
    get_template_part('templates/pagination');

    ?>
  </section>
  <?php
    get_sidebar();
  ?>
</main>

ダイナミックサイドバーの利用

サイドバーはダッシュボードから設定を行う「ダイナミックサイドバー」を利用することが可能です。 sidebar.phpを以下のように書き換えてみましょう。

<?php
// sidebar-1が作成されていて、
// かつウィジェットが登録されていなければ表示しない。
if ( is_active_sidebar( 'sidebar-1' ) === false) {
    return;
}
?>
<aside class="sidebar">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

最初のブロックで、sidebar-1というidのサイドバーが存在しなければ表示しないように設定しています。

続いて、functions.phpで sidebar-1という新たなサイドバーを登録します。 サイドバーの登録は、widgets_initというアクションフックで行います。

add_action( 
  'widgets_init', 
  function() {
    register_sidebar( 
      array(
        'name' => 'Sidebar-1',
        'id' => 'sidebar-1',
        'before_widget' => '',
        'after_widget' => ''
      )
    );
  } 
);

before_widgetとafter_widgetの設定をしておかないと、追加したウィジェットの前後にliタグが表示されてしまうので気をつけましょう。

ここまで準備ができたら、ダッシュボードから 外観 > ウィジェットの画面を開いてみましょう。

Sidebar-1というサイドバーが追加されているので、そこに、カテゴリーなどのウィジェットを登録して表示を確認してみましょう。

他ページへの適用

では、記事一覧ページ以外にもサイドバーを表示させてみましょう。main_contentsを分離させているのであとは簡単です。

front-page.php

<?php 
//ヘッダーを取得
get_header(); 
?>
<main class="main_contents">
    <section class="content">
        <h2>ここはフロントページです。</h2> 
    </section>
    <?php get_sidebar(); ?>
</main>

<?php get_footer(); ?>

index.php

<?php 
get_header(); 

get_template_part('templates/main_contents');

get_footer();

archive.php

<?php 
get_header(); 

get_template_part( 'templates/recommend' );

get_template_part('templates/main_contents', 'archive');


get_footer();

archive用のmain_contents-archiveを作成します。

<main class="main_contents">
  <section class="content">
    <?php 

    get_template_part( 'templates/breadcrumb', 'archive' );
    while(have_posts() === true){
      the_post(); 

      get_template_part('templates/content'); 

    }
    get_template_part('templates/pagination');

    ?>
  </section>
  <?php
    get_sidebar();
  ?>
</main>

ここまでできたら、style.cssから 不要なサイドバーの背景色指定を取り除いておきましょう。

.sidebar {
    flex: 1;
    /* 以下は削除 */
    /* background-color: gray;
    height: 500px; */
}

こちらでサイドバーの完成です。 （今回は、個別記事ページと固定ページにはサイドバーを表示させないものとしています。）