【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のウィジェット機能を使用します。

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

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>'
 ));
}
      
    

管理画面の設定

続いて、管理画面からウィジェットの設定を行います。

ウィジェットの設定
管理画面のメニューから「外観」→「ウィジェット」をクリックします。


「アーカイブ」をクリックした後、「ウィジェットを追加」ボタンをクリックします。


タイトルに「Archive」と入力し、「保存」ボタンをクリックします。
※「投稿数を表示」にチェックを入れると、各月の記事件数も表示してくれます。

以上で、ウィジェットの設定は完了です。

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

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

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

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

ウィジェットの呼び出し

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

「dynamic_sidebar(‘sidebar’);」で、先ほど「functions.php」で追加したid名「sidebar」を指定してウィジェットを呼び出します。

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つの月しか表示されていませんが、別の月に投稿を行った場合はその年月で表示されます。

以上でサイドバーのコーディングは終了です。
次は投稿ページのコーディングを行っていきます。

次の記事 >

< 前の記事

【WordPressでオリジナルサイトを作ろう】