8. 実践！サイドバーの作り方２パターン紹介

こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

前回の記事はこちら↓

7. トップページにピックアップ記事を表示する

8thステップであるこの記事では、ウィジェット&自作の２パターンでサイドバーを作る手順を解説していきます。

1. サイドバーの作り方2パターン

サイドバーの作り方には、大きく分けて2パターンあります。

通常WordPressテーマをインストールすると『外観』の項目の中に『ウィジェット』が存在しています（現在は有効化してないので表示されてません）。

ここでサイドバーの表示項目を設定したり、テーマによっては記事上や記事下、フッターの設定などまでできたりしますよね。

まずはオーソドックスに、このウィジェットを利用してサイドバーを作る手順を解説していきます。

ある程度WordPressに慣れたクライアントで、サイドバーの項目を編集したいと要望があった場合などはこちらの手順で作りましょう❗️

2. ウィジェットを有効化し、サイドバーを追加する

まずはウィジェットを有効化するためのコードをfunctions.phpに記述していきます。

コピー

/**
* ウィジェットの登録
*
* @codex http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_sidebar
*/
function my_widget_init() {
register_sidebar(
array(
'name' => 'サイドバー', //表示するエリア名
'id' => 'sidebar', //id
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-title">',
'after_title' => '</div>',
)
);
}
add_action( 'widgets_init', 'my_widget_init' );

これでウィジェットが有効化され、「外観」の項目に表示されるようになったはずです。

登録した「サイドバー」も表示されていますね。

ちなみに、register_sidebar() は名前だけ見るとサイドバーしか登録できなそうですが、この関数で記事上・記事下・フッターなど自由にウィジェットエリアを登録できます。

3. ウィジェットエリア「サイドバー」をsidebar.phpに表示させる

次に、sidebar.phpにウィジェットエリア「サイドバー」を表示させるためのコードを記述していきます。

sidebar.php

コピー

<!-- secondary -->
<aside id="secondary">
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<?php dynamic_sidebar( 'sidebar' ); ?>
<?php endif; ?>
</aside><!-- secondary -->

これでsidebar.phpに「サイドバー」で設定した項目を表示させる準備が整いました。

register_sidebar()と同じく、is_active_sidebar()・dynamic_sidebar()も名前はサイドバー専用っぽい関数ですが、ウィジェットエリアを表示させる時には常にこの関数を使います。

4. 「サイドバー」の中身を設定する

サイドバーを表示する準備が整ったので、元々HTMLで書かれていた項目を再現してみましょう。

人気記事5つと新着記事5つは、それぞれプラグインを使って表示させていきます。

人気記事を表示するプラグイン『WordPress Popular Posts』

記事の閲覧数やコメント数を集計して、人気順に表示してくれるプラグイン『WordPress Popular Posts』をインストールしてください。

使い方はこちらの記事を参考にどうぞ。

https://kagesai.net/wordpress-popular-posts-manual/

サムネ付きで新着記事を表示するプラグイン『Recent Posts Widget Extended』

ウィジェットにはデフォルトで『新着記事』がありますが、これだとサムネイルが表示されません。

ウィジェットに表示させる新着記事にはサムネイルを付けたいので、『Recent Posts Widget Extended』をインストールしましょう。

使い方はこちらの記事を参考にどうぞ。

https://affilabo.com/wordpress/15187/

これで人気記事と新着記事を表示させるための準備も整いました。

ウィジェットを表示したい順に並べる

あとは、通常のWordPressと同じ手順で表示したい順番にウィジェットを並べます。

プロフィールはHTMLからベースをコピーし、カスタムHTMLで作ればOK👍

うまく設定できてれば、このような見た目になるはずです。

popular postはまだアクセスがないので計測できませんが、サーバーにアップして公開すれば計測してくれるようになります。

ウィジェットを使ったサイドバーの作り方は以上です。

演習課題：Twitterのタイムラインをウィジェットに埋め込んでみる

様々なサイトで、サイドバーにTwitterのタイムラインが埋め込まれているのを見かけますよね。

自分のTwitterを使って、そのタイムライン埋め込みをやってみましょう！

Twitterの埋め込み用コードは https://publish.twitter.com/ から発行できます。

レスポンシブで表示できるよう、cssも調整してみてくださいね。

5. サイドバーを自作コード（＋ショートコード）で作るケースとは

ウィジェットを使ったサイドバーの作り方はわかったと思うので、次に自作コードでサイドバーを作る場合の手順を解説します。

ウィジェットを使った表示だと、WordPressに詳しくないクライアントの場合、誤って消してしまったり、意図せぬカスタマイズによりデザインが崩れてしまうリスクがあります。

そのため、実案件ではサイドバーの表示内容はテンプレートに直書きし、固定にしてしまうことが多いです。

あらかじめ何を表示するかクライアントと決めておけば、固定表示の方が余計なリスクがないですからね。

『Popular posts』や『Recent Posts Widget』もショートコードで表示できるよう設定されているので、テンプレートにコードを書いて表示してみましょう！

※ショートコードが何かわからない方は、 WordPressの教科書を読んでくださいね。

6. プロフィールと検索ボックスを作る

ウィジェット表示用に作ったsidebar.phpは『sidebar.php-wiget』などと名前を変えて、新しくsidebar.phpを作ってください。

まずはプロフィールと検索窓を作っていきます。

コピー

<!-- widget_custom_html -->
<div class="widget widget_text widget_custom_html">
<div class="widget-title">プロフィール</div>

<div class="wprofile">
<div class="wprofile-img"><img src="<?php echo get_template_directory_uri(); ?>/img/profile.png" alt=""></div>
<div class="wprofile-content">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- /wprofile-content -->
<nav class="wprofile-sns">
<div class="wprofile-sns-item m_twitter"><a href="" rel="noopener noreferrer" target="_blank"><i class="fab fa-twitter"></i></a></div>
<div class="wprofile-sns-item m_facebook"><a href="" rel="noopener noreferrer" target="_blank"><i class="fab fa-facebook-f"></i></a></div>
<div class="wprofile-sns-item m_instagram"><a href="" rel="noopener noreferrer" target="_blank"><i class="fab fa-instagram"></i></a></div>
</nav>
</div><!-- /wprofile -->
</div><!-- /widget_custom_html -->

<!-- widget_search -->
<div class="widget widget_search">
<div class="widget-title">検索</div>
<!-- search-form -->
<form method="get" class="search-form" action="<?php echo home_url('/'); ?>">
<input type="search" class="search-field" value="" placeholder="キーワード" name="s" id="s">
<button type="submit" class="search-submit"><i class="fas fa-search"></i></button>
</form><!-- /search-form -->
</div><!-- /widget_search -->

<!-- <?php get_search_form(); ?> でもデフォルトの検索フォームを表示できる -->

ここは特に特筆することもないかと思います。

フォームのactionやinputタグの使い方がわからなかった方は、それぞれのHTMLタグの使い方を調べて復習してください。

ちなみに、get_search_formでウィジェットで表示したWordPress標準の検索ボックスを設置することもできます。

7. 人気記事トップ5を表示する

『WordPress Popular Posts』を使えば、以下のようなショートコードで簡単に表示することができます。

コピー

WordPress Popular Postsを表示するショートコード例
<?php echo do_shortcode('[wpp range="last7days" limit=5 stats_views=1 order_by="views"]'); ?>
これで直近7日間で閲覧数トップ５の記事を表示できる
※参考：https://github.com/cabrerahector/wordpress-popular-posts/wiki/1.-Using-WPP-on-posts-&-pages

ショートコードの詳しい使い方は、上記の公式githubを確認してください👍

ただ、これだけだとあまりに簡単なので、『歴代アクセス数トップ5の記事を自作コードで表示する場合』のコード例も紹介しておきます。

「WordPress　人気記事　プラグインなし」などでググると色んな記事が出てくるんですが、上位記事のコードが全部微妙なので、以下と何が違うかぜひ比較してみてください。

functions.php

コピー

/**
* カスタムフィールドを使ってアクセス数を取得する（特定記事のアクセス数確認用）
*
* @param integer $id 投稿id.
* @return void
*/
//アクセス数を取得
function get_post_views( $id = 0 ){
global $post;
//引数が渡されなければ投稿IDを見るように設定
if ( 0 === $id ) {
$id = $post->ID;
}
$count_key = 'view_counter';
$count = get_post_meta($id, $count_key, true);

if($count === ''){
delete_post_meta($id, $count_key);
add_post_meta($id, $count_key, '0');
}
return $count;
}

/**
* アクセスカウンター
*
* @return void
*/
function set_post_views() {
global $post;
$count = 0;
$count_key = 'view_counter';

if($post){
$id = $post->ID;
$count = get_post_meta($id, $count_key, true);
}

if($count === ''){
delete_post_meta($id, $count_key);
add_post_meta($id, $count_key, '1');
}elseif( $count > 0 ){
if(!is_user_logged_in()){ //管理者（自分）の閲覧を除外
$count++;
update_post_meta($id, $count_key, $count);
}
}
//$countが0のままの場合（404や該当記事の検索結果が0件の場合）は何もしない。
}
add_action( 'template_redirect', 'set_post_views', 10 );

sidebar.php

コピー

<!-- widget_popular -->
<div class="widget widget_popular">
<div class="widget-title">人気記事</div>

<div class="wpost-items m_ranking">
<?php
// get_post_viewsで適宜アクセス数を確認
// $counter = get_post_views();
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'meta_key' => 'view_counter',
'orderby' => 'meta_value_num',
'order' => 'DESC',
);
$popular_posts = get_posts( $args );
foreach($popular_posts as $post): setup_postdata( $post );
?>

<!-- wpost-item -->
<a class="wpost-item" href="<?php the_permalink(); ?>">
<div class="wpost-item-img">
<?php
if (has_post_thumbnail() ) {
// アイキャッチ画像が設定されてれば中サイズで表示
the_post_thumbnail('medium');
} else {
// なければnoimage画像をデフォルトで表示
echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
}
?>
</div>
<div class="wpost-item-body">
<div class="wpost-item-title"><?php the_title(); ?></div>
</div><!-- /wpost-item-body -->
</a><!-- /wpost-item -->

<?php
endforeach; wp_reset_postdata();
?>

</div><!-- /wpost-items -->
</div><!-- /widget_popular -->

これでhtml通りの人気記事表示ができたはずです。

さらにcssも調整して、１〜３位をメダル色にすれば更にそれっぽくなりますよ！

ぜひカスタマイズしてみてください😀

7. 新着記事トップ5を表示する

『Recent Posts Widget Extended』もショートコードでどこにでも自在に表示できます。

コピー

Recent Posts Widget Extendedを表示するショートコード例
<?php echo do_shortcode('[rpwe limit="5" thumb="true"]'); ?>
これでサムネイル付きの新着記事を５件表示できる
※参考：https://ja.wordpress.org/plugins/recent-posts-widget-extended/

こちらも詳しいショートコードの使い方はプラグイン公式ページを読んでください。

練習として、こちらも自作コードで作成パターンもやってみましょう。

新着記事5件の表示は、ここまでたどり着いた方ならすでに書けるはず。

サブループを使って新着記事5件を取得し、表示してください。

以下に解答例のコードも紹介しておきます。

コピー
<!-- widget_recent -->
<div class="widget widget_recent">
<div class="widget-title">新着記事</div>

<div class="wpost-items">
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'DESC',
);
$new_posts = get_posts($args);
foreach($new_posts as $post): setup_postdata( $post );
?>

<!-- wpost-item -->
<a class="wpost-item" href="<?php the_permalink(); ?>">
<div class="wpost-item-img">
<?php
if (has_post_thumbnail() ) {
// アイキャッチ画像が設定されてれば中サイズで表示
the_post_thumbnail('medium');
} else {
// なければnoimage画像をデフォルトで表示
echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
}
?>
</div>
<div class="wpost-item-body">
<div class="wpost-item-title"><?php the_title(); ?></div>
</div><!-- /wpost-item-body -->
</a><!-- /wpost-item -->

<?php endforeach; wp_reset_postdata(); ?>

</div><!-- /wpost-items -->
</div><!-- /widget_recent -->

get_posts前の条件文さえできてしまえば、あとは簡単だったと思います。

ちなみにpost_type、order、orderbyはわかりやすくするために書きましたが、初期値のままなので省いてもOKです。

必要なのは『‘posts_per_page’ => 5,』だけで、他の3つは消しても挙動は同じです。

8. 日付アーカイブを表示する

最後に日付アーカイブを表示させます。

コピー

<!-- widget_archive -->
<div class="widget widget_archive">
<div class="widget-title">アーカイブ</div>
<ul>
<?php
//初期値なので$argsは書かなくてもOK
$args = array(
'type' => 'monthly',
'limit' => '',
'format' => 'html',
'before' => '',
'after' => '',
'show_post_count' => false,
'echo' => 1,
'order' => 'DESC',
'post_type' => 'post'
);
wp_get_archives( $args );
?>
</ul>
</div><!-- /widget_archive -->

こちらもわかりやすくするため書いてますが、argsは全て初期値なので、省いてOKです。

うまく日付アーカイブが表示されたでしょうか。

こんな風に表示できてればOKです！

これで無事に自作コード版のサイドバーも完成しました！

残るはsearch.phpと404.phpのみ！もう少しでテーマも完成なので、あと一踏ん張り頑張りましょう❗️

それでは、お疲れ様でした☺️