1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress にウィジェット(サイドバー)を追加する方法。

WordPress にウィジェット(サイドバー)を追加する方法。

サイドバーというより、頭がパーな@It_is_Rです。やかましいわ。

WordPress テーマ自作シリーズ、早くも第6回目です。
今回はウィジェット(サイドバー)を追加する方法を紹介します。

前回の記事はこちらです。
WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

目次
  1. 初期状態の管理画面
  2. functions.php で、ウィジェット(サイドバー)を有効にする
  3. sidebar.php を作る
  4. サイドバーを読み込む
  5. まとめ

初期状態の管理画面

まず、ローカルのサイトにログインしてみます。

wordpress

あるはずの項目がありません。もちろん、「ウィジェット」の項目も見当たりません。

functions.php で、ウィジェット(サイドバー)を有効にする

ウィジェット(サイドバー)を有効にするには、 functions.php を変更する必要があります。
これまでの解説では、まだ functions.php を作っていないので、 テーマのフォルダの中に作ってください。

functions.php

<?php
function mytheme_widgets_init() {
	register_sidebar( array(
		'name' => 'ウィジェット',
		'id' => 'sidebar',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h2 class="title">',
		'after_title' => '</h2>',
	) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

すると、ウィジェット項目が有効になります。
wordpress

適当にウィジェットをいくつか追加しておきます。

sidebar.php を作る

では、サイドバー用のファイル、 sidebar.php を作ります。

sidebar.pug(コンパイル前)

:php
	if (is_active_sidebar('sidebar')) :
aside.p-sidebar(role="complementary")
	:php
		dynamic_sidebar('sidebar');
		endif;

sidebar.php(コンパイル後)

<?php if (is_active_sidebar('sidebar')) : ?>
<aside class="p-sidebar" role="complementary"><?php dynamic_sidebar('sidebar');
endif; ?>
</aside>

サイドバーを読み込む

では前回作った index.php から、 sidebar.php を読み込んでみましょう。
sidebar.php を読み込むには、 get_sidebar(); 関数を使います。

index.pug(コンパイル前)

:php get_header();
main#main
	:php while(have_posts()) :
	:php the_post();
	article.p-article-list.c-media
		:php if(has_post_thumbnail()):
		a.c-media__img.p-article-list__thumbnail(href!="<?php the_permalink(); ?>")
			:php the_post_thumbnail('medium', array('class' => 'p-article-list__catch p-article-list__catch--main'));
		:php endif;
		.c-media__body
			h1.p-article-list__ttl
				a(href!="<?php the_permalink(); ?>")
					:php the_title();
			p.c-media__txt.p-article-list__snippet
				:php the_excerpt();
		time.c-panel.p-article-list__time(datetime!="<?php the_time('c'); ?>")
			:php the_time("Y/n/j")
		a.p-article-list__readmore(href!="<?php the_permalink(); ?>") 続きを読む
	:php
		endwhile;
		the_posts_pagination(array(
			'mid_size'				=> 2,
			'prev_text'				=> 'Prev',
			'next_text'				=> 'Next',
			'show_all'				=> false,
			'before_page_number' => '',
		));
:php
	get_sidebar();	//追加
	get_footer();

index.php(コンパイル後)

<?php get_header(); ?>
<main id="main">
  <?php while(have_posts()) : ?><?php the_post(); ?>
  <article class="p-article-list c-media"><?php if(has_post_thumbnail()): ?><a class="c-media__img p-article-list__thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium', array('class' => 'p-article-list__catch p-article-list__catch--main')); ?></a><?php endif; ?>
    <div class="c-media__body">
      <h1 class="p-article-list__ttl"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
      <p class="c-media__txt p-article-list__snippet"><?php the_excerpt(); ?></p>
    </div>
    <time class="c-panel p-article-list__time" datetime="<?php the_time('c'); ?>"><?php the_time("Y/n/j") ?></time><a class="p-article-list__readmore" href="<?php the_permalink(); ?>">続きを読む</a>
  </article><?php endwhile;
the_posts_pagination(array(
	'mid_size'				=> 2,
	'prev_text'				=> 'Prev',
	'next_text'				=> 'Next',
	'show_all'				=> false,
	'before_page_number' => '',
)); ?>
</main><?php get_sidebar();	//追加
get_footer(); ?>

これで、サイドバーがサイトに反映されました。
まだスタイルをあてていないので、サイドバーなのに下の方に表示されます。

まとめ

今回はサイドバーを反映させる方法を紹介しました。
サイドバーに関しては、ちょっとした手順を踏まなければいけないので大変ですが、この記事を参考にしていただければ幸いです。

この企画の一覧はこちら

  1. WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。
  2. WordPress のテーマ開発に絶対必須な gulp プラグイン9選!
  3. これから作る WordPress のテーマをローカルサイトに適用させる。
  4. WordPress テーマの基本構成と読み込まれるファイルの優先順位。
  5. WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!
  6. WordPress にウィジェット(サイドバー)を追加する方法。
  7. WordPress テーマ自作!投稿ページ、固定ページの作り方。
  8. 【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】
  9. カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!
  10. WordPress テーマ自作 | functions.php から CSS を読み込む方法。
  11. WordPress テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

Homebrew

Homebrewのインストール&使い方。すぐに使える詳しい解説!

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

おみくじゲームを作るべ!

小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!

小学生から始めるプログラミングシリーズです。 この講座ではScratch(スクラッチ)から少しレベルアップして、JavaScriptを使ってプログラミングを行なっていきます。 Scratc

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

コメントをどうぞ!

メールアドレスが公開されることはありません。