ゆっくりブログ
更新日: 2020/2/6

WordPressの投稿に追尾サイトバーを表示する方法

この記事では、WordPressブログでサイドバーが画面に固定されるようにするための方法について書いてます。

見てもらいたいページへのリンクや広告などを再度に固定したい！という方は参考にしてください！

WordPressの投稿に追尾サイトバーを表示する方法

①条件分岐のコードの確認

投稿のみ表示させたい時は is_single() を使います。

●投稿のみ表示させたい場合

<?php if(is_single()): ?>
　★ここに表示させたいコンテンツを書く★
<?php endif; ?>


固定ページのみ 表示させたい時は is_page() を使います。

●固定ページのみ表示させたい場合

<?php if(is_page()): ?>
　★ここに表示させたいコンテンツを書く★
<?php endif; ?>


投稿と固定ページの両方 に表示させたい時は is_singular() を使います。

●投稿と固定ページの両方に表示させたい場合

<?php if(is_singular()): ?>
　★ここに表示させたいコンテンツを書く★
<?php endif; ?>


このような感じでif関数を使って条件分岐させます。

②functions.phpで追尾サイドバーを作成する

WordPress管理画面のウィジェットから追尾サイドバーを利用できるように、functions.phpで追尾サイドバーの作成をしましょう。

//追尾サイドバー
function add_register_widgets() {
  register_sidebar(array(
    'name'          => '追尾サイドバー',
    'id'            => 'sidebar-fixed',
    'before_title'  => '
',
    'after_title'   => '
',
  ));
}
add_action( 'widgets_init', 'add_register_widgets' );

名前やクラスやタグなどは自由に変更してください。

idも変更してよいですが、以下のsidebar.phpに書くコードを合わせるようにしてください。

③sidebar.phpに追尾サイドバーがWEBサイトに表示されるようにする

次はWEBサイトに追尾サイドバーが表示されるようにsidebar.phpに以下のコードを追加しましょう。


<?php if (is_singular()): ?>
  <?php if ( is_active_sidebar( 'sidebar-fixed' ) ) : ?>
    
  <?php endif; ?>
<?php endif; ?>

is_active_sidebar()とdynamic_sidebar()のかっこの中は②のfunctions.phpで決めたidにしてください。

あとは、最初のif関数の中を「is_singular()」にしてますが、これは投稿と固定ページの両方に表示させる設定なので、

  • 投稿のみ　→　is_single()
  • 固定ページのみ　→　is_page()
  • 両方 →　is_singular()
  • トップページ　→　is_home()
  • アーカイブページ　→　 is_archive()

で使い分けてください！

いちお、トップページとアーカイブも載せておきました( ˙-˙ )

<?php if (is_single() || is_home()) : ?>
　★ここに表示させたいコンテンツを書く★
<?php endif; ?>

あと、複数設定する場合は↑のように「 || 」でつなげばOKです。

④style.cssに画面固定するコードを書く

最後に追尾サイドバーが画面に固定されるようにCSSのコードを書きます。

/* 追尾サイドバー */
#sidebar-fixed {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}

固定される高さは「top: 〇〇px;」で調節してください。

スマホとかで表示させないようにするにはこちらも追加しましょう。

/* 追尾サイドバー　レスポンシブ */
@media screen and (max-width: 750px) {
  #sidebar-fixed {
    display: none;
  }
}

非表示になる幅を調節するには「max-width: 〇〇px」で調節してください。

追尾サイドバーを活用しよう

これで追尾サイドバーを設置することができるようになります。

追尾サイドバーがあれば、見てもらいたいコンテンツを目立たせることができます。

また、上記の「②functions.phpで追尾サイドバーを作成する」で複数の追尾サイドバーを作成し、投稿やトップページなど分けて表示させることもできます。

サイトに合わせ追尾サイドバーを活用しましょう。

previous
next