Snow Monkey v5 までは、ページヘッダー画像、ショーケースウィジェットの背景画像がパララックススクロール(ページのスクロールに比べてゆっくりスクロールする)していました。処理が若干重いため、v6 からはオプション扱いにして、デフォルトでは廃止しました。
次の手順で v6 以降でもパララックスエフェクトを復活させることができます。Snow Monkey Blocks を使っている場合と使っていない場合で若干コードが変わるのでご注意ください。
下記のコードは Snow Monkey v10.10.4、Snow Monkey Blocks v8.8.1 以上が必要です。
カスタマイズ方法
PHP
My Snow Monkey プラグインか、子テーマの functions.php
に下記のコードを追加してください。
(Snow Monkey Blocks 必須)
/**
* パララックスエフェクト用の CSS, JS を読み込み
*
* @return void
*/
add_action(
'wp_enqueue_scripts',
function() {
if ( ! wp_script_is( 'snow-monkey-blocks/background-parallax', 'registered' ) ) {
wp_enqueue_script(
'snow-monkey-blocks/background-parallax',
SNOW_MONKEY_BLOCKS_DIR_URL . '/dist/js/background-parallax.js',
[],
filemtime( SNOW_MONKEY_BLOCKS_DIR_PATH . '/dist/js/background-parallax.js' ),
true
);
}
}
);
Snow Monkey Blocks 利用の有無に関わらず貼り付け
/**
* ページヘッダーにパララックスエフェクトを反映
*
* @param string $html
* @param string $slug
* @return string
*/
add_filter(
'snow_monkey_template_part_render',
function( $html, $slug ) {
if ( 'template-parts/common/page-header' !== $slug ) {
return $html;
}
$html = str_replace(
'class="c-page-header"',
'class="c-page-header js-bg-parallax"',
$html
);
$html = str_replace(
'class="c-page-header__bgimage"',
'class="c-page-header__bgimage js-bg-parallax__bgimage"',
$html
);
$html = str_replace(
'class="c-container"',
'class="c-container js-bg-parallax__content"',
$html
);
return $html;
},
10,
2
);
/**
* ショーケースウィジェットにパララックスエフェクトを反映
*
* @param string $content
* @param array $args
* @return string
*/
add_filter(
'inc2734_wp_awesome_widgets_render_widget',
function( $content, $args ) {
if ( false === strpos( $args['widget_id'], 'inc2734_wp_awesome_widgets_showcase' ) ) {
return $content;
}
$content = str_replace(
'wpaw-showcase ',
'wpaw-showcase js-bg-parallax ',
$content
);
$content = str_replace(
'wpaw-showcase__bgimage',
'wpaw-showcase__bgimage js-bg-parallax__bgimage',
$content
);
$content = str_replace(
'wpaw-showcase__inner',
'c-container js-bg-parallax__content wpaw-showcase__inner',
$content
);
return $content;
},
10,
2
);