お陰様で、レイアウトも整いメニューが見えるようになりました。
それは良かったです！
ところで、デフォルトページヘッダー画像が表示されるようになりましたが、各ページでアイキャッチ画像が指定されているページの場合は、アイキャッチ画像をヘッダーとして表示する設定にすることは可能でしょうか？
下記に差し替えるとどうでしょうか？
/**
* WooCommerce が生成した各ページのページヘッダー画像としてデフォルトページヘッダー画像を使用する
*/
add_filter(
'snow_monkey_pre_page_header_image_url',
function( $url ) {
if ( class_exists( '\woocommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {
if ( is_singular() && has_post_thumbnail() ) {
return wp_get_attachment_image_url( get_post_thumbnail_id(), 'xlarge' );
}
return get_theme_mod( 'default-page-header-image' );
}
return $url;
},
11
);
/**
* WooCommerce が生成した各ページにページヘッダーを表示する
*/
add_filter(
'snow_monkey_is_output_page_header',
function( $return ) {
if ( class_exists( '\woocommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {
return true;
}
return $return;
},
11
);
また、上記のcssでも、状況は変わりませんでした。
他の CSS の影響や、配置しているウィジェットエリアによって違いがあるのかもしれませんね…。
画像をデバイスで目一杯のサイズで表示させたいのですが、どのように設定したら宜しいでしょうか？
下記どうでしょうか？（画像ウィジェットは他の場所でも使う可能性が高いかな？と思ったので、その場所だけに適用されるようにID指定にしています。ご自身の環境にあわせて変更してください）
#media_image-2 .c-container {
padding: 0;
max-width: none;
}
#media_image-2 img {
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
width: 100%;
}
下記のコードに差し替えるとどうでしょうか？ WooCommerce のすべてのページでデフォルトページヘッダー画像が表示されるようにしています。
/**
* WooCommerce が生成した各ページのページヘッダー画像としてデフォルトページヘッダー画像を使用する
*/
add_filter(
'snow_monkey_pre_page_header_image_url',
function( $url ) {
if ( class_exists( '\woocommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {
return get_theme_mod( 'default-page-header-image' );
}
return $url;
},
11
);
/**
* WooCommerce が生成した各ページにページヘッダーを表示する
*/
add_filter(
'snow_monkey_is_output_page_header',
function( $return ) {
if ( class_exists( '\woocommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {
return true;
}
return $return;
},
11
);
カスタマイザーの追加 CSS、もしくは子テーマの CSS に下記を追加するとどうでしょうか？
.wpaw-slider__item {
min-height: auto !important;
}
もし位置的にウィジェットではなくブロックでも対応が可能なのであれば、Snow Monkey Blocks のスライダーブロックは画像の画角を保ったまま表示されるので、それを使うのもアリかもしれません。
こちらの環境で確認しましたが、footer 付近には style タグの出力はなく、head の中にありました。同じ出力かどうかわからなかったので、テスト的に、 themes/snow-monkey/assets/css/dependency/snow-monkey-blocks を削除して、style タグが消えるか確認してみてもらえますでしょうか？
そもそもでいうと、上記の対応で干渉がなくなったとしても、style を消すという対応は個人的には推奨できません。干渉しているスタイルが .editor-styles-wrapper .smb-*** であれば Snow Monkey Blocks のブロックにしか本来適用されないはずで、もしオリジナルのカスタムブロックに干渉しているのであれば、そのカスタムブロックのクラスの命名に問題があるのではないかと思います。
実際に見ていないのではっきりとは言えませんが、具体的にどのような干渉が起こっているのかを教えていただければ、style を消す以外の正しい対処法をご提示できるかと思いますのでご検討ください。
僕も実際に試してみました。
ウィジェットブロック（テスト機能）を使うと、本来配列で保存しなければいけないところに、どうも数値で値を保存してしまうようで、エラーになってしまうようです。
どうにかしてこの「数値」を削除できればいいのですが、Gutenberg プラグインを再有効化してウィジェットブロック（テスト機能）を開いても追加したブロックは無くなってしまっていて、画面上の操作で消すことは難しいようです。
Gutenberg が開発されているリポジトリをのぞいてみると、当該の問題についてやりとりがされているのを見つけました。
解決策として、
– Gutenberg プラグインを有効化
– 「すべての」ウィジェットをすべてのウィジェットエリアから削除
– Gutenberg プラグインを無効化
があげられていｒました。実際に試してみたところ、確かにこれでカスタマイザーもウィジェット設定画面もエラーなく開けるようになりました。
ウィジェットを再設定するのが面倒ですが、試してみてください！
返信ありがとうございます。
・Gutenberg プラグイン無効状態でカスタマイザーに入り、ブラウザのデベロッパーツール（コンソール）になにかエラーがでていないか確認してみてください。
コンソールには以下のエラーが1ラインのみ出ていました。
Uncaught SyntaxError: Unexpected token : customize.php?url=http%3A%2F%2Fdz.local%2F:formatted:7119
また、カスタマイザーを開いて白くなる直前に、一瞬だけエラー文がフラッシュしてるのに気づきましたので、それをキャプチャをとりました。↓
Gutenberg プラグインを一旦有効化、ウィジェットブロックに入力した内容を全部空にして保存、Gutenberg プラグインを無効化するとどうでしょうか？
全ての項目を一つ一つdelete keyで消しましたが、カスタマイザーは復帰することはありませんでした。
よろしくおねがいいたします。
読み上げとかも考慮して、画面から外れているときは visibility: hidden しているのですが、「でるとき」と「きえるとき」で visibility の発火タイミング（優先度）が違うのかも？という感じがしますね。
transition: all にすると閉じるときもうまくいくという発見をしたので、次のアップデートで見直してみます。
スマホのドロワーメニューのことですよね
それです。
何故ならないのかは謎なんですが、アニメーションの前に要素の不透明化（display:noneとかopacityとか）が働いてしまってるのかもーと思ってます。アニメーションのキーが100%になる前にそう言う効果が発火するとアニメーションを実行する前に透明になるからパッと消えるんすかね？
ちょっとどうにか調整したい部分っすねー、これ
'type' => 'option'を削除する形でうまく動作することを確認できました。
ありがとうございます！
上記のカスタマイザーのコードで、 'type' => 'option' としていますよね。これは「theme_mod ではなく、option として値を保存します」という意味になります。
実際の copyright の表示のところを見てみると、<?php echo get_theme_mod( 'op-copyright' ); ?> となっていて、theme_mod を表示させようとしていますが、値は option として保存されているため表示されないのだと思います。 <?php echo get_option( 'op-copyright' ); ?> で表示させるか、'type' => 'option' を消すか、を選択する感じで変更してみてください。
コンテンツエリア上下に予約を追加するのありなしの違いがよくわかりません(^0^;)
チェックが有ると、.p-section-front-page-content に .p-section-front-page-content--no-vpadding というクラスが追加されて、強制的に上下余白が0になります。
他の方法としては、ランディングページテンプレートに「コンテナ」ブロックを追加してスリム幅にして、その中に各ブロックを入れる、というのもできるかもしれません。
いずれにせよ、最初は1カラムスリムでリリースして、キタジマさんが新しいテンプレート準備下さったら、それに切り替えようと思います。
追加できたらお知らせします！
いま Mac と Android で見てみましたが、いずれも上下余白がなくなっています（左右余白は残しておいたほうが良いかと思います！）。
一度ブラウザのキャッシュを消して再確認されると表示がかわらないでしょうか？
ありがとうございます。
ちなみにトップページをランディングページにして、余白オプションオンにしたのですが、差違がないように見えます(^0^;) ちょっと見て見て下さい。
新しいランディングページ スリム あると凄く嬉しいです(^_^) ありがとうございます！
なるほど、確かにスリム幅のLP用テンプレートがあるのは良いかもですね。Snow Monkey 本体に追加しようと思います。明日か明後日にはできるかなと。
お急ぎであれば、「カスタマイザー > ホームページ設定 > ホームページのコンテンツエリアに左右余白を追加する」のチェックを外すと余白が消えるので、それでも良いかもしれません。
