フォーラムへの返信
-
.smb-price-menu__item__titleにmax-widthを指定してやれば折り返しできますので、試してみてください。flex-basis使った方がスマートでしたね。@media (min-width: 40em) { .smb-price-menu__item>* { flex: 0 0 auto; } }ここで、
flex-basisがautoになっているのが、折り返されない原因です。
パーセンテージやピクセル値で指定できます。calc()も使えたはず。いいねをした人:
②縦のレイアウトにするために display:flex; flex-direction: column; をあてましたが、右側に余白ができてしまいます。
こちらのフォーラムでは、1トピック1課題になっていますので、上記は別トピックでお願いします。
いいねをした人:
①セクション（サイド見出し）の右ブロックに価格メニューを入れているのですが、メニュー名が長いときにはみ出してしまいます。
メニュー名が長いときということは、Flexboxの子要素の中身の折り返しなので、親要素に
overflow: auto;をあててもダメです。
.smb-price-menu__item__titleにmax-widthを指定してやれば折り返しできますので、試してみてください。いいねをした人:
// エディター用の CSS 読み込み
で、
add_editor_style( '/../../plugins/my-snow-monkey/style.css' );
のところを
add_editor_style( '/../../plugins/my-snow-monkey/editor-style.css' );
に変更すれば、フロントとエディターで別々のCSSを読み込むこともできますので、必要に応じて使い分けてください。いいねをした人:
// ブロックエディター用の CSS 読み込み
のコードを追加した場合は、
my-snow-monkey/block-editor.cssが必要です。
フロント側のCSSとエディター側のCSSを分けて管理する場合やコメントに書かれているように依存関係を指定したい場合などに使用します。
こちらを使用する場合は、上の「エディター用の CSS 読み込み」以下のコードは不要です。// クラシックエディター用の CSS 読み込み
こちらも同様に
my-snow-monkey/classic-editor.cssが必要で、クラシックエディター用のCSSを分けて管理する場合に使用します。いいねをした人:
こちらの「My Snow Monkey に CSS ファイルを配置する」のコードをそのまま全部コピペされていると思いますが、これ全部は要らないです。
「
my-snow-monkey/style.cssとなるようにファイルを作成した後に、my-snow-monkey.phpに下記のコードを追加してみてください。この状態でstyle.cssに CSS を追加すれば、実際のページにもエディターにも CSS が反映されます。」
と、説明がある部分で必要なコードは以下の通りです。// 実際のページ用の CSS 読み込み add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'my-snow-monkey', MY_SNOW_MONKEY_URL . '/style.css', [ Framework\Helper::get_main_style_handle() ], filemtime( MY_SNOW_MONKEY_PATH . '/style.css' ) ); } ); // エディター用の CSS 読み込み // クラシックエディターとブロックエディターの両方に CSS が読み込まれます。 // ブロックエディターの場合は自動的に .editor-styles-wrapper でラップされます。 // 依存関係は指定できません。 add_action( 'after_setup_theme', function() { add_theme_support( 'editor-styles' ); add_editor_style( '/../../plugins/my-snow-monkey/style.css' ); } );いいねをした人:
ちょっと試してみたんですが、
get_postsだと、うまくいかないみたいですね。
WP_Queryを使用して以下のコードで表示できたので共有しておきます。<?php add_action( 'snow_monkey_prepend_archive_entry_content', function() { $args = array( 'posts_per_page' => -1, 'category_name' => 'news', 'tag' => 'feature', ); $the_query = new WP_Query( $args ); if ( $the_query->have_posts() ) { ?> <h2>Feature</h2> <ul class="feature_list"> <!-- the loop --> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <li> <?php the_title( '<h3>', '</h3>' ); ?> <?php the_excerpt( ); ?> </li> <?php endwhile; ?> <!-- end of the loop --> </ul> <?php wp_reset_postdata(); } } );いいねをした人:
デベロッパーツールのネットワークタブで確認すると、フォントファイルが404になっています。
fontsディレクトリーを配置しているのは、public_htmlでしょうか？
パスを修正すれば、font-familyは、適用されると思います。いいねをした人:
だからといって配列で片っ端から指定するのもどうかと思いまして
依存関係を正しく指定するのなら、片っ端から指定するしかないんじゃないかなーと思います。
[ Helper::get_main_style_handle() . '-woocommerce', Helper::get_main_style_handle() . '-woocommerce-app', Helper::get_main_style_handle() . '-woocommerce-theme', 'wc-block-style', 'woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general', 'wc-blocks-style', 'wc-blocks-vendors-style', ]いいねをした人:
プレビューでは再生されているので、上の回答は的外れでした。
EWWW Image Optimizer を使用されていますね。
「設定」>「EWWW Image Optimizer」で「遅延読み込み」にチェックが入っていると、この現象がおこりますので、チェックを外して保存してみてください。いいねをした人:
