当サイトのサイドバーカスタマイズについてお問合せをいただいたので、AFFINGER5でどのように設定しているか、可能な限り詳細にご紹介していきます。
子テーマはJETを使用しておりますが、サイドバー部分については、AFFINGER5デフォルト機能でできるカスタマイズにしています。
また色々と手を加えると思いますが、取りあえず現時点のカスタマイズをご紹介していきます。
目次
当サイトのサイドバー構成
AFFINGER5は、デフォルトで新着記事一覧がサイドバーに表示されます。表示位置の大枠の順序は、以下の通り。
- サイドバートップ
- デフォルトの新着記事一覧
- サイドバーウィジェット
これを踏まえつつ、サイドバーを順に説明していきますね。
因みにこの画面、どこの抜粋かというとココですココ！
WordPress管理画面⇒外観⇒ウィジェットと移動し、サイドバートップとサイドバーウィジェットというところを見てくださいね！
サイドバートップ
サイドバーの一番上に表示させたい、デフォルトの新着記事よりも上に表示したいという場合はサイドバートップに突っ込みます。
当サイトは、新着記事一覧の前に広告エリアを設けています。自分で定期的に管理したいので、テキストで挿入しています。（記事書きながら気が付きましたが、ビジュアルエディタ使えばよかったと思いました。。）
①のテキストで表示しているのが、スクリーンショットで囲った部分です。
「フラワーギフトはこちら」という緑のボダンは、AFFINGER5のショートコードを利用して作成しています。
因みに、デフォルトのままウィジェットのテキストエリアを開くと
うっわ、ナニコレいっぱい…ってな感じになるので（投稿画面も同様）、これをスッキリさせたいという場合は、AFFINGER5の管理画面で使わないものにチェックを入れればＯＫです。
WordPress管理画面⇒AFFINGER5管理⇒投稿・固定記事⇒テキストエディタで非表示にしたいボタン
テキストエディタで非表示にしたいボタンにチェックを入れると、スッキリします。
チェック後保存をお忘れなく！
私の場合、テキストエディタでガリガリ書けるタイプではないので、ほとんど非表示にしています。ビジュアルエディタでこのほとんどが設定できるので、今のところ困ったりはしていません。
話がそれてしまいましたが、この緑のどうやって作るのーってピンポイントで知りたいという場合は、公式マニュアルサイトで、「ショートコード作成コード例」で検索してみてください。
プラグインの『AddQuicktag』を使うとより簡単に使えますが、4/17のアップデートでほとんどがビジュアルエディタから利用できるようになりました。
スクリーンショットの説明ばかりで申し訳ないですが、最新版にアップデート済みの方は、ビジュアルエディタのタグから様々なボタンやボックスを使うことができます。
ここまでなんやかんや書いて気が付きましたが、この広告エリア「テキスト」ではなく「ビジュアルエディター」使えばいいじゃん…って思いました。やって覚えろ人間なので、遠回りすることが多々あります。
デフォルトで表示される新着記事について
デフォルトで表示される新着記事の表示件数は、AFFINGER5の管理画面から変更可能です。
WP管理画面⇒AFFINGER5管理⇒トップページと移動します。
当サイトの設定はこんな感じ。
見出しを空欄に設定。
表示件数は8件。
トップページは元々新着記事が表示されるので、「トップページのサイドバーの新着記事一覧を非表示にする」にチェック。
因みにカテゴリーの色は、
一括で変更する場合は、WordPress管理画面⇒外観⇒カスタマイズ
各テキストとhタグ（見出し）
ずーっと下にスクロールしたところにある、「記事タイトル上のカテゴリ」で背景色と、文字色を変更できます。
カテゴリーごとに色を分けたいという場合は、WordPress管理画面⇒投稿⇒カテゴリーと移動し、
各カテゴリーの編集をぽちり。
カテゴリーの編集画面を下にスクロールしたところにある「背景色」で、カテゴリー別に色を設定することができます。
サイドバーウィジェットについて
サイドバーウィジェット表示の対応は以下のようになっています。
②サイト内検索
特にこれは難しい設定はなく、サイドバーウィジェットにサイト内検索を追加するのみです。
タイトルを付けると、検索ボックスの上にタイトルが表示されます。
③お問合せボタン
「02_STINGERお問合せボタン」というのがデフォルトであるので、それを使っています。
タイトルを変えると、ボタン内の表記が変わります。
URLはボタンの遷移先です。
お問い合わせフォームを設定しているので、そのページに遷移するようにURLを入力しています。
色は、各自テーマで基本色を決めていればその色になります。
色を変えたい場合は、WordPress管理画面⇒外観⇒カスタマイズ⇒オプションカラー⇒ウィジェットお問合せフォームボタンで変更できます。
④サイト管理者
「11_STINGERサイト管理者」を使っています。
サイドバーウィジェットで設定できるのはタイトルだけなので、他の部分で管理者の設定をしています。
プラグイン「WP User Avatar」については他サイトさんをリンクさせていただきます。
ゲーム、猫を…とい文章はWP管理画面⇒ユーザー⇒あなたのプロフィールから設定しています。
必要に応じてSNSを入力するとボタン表示されます。
私の場合はSNSについては、twitterのみ入力しています。
⑤テキスト
テキストで広告を挿入しています。
PickUp記事について
当サイトサイドバーの一番下段にはピックアップ記事を挿入しています。
これはウィジェットエリアで設定しているものではなく、AFFINGER5のおすすめの記事一覧作成機能から設定しています。
WP管理画面⇒AFFINGER管理と移動し、
おすすめの記事一覧から、設定します。
当サイトでは、表示する文字を「PickUp」と設定しています。
任意の人気記事を指定のところに表示したい投稿記事ID、「,」半角コンマで複数記事指定できます。トップの最上部に表示している方もちらほら見かけます。お好みで使ってください。
そして、サイドのスクロールに表示するにチェックを入れます。
保存をお忘れなく！
投稿記事IDは、WP管理画面の投稿一覧から確認できます。
背景色の設定は、WP管理画面⇒外観⇒カスタマイズ⇒オプションカラー⇒おすすめ記事で変更できます。
関連記事と新着記事と人気記事について
ちょっとサイドバーとは話がそれるかもしれませんが、関連記事、新着記事、人気記事について触れていこうと思います。
AFFINGER5は、デフォルトで関連記事と新着記事の表示が可能です。
関連記事について
AFFINGER5管理⇒投稿・固定記事と移動して、ずーっと下にスクロールしたところに、関連記事一覧という項目があります。
関連記事が表示されないんだけど…という場合はこのあたりのチェック項目確認してみるといいかもしれません。
そもそも同じカテゴリーで記事がないと表示されないので、記事数が少ない方は注意してください。
以前、STINGER8を使っていた時に、「WordPress Related Posts」というプラグインで関連記事を表示していたので、AFFINGER導入時はよく分からず有効化したままにしていましたが、今は停止しています。
最近よく見るのは、グーグルアドセンスの関連コンテンツ機能を使っているサイトさんですかね。
詳細はこちらのサイト様でご覧ください。
特化型サイトさんとか、記事数多いサイトさんなら結構効果ありそうと思いつつ、当サイトは雑記も雑記すぎてジャンルあっちこっちなので、導入してません。。
新着記事について
新着記事もデフォルトでサイドバーに表示されるようになっています。
表示されないんだけど…という場合は、WP管理画面⇒AFFINGER5管理⇒トップページに移動して、新着記事のところに非表示にするにチェックが入っていないか確認してみてください。
プラグインを使っている場合は、一旦停止してみて、どれをAFFINGER5の機能で表示しているか、どれをプラグインで表示しているかの切り分けができれば、上手く表示されない時の対処につながるかと思います。
人気記事について
人気記事はAFFINGER5のみでは表示できません。プラグインの「WordPress Popular Posts」を使うことで表示することができます。当サイトは利用しておりません。
雑記ブログのため、人気記事のジャンルもバラバラですし、当サイトで人気記事を表示してもあまり意味がなさそうだなと思ったため、そのように設定しています。
AFFINGER5サイドバーまとめ
サイドバーの大枠の表示順位
- サイドバートップ
- デフォルトの新着記事一覧
- サイドバーウィジェット
関連記事と新着記事
- 関連記事は投稿記事下にデフォルトで表示できる
- 新着記事はサイドバーにデフォルトで表示できる
- 色の変更は基本的に、WP管理画面⇒外観⇒カスタマイズで変更可能
AFFINGER5で人気記事を自動表示するにはプラグインがおすすめ
いかんせん私自身も分からない人間なので、こうやったら出来たよという程度のことしかご紹介できなくて申し訳ないのですが…ご質問いただいた方、並びに訪問してくださった方のお役に立てれば幸いです。
よければこちらもどうぞ↓
-
-
【WING(AFFINGER5)】スライドショーにそれぞれリンクを設定する方法
この度、当サイトのトップページにスライドショーを挿入し、それぞれの画像に別々のリンクを設定してみたので、そのやり方をまとめておきます。 「MetaSlider」というプラグインを使ってスライドショーを ...
-
-
WordPressのメニューを階層構造（ドロップダウン・入れ子）にする方法
WordPressのメニューを階層表示（ドロップダウン、入れ子）にする方法をご紹介します。やってみるとCSS編集も必要なく、実に簡単なのですが…方法にたどり着くのに苦労しました。メニューの表示がすっき ...