• SIMPLEとは

  • デモ

  • マニュアル

  • アップデート

  • ダウンロード

【WordPress】プラグインなしでサイドバーを追尾させる方法を解説【コード付き】

今回は、WordPressでサイドバーに「追尾ウィジェット」を設置する方法について解説していきます。

追尾ウィジェットを設置したいけど、やり方がわからない・・・
使っているテーマが追尾ウィジェットに対応していないので、自分で実装したい

という方は、本記事が参考になるかと思います。

WordPressテーマ「SIMPLE」では追尾ウィジェットが実装されていますので、すぐに使いたい方は本テーマをダウンロードしてみてください。

【WordPress】サイドバーに追尾ウィジェットを設置する方法【コード解説】

具体的な手順は、以下の通りです。

  1. 追尾ウィジェット用の「ウィジェットエリア」を作成する
  2. ウィジェットを追尾させる設定を追加する
  3. 追尾ウィジェットを表示させたい場所にコードを追加する
  4. サイドバーに追尾ウィジェットを設置する

順番に解説していきます。

追尾ウィジェット用の「ウィジェットエリア」を作成する

まずは、追尾ウィジェット用のウィジェットエリアを作成していきます。

テーマディレクトリ直下にある「functions.php」に、↓のコードを追加します。

//追尾ウィジェット用のウィジェットエリアを作成する

register_sidebar( array(
	'name' => 'サイドバー下追尾コンテンツ(PC)',
	'id' => 'sidebar-bottom-tracking-content',
	'before_widget' => '<div id="%1$s" class="widget %2$s sidebar-bottom-tracking-content">',
	'after_widget'  => '</div>',
	'before_title'  => '<h4 class="widgettitle">',
	'after_title'   => '</h4>',
) );

コードを追加すると、WordPress管理画面の「外観→ウィジェット」ページに、「サイドバー下追尾コンテンツ(PC)」という名前のウィジェットエリアが追加されます。

これで、ウィジェットを設置できるようになりました。

ウィジェットを追尾させる設定を追加する

次は、ウィジェットを追尾させる設定を追加していきます。

やり方はいろいろありますが、今回はcssを追加して簡単に実装していきたいと思います。

テーマディレクトリ直下にある「style.css」ファイルに、下記のコードを追加します。

.sidebar-bottom-tracking-content {

     position: sticky;

}

position: sticky; → これはcssのプロパティで、簡単に言うと「画面をスクロールしてもコンテンツを表示し続ける」という感じです。

下記の解説サイトがわかりやすいと思います。

https://developer.mozilla.org/ja/docs/Web/CSS/position

追尾ウィジェットを表示させたい場所にコードを追加する

これで、追尾させる設定もできたので、次は追尾ウィジェットを追加させたい場所にコードを追加していきます。

今回はサイドバーに表示させるので、テーマディレクトリ直下の「sidebar.php」ファイルに、↓のコードを追加します。

<?php if ( !wp_is_mobile() ) : ?>
     <?php if ( is_active_sidebar( 'sidebar-bottom-tracking-content' ) ) : ?>
          <?php dynamic_sidebar( 'sidebar-bottom-tracking-content' ); ?>
     <?php endif; ?>
<?php endif; ?>

<?php if ( !wp_is_mobile() ) : ?> → これはWordPressの関数で、「サイトの閲覧者がスマホ・タブレットなどのモバイルデバイスを使ってページを見ているかどうか」をチェックしてくれます。

ただ、「!」をつけているので、実際にはモバイルデバイス以外、つまりPC表示のみ追尾ウィジェットが表示されます。

スマートフォンでは、ウィジェットを追尾させるには画面が小さすぎるので、今回はPC表示のみ、追尾ウィジェットを表示する設定にしています。

サイドバーに追尾ウィジェットを設置する

ここまできたら、あとはWordPress管理画面でウィジェットを設置するだけです。

具体的な手順は、以下の通り。

  • 外観 → ウィジェットに移動する
  • サイドバーに追尾ウィジェットを設置する

順番に解説していきます。

ブロックウィジェットでの設置方法

外観 → ウィジェットに移動する

まずは、WordPressの管理画面にログインして「外観 → ウィジェット」に移動します。

サイドバーに追尾ウィジェットを設置する

「サイドバー下追尾コンテンツ(PC)」にウィジェットを設置します。

上記の例では、カテゴリーウィジェットを設置しています。スクロールに合わせてウィジェットが追尾していますよね。

クラシックウィジェットでの設置方法

クラシックウィジェットを使うには、「Classic Widgets」というプラグインをインストールする必要があります。

プラグインのインストール方法は、↓の記事をご覧ください。

【WordPress】Classic Widgets/Gutenbergでウィジェットを追加する方法を解説 WordPressにはウィジェットという機能があり、様々なコンテンツをサイト上に簡単に表示することができます。 本記事では、WordPressで…
外観 → ウィジェットに移動する

プラグインをインストールして有効化したら、WordPressの管理画面にログインして「外観 → ウィジェット」に移動します。

サイドバーに追尾ウィジェットを設置する

「サイドバー下追尾コンテンツ(PC)」にウィジェットを設置します。

上記の例では、アーカイブウィジェットを設置しています。

スクロールの動きに合わせてアーカイブウィジェットが追尾していることがわかると思います。

以上になります。本記事字を参考にして、追尾ウィジェットを活用してみてください。

WordPressテーマ「SIMPLE」

simple

「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。

RELATED POSTS