WordPressのオリジナルテーマ　投稿一覧ページとサイドバーの作成

目的

• BLOG 固定ページに投稿一覧を表示する
• サイドバー（ウィジェット）を有効化して、カテゴリーや最新記事などを表示できるようにする
• 投稿データのインポートで効率よく構築を進める

投稿データのインポート

「WordPress-fullsite」で作成済みの方は、投稿記事もエクスポート→インポートできます。

1. 投稿元のサイトで管理画面「ツール」＞「エクスポート」
2. 「投稿」を選んで XML ファイルをエクスポート
3. オリジナルテーマのサイトで管理画面「ツール」＞「インポート」
4. WordPressインポーターを実行し、XMLファイルをインポート
   • 投稿者を割り当てる
   • 「添付ファイルをダウンロードしてインポート」に

サイドバー用テンプレート page-sidebar.php の作成

1. page-sidebar.php をテーマフォルダに作成
2. page.php をベースに、サイドバーの追加部分を含めて以下のようにします

<?php
/*
Template Name: サイドバー付きテンプレート
*/
// ========================
// このファイルはカスタムテンプレートです
// 「固定ページ」編集画面の「テンプレート」から選べるようになります
// ========================

// ヘッダーを読み込み（header.php の内容がここに展開される）
get_header();
?>

<main class="has-sidebar"> <!-- サイドバーありのレイアウト用クラス -->
  <h1 class="sub-title"><?php the_title(); ?></h1> <!-- ページのタイトルを表示 -->

  <div class="container flex-area"> <!-- 横並びにするラッパー（CSSでflex指定など） -->

    <!-- メインコンテンツエリア -->
    <div class="main-area">
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <?php the_content(); ?> <!-- ビジュアルエディタの本文を表示 -->
      <?php endwhile; endif; ?>
    </div>

    <!-- サイドバーエリア -->
    <aside class="sidebar">
      <?php get_sidebar(); ?> <!-- sidebar.php を読み込み -->
    </aside>

  </div>
</main>

<!-- フッターを読み込み（footer.php） -->
<?php get_footer(); ?>

<?php
/*
Template Name: サイドバー付きテンプレート
*/
get_header(); ?>

この Template Name コメントがあることで、WordPressはこのファイルを「固定ページ用のテンプレート」として認識し、編集画面の「テンプレート」欄に表示します。

functions.phpでウィジェット（サイドバー）を登録

functions.php に以下を追加すると、ウィジェットが使えるようになります

<?php
// ==============================
// サイドバーウィジェットを有効化
// ==============================

function unnhanbur_widgets_init() {
  register_sidebar(array(
    'name'          => 'サイドバーウィジェット',       // 管理画面に表示される名前
    'id'            => 'sidebar-widget-area',          // テンプレートで使用する識別子
    'before_widget' => '<li class="widget">',          // 各ウィジェットを囲む開始タグ
    'after_widget'  => '</li>',                        // 各ウィジェットを囲む終了タグ
    'before_title'  => '<h2 class="widget-title">',    // ウィジェットタイトルの開始タグ
    'after_title'   => '</h2>',                        // ウィジェットタイトルの終了タグ
  ));
}

// widgets_init（ウィジェットの初期化）というタイミングで上記を実行
add_action('widgets_init', 'unnhanbur_widgets_init');

管理画面でウィジェットを追加しよう

「外観」→「ウィジェット」画面で、サイドバーウィジェット エリアに以下のウィジェットを追加してみましょう。

• 検索バー
• 新着情報（見出し）
• 最新の投稿　設定→投稿コンテンツ、アイキャッチ画像の表示、画像位置は左、アイキャッチ画像のリンクを追加
• カテゴリー（見出し）
• カテゴリー一覧
• タグクラウド（見出し）
• タグクラウド　
• 画像（バナー）

終了後は必ず更新しておきます。