- このトピックには20件の返信、2人の参加者があり、最後に
により5年、 4ヶ月前に更新されました。
-
投稿
-
スマートではないんですが、自己解決しました。
子テーマ/templates/layout/header/1row.php
の最後にif( function_exists( ‘is_woocommerce’ ) && is_woocommerce() ) {
if( is_shop() ) {で強制的にヘッダーを出力しました。
できれば、functions.php に書きたいですが・・・。
何かアドバイス頂ければと思います。
よろしくお願いいたします。いいねをした人: 居ません要はヘッダー画像を出力できればいいですよね。ヘッダー画像を操作できるフックがあります。
/** * WooCommerce の商品一覧ページで、ページヘッダーを表示 */ add_filter( 'snow_monkey_is_output_page_header', function( $return ) { if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) { return true; } return $return; } ); /** * WooCommerce の商品一覧ページでページヘッダーに表示する画像を指定 */ add_filter( 'snow_monkey_pre_page_header_image_url', function( $url ) { if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) { return '画像の URL'; } return $url; } ); /** * WooCommerce の商品一覧ページでページヘッダーにタイトルを表示 */ add_filter( 'snow_monkey_is_output_page_header_title', function( $return ) { if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) { return true; } return $return; } );これでとりあえずは表示されると思うのですが、タイトル表示は詳細ページにしか対応していないため、一覧ページでは最初の商品のタイトルが表示されてしまいます…。次のアップデートで一覧ページのときは一覧のタイトルが表示される＆フックでカスタマイズできるようにしたいと思いますので少々お待ちください！
いいねをした人: 居ませんフックは仕込んでいたものの、実際使ってみるとちょっと煩雑な印象があるので、WooCommerce の場合はカスタマイザーなどからできるようにしたほうが良いのかなーとちょっと思いました。
有料で買った甲斐があります！(笑)
それは良かったですw
いいねをした人: 居ませんたびたびスミマセン。functions.phpに上記コードを張り付けてみたんですけど、特に変わりませんでした。
元に戻すと、商品一覧のページにはヘッダ（と思われる空白）が表示されますが、画像が表示されません。商品詳細ページは、
画像ソースは、なぜか？<img src="http://127.0.0.1:8080/wp-content/uploads/2011/07/dsc03149.jpg" alt="" />が出力されています。
バージョン4.4.25 です
よろしくお願いいたします。
いいねをした人: 居ません11月28日 9:44 に投稿した後に、間違いがあってすぐにコードを修正したのですが、「
<img src="http://127.0.0.1:8080」から察するにその古いコードを貼り付けられている、という可能性があるかもしれません。もう一度 11月28日 9:44 の投稿をコピペしなおしてみても変わりませんでしょうか？
いいねをした人: 居ませんバージョン4.4.25 です
最新版にアップしてみてください！ 4.4.25 あたりからのアップデートはバグ修正のみでテンプレートや CSS をごりごり変えたりしていないので影響はほとんど無いはずです。
いいねをした人: 居ませんv4.4.34 でテストしてみました。
詳細ページで画像が表示されないバグがありましたのでコード修正しました、下記で貼り付けなおしてください。
/** * WooCommerce の商品一覧ページで、ページヘッダーを表示 */ add_filter( 'snow_monkey_is_output_page_header', function( $return ) { if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) { if ( is_shop() || is_singular( 'product' ) ) { return true; } } return $return; } ); /** * WooCommerce の商品一覧ページでページヘッダーに表示する画像を指定 */ add_filter( 'snow_monkey_pre_page_header_image_url', function( $url ) { if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) { return '画像の URL'; } return $url; } ); /** * WooCommerce の商品一覧ページでページヘッダーにタイトルを表示 */ add_filter( 'snow_monkey_is_output_page_header_title', function( $return ) { if ( function_exists( 'is_woocommerce' ) && is_woocommerce() && is_shop() ) { return true; } return $return; } );一覧ページで空白が表示される件ですが、上記のコードで
return '画像の URL';としているからではないでしょうか？カテゴリーは商品ページと違って画像を持っておらず、自分で適当な URL を指定しないといけないのでreturn '画像の URL';としていたのですが、もしそのまま変更せずにはると存在しない画像 URL を参照することになるので空白が表示されます。デベロッパーツールでみるとこんな感じです。
もしここの URL を変更されていないのでしたら、適当な画像 URL に変更してみてください。
いいねをした人: 居ませんたびたびスミマセン。
/** * WooCommerce の商品一覧ページで、ページヘッダーを表示 */ add_filter( 'snow_monkey_is_output_page_header', function( $return ) { if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) { if ( is_shop() || is_singular( 'product' ) ) { return true; } } return $return; } );上記コードだけを張り付けてもヘッダーが出力されません。
下記だと出ます(^^;add_filter( 'snow_monkey_is_output_page_header', function( $return ) { if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) { if ( is_shop() || is_singular( 'product' ) ) { //return true; echo " <div class='c-page-header js-bg-parallax' data-has-content='true' data-has-image='true'> <div class='c-page-header__bgimage js-bg-parallax__bgimage'> <img src="/wp/wp-content/uploads/2018/11/header_inquiry.jpg" alt="" /><img src='/wp/wp-content/uploads/2018/11/header_inquiry.jpg' alt='' /> </div> </div>"; } } return $return; } );ちなみに、別ドメインで検証中です。
いいねをした人: 居ません/** * WooCommerce の商品一覧ページで、ページヘッダーを表示 */ add_filter( 'snow_monkey_is_output_page_header', function( $return ) { if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) { if ( is_shop() || is_singular( 'product' ) ) { //return true; echo " <div class='c-page-header js-bg-parallax' data-has-content='true' data-has-image='true'> <div class='c-page-header__bgimage js-bg-parallax__bgimage'> <img src='/wp/wp-content/uploads/2018/11/header_inquiry.jpg' alt=''> </div> </div>"; } } return $return; } );imgタグが抜けたので訂正です
いいねをした人: 居ません
- トピック「WooCommerce でオーバーレイ設定時のヘッダについて」には新しい返信をつけることはできません。