Go to top Go to bottom

サイドバーは、ウィジットと呼ばれる小さな部品で構成されることが多く、対応しているテーマは多いと思います。

前回の記事では、固定ページを追加してメニューをカスタマイズするところまで見てきました。今回は、サイドバーとウィジットについて理解を深め、実際に自分で組み替えられるようになるところまで説明したいと思います。

また、デフォルトにはないウィジットをプラグインを用いて追加する流れについても、「WordPress Popular Posts(人気記事を表示するプラグイン)」を例にとって紹介していきます。

サイドバーとウィジットとは

サイドバーとウィジットに対応しているかどうかは、使用しているテーマによります。対応していないテーマでは、ウィジットの機能を使うことはできません。

ここでは、サイドバーに対応している、Twenty Seventeenを例に見ていきましょう。

サイドバーとウィジット
サイドバーとウィジット

Twenty Seventeenは、3つのサイドバーに対応しています。名前に「サイド」とついていますが、どこに表示するかはテーマ作成者の自由です。

サイドバーには、1つまたは複数のウィジットが含まれていて、何を入れるかは通常、管理画面のウィジットメニューから選ぶことができます。

1には、「検索フォーム」や「最近の投稿」「カテゴリ」などたくさんのウィジットが含まれていますね。

サイドバーをカスタマイズしよう

サイドバーをカスタマイズするには[外観]→[ウィジット]とたどります。

ウィジットメニュー
ウィジットメニュー

利用できるウィジットの一覧が左に、テーマが対応しているサイドバーが右に表示されています。

ウィジットの追加
ウィジットの追加

ウィジットの追加は簡単で、利用したいウィジットを対象となるサイドバーへドラッグアンドドロップするだけです。

一番最初に示した画像の、1がサイドバー、2がフッター1、3がフッター2に対応しています。

個別のウィジットの設定
個別のウィジットの設定

各ウィジットは、個別の設定を持っています。例えば上の図は、「最近の投稿」の設定です。

タイトルのほか、「何件表示するか」「投稿した日付を表示するか」という設定を変更できることがわかりますね。

また、[削除]をクリックすると、このサイドバーからウィジットを取り除くこともできます。

カスタマイズ後のサイドバー
カスタマイズ後のサイドバー

実際に少しカスタマイズしてみました。これらの機能を1から作るとなると大変ですが、ウィジットを使えば簡単に組み換えや調整を行うことができるので、非常に便利です。

便利なテキストウィジット

ウィジットの中に、「テキスト」というものがあります。

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

このウィジットはとても有用で、単なるテキストだけでなく、HTMLのタグを記入することもできます

HTMLタグの入ったテキストウィジット
HTMLタグの入ったテキストウィジット

上の例では、メール用のリンクを挿入してみました。簡単なオリジナルのウィジットを作るイメージですね。

例えば、グーグルアドセンスの広告を入れたり、SoundCloudの音楽をリンクさせたりと、いろいろな用途で使うことができます。

ウィジットを追加する

一覧にないウィジットも、プラグインを追加することで新たに手に入れることができます。たとえば、一覧に「最近の記事」はありますが、「人気の記事」はありません。

人気の記事を表示できるプラグインはいくつかありますが、ここでは「WordPress Popular Posts」を使ってサイトに人気記事を表示してみましょう。

WordPress Popular Postsを検索
WordPress Popular Postsを検索

[プラグイン]→[新規追加]で1の検索欄から「WordPress Popular Posts」を検索してください。

見つかったら、2の[今すぐインストール]ボタンを押します。

WordPress Popular Postsの有効化
WordPress Popular Postsの有効化

インストールが終わるとボタンが[有効化]に変わるので、クリックしてください。ここまでの流れはWordPressをインストールした後に行う初期設定と、おさえておくべき管理画面の基本的な使い方で学習しましたね。

有効化したら、自動的にプラグインページに表示が切り替わると思います。つづけて、[外観]→[ウィジット]とたどり、ウィジットページに戻ってください。

WordPress Popular Postsウィジット
WordPress Popular Postsウィジット

利用できるウィジットに、「WordPress Popular Posts」が加わっていることがわかります。あとは、これまでの手順通り、サイドバーにドラッグアンドドロップで追加するだけです。

ところが、WordPress Popular Postsは表記が英語の上、設定項目が非常にたくさんありますので、少しだけ解説を加えておきます(WordPress Popular Postsの解説サイトは多いので、詳しく知りたい方はグーグルで検索してみてください)。

WordPress Popular Postsの設定画面
WordPress Popular Postsの設定画面

大切な部分だけ解説します。

まず、1の”Title”はタイトル、2の”Show up to:”は表示数のことです。デフォルトでは10になっているので、5にしてみました。

3の”Time Range”は、人気記事の集計期間で、デフォルトでは”Last 24 Hours”(24時間前から今まで)になっています。すべての期間での人気記事を表示したかったので、ここでは”All-time”(全期間)を選びました。

4の”Post Type(s)”は、人気記事の集計対象です。デフォルトでは”posts, pages”となっていますが、これは全投稿、および全固定ページを意味しています。固定ページは集計から外したかったので、”posts”のみにしました(複数設定する場合はコンマで区切ります。カスタム投稿などを含めることもできます)。

また、5の”Display post thumbnail”のチェックを入れると、記事のサムネイル(アイキャッチ画像)を表示することができます。

最後に、6の”Display views”で、ビューカウントを表示するかどうかを決めます。

設定が終わったら、[保存]ボタンを押すのを忘れないでください。

WordPress Popular Postsの表示確認
WordPress Popular Postsの表示確認

確認してみましょう。Webサイトを訪れると、「人気の記事」は表示されていますが、”Sorry. No data so far.”となっているかもしれません。「ごめんね。データがまだないよ」と言われているので、何回か記事をクリックしてビューカウントを上げてみてください。

すると、上のように人気の記事一覧が表示されているのを確認できます。

どのプラグインがウィジットに対応しているかは、プラグインについているタグで判断できるのですが、あまり使いません。
ウィジットを探すときは、グーグルで検索するのが近道です。英語にしか対応していないものもあるので、使える方は英語で検索してみてください。

おわりに

今回は、サイドバーおよびウィジットを使ったカスタマイズについて説明してきました。Webサイトに様々な機能をつけたり、逆にはずしたりということが直感的かつ容易にできるので、有効活用したいところです。

冒頭にも書きましたが、サイドバーに対応しているかどうかはテーマ次第なので、テーマを選ぶときの一つの基準にもなりえます。

最後に、内容が理解できたかどうかチェックしてみましょう!

  • サイドバーとウィジットとは何か理解できている
  • サイドバーへのウィジットの追加、削除が行える
  • テキストウィジットを用いて、HTMLを使ったウィジットを追加できる
  • 一覧にないウィジットを新たに追加することができる

さて次回は、メニューやウィジットではカスタマイズできない部分を、テーマカスタマイザーを用いて変更してみたいと思います。

つづけて読む

この記事には続きがあります。

ぜひ合わせて読んでみてください!