1. HOME
  2. マニュアル
  3. WordPress導入・設定
  4. 【WP標準】ウィジェットの設定

【WP標準】ウィジェットの設定

2017.1.19  WordPress導入・設定

ウィジェットとは本文エリア以外の場所に任意のテキストやバナー画像、メニューなどちょっとしたパーツを表示できる機能です。ウィジェット自体はWordPressの標準機能ですが、お使いのテーマ(テンプレート)によって表示できる項目やエリアが異なります。

ウィジェットは「外観」→「ウィジェット」から設定します。
下図の左枠の項目が表示できる項目で、右枠がサイト上で表示される場所です。以降の手順はすべてを設定する必要はありませんので、用途に応じて設定をお願いいたします。

たらとろワードプレス初期設定

1.ブログのサイドバーの設定

まずはブログ記事の横(PC/タブレット)に表示される項目を設定してみましょう。
あらかじめ設定されている項目で不要なものは「▼」をクリックしてパネルを開き、「削除」をクリックします。(削除しても再度設定できます)
ウィジェットの中身はドラッグ&ドロップで並べ替えることができます。

たらとろワードプレス初期設定

ブログの記事を見てみると、右側にウィジェットが表示されています。

※変わらない場合はブラウザの更新ボタンをクリック。(またはwin:Ctrl+Rキー、mac:command+Rキー)

たらとろワードプレス初期設定

2.ウィジェットに画像を表示する

WordPress4.8から標準機能として「画像」ウィジェットが追加されました。4.7以前のバージョンをお使いの場合は、Image Widgetというプラグインを使うと同じように画像を簡単に挿入できます。

画像からリンクを貼りたい場合は、先にリンク先のURLをコピーしておきます。

画像ウィジェット

「外観」→「ウィジェット」から「画像」をクリックして表示場所を選択、または表示させたいウィジェットエリアまでドラッグします。

画像ウィジェット

画像のウィジェットが追加されました。「画像を追加」ボタンをクリックします。

画像ウィジェット

挿入したい画像を選択し、右下の「リンク先」から「カスタムURL」を選択します。

画像ウィジェット

こちらに先ほどコピーしたURLをペーストし、「ウィジェットに追加」をクリックします。

画像ウィジェット

「保存」をクリックします。

画像ウィジェット

画像が挿入されました。

画像ウィジェット

3.ウィジェットにテキストを表示する

「テキスト」を使えばウィジェット欄に任意のテキストを表示させることができます。

WordPress4.7まではこのような入力画面です。

たらとろワードプレス初期設定

WordPress4.8以降、ビジュアルモードとテキストモードが使えるようになり、リンクの挿入など直感的に行えるようになりました。WordPress4.9からは「メディア」ボタンも追加されたので、普通の記事と同じように画像の挿入も簡単にできます。

テキストウィジェット テキストウィジェット

たらとろワードプレス初期設定

4.ウィジェットに任意のメニューを表示させる

ヘッダーメニュー、フッターメニューとは別に、ウィジェット欄に任意のリンクを表示させたい場合の方法です。設定すると上図の右下「TIPS」のようなメニューを作成できます。

まずは「外観」→「メニュー」からメニューを作成します。

「新規メニューを作成」をクリックし、「右メニュー」と入力し「メニューを作成」をクリックします。

たらとろワードプレス初期設定

既存の固定ページ、カテゴリー、あるいはカスタムリンクなど好きなページを選択し、「メニューに追加」をクリックします。「テーマの位置」は空にしたままにします。

「メニューを保存」をクリックします。

たらとろワードプレス初期設定

「外観」→「ウィジェット」に戻ります。

「利用できるウィジェット」の「カスタムメニュー」を右側の表示させたいエリアにドラッグ&ドロップします。

たらとろワードプレス初期設定

「カスタムメニュー」のパネルを開き、「タイトル」に任意のメニュータイトルを、「メニューを選択」で先ほど作成した「右メニュー」を選び「保存」をクリックします。

たらとろワードプレス初期設定

サイト表示を確認すると右サイドにメニューが追加されました。

たらとろワードプレス初期設定

5.トップページの3つのPRボックスの設定【動画】

こちらはテーマによって対応しているものとしていないものがあります。
サイドバーではなくトップページの本文エリアで表示されます。

↓動画での説明はこちら

「利用できるウィジェット」から「3つのPR(トップページ用)」を右の「トップページ:3つのPR」にドラッグ&ドロップします。

たらとろワードプレス初期設定

「▼」をクリックしてパネルを開き、「タイトル」「画像のURL」「内容」「リンク先URL」を入力し、「保存」をクリックします。画像のURLは「ロゴ画像」の時と同じ手順でコピペしてください。

たらとろワードプレス初期設定

同じ手順で3つ設定します。ドラッグで並べ替えもできます。

たらとろワードプレス初期設定

サイトの表示を確認するとこのようになっています。

たらとろワードプレス初期設定

先ほど作った固定ページの内容を埋めていきます。

Pocket