【WordPressでオリジナルサイトを作ろう】⑪サイドバー編

サイドバーファイルの作成

テーマディレクトリの直下に、サイドバーのテンプレートファイル「sidebar.php」を作成します。

C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\sidebar.php

画像の配置

サイドバーで使用するプロフィール用の画像をテーマディレクトリ内に配置します。

画像は下記からダウンロード・保存してください。

author.jpg

imgディレクトリの直下に「sidebar」ディレクトリを作成し、その中にファイルを保存します。

• C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\img\sidebar\author.jpg

サイドバーウィジェットの設定

サイドバーの月別一覧は、WordPressのウィジェット機能を使用します。

※WordPress5.8以降は、ウィジェットにブロックエディターが採用されていますので、以下の方法でサイドバーウィジェットを追加する場合は、事前にプラグイン「classic widgets」をインストールしてください。

まずは、管理画面上にウィジェットの設定メニューを表示させるために、「functions.php」に下記のコードを追記します。

    functions.php
      
if (function_exists('register_sidebar')) {
  register_sidebar(array(
    'name' => 'サイドバー',
    'id' => 'sidebar',
    'description' => 'サイドバーウィジェット',
    'before_widget' => '<div>',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="side-title">',
    'after_title' => '</h3>'
 ));
}
      
    

サイドバーのコーディング

「sidebar.php」の中身をコーディングしていきます。

    sidebar.php
    
<aside id="sidebar">
  <section class="author">
    <img src="<?php echo esc_url(get_theme_file_uri('img/sidebar/author.jpg')); ?>" alt="テキストテキストテキスト">
    <h3 class="side-title">Name Name</h3>
    <p class="profile">
      プロフィールテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </section>

  <?php get_search_form(); ?>

  <section class="archive">
    <?php dynamic_sidebar('sidebar'); ?>
  </section>
</aside>
    
  

    
  <section class="archive">
    <?php dynamic_sidebar('sidebar'); ?>
  </section>
    
  

CSSのコーディング

続いて、サイドバーのCSSをコーディングします。

    style.css
    
/*-------------------------------------------
aside
-------------------------------------------*/
#sidebar {
  width: 33%;
  padding: 20px;
}
#sidebar .side-title {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 30px;
}
.author {
  text-align: center;
  margin-bottom: 60px;
}
.author img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin-bottom: 30px;
}
.author .profile {
  font-size: 0.875rem;
  text-align: left;
}
.archive {
  text-align: center;
  margin-bottom: 60px;
}
.archive ul {
  border-bottom: solid  1px #777;
}
.archive li {
  font-size: 0.875rem;
  border-top: solid  1px #777;
  padding: 20px;
  text-align: left;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
  /*-------------------------------------------
  aside
  -------------------------------------------*/
  #sidebar {
    width: 100%;
    padding: 0;
  }
}
    
  

index.php

最後に、「index.php」にサイドバーの呼び出し処理を追加します。

追加する箇所は、</main>タグの直後です。

    index.php
    
  </main>

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

サイドバーの表示確認

それでは、トップページを開いてサイドバーの表示を確認しましょう。
下記の通り表示されていればOKです。

投稿をまとめて行ったので、Archiveには1つの月しか表示されていませんが、別の月に投稿を行った場合はその年月で表示されます。