画像ウィジェットの使い方

WordPressでサイドバーやフッターなどのウィジェットエリアに画像を入れたい場合、画像ウィジェットを使います。

以前のバージョンではテキストウィジェットにhtmlを書き表示させる必要がありましたが、WordPressのバージョン4.8から追加された「画像」というウィジェットを使って画像を表示させることが可能です。

今回は「画像」ウィジェットを使ってサイドバーにバナー画像を貼り付けていく手順を初心者にもわかるように詳しく説明していきます。

「画像」ウィジェットの使い方

以下が「画像」の追加の手順です。

管理画面 → 外観 → ウィジェットを開く

今回は公開画面のサイドバーにバナー画像を表示させていきます。

WordPress カスタムHTMLウィジェット 追加

まずWordPressの管理画面を開きます。

WordPressの管理画面の開き方 → WordPressの管理画面(ダッシュボード)を表示する

WordPress 管理画面

外観 → [ウィジェット]をクリックし、ウィジェット画面を開きます。

WordPress ウィジェット

左側が利用できるウィジェットで、右側がウィジェットエリアです。

様々なウィジェットを右側のウィジェットエリアに追加することで、ウィジェットを表示することが出来ます。

ウィジェットを追加する方法は、2パターンありますので両方説明していきます。

「画像」ウィジェットをドラッグしてウィジェットエリアに追加する

左側のウィジェットが並んでいるところから、「画像」ウィジェットを探します。

「画像」ウィジェットをドラッグして、右側のウィジェットエリアに追加します。

ウィジェットエリアはテーマによって違いますが、今回は全てに共通して表示させたいため、[サイドバー(共通上部)]にドロップします。

画像ウィジェット 追加

「画像」ウィジェットが追加されました。

「画像」ウィジェットをクリックしてウィジェットエリアに追加する

左側のウィジェットが並んでいるところから、「画像」ウィジェットを探します。

「画像」ウィジェットをクリックします。

画像ウィジェット追加

追加したいウィジェットエリアを選択してクリックします。

今回は全てに共通して表示させたいため、[サイドバー(共通上部)]をクリックし、[ウィジェットを追加]をクリックします。

画像ウィジェット

「画像」ウィジェットが追加されました。

画像ウィジェット

一番下に追加されるので、「画像」のタイトル部分をドラッグして、サイドバー(共通上部)の中での位置を変えておきましょう。

画像

「画像」ウィジェットに画像をアップロードする

今回はサイドバナーとして画像を表示させます。

まずは画像をアップロードします。

「画像」ウィジェットのタイトル右端の▼をクリックし、「画像」ウィジェットパネルを開きます。

画像ウィジェットパネル

タイトルを入れます。

リスティング広告講座と言うタイトルをタイトル欄に入力します。

今回はタイトルを入れていますが、バナーのデザインなどにより必要ない場合は空欄でも構いません。

バナータイトル

画像をアップロードします。

画像を追加をクリックします。

サイドバーウィジェットに配置する場合、画像幅300px位程度のものが適正ですが、ほぼウィジェット幅に合わせて評してくれます。

表示速度に関わりますので、サイズが大きすぎるものは避けましょう。

画像を追加

ファイルをアップロードをクリックし、ファイルを開くかドラッグしてファイルをアップロードします。

アップロードが完了して、メディアライブラリに追加されます。

画像ウィジェット 画像追加 メディアライブラリ

右側の「添付ファイルの詳細」を確認します。

代替テキストは「リスティング広告虎の巻」と入力しました。

SEO対策として入力するようにしておきましょう。

下へスクロールして、リンク先とサイズを選択できますので、ここでリンク先 → カスタムURLクリックしてURL、サイズを指定しておきましょう。

リンク先はリスティング広告講座(http://listing.37design.co)、サイズは300×115の中サイズを選択しました。

ウィジェット追加 WordPress 

ウィジェットに追加ボタンをクリックします。

ウィジェットに追加

「画像」ウィジェットの設定を行う

画像ウィジェットには細かい設定を行うことが可能です。

「画像を編集」をクリックします。

画像を編集

画像をクリックした際、新しいリンクで飛ばしたいときは「上級者向け設定」の▼をクリックし、「リンクを新しいタブで開く」のチェックボックスをチェックしておきましょう。

リンクを新しいタブで開く

右下の「更新」をクリックして更新します。

公開画面で確認する

WordPressの公開画面で確認を行います。

WordPress ウィジェット追加

しっかりとウィジェットが表示されているのが確認できました。

リンク先も問題がないことを確認しましょう。

これで「画像」ウィジェットの追加は完了です。

「テキスト」ウィジェットから「画像」ウィジェットへ

以前からテキストウィジェットを使用してウィジェットエリアへの画像貼り付けをおこなっていらっしゃった方も多いと思いますので、バナー画像などは、「画像ウィジェット」へと交換しおきましょう。

今後は画像のアップロードもウィジェットからできるようになり、htmlを編集せずに画像の差し替えなどが容易になりますので大変便利です。

この機会に変更しておくようにしましょう。

投稿者プロフィール

古田 健
古田 健
WordPressを使ったホームページの構築を得意としており、その中でも企業が勝ち残るため、強みを徹底的に研ぎすませた、一点突破型ランディングページを提案している。 ECサイトからスタートアップのサイトまで幅広く手がけ、、サイトの改善をおこなうことで、売上をあげる実践的なWebマーケティングを行っている。

コメントを残す

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