- このトピックには8件の返信、2人の参加者があり、最後に
により5年前に更新されました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
-
投稿
-
下記のコードを 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 );いいねをした人: 居ません本体のfunctions.phpにベタッと貼ると上手くいきますが、プラグインの方に貼ると上手くいきません。
js-bg-parallax〜のclass自体は追加されているので有効にはできていると思うのですが、スタイルの当たり方が変わる感じです。
プラグイン等の理解に乏しいので外していたら申し訳ありません。
いいねをした人: 居ませんあ！そうか！読み込み順の影響を考慮していませんでした。ファイル読み込み部分を下記のように修正してみてください、お手数おかけしてすみません！（ついでに名前空間のインポートも考慮できてなかったのでそこも修正しています）
/** * パララックスエフェクト用の 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' ) ) ); } );いいねをした人: 居ません
9件の投稿を表示中 - 1 - 9件目 (全9件中)
- トピック「v6で廃止になったパララックスエフェクト」には新しい返信をつけることはできません。