デイトラの卒業課題を1日（1〜2時間）行なっています。
サイドバーを作成する
新着情報欄を作成する
・サイドページ（sidebar.php）の新着セクションを動的に変更する。
<div class="p-side-items">
<div class="p-widget p-side-items__widget">
<div class="p-widget__head c-widget-title">新着情報</div>
<div class="p-widget__body">
<?php $newest_query = new WP_Query(
array(
// ▼ 投稿タイプを指定
'post_type' => 'post',
// ▼ 「4つの記事」表示
'posts_per_page' => 4,
// ▼ 「並び順」設定
'orderby' => 'date',
'order' => 'DESC',
// ▼ 特定のカテゴリーに絞り込む（スラッグを指定）
'category_name' => 'new',
)
);
?>
<div class="p-widget-entry-cards">
<?php if ($newest_query->have_posts()) : ?>
<?php while($newest_query->have_posts()) : ?>
<?php $newest_query->the_post(); ?>
<a href="<?php the_permalink(); ?>" class="p-widget-entry-card p-widget-entry-cards__item">
<div class="p-widget-entry-card__image">
<?php if(has_post_thumbnail()):?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri() ?>/img/no-img.png" alt="">
<?php endif; ?>
</div>
<div class="p-widget-entry-card__box">
<div class="p-widget-entry-card__meta">
<span class="p-widget-entry-card__label"><?php my_the_post_category(false) ?></span>
<time datetime="<?php the_time('c'); ?>" class="p-widget-entry-card__date"><?php the_time('Y/n/j'); ?></time>
</div>
<div class="p-widget-entry-card__title"><?php the_title(); ?></div>
</div>
</a>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
</div>・表示を確認する。
カテゴリ欄を作成する
・サイドページ（sidebar.php）のカテゴリセクションを動的に変更する。
<div class="p-widget p-side-items__widget--cat">
<div class="p-widget__head c-widget-title">カテゴリ</div>
<div class="p-widget__body">
<ul class="p-widget-list">
<li class="p-widget-list__item">
<a href="#" class="p-widget-list__link">
<span class="c-icon-arrow-right"></span>新着情報
</a>
</li>
<li class="p-widget-list__item">
<a href="#" class="p-widget-list__link">
<span class="c-icon-arrow-right"></span>受講の声
</a>
</li>
<li class="p-widget-list__item">
<a href="#" class="p-widget-list__link">
<span class="c-icon-arrow-right"></span>セミナー
</a>
</li>
<li class="p-widget-list__item">
<a href="#" class="p-widget-list__link">
<span class="c-icon-arrow-right"></span>研修プログラム
</a>
</li>
</ul>
</div>
</div><div class="p-widget p-side-items__widget--cat">
<div class="p-widget__head c-widget-title">カテゴリ</div>
<div class="p-widget__body">
<ul class="p-widget-list">
<?php
// カテゴリーの一覧を取得する条件
$categories = get_categories(
array(
'orderby' => 'name', // 並び順（名前順）
'order' => 'ASC', // 昇順
'hide_empty' => true // 投稿のないカテゴリーは非表示にする場合
)
);
?>
<?php if ($categories) : ?>
<?php foreach ($categories as $category) : ?>
<li class="p-widget-list__item">
<a href="<?php echo esc_url(get_category_link($category->term_id)); ?>" class="p-widget-list__link">
<span class="c-icon-arrow-right"></span><?php echo esc_html($category->name); ?>
</a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
</div>・表示を確認する。
『Category Order and Taxonomy Terms Order』（プラグイン）で配置替えを出来るようにする
・Category Order and Taxonomy Terms Orderをインストールする。
・現状の配置表示を確認する。
・投稿→タクソノミーの並び順を選択する。
・ドラッグ&ドロップで配置を変更する。
・配列が入れ替わる事を確認する。
結果
今回はサイドバーを作成しました。
当初はウィジェットを使ってプラグインで作成してみようとやっていました。しかし、私が作成したHTML構成ではプラグインに合わせてCSSを設定して合わせなければ出来ないと判断して自作コードで作成する方向に変更。
導入するプラグインのクラスにCSS設定をする必要がある事が知れたので良しとしました。
新着情報はもう何度も作成しているクエリ（サブループ）なので問題なく完成！違う方法も探してみようかな
カテゴリ一覧はテンプレートタグの「wp_list_categories()」でやってみましたが、これも私が作成したHTML構成ではこのデザインにならなかったので条件分岐で出力させるコードにしました。
最後にカテゴリの配置替えに「Category Order and Taxonomy Terms Order」プラグインを使いました。このプラグインに対してはタクソノミーの並び順となっています。カテゴリでいいのではと若干疑問？タクソノミーの意味もカテゴリやタグの意味ではありますが、専門用語が分からないお客様は疑問に思う気がします。
今回、気づいた点はプラグインにCSSをカスタムするのではなく、プラグインのクラスにCSSを合わせる事。これに関しては事前にクラスの構成を知っとく必要があるので自由度の幅が狭まる感じがします。
次は資料ダウンロードフォームを作成します！
以上、デイトラweb制作（Word Press化その12）の状況でした。
ご依頼等ありましたら、下記のURLにお問い合わせ下さい。
ポートフォリオサイトはこちらになります。
