icon
icon

WordPressでウィジェットを編集する方法【初心者向け】

WordPress(ワードプレス)で「ウィジェット」を編集する方法を紹介した初心者向けの記事です。ウィジェットはブログパーツのように、固定の位置に特定の機能を表示させることができます。サイドバーやフッターのカスタマイズにお役立てください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

WordPress初心者向けに、基本操作を解説する記事です。

今回は「ウィジェット」の作成・編集を扱います。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!!ウィジェットってなんですか?

田島悠介

ウィジェットっていうのはね、サイト上に設置するパーツのことだよ。

 

ウィジェットとは

ウィジェットとは、WordPressのサイトやブログで、固定の位置に特定の機能を表示するパーツのようなものです。

 

例えば、こんなことができます。

  • サイドバーにカレンダーを表示したい
  • 複数のリンク集を、好きな順番で表示したい
  • アーカイブを表示させたい

 

ブログのツールを使ったことがある人であれば、イメージがつくと思いますが「ブログパーツ」と考え方は似ています。

それでは、実際にウィジェットを編集していきましょう。

 

大石ゆかり

ウィジェットについてはわかったんですけど、どうやって設置するんですか?

田島悠介

とても簡単に設置できるから、実際に設置してみようね。

 

ウィジェットの管理画面

ウィジェットを編集するには、管理画面から設定を行う必要があります。

 

WordPressの管理画面から

管理画面>外観>ウィジェット

で開いてみましょう。
ウィジェット設定画面

 

ウィジェットの管理画面はこのようになっています

WordPressのテーマによって表示が異なりますが、画像ではTwenty Fourteen を使用しています。
ウィジェット管理画面

 

 

 

[PR] Webサイト制作で副業する方法とは

ウィジェット管理画面の見方

ウィジェットの管理画面には、2つの表示があります。

  1. 利用できるウィジェット(画面中央)
  2. ウィジェットの表示箇所(画面右側)

ウィジェット管理画面2

 

上記画面のように設定していると、実際のサイト上では、サイドバーに【検索】【最近の投稿】【アーカイブ】【カテゴリー】の順番で表示されることになります。

ウィジェット編集

このように、サイドバーやフッターをカスタマイズしたいときは、追加したいウィジェットを希望のエリアに追加すればいいのです。

ウィジェットの追加/削除

管理画面の見方がわかったら、実際にウィジェットを編集してみましょう。

ウィジェットの追加はとても簡単です。追加したいウィジェットを、希望のエリアまでドロップするだけです。

 

例として、サイドバーの一番上に自己紹介を載せてみます。

まず、「テキストウィジェット」をメインサイドバーに追加しました。
ウィジェット追加

 

次に、テキストの内容を編集します。

編集が完了したら、【保存】ボタンを押して反映させます。
ウィジェット編集方法

 

これだけで、サイト上に反映されました。
ウィジェット完了

 

ウィジェットを削除したい場合は、この逆で、メインサイドバーなどのエリアから、利用できるウィジェットエリアにドラッグ&ドロップで戻せばOKです。

 

今回はテキストのウィジェットを紹介しましがた、カスタムリンクや、カレンダーなど、用途に合わせた様々なウィジェットが用意されています。

他にカスタマイズ方法として、WordPressのカスタムフィールドの編集方法の記事もあります。

 

ぜひ、活用してオリジナルなサイトを作ってみてください。

 

大石ゆかり

簡単に色々な機能を設置できて便利ですね♪

田島悠介

そうだね。Twitterのツイートとかも設置できたりするから、色々試してみると良いよ♪

大石ゆかり

はい♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。