手ぶらで速習 WordPress 個人レッスン始めました詳細はこちら

【ステップ 7】カスタマイザー:ウィジェットの設定

【連載】WordPressでポートフォリオの作り方の【ステップ 7】です。
カスタマイザーでのブロックウィジェットの使い方を図解と動画で説明しています。

ウィジェットとは

ウィジェットとはテーマで指定されたWebページの「ある箇所」にパーツ(項目を部品化したもの) を追加できる機能です。

ウィジェット詳細についてはこちらで初心者向けに説明しています。

これ以降、Webページの「ある箇所」のことをウィジェット表示エリアという言葉で説明を進めます。

yStandardではフッター左・フッター中央・フッター右・サイドバー・サイドバー(追従)・記事上エリア(投稿)・記事下エリア(投稿)にウィジェットエリアが設定されています。

すべてのウィジェット表示エリアはyStandard公式マニュアルのほうで紹介されています。

今回はサイドバーのウィジェットを設定・変更しながらブロックウィジェット機能を覚えていきましょう。
最終的に投稿ページのサイドバーを下図のような表示にしていきます。

サイドバーのウィジェットを設定

ウィジェットを設定する場所

外観  >  カスタマイズウィジェットから設定画面に進めます。

WordPressのウィジェットを設定する場所。外観  >  カスタマイズでウィジェット

このウィジェットの設定は 外観 >ウィジェットからも設定できます。

WordPressのウィジェットを設定する場所。外観 > ウィジェット

操作画面や手順は少々異なりますが、やっていることは同じです。

サイドバーウィジェットの設定

外観  >  カスタマイズ > ウィジェットと進んだ画面です。

プレビューがトップページになっている場合は、どれでもよいので、ひとつ投稿をクリックして投稿ページに移動します。

外観  >  カスタマイズ >ウィジェットと進んだ画面

下図は投稿ページに移動したところです。
サイドバーをクリックして進みましょう。

外観  >  カスタマイズ >ウィジェットと進んだ画面。投稿ページを確認

サイドバーウィジェットの編集画面になります。

WordPressサイドバーウィジェットの編集画面

サイドバーウィジェットの設定手順

設定手順は以下になります。
ブロックの扱いは慣れです。
WordPressはどんどんブロック化されていくのでがんばって慣れてしまいましょう。

STEP1
不要なウィジェットを削除する(最近の投稿・最近のコメント)

初期状態で入っているブロックはグループ化されているのでグループを選択して削除します。
ヒント最近の投稿の文字を選択するとグループを選択できるツールバーが表示されます。
グループ選択後、一旦ツールバーが消えてしまった場合はマウスカーソルをグループの青枠の中に持っていくと再度ツールバーが現れます。

サイドバーウィジェットの設定手順・不要なウィジェットを削除する

STEP2
ウィジェットの表示順を入れ替える(アーカイブ・カテゴリー)

同様にグループを選択して表示順を入れ替えます。

STEP3
ブロックの追加(見出しとバナー画像)

ヒントラベルの文字の先頭の「ラ」にカーソルがある状態で、下図の赤枠辺りをマウスオーバーするとブロックを追加プラスマークが表示され、クリックすると利用可能なブロックが選べるようになります。
見出しはh3に、バナー画像にはリンクを設定しました。

STEP4
新しく追加したブロック(見出しとバナー画像)は別々のブロックなので、これをグループ化する。

ヒントオリジナルテーマの文字を選択した状態でShiftキーを押しながらバナー画像を選択すると上手くいきます。

STEP5
ページ表示の確認。

できたら公開してページの表示を確認します。

ブロックウィジェットの使い方動画(3分)

ここまで説明してきたサイドバーウィジェットの設定手順を動画にしましたのでご覧ください。
たった3分でブロックウィジェットの操作方法がわかります。

ブロックウィジェットの使い方動画(3分)


 
次回【ステップ 8】ではyStandardテーマのヘッダーメディアの設定方法を紹介しています。

ヘッダー(カスタムヘッダー)はトップページを開いたときに最初に目に入るエリアで、そのWebサイトの印象を決める大切なデザイン要素となります。
あなたのイメージを伝えられる、これぞっという画像を用意して!一緒に進めていきましょう。

URLをコピーしました!