sidebar.phpにウィジェットを追加する

前回まででindex.phpの作成が終わりました。今回はサイドバー部分の設定を行っていきます。

【作成順序】

開発環境の用意
テーマ初期設定
index.php（一覧表示)
sidebar.php（サイトバー部分）
single.php（記事ページ）
front-page.php（サイトのトップページ）

1.sidebar.phpでウィジェットを呼び出す

サイトバーに表示している項目のうち、以下３つはWordPressのウィジェット機能を使って設置します。

最近の投稿
タグクラウド
アーカイブ

POPULAR POST（人気の記事）は、プラグインを使って追加します。サイドバーの一番上にある検索機能は、次のレッスンで作成します。

1-1.ウィジェットの設定

『header.phpを調整し、ナビゲーションを入れる』で、functions.phpにウイジェットが利用できるように既に記述はしています。管理画面 > 外観 > ウィジェットを開いて、表示項目を設定してみましょう。

プラスアイコンをクリックして、追加したい項目（ブロック）を選びます。

file

一覧の中に追加したいものがあれば、そのままクリック。なければ、すべて表示をクリックします。

下図では“最新の投稿”が出ていますが、一覧から選んでみましょう。

file 　↓ file

左側に表示された一覧から、お好きな項目を追加できます。スクロールダウンして探すか、最上部の検索バーを使うと良いでしょう。

“最新の投稿”をクリックして、サイドバーに追加します。

file

ブロックごとに、何の項目か見出しをを付けます。ツールバーの左端にあるアイコンをクリック。変換のメニューの中から、ウィジェットグループを選択してください。

file

タイトルという欄が増えるので、RECENT POSTと入力します。

file

同様の手順で、“タグクラウド”と“アーカイブ”をそれぞれサイドバーに追加してください。タイトルを設定して、右上の青い「更新」ボタンで保存します。

file

1-2.sidebarからウィジェットを呼び出す

テーマファイルに追記して、設定したウィジェットを表示させます。使うのは以下のコードです。

<?php dynamic_sidebar( 'sidebar1' ); ?>

sidebar.phpの、SEARCHエリアの下に書いてみます。

sidebar.php

上書き保存して、ブラウザで表示を確認してみましょう。

file

見た目は残念な感じですが、内容は表示されていますね。

1-3.WordPress出力タグの確認

検証ツールで、WordPressのウィジェットから出力された部分のコードを見てください。

file

ブロック1つ1つが liタグで囲まれています。 class="widget widget_block"は全て共通、id="block-数字"でそれぞれのブロックを区別しているようですね。

1-4.コードを調整する

WordPressが出力しているタグに合わせて、コードを調整していきましょう。

① ulタグで囲う

ウィジェットで設定した部分は<li ...>とliタグから書き出されています。

sidebar.phpの方で、ulタグで囲ってあげましょう。合わせてBootstrapのクラスを追加し、邪魔なリストマークを無くします。

sidebar.php

<ul class="list-unstyled">
    <?php dynamic_sidebar( 'sidebar1' ); ?>
</ul>

ブラウザでリストマークの・が消えていることを確認してください。

file

② style.cssで、見出しのセレクタを変更

style.cssに書いているセレクタを、WordPressが出力しているidもしくはclassに変更します。各ブロックのタイトルもh2タグが使われているので、合わせて直しましょう。

まず、見出しのところですね。 liタグに振られている id は人によって違いますので、ご自身のサイトに合わせてください。

file

style.cssの例

.search h3::before,
.popularposts h3::before,
.widget h2::before {
  font-family: "Font Awesome 5 Free" ;
  font-weight: 600;
  padding-right: 7px;
}

.search h3::before {
  content: "\f002";
}
.popularposts h3::before{
  content: "\f521";
}
#block-7 h2::before { /* RECENT POST */
  content: "\f133";
}
#block-9 h2::before { /* ARCHIVES */
  content: "\f187";
}
#block-8 h2::before { /* TAGS */
  content: "\f02c";
}

一覧ページをリロードして、表示を確認してください。アイコンが表示されていたらOKです。

file

③ 背景・余白・文字サイズを設定

ブロック（liタグ）ごとに背景色が白くなり、余白がつくようにstyle.cssに記述します。 Bootstrapのbg-whiteや、margin,padding関連クラスのスタイルを合体させたスタイル指定を書くイメージです。

style.css

aside li.widget{
  background-color: #fff;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

ブラウザ表示を確認してください。

file

見出しはhtmlではH3でしたが、ウィジェットから出力されているのはH2タグ。文字が大きいので、CSSを追記して調整します。

サイズが変わってしまわないように、ウィジェットの上のSEARCHを囲うタグも変えておきましょう。

sidebar.php

<aside class="col-md-4">
  <div class="search bg-white p-3 p-md-4 mb-4">
    <h2 class="mb-3">SEARCH</h2>
    <form class="input-group py-3">
      <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
      <button type="button" class="btn btn-primary">
        <i class="fas fa-search"></i>
      </button>
    </form>
  </div>
  <ul class="list-unstyled">
    <?php dynamic_sidebar( 'test-widgets' ); ?>
  </ul>

style.css

aside h2{
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.search h2::before,
.popularposts h3::before,
.widget h2::before {
  font-family: "Font Awesome 5 Free" ;
  font-weight: 600;
  padding-right: 7px;
}

.search h2::before {
  content: "\f002";
}

file

HTMLで作ったデザインに、かなり近づいてきました。

④ タグの表示を直す

タグクラウドの表示をHTMLのデザインに近づけていきます。

WordPressが出力している部分を、検証ツールで見てみましょう。

file

タグ1つ1つはaタグで囲われていて、tag-cloud-linkという共通したクラスを持っていることがわかります。

このクラスを使って、CSSを書いていきます。サイドバーの下部に残っている、HTML制作部分のスタイル指定をコピペして調整すると楽です。

style.css

/* タグクラウド */
.tag-cloud-link{
  display: inline-block;
  background-color: #0078ff;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.7rem;
  margin-right: 0.25rem;
  text-align: center;
  border-radius: 15px;
  color: #FFF;
  font-size: 1rem !important;/* WP側でのフォントサイズ無効 */
}

file

⑤RECENT POSTの表示を調整

RECENT POSTを整えます。リストマークの位置と形を整え、liタグ間に余白を入れましょう。

CSSセレクタに使うクラスは、検証ツールで確認してください。

file

style.css

/* 最近の投稿 */
.wp-block-latest-posts__list{
  padding-left: 1.5rem;
  list-style-type: disc;
}

.wp-block-latest-posts__list li{
  margin-bottom: 1rem
}

file

⑤アーカイブの表示を直す

ARCHIVESの方は、リストマークが要らないですね。 RECENT POSTと同じように、liタグ間にも余白を入れます。

style.css

/* アーカイブ */
.wp-block-archives-list{
  padding-left: 0;
  list-style: none;
}

.wp-block-archives-list li{
  margin-bottom: 1rem
}

file

これで、ウィジェットで追加した部分の調整ができました。

2.WordPress Popular Postsを導入する

人気記事は「WordPress Popular Posts」というプラグインを利用して設定します。

2-1. プラグインの追加

管理画面>プラグイン>新規追加の画面を開きます。右上の検索窓に「WordPress Popular Posts」と入力して、プラグインのインストール＆有効化を行ってください。

file

2-2. ウィジェットへ追加

ウィジェットの設定画面を開きます。

青色のプラスアイコンで、追加可能なブロック一覧を表示してください。「WordPress Popular Posts」をクリックして追加。ウィジェットの一番上に配置します。

file

一番上のTITLE欄にPOPULAR POSTと入力してください。

file

TITLEよりも下の項目では、人気記事の表示条件が設定できます。

file

まずはデフォルトのままで良いので、下記２箇所を変更してください。

①Posts settingsを変更

Posts settingsの中で、Display post thumbnailの項目にチェック。下に表示されるプルダウンを変更します。

file

１番目：Use predefined size
２番目：MEDIUM

②HTML Markup settings

Use custom HTML Markupにチェックを入れます。下図のようにHTMLタグを設定する箇所が出てきます。下3つの項目を変更します。

BEFORE POPULAR POSTS
AFTER POPULAR POSTS
POST HTML MARKUP

file

BEFORE POPULAR POSTSとAFTER POPULAR POSTSは、テキストボックスの中身を空にしてください。 POST HTML MARKUPを、HTMLで作った構造に寄せていきます。

HTMLからウィジェット使用に余白の付け方を少し変えたコードが以下です。

【POST HTML MARKUP】

<div class="row">
<div class="col-5 pr-0">
  {thumb_img}
</div>
<h3 class="col-7 h6 mb-5">{title}</h3>
</div>

file

右上の更新ボタンで、ウィジェットの変更を保存してください。

2-3. 表示確認

ウィジェットの設定ができたら、一覧ページの方で表示確認を行います。ただし、この時点で表示を確認しても、投稿は表示されないことが多いです。

file

上図のように記事が表示されないのは、「どの記事もview数がない」可能性が大きいです。順位を付るためのview数（アクセス数）が蓄積されていない、という状況です。

記事ページを何度か開いていると、view数がカウントされて投稿が表示されるようになります。 即座に反映はされませんので、レッスンを進めつつ、表示されたら確認してください。

2-4. 表示調整とコードの整理

記事が表示されると、以下のようになります。

file

見出し横のアイコンが表示できていないのと、imgがはみ出しています。 CSSの方を更新して、見た目を整えていきます。

見出し横のアイコンは、セレクタの書き方を変更すればOK。

style.css

.search h2::before,
.widget h2::before {
  font-family: "Font Awesome 5 Free" ;
  font-weight: 600;
  padding-right: 7px;
}

.popular-posts h2::before{
  content: "\f521";
}

imgのはみ出しは、サイドバーのウィジェット全体に対して設定しておきましょう。

style.css

aside .widget img{
  max-width: 100%;
  height: auto;
}

サイドバーの表示を確認します。

file

問題ないようであれば、ウィジェットを呼び出したコードよりも下、HTMLで制作した部分は削除もしくはコメントアウトしておいてください。

sidebar.php

次回のレッスンで、SEARCH部分を実際に使えるようにします。

3. `wp_head`を追加しておく

WordPressにはWordPress本体やプラグインが使うCSSなどを出力するためのコードがあります。

<?php wp_head(); ?>

こちらは、footer.phpに追加した<?php wp_footer(); ?>の仲間のようなもの。抜けているとプラグインがうまく動かない・表示が崩れるなどの問題が起こる可能性があります。

header.phpを開いて<?php wp_head(); ?>を記述しておきましょう。 </head>タグの直前に書いて下さい。

header.php

<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  .
  .
  .
  <?php wp_head(); ?>
</head>

【補足】POPULAR POSTの表示に関して

アイキャッチ画像が表示されない

投稿記事にアイキャッチ画像を設定しているのに、Popular Posts欄には表示されない。そんなときには、ウィジェットの設定を確認・切り替えてみましょう。

file

①Display post thumbnailにチェックここをチェックしていないと、画像なしになります。

②サイズの選択過去「この設定だとアイキャッチが表示されない」という問題が起こっていました。画像が一向に表示されない、という場合は、２つのプルダウンの設定を変えてみてください。

アイキャッチの変更が反映されない

アイキャッチを設定し忘れていて、あとから登録した
設定していたアイキャッチ画像を変更した

などの際に、Popular Posts欄に変更が反映されない場合があります。これはプラグイン側のキャッシュが原因です。プラグイン設定画面でキャッシュをクリアしてみましょう。

管理画面 > 設定 >WordPress Popular Posts を開きます。一番上に表示されている「ツール」をクリック。

file

①画像キャッシュを空にするボタンをクリックすると、確認のダイアログが表示されます。「OK」をクリックで確定して下さい。

②適用念の為、ダメ押しで適用ボタンもクリックします。

file

これで、プラグインが新しくアイキャッチ情報を収集してくれます。ブラウザのキャッシュクリアもして、少し待ってみて下さい。

CSSが効かない

bootstrapのCSSや、自分で書いたスタイル指定が効かない時は、以下の2点を確認してください。

①ウィジェット設定 > THEME THEMEの設定がNoneになっていることを確認してください。

file

②設定 >WordPress Popular Posts > ツール管理画面 > 設定 >WordPress Popular Posts >一番上に表示されている「ツール」の画面を開きます。

ページの中ほどに、その他、という項目があります。ここでプラグインのスタイルシートを無効にしてください。

file

レッスン一覧へ

1.sidebar.phpでウィジェットを呼び出す

1-1.ウィジェットの設定

1-2.sidebarからウィジェットを呼び出す

1-3.WordPress出力タグの確認

1-4.コードを調整する

① ulタグで囲う

② style.cssで、見出しのセレクタを変更

③ 背景・余白・文字サイズを設定

④ タグの表示を直す

⑤RECENT POSTの表示を調整

⑤アーカイブの表示を直す

2.WordPress Popular Postsを導入する

2-1. プラグインの追加

2-2. ウィジェットへ追加

①Posts settingsを変更

②HTML Markup settings

2-3. 表示確認

2-4. 表示調整とコードの整理

3. wp_headを追加しておく

【補足】POPULAR POSTの表示に関して

アイキャッチ画像が表示されない

アイキャッチの変更が反映されない

CSSが効かない

3. `wp_head`を追加しておく