WordPressのサイドバーの作り方やオススメの設置例|ウィジェット機能の使い方と合わせて解説 | LIVE YOUR LIFE

 

WordPressのサイドバーの作り方やオススメの設置例|ウィジェット機能の使い方と合わせて解説

 

WordPressでサイトを立ち上げたら、まずサイト全体のコンテンツやデザインを整えていくことになります。

 

今回はその中でもサイトの右側(左側の場合もある)に位置する『サイドバー』の設定方法や、どんなコンテンツを配置すべきなのか?ということについて解説していきましょう。

 

時折、サイドバーに全く手をつけていないようなサイトも目にしますが、サイドバーはサイトのヘッダー(一番上の部分)・メインコンテンツ(記事本文部分)に次いでユーザーの目に触れる重要なパーツです。

ユーザーに届けたいコンテンツを配置し、よりあなたのサイトについて知ってもらう・見てもらうためにも、必ずサイドバーの設定を施すようにしましょう。

 

基本的に今回の記事の解説通りに設定していただければ、必要十分なサイドバーを作成することができるので、ぜひ一緒に設定を進めていってくださいね:)

 

サイドバーの持つ役割

 

まず、そもそもサイドバーとはどこの部分なのか?というところから。

 

サイドバーとはその名の通り、サイトのに位置するコンテンツ部分のことを指します。イメージで見てみると、次の赤枠内になりますね。

 

突然ですが、サイトを訪れてくれたユーザーというのは、あなたのサイトを『見てくれて当たり前』というわけでは必ずしもありません。

というのも、もちろんインターネット上にはあなたのサイトやコンテンツだけではなく、数え切れないほどの情報で溢れかえっているために、ユーザーはいつでも他のコンテンツに移動することができます。

 

このことを『離脱』と言ったりもしますが、この離脱率を低くする役割がサイドバーにはあるんですね。

 

例えば、『このサイトは誰が書いているのか?』ということを知らせたり、サイトの他のコンテンツをユーザーに紹介したりと、よりあなたのサイトを見てくれるための『理由』をユーザーに指し示すことがサイドバーはできるわけです。

そうしてユーザーは『”あなたのサイトを見る理由”があるからサイトを見る』と、当たり前のことではありますが、このことは覚えておくようにしましょう。

 

もちろん、メインとなる記事本文のコンテンツやヘッダー部分にも同様のことが言えますが、今回は特にサイドバーに絞って『ユーザーがしっかりと見てくれるようなサイト作り』をできるように解説していきます。

 

WordPressサイドバーのオススメの設置例を紹介

 

では『サイドバーには一体何を設置するのがオススメか?』というところがまず大切なのですが、僕の経験を踏まえて必要最低限のものを列挙しました。

  • プロフィール
  • 検索窓
  • 最新記事一覧
  • 人気記事ランキング
  • カテゴリー

 

主にこの5つのコンテンツを配置しておけば、サイドバーとしての役割は十分に果たすことができます。

逆に言えば最低限これらのコンテンツは必要ということで、例えばプロフィールがなかったり、サイト内の記事を検索するための検索窓がなかったりすると『サイドバーとしての役割が果たせてないなー』なんて思ったりもします。

 

もちろんこの他にも例えばメルマガ登録のためのフォームだったり、企画や独自コンテンツの紹介だったり、各SNSアカウントの広報など、様々なコンテンツを配置することができますが、今回はブログを始めたばかりの初心者向けの内容ということで随時追加していっていただければと思います。

 

また、ブログのサイドバーでよく見る『アーカイブ』がないことに気がついたかもしれませんが、正直なところユーザーとしてアーカイブを利用したことはないので(サイトを分析したいときには使ったりもしますが)、サイドバーには必要ないと判断しました。

もし仮に『このサイトの記事を月別に確認してみたい!』というユーザーがいれば、という話ではありますが、そのようなユーザーもあまりいないので配置しなくてOKでしょう。

 

というように、サイドバーにはあくまで必要最低限のものを配置するべきで、むしろ『必要のないコンテンツ』を掲載しておくことはサイトにとってのマイナス効果となってしまうのでご注意くださいね。

 

サイドバーにウィジェットを追加する方法

 

それではここからは、実際にサイドバーにコンテンツを追加する方法を、各項目を配置する意味とともに解説していきましょう。

 

まず基本的なサイドバーの設定方法としては、WordPressのダッシュボード画面から『外観』→『ウィジェット』へと移っていきます。すると次のようなウィジェットの設定画面が表示されますね。

 

そして画像の赤枠と矢印で説明しているように、サイドバーにコンテンツを追加するためには、左側の『利用できるウィジェット』から使いたいウィジェットを選び、右側の『メインサイドバー(ご利用のテーマによって名称は変わります)』へドラッグ&ドロップしましょう。

こうして感覚的にとてもカンタンにウィジェットを追加することができるので、積極的に活用していきましょうね。

 

それではここからは、このウィジェット機能を使って各コンテンツをサイドバーに追加していきます。

 

プロフィール

 

『このサイトはどんな人が運営しているのか?』ということを表すプロフィールは、他サイトとの差別化を図るという意味でも非常に大切なコンテンツです。

特にブログの記事というのは『何を書いているか?』ということが大切なのはもちろんのことながら、それ以上に『誰が書いているのか?』ということが大切になってきます。

 

もちろん顔出しをしなければいけないわけでもありませんし、匿名のままでもOKなのですが、それでもサイトを運営している人間について情報を露出しておくようにしましょう。

 

実際にプロフィールをサイドバーに掲載するには、次のように利用できるウィジェットの中にある『テキスト』を、左側のサイドバーへとドラッグ&ドロップしましょう(場所は一番上が良いですね)。

 

するとウィジェットを編集する画面が表示されるので、次のように『タイトル』と本文部分に文章を入力します。

ここでは『プロフィール(PROFILE)』『このサイトについて』『運営者情報』など、サイト運営者についてのプロフィールだとわかりやすいような名前をつけましょう。

 

そして画像のように、本文部分にはサイトの運営者やサイトについての情報を軽く入力していきます。匿名で運営していく場合には、何か仮の名前やニックネームなどを使うと良いですね。

基本的には、

  • サイト運営者の名前
  • サイトの内容について
  • 軽めの挨拶

ここのあたりを書いておけばOKです。

 

また、文章だけだとあまり目立たないので、プロフィール画像を挿入したいという場合もあるでしょう。

 

その際にはダッシュボード画面の『メディア』から掲載したい画像を選択し、次のように『ファイルのURL』をコピーします。

(※画像がもしない場合には『画像 フリー素材』などと検索エンジンで検索し、フリー素材用のサイトからプロフィールとして使いたい画像を持ってくるようにしましょう。)

 

そして再び『外観』→『ウィジェット』を選択し、先ほど設定したプロフィールウィジェットの設定を表示させましょう。

 

ここで画像の赤枠で囲ってあるように『テキスト』エディタに切り替えていただき、そして本文部分に画像を挿入するためのコードを入力していきます。

 

具体的には、先ほどコピーした画像のURLを以下のように書き換えています。

 

コードについて詳しく解説すると、まずは『画像のURL』の部分を先ほどコピーしたURLに書き換えましょう。

そして、『width=”300″ height=”200″』の数字の部分を自由に書き換えていただくと、画像の縦幅・横幅を自由に変更することができますので、お好みで調節してみてくださいね。

『<center></center>』というコードは、画像を中央寄せするために使用しています。

 

入力が終わり忘れずに『保存』ボタンをクリックすると、次のように実際にサイドバーに『プロフィール』項目が追加されました。

 

このようにカンタンなプロフィールを掲載しておくだけで、サイトの独自性というのも高まっていくので、ぜひサイドバーの一番上に設置するようにしましょう。

 

検索窓

 

プロフィールの下には、サイト内の記事を検索することができる検索窓を設置しておきましょう。

検索窓はユーザーに利用される頻度も比較的高いコンテンツなので、サイドバーの下の方ではなく上の方に設置しておくのが良いですね。

 

先ほどと同様に、次のように左側にある利用できるウィジェットの中にある『検索』を、左側にあるサイドバーにドラッグ&ドロップしましょう(最初からある場合はOKです)。

 

そしてウィジェットの設定画面から『保存』をクリックすると、次のようにサイドバーに検索窓が表示されました。

 

最新記事一覧

 

プロフィール・検索窓と続いてきましたが、ここからはサイトの記事コンテンツを紹介するためのウェジェットを追加していきます。

特に最新記事一覧はサイトの新しい記事をユーザーに届けることができたり、サイトがしっかりと更新されていることを知らせることができたり、サイトの回遊率を高めることができたりと、たくさんのメリットがあるので検索窓の次に配置していきましょう。

 

で、肝心のウィジェットなのですが、たいていのテーマには『最近の投稿』というウィジェットが用意されていると思います。

しかしこのデフォルトのウィジェットでは、サムネイル画像なしの質素な最新記事一覧であることが多いので、ここではプラグインを使用していきましょう。

 

最新記事一覧を表示するプラグインでは、以下の2つを僕はオススメしています。

どちらか一方でOKなので、プラグインの解説記事を参考にしつつお好みで設置してみてくださいね。

 

ちなみに、両プラグインは実際のサイトでは以下のように表示されるようになっています。

 

お好みでプラグインを導入していただいたら、次のように利用できるウィジェットからメインサイドバーへ、ウィジェットをドラッグ&ドロップしましょう。

 

人気記事ランキング

 

最新記事の一覧だけでなく、プラグインを活用することによって、サイトの中で人気のある(アクセスが集まっている)コンテンツを一覧形式で表示させることもできます。

サイトの中で人気のある記事ということは、それだけ価値を提供できている記事ということでもあり、まさにサイトの”顔”とも言えるコンテンツです。

 

そんなあなたのメインコンテンツをユーザーに読んでもらえるよう、この人気記事ランキングはぜひ設置していきましょう。

 

人気記事ランキングを設置するには『WordPress Popular Posts』というプラグインを使用していくので、ぜひ以下記事を参考になさってくださいね。

参考記事:サイドバーに人気記事一覧を表示しよう!WordPress Popular Postsを紹介

 

無事プラグインを導入し終えたら、次のように左側にある利用できるウィジェット内にある『WordPress Popular Posts』を、右側にあるメインサイドバーへとドラッグ&ドロップしましょう。

 

カテゴリー

 

そして最後に、記事を分類したカテゴリーの一覧もサイドバーに設置していきましょう。

記事を読んでくれたユーザーが、同じカテゴリー内の記事をもっと読んでみたくなった際にとても役立ちますので、最新記事や人気記事の一覧の下あたりに設置しておくと良いですね。

 

カテゴリーを追加するには、これまでと同様に左側にある利用できるウィジェットの中にある『カテゴリー』を、右側のサイドバーへとドラッグ&ドロップしましょう。

 

不要な項目は削除しておこう

 

以上、必要なウィジェットをサイドバーに追加してきましたが、デフォルトで設置されている不要な項目がまだ残っているかもしれません。

 

主に『最近のコメント』『メタ情報』などがそれに当たりますが、設置しておく必要のない項目は次のように『削除』ボタンをクリックして削除しておきましょう。

 

無事に不要なウィジェットを削除することができたら、ウィジェット項目と実際の画面を確認してみましょう。次のように5つの項目にまとまっていればまずはOKです(※最新記事一覧は”Newpost Catch”もしくは”Elegant Posts Widget”どちらかで構いません)。

 

これでサイドバーを作成することができましたね。サイトをこれから運営していく中で、必要だと思った項目を追加したり、逆に不要だと思った項目は削除したりと、お好みで設定していってくださいね:)

 

最後に

 

以上、WordPressサイトのサイドバーに設置すべき項目と、ウィジェットを使ってそれらの項目を設置する方法を解説しました。いかがだったでしょうか?

 

今一度確認すると、今回サイドバーに設置したのは以下の5つの項目でしたね。

  • プロフィール
  • 検索窓
  • 最新記事一覧
  • 人気記事ランキング
  • カテゴリー

 

最低限これらの項目があればOKなので、ぜひ解説をもとにサイドバーを作成していただければと思います。

また、サイトを運営していく中で追加したい項目も出てくると思うので、その都度今回のようにウィジェットから要素を追加していきましょう。

 

サイドバーをしっかりと充実させ、ユーザーに愛されるサイト運営をこれからも心がけていけると良いですね。

 


MAIL MAGAZINE

RIKU

最後まで読んでいただきありがとうございます!

僕が運営しているメール講座では、
自ら立ち上げたメディアから3ヶ月で月収10万円の収益を得た方法
会社に依存せずに個人で収入を得て生きれるようになった経緯など、
こちらのオフィシャルメディアではできないお話をしています。

無料で参加することができるので、ぜひ気軽にご参加くださいね:)

 

 

     

公開日:2017/09/19

コメントを残す

サブコンテンツ

TO THE TOP