空き地を有効活用!ウィジェットの追加方法と設定

本来であれば6章あたりでご紹介したい部分ですが、ページの都合でカットせざるを得なかったため特典でご案内します。

ウィジェットの追加方法

ウィジェットというのはカレンダーなどの情報をページに表示できるものです。

ワードプレスではページの空いてる場所にカンタンに追加できるようウィジェットエリアが用意されています。

聞きなれない名前かも知れませんが、操作や設定は難しくないのでひとまず進めていきましょう。

(図:7-4-1)テーマカスタマイザーのウィジェット設定画面

実際に表示を確認しながら作業をしたい場合は、外観>カスタマイズ>ウィジェットの順に開き(図:7-4-1)の状態にしましょう。

お使いのテーマは~というメッセージが出ていますが、ここに表示されていないウィジェットが置けるエリアとして記事下のスペースがあります。
※この部分に追加する方法は後ほど解説します。

まずは追加したいエリアを開きます。ひとまず右サイドバーを選択しましょう。

まずは便利な検索を追加!

カテゴリー、カレンダーも表示できます
(図:7-4-2)「ウィジェットを追加」→(図:7-4-3)追加可能なウィジェット一覧

(図:7-4-2)のように「ウィジェットを追加」をクリックすると(図:7-4-3)のように右側にあらかじめセットされている項目が出てきます。

これはテーマに付属しているもの、プラグインに付属しているもの、ワードプレス自体にもともと入っているものなど様々です。

(図:7-4-4)検索を追加してみよう

試しに「検索」をクリックして追加してみましょう。少し待機すると右側のプレビュー画面が更新されて(図:7-4-4)のように出てきます

ブログ内を任意のキーワードで検索できるようになるため、記事数が増えてきたら置いといてあげましょう。

「このブログにこんな情報が書いてあった気がするけどページが見つからない」みたいな時に大変便利です。

(図:7-4-5)ウィジェットのタイトルを追加してみる

(図:7-4-5)のタイトルのところに文字を追加することでタイトルが上の部分に追加されます。

絵文字を入れるとウィジェットがうまく出力されないことがあるので、使うとしたら顔文字や記号にとどめてください。
※テーマによっては絵文字や特殊な記号が使えることもありますので、試してみても大丈夫ですよ!

(図:7-4-6)カレンダーとカテゴリー一覧も追加

同じようにカレンダーとカテゴリーも追加してみました。

カテゴリーは現在記事のあるカテゴリーしか表示されません。階層を表示、とすると小カテゴリーも表示できます。

追従するサイドバーが便利!!

yStandardの基本の機能として、画面を下にスクロールした際にくっついてきてくれるサイドバーが用意されています。

どう便利かというと、ブログの記事はたいてい縦長なので読者読み終わるころにはせっかくのウィジェットエリアに何も表示されていない、ということになりがちです。

ならば、とサイドバーにたくさん追加しておくと、今度は短い記事やトップページで無駄に長くなってしまう、というジレンマがあります。

それを解決してくれるのが追従するサイドバーです。

(図:7-4-7)追従するサイドバーにウィジェットを追加する

左上部「<」で戻り、今度は「右サイドバー(追従)」→「ウィジェットを追加」ボタンを押します。

(図:7-4-7)で囲まれている[ys]と最初についているウィジェットはテーマyStandardに付属しているものです。便利なので使ってみましょう。

(図:7-4-8)人気記事ランキングを表示させる

(図:7-4-8)のように追加するだけで自動的にブログの人気記事をランキングで表示してくれます。

アイキャッチ画像の数値を大きくすると表示が大きくなります。オススメの画像サイズは71~81とのことです。

(図:7-4-9)広告追加ウィジェットが便利!

yStandardの広告表示用テキストウィジェットは、(図:7-4-9)のように広告のコードを追加するだけでバッチリです!広告については8章で語っていますので割愛します。

テキストウィジェットを使ってプロフィールを表示

個別記事の下にカンタンなプロフィールは表示されますが、ブログトップには表示されないのでサイドバーにプロフィールを載せてみましょう。

(図:7-4-10)外観>ウィジェットでコントロールする

テーマカスタマイザーで表示できなかったウィジェットエリアを含め、ウィジェットの細かい設定は外観>ウィジェットと開いた(図:7-4-10)の画面で編集できます。

(図:7-4-11)テキストウィジェットを右サイドバー追従に追加する

使いたいウィジェットの名前をクリックすると、どのエリアに追加するか選べる(図:7-4-11)の画面になります。場所を選択して「ウィジェットを追加」をクリックします。

(図:7-4-12)テキストウィジェットはワードプレスのエディタ風

テキストウィジェットは(図:7-4-12)のようにビジュアルエディタとテキストエディタに切り替え可能な、いつものエディタのようになっています。

しかしいくつか機能の制限があり画像の追加が出来ません。でも、ここから出来ないだけであって画像自体は扱えます!

ということで、他からテキストエディタに移動し画像を追加してみましょう。

(図:7-4-13)まずは画像ウィジェットを使って画像URLを取得

ウィジェット選択画面のまま作業するには画像ウィジェットを一旦追加するのが楽ちんです。

画像ウィジェットを一旦追加すると(図:7-4-13)のように「画像を追加」ボタンが出てきます。クリックするといつものメディア選択・追加が可能な画面になります。

(図:7-4-14)メディアに追加した画像のURLをコピーする

(図:7-4-14)を参考に、使いたい画像のURLをコピーします。ちなみに欄をクリックしてキーボードのCtrl+Aを押すとすべて選択され、Ctrl+Cを押すとコピーされます。

続いてテキストエディタに以下のコードを追加します。

<img src=”コピーした画像のURL” />

この””の間に先ほどコピーしてきた画像のURLを貼り付けます。ちなみに貼り付けはCtrl+Vです。

コードを入力した状態でビジュアルエディタに移動すると画像が表示されています。
※表示されていない場合はURLかコードを失敗している可能性が高いためやり直してみてくださいね。

(図:7-4-15)画像のサイズと配置を指定する

あとは四隅の小さな□を移動させてサイズを変更したり配置を指定したりいつも通り使えます。一度画像が貼れれば、いつものように画像の置き換えなども可能になります。

文字を入力し終わったら「保存」をクリックします。

(図:7-4-16)お好みの位置に移動して画像ウィジェットを削除しておく

タイトルのところをクリックしたまま移動させると並び替えが出来ます。(図7-4-16)のように画像ウィジェットは削除をクリックして消しておきましょう。

追従のサイドバーは長さを意識

(図:7-4-17)

完成すると(図:7-4-17)の表示になり、ページの表示が終わるまで、すなわち記事を読んでいる途中は右側に追従サイドバーの上の方であるプロフィールが表示されます。

そして画面の下の方までスクロールすると、人気の記事が表示されるようになっています。

一画面でおさまるようにするか、スクロールしたら表示が変わるようにするかはお好み次第です。いろいろ試してみましょうね!