【WordPress】「MW WP Form」画面遷移スクロール位置の調整方法
WordPressにおける代表的なメールフォームプラグイン「MW WP Form」には、「 画面変遷時のスクロールを有効にする 」という設定項目が存在します。
この項目にチェックを入れると、メール送信後に同じお問い合わせ画面で「お礼テキスト」を表示する場合や、フォームの必須項目が埋まっていない状態で送信ボタンが押された場合に「 MW WP Form 」が設定されている高さまで自動でスクロールしてくれる機能が有効になりますが、Webサイト内で「ヘッダー」が固定表示されている場合であっても、その高さが考慮されずにスクロールされるため、「 MW WP Form」部分の上部がヘッダーに隠れてしまうという現象が発生します。
この記事では、固定されているヘッダーの高さを考慮して 「 MW WP Form」部分が自然に表示させるようにスクロールの位置を調整する方法について、記載していきます。
調整するファイル
WordPressがダウンロードされているメインディレクトリから、
「wp-content\plugins\mw-wp-form\js」
のフォルダに格納されている
「scroll.js」
を調整していきます。
開くと、下記の通り記述されています。
jQuery( function( $ ) {
var posy = $( '.mw_wp_form' ).offset().top;
posy = posy + parseInt( mwform_scroll.offset );
$( window ).scrollTop( posy );
} );最終行
「$( window ).scrollTop( posy );」
の「posy」で定義されている数値が、スクロールされる高さとなります。
そのため、最終行より前の行で「posy」の数値が変更されるようにコードを記述する必要があります。
仮にヘッダーが100pxだった場合は、4行目に「posy = posy – 100;」を挿入し、下記のように記述します。
jQuery( function( $ ) {
var posy = $( '.mw_wp_form' ).offset().top;
posy = posy + parseInt( mwform_scroll.offset );
posy = posy - 100;
$( window ).scrollTop( posy );
} );ヘッダの高さ以上に余裕を持たせたい場合は、100の数値を任意で変更してみてください。
また、サイトがレスポンシブデザインになっている場合、ウィンドウの横幅によってヘッダの高さが違っている可能性がありますが、その場合も条件分岐によって対応可能です。
下記例として、
横幅768px以上・・・ヘッダーの高さ100px
横幅768px未満・・・ヘッダーの高さ80px
の場合の記述です。
jQuery(function ($) {
var posy = $('.mw_wp_form').offset().top;
posy = posy + parseInt(mwform_scroll.offset);
if ($(window).width() > 767) {
posy = posy - 100;
} else {
posy = posy - 80;
}
$(window).scrollTop(posy);
});「if ($(window).width() > 767) {posy = posy – 100;}else{posy = posy – 80;}」
の記述により、
「もし768px以上の時はposyの数値を100減らし、768未満の時はposyの数値を80減らす」
という内容で処理が行われます。
これでウィンドウ幅ごとの調整もOKです！
以上となります。