Information Bind Journey

WordPressウィジェットの編集方法 うまく使えなくてもこれで安心!

ウィジェットとはWEBサイトにおける一つの機能を提供するかたまりのことです。

例えばWEBサイトにカレンダーを載せたい場合、カレンダー機能を持つウィジェットを使って、簡単に表示させることができます。他には、動画や音声を扱うウィジェットなどもあります。

今回は、wordpressにおけるウィジェットの使い方について勉強しましょう!

部品を表示したい位置に配置するだけなので、そんなに難しくありません!

ハゲでもウィジェットは編集できています!

ウィジェット編集画面を表示する

ウィジェットを扱うには、WordPressにログイン後、左側メニューの「外観」→「ウィジェット」から可能です。

マウスを「外観」の上にのせると、プルダウンでメニューが出てくるので、その中の「ウィジェット」をクリックします。

ウィジェット編集の画面に移ります。

ウィジェットはこの画面で追加・編集・削除をすることになります。

画面中央の左側にあるのが利用出来るウィジェットです。

ウィジェットには種類があります。それぞれのウィジェットの種類の特徴は後ほど説明します。

右側にあるのがウィジェットを表示させる場所です。

左側にある利用したいウィジェットを選んで、表示させたい場所を右側で選ぶことになります。なおウィジェットはWordPressのテーマによって異なります。

ここでは無料のWordPressテーマ「Lightning」を事例にして解説していきます。

他のテーマでもほとんど編集方法は変わらないので、ご心配なく!

ウィジェットの追加・編集・削除

ウィジェットの追加方法

ウィジェットの追加は、左にあるウィジェットを右側にある利用したい場所にドラッグ&ドロップするだけです。例えば、カレンダーを投稿ページのサイドバーに表示させたい場合、カレンダーウィジェットをサイドバー(投稿)へドラッグ&ドロップします。

ウィジェット「カレンダー」をサイドバー(投稿)へドロップ&ドロップすると、投稿ページのサイドバーにカレンダーが表示されることができます。なお、サイドバーとはWEBサイトの表示画面の右側(または左側)にあるメニューなどがある部分です。これら位置に関しては後ほど説明します。

ちなみに、ドラッグ&ドロップが上手くいかない場合には設置されません。ドラッグ途中にドロップしてしまったり、違う場所にドロップしてしまうケースがあるので、うまくドロップ出来たか確認しましょう。また、うまくドロップできてもWEBサイトをみるブラウザを更新しないと表示されません。ですので、ドロップした後には必ず更新して確認することになります。

ウィジェットの編集方法

次にウィジェットの編集です。ウィジェットの編集は、編集したいウィジェットを開いて編集します。例えば、サイドバーに表示されているカレンダーにタイトルを付ける場合には、該当するカレンダーウィジェットにタイトルを入力して保存するとタイトルを付けられます。

まずは、該当するカレンダーウィジェットをクリックします。

カレンダーウィジェットをクリックして、タイトルに「カレンダー」と入力し、保存ボタンを押します。保存を押さないと反映されないので必ず押しましょう。

これにより、投稿ページのサイドバーにあるカレンダーにタイトル「カレンダー」が付きました。

以上のように、ウィジェットにタイトルのある場合には、そこに入力した文字がそのウィジェットのタイトルとしてWEBページに表示されます。

ウィジェットの削除方法

次は、ウィジェットの削除です。ウィジェットの削除は、削除したいウィジェットを設定された場所から外にドラッグ&ドロップするだけです。例えば、サイドバーあるにカレンダーの表示を無くしたい場合には、該当するサイドバーのカレンダーウィジェットを外にドラッグ&ドロップします。

これによりカレンダーが消えることになります。カレンダーに関わらず他の設置したウィジェットの表示をなくしたい場合にも、同様に該当するウィジェットを外にドラッグ&ドロップするわけです。

それぞれのウィジェットの特徴

ここではウィジェットの特徴を紹介します。なおウィジェットはWordPressのテーマによって異なります。ここではWordPressテーマ「Lightning」を事例にして解説していきます。

LTGコンテンツエリア投稿ウィジェット

投稿したばかりの記事が表示されます。表示は、アイキャッチ画像・日付・カテゴリー・タイトル・記事の抜粋を一緒に付けたりて表示させることができます。表示される件数も設定可能です。

LTG大幅見出し

見出しとテキストを表示させることができます。

下の画像のようにタイトル部分に「タイトル」、サブタイトル部分に「サブタイトル」と設定すると、下記のように表示されます。

文字色や影の設定、背景色や画像の設定も可能です!

RSS

RSSフィードを取得し表示させることができます。

RSSとは、Really Simple Syndication、またはRich Site Summaryの略称で、ニュースやブログなどWEBサイトの更新情報を配信するためのフォーマットです。

このRSSを使って自分のWEBサイトでニュースなどの更新情報を表示させることができます。

例えば、Yahoo!ニュースのRSSフィードを表示させる場合は下記の通りです。

上記のように設定すると、下記の通りにYahoo!ニュースが表示されます。

アーカイブ

アーカイブを表示します。アーカイブは英語で保存記録や公文書という意味を持ちますが、このウィジェットで過去に書いた記事を年月で一覧表示します。

上記のように設定すると、下記のように表示されます。

2019年の8月に1つの記事をかいたことがわかります。また、年月をクリックすることで、その時に書いた過去の記事を辿ることができます。なお、ドロップダウン表示はクリックすると候補となるリストが表示されます。ただ多くのサイトでは、ドロップダウン表示は使わておりません。

カスタムHTML

HTMLによる記述で表示されることができます。HTMLによる記述ができるとは、HTMLタグが使えるということです。HTMLタグは多数あり、例えば、

・<strong></strong>・・・文字を強調する

・<font color=””></font>・・・文字のサイズを変更する

・<font size=””></font>・・・文字の色を変更する

などがあります。また、リスト表示やテーブル表示のタグも利用可能です。

例えば上記のHTMLの記載で、下記通りに表示させることができます。

HTMLタグに関しては、下記サイトなどを参考にすると良いでしょう。

HTML辞典

カテゴリー

記事のカテゴリーが表示されます。

記事にはカテゴリーを設定することができ、このカテゴリーが表示されるわけです。例えば、WordPressについて書いた記事には「WordPress」のカテゴリーに、旅行について書いた記事には「旅行」のカテゴリーに属すように設定します。

これら設定とこのウィジェットの活用により、「WordPress」「旅行」に関する記事のみをまとめて抜粋表示させることができます。

上記のように設定すると、下記のように表示されます。

なお、カテゴリーは記事で設置しないと「未分類」に属すようになっています。また、カテゴリーには階層があり、例えば「WordPress」のカテゴリーの下に「ウィジェット」のカテゴリーを作成することができます。カテゴリーウィジェットにある「階層を表示」はこれら階層を含めて表示させることができるわけです。

カレンダーウィジェット

カレンダーが表示されます。

なお、記事を書いた日付にその記事へのリンクが付くようになります。

これにより、記事を書いた日がカレンダーでわかります。

ギャラリー

複数の画像を一覧を表示させることができます。

上記の「画像を追加」をクリックし、次の画面で実際に画像を追加し、複数の画像を選択します。

これにより、選択した画像のサムネイルが表示されるようになります。

なお、画像の幅などを編集したい場合には、「ギャラリーを編集」をクリックして編集可能です。

ギャラリーの編集では、カラム数(並べる数の指定)、ランダム(ランダムに表示させるか)、サイズ(画像を表示させるサイズの幅の指定)をそれぞれ指定できます。

タグクラウド

タグを表示させます。

例えば、上記のように投稿ページでタグを「ブログ」と設定しておくと、タグクラウドを使うことで下記のように表示されます。

なお、タグとカテゴリーの違いで迷う方がいるかと思いますが、基本的には、

・タグ・・・記事で使われる重要なキーワード

・カテゴリー・・・記事のジャンル

とされています。なお、タグの設定は必須ではありません。ただタグを設定すると、その設定したキーワードが使われている記事の一覧を表示させることができるので、関連記事を探しやすいと言えます。

テキスト

文字やリンクなどを入力し、表示させることができます。先に紹介したカスタムHTMLとほぼ同じ機能と言えますが、このウィジェットでは、ビジュアルエディタとテキストエディタの両方を使えます。

上記のように書くと、下記のように表示されます。

ビジュアルエディタにないHTMLタグを使いたい場合には、テキストエディタに直接HTMLを記述すればHTMLを使った表示が可能です。

ナビゲーションメニュー

メニューを表示させます。

上記のように表示させたいメニューを選ぶと、下記のように表示されます。(下記は「メニュー」にサンプルページを設定しています。)

なお、メニューの設定は「外観」にある「メニュー」から設定できます。

このメニューウィジェットは、メニューを設定しないと表示されません。ですので、先にメニューを設定する必要があります。

メタ情報

メタ情報が表示されます。

管理画面へのログインや投稿とコメントのRSS、WordPress公式サイトへのリンクが表示されます。

動画

動画を表示させます。ファイルをアップロードするか、またはYouTubeのURLを指定して表示させることができます。下記はYouTube動画の表示方法です。

「動画を追加」をクリックします。

「URLから挿入」をクリックします。

表示させたい動画のURLリンクを入力して設定します。

ウィジェットに動画のサムネイルが表示されるのでこれを「保存」すると、下記のように表示されます。

固定ページ

固定ページの一覧が表示されます。

編集により表示させたくないページや並び順を変更できます。

最近のコメント

コメントが新しい順に表示されます。

編集により表示させたいコメントの件数を指定できます。

最近の投稿

新しい順に)投稿した記事が表示されます。

編集により表示させたい記事の件数を指定できます。

検索

検索バーが表示されます。

なお検索バーは、サイト内にある文字を検索して、ヒットした記事を表示します。例えば「hello」を検索すると、helloを含むタイトル・内容を含む記事を表示させます。

画像

選んだ画像を表示させることができます。

「画像を追加」で画像を選びます。

上記のように設定すると、下記のように表示されます。

音声

音声ファイルの再生バーを表示させます。音声はアップロードしたファイルの指定と、URLによる指定が可能です。

「音声ファイルを追加」をクリックします。

音声ファイルを選んで設定します。

上記のように設定されるので「保存」すると、下記のように表示されます。

ウィジェットの表示位置

WEBサイトは、ヘッダー、コンテンツ、サイド、フッターのブロックに分かれています。

ウィジェットはこれら位置のいずれかに表示させることができます。

上記は一般的構成ですが、サイドが左にあったり、無かったりします。

なお、上記部分のコンテンツをメイン・アーティクル(記事)といったり、サイドのことをサイドバーやメニューと言ったりします。

これは、人によって違ったりしますが、意味は同じことです。そしてウィジェットの設置できる箇所はWordPressのテーマによって異なります。ここではWordPressテーマ「Lightning」を事例にして解説していきます。

WordPressテーマ「Lightning」では、

・モバイルナビ上部

・モバイルナビ下部

・サイドバー(トップページ)

・サイドバー(共通上部)

・サイドバー(共通下部)

・サイドバー(投稿)

・サイドバー(固定ページ)

・サイドバー(メディア)

・トップページコンテンツエリア

・フッター上部

・フッターウィジェットエリア1

・フッターウィジェットエリア2

・フッターウィジェットエリア3

の13ヵ所にウィジェットを配置させることができます。

WordPressのテーマによっては、タイトル下・記事上・記事下など事細かにウィジェットを配置させることができますが、まずはここで基本的な配置場所をお伝えします!

以降、これらウィジェットの位置を説明します。なお、ウィジェット「テキスト」に背景を赤く設定して設置させていますので、その位置が確認できます。

モバイルナビ上部

モバイルナビ上部は、パソコンには表示されずスマートフォンのメニュー部分に表示されます。メニュー部分とは左上の三段マークのところです。

上記の三段マークをクリックすると、先ほど設定した内容が表示されます。

モバイルナビ下部

モバイルナビ下部は、パソコンには表示されずスマートフォンのメニュー部分に表示されます。メニュー部分とは左上の三段マークのところです。

上記の三段マークをクリックすると、先ほど設定した内容が表示されます。

サイドバー(トップページ)

サイドバー(トップページ)は、サイトのトップページのサイドバーに表示されます。

サイトのトップページとは、サイトに訪れた人が最初にみるページのことです。

個別の記事などのページではなく、それら記事を選べる最初のページがトップページです。

そして、サイドバーは、右側(または左側)に位置するメニューだったりする場所です。ウィジェットをこのサイドバー(トップページ)に設置すると下記のように表示されます。

なお、モバイル(スマートフォン)でもトップページにサイドバーとして表示されます。

サイドバー(共通上部)

サイドバー(共通上部)は、サイトのトップページ・投稿ページ・固定ページ・メディアページすべてのサイドバーの上部に表示されます。サイドバーは、右側(または左側)に位置するメニューだったりする場所です。ウィジェットをこのサイドバー(トップページ)に設置すると下記のように表示されます。

なお、モバイル(スマートフォン)でもトップページ・投稿ページ・固定ページ・メディアページすべてにサイドバーの上部として表示されます。

サイドバー(共通下部)

サイドバー(共通下部)は、サイトのトップページ・投稿ページ・固定ページ・メディアページすべてのサイドバーの下部に表示されます。サイドバーは、右側(または左側)に位置するメニューだったりする場所です。ウィジェットをこのサイドバー(トップページ)に設置すると下記のように表示されます。

なお、モバイル(スマートフォン)でもトップページ・投稿ページ・固定ページ・メディアページすべてにサイドバーの下部として表示されます。

サイドバー(投稿)

サイドバー(投稿)は、投稿ページのサイドバーに表示されます。

サイドバーとは、右側(または左側)に位置するメニューだったりする場所です。ウィジェットをこのサイドバー(投稿)に設置すると下記のように表示されます。

なお、モバイル(スマートフォン)でも投稿ページのサイドバーとして表示されます。

サイドバー(固定ページ)

サイドバー(固定ページ)は、固定ページのサイドバーに表示されます。サイドバーとは、右側(または左側)に位置するメニューだったりする場所です。ウィジェットをこのサイドバー(固定ページ)に設置すると下記のように表示されます。

なお、モバイル(スマートフォン)でも固定ページのサイドバーに表示されます。

サイドバー(メディア)

サイドバー(メディア)は、メディアページのサイドバーに表示されます。メディアページとは、記事にある画像のページです。記事にある画像は、リンクのあるなしなどを選ぶことができますが、ここで「添付ファイルのページ」を選ぶと、その画像のみのページが生成されます。これがメディアページです。具体的には、画像の編集画面のリンク設定で行います。

これにより、下記の通りメディアページが生成されます。またサイドバーは、右側(または左側)に位置するメニューだったりする場所です。ウィジェットをこのサイドバー(メディア)に設置すると下記のように表示されます。

なお、モバイル(スマートフォン)でもメディアページのサイドバーに表示されます。

トップページコンテンツエリア

トップページのコンテンツエリアに表示されます。コンテンツエリアは、トップページの中央にある部分です。下記の画像では「コンテンツ」の部分となります。

なお、サイトのトップページとは、個別の記事などのページではなく、それら記事を選べる最初のページがトップページです。

このサイトを訪れた方が一番最初に目にするページですね。

ウィジェットをこのトップページコンテンツエリアに設置すると下記のように表示されます。

なお、モバイル(スマートフォン)でもトップページのコンテンツに表示されます。

フッター上部

フッターの上に表示されます。フッターの場所はコンテンツの下の場所となります。つまりフッターの上部とはコンテンツとフッターの間に位置します。下記の画像を参考にして下さい。

ウィジェットをこのフッター上部に設置すると下記のように表示されます。はコンテンツとフッターの間に位置しています。

なお、このフッター上部は、サイトのトップページ・投稿ページ・固定ページ・メディアページすべてのフッターの上部に表示されます。

また、モバイル(スマートフォン)でもトップページ・投稿ページ・固定ページ・メディアページすべてにフッターの上部に表示されます。

フッターウィジェットエリア1

フッターの内部の左側に表示されます。

フッターウィジェットエリア1はコンテンツの下にあるフッターの内部の左側に位置します。

ウィジェットをこのフッターウィジェットエリア1に設置すると下記のように表示されます。フッターの内部でなおかつ左側にあることが分かります。

なお、フッターウィジェットエリアについては、サイトのトップページ・投稿ページ・固定ページ・メディアページすべてのフッターの上部に表示されます。

また、モバイル(スマートフォン)でもトップページ・投稿ページ・固定ページ・メディアページすべてのフッターの内部に表示されます。

フッターウィジェットエリア2

フッターの内部の中央に表示されます。フッターウィジェットエリア2はコンテンツの下にあるフッターの内部の中央に位置します。

ウィジェットをこのフッターウィジェットエリア2に設置すると下記のように表示されます。フッターの内部でなおかつ中央にあることが分かります。

フッターウィジェットエリア3

フッターの内部の右側に表示されます。フッターウィジェットエリア3はコンテンツの下にあるフッターの内部の右側に位置します。

ウィジェットをこのフッターウィジェットエリア3に設置すると下記のように表示されます。フッターの内部でなおかつ中央にあることが分かります。

補足:WordPressテーマ「Lightning」においては、エリア1・2・3は左側・中央・右側と分かれました。ただし、WordPressテーマによって異なります。例えば、他のWordPressのテーマでは、左側、右側、右側の下のケースがあったりします。ウィジェットの場所が分からなったら、実際にウィジェットを置いて目で確認することをおすすめします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です