jQuery を使用して WordPress の最後のサイドバーウィジェットをフェードインする方法

最近、あるユーザーから、サイドバーの最後のウィジェットにフェードイン効果を追加する方法について質問がありました。この人気のjQueryエフェクトは、多くの有名なウェブサイトやブログで使用されています。ユーザーがページを下にスクロールすると、サイドバーの最後のウィジェットがフェードインして表示されます。このアニメーションにより、ウィジェットは目を引き、目立つようになり、クリック率が劇的に向上します。この記事では、jQueryを使用してWordPressで最後のサイドバーウィジェットをフェードインする方法を紹介します。

以下は、それがどのように見えるかのデモです。

このチュートリアルでは、テーマファイルを変更します。続行する前に、テーマをバックアップすることをお勧めします。

ステップ 1: フェードイン効果のための JavaScript を追加する

まず、jQueryコードをWordPressテーマに個別のJavaScriptファイルとして追加する必要があります。メモ帳のようなテキストエディタで空白のファイルを開くことから始めます。次に、この空白のファイルをデスクトップにwpb_fadein_widget.jsとして保存し、以下のコードを貼り付けます。

jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/

var sidebarElement = $('div#secondary');


// Check if the sidebar exists
if ($(sidebarElement).length > 0) {

// Get the last widget in the sidebar, and its position on screen

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
	
// Hide the last widget
$(lastWidget).hide();
	
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {

// If the widget has been displayed, we don't need to keep doing a check.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;  
}
}
});
}
});

このコードで最も重要な行はvar sidebarElement = $('div#secondary');です。

これは、サイドバーを含む div の ID です。各テーマでサイドバーコンテナ div が異なる場合があるため、テーマがサイドバーに使用しているコンテナ ID を見つける必要があります。

Google Chrome のインスペクト要素ツールを使用すると、これを調べることができます。Google Chrome でサイドバーを右クリックし、[要素を検証] を選択するだけです。

ソースコードを確認すると、サイドバーコンテナのdivが表示されます。例えば、デフォルトのTwenty TwelveテーマではサイドバーコンテナのIDとしてsecondaryが、Twenty Thirteenではtertiaryが使用されています。secondaryを、お使いのサイドバーコンテナdivのIDに置き換える必要があります。

次に、FTPクライアントを使用して、このファイルをWordPressテーマディレクトリ内のjsフォルダにアップロードする必要があります。テーマディレクトリにjsフォルダがない場合は、FTPクライアントで右クリックして「新規ディレクトリの作成」を選択して作成する必要があります。

ステップ2：WordPressテーマでのJavaScriptのエンキュー

jQueryスクリプトの準備ができたので、テーマに追加する時間です。テーマにJavaScriptを追加する適切な方法を使用しますので、次のコードをテーマのfunctions.phpファイルに貼り付けるだけです。

wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

これで完了です。サイドバーにフェードイン効果で表示したいウィジェットを追加し、ウェブサイトにアクセスして動作を確認できます。

ステップ 3: フェードイン効果の後、最後のウィジェットを固定する

フェードイン効果でよく要望される機能は、ユーザーがスクロールする際に最後のサイドバーウィジェットをスクロールさせることです。これはフローティングウィジェットまたはスティッキーウィジェットと呼ばれます。

上記のjQueryコードを見ると、フェードインエフェクトの後でウィジェットにwpbstickywidget CSSクラスを追加したことに気づくでしょう。このCSSクラスを使用して、最後のウィジェットがフェードインした後にスティッキーにすることができます。テーマのスタイルシートにこのCSSを貼り付けるだけです。

.wpbstickywidget { 
position:fixed;
top:0px; 
}

CSSは必要に応じて自由に修正してください。ウィジェットをさらに目立たせるために、背景色やフォントを変更できます。必要であれば、最後のウィジェットの隣にスムーズなトップスクロール効果を追加することもできます。これにより、ユーザーはすばやくスクロールして戻ることができます。

この記事がWordPressサイドバーの最後のウィジェットにフェードイン効果を追加するのに役立ったことを願っています。その他のjQueryの優れた機能については、WordPress向けの最高のjQueryチュートリアルをご覧ください。

この記事が気に入った場合は、WordPress のビデオチュートリアルについては、YouTube チャンネルを購読してください。また、Twitter や Google+ でも私たちを見つけることができます。