下記のコードを My Snow Monkey プラグインか、子テーマの functions.php に貼り付けてみてください。
/**
* パララックスエフェクト用の CSS, JS を読み込み
*
* @return void
*/
add_action(
'wp_enqueue_scripts',
function() {
wp_enqueue_script(
\Framework\Helper::get_main_script_handle() . '-background-parallax-scroll',
get_theme_file_uri( '/assets/js/background-parallax-scroll.min.js' ),
[ 'jquery' ],
filemtime( get_theme_file_path( '/assets/js/background-parallax-scroll.min.js' ) ),
true
);
wp_enqueue_style(
'jquery.background-parallax-scroll',
get_theme_file_uri( '/assets/packages/jquery.background-parallax-scroll/dist/jquery.background-parallax-scroll.min.css' ),
[ \Framework\Helper::get_main_style_handle() ],
filemtime( get_theme_file_path( '/assets/packages/jquery.background-parallax-scroll/dist/jquery.background-parallax-scroll.min.css' ) )
);
}
);
/**
* ページヘッダーにパララックスエフェクトを反映
*
* @param string $html
* @param string $slug
* @return string
*/
add_filter(
'inc2734_view_controller_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
);
