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スクリプトの準備ができたので、テーマに追加する時間です。WordPressのテーマに適切な方法で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+でもフォローできます。