フォーラムへの返信
-
投稿者投稿
-
ブロックに用意されているフィルターフックの一覧表などはあるのでしょうか。
ある程度はこの公式サイトのお知らせ記事に書いているとは思いますが、まとまっているものはありません…すみません。
/wp-content/plugins/snow-monkey-blocks
を VS Code 等で開いて、apply_filters
で全文検索するのが確実ではあります。Snow Monkey テーマのフックについては GitHub の wiki にまとめていますが、こちらももしかしたら漏れがあるかもしれないので、VS Code 等で全文検索するのが確実だとは思います…。
カスタムフィールドにはどのようなデータでも保存できるので、Snow Monkey Blocks のカスタムフィールドブロックでは表示したいカスタムフィールドの指定だけをして、シンプルにそれを出力する、という仕様にしています。
確かにフォーマットを選択できる UI があれば便利かなとは思いますが、あらゆるフォーマットを追加し続けないといけなくなりそうなので、どういう UI が適切か(または僕の技術力的に可能なのか)が難しいかなと感じます。
一応フィルターフックが通るようにはしているので、コードを書けば好きなフォーマットで出力することは可能です。
add_filter( 'snow_monkey_blocks_custom_field_value_カスタムフィールド名', function( $value, $post_id ) { return $value; // ここで好きなフォーマットに変換して返す } );
現状、下記のコード最上部にあるCSSが効いており、.wp-block-imageクラス配下にある、すべてのimgに対してスタイルが設定(height: auto;)されているようなので。
あ、
width
が HTML or CSS で指定してあってheight: auto
な場合だと、多分その画像のもとの比率を保った状態で表示枠が確保されて、そして画像がロードされる(はず)なので、多分それは問題ないのかなと思います。width
もheight
も両方auto
の場合だとか(すみません、これ未検証なので実際どうなるかはわかりません)、HTML 上のwidth
を上書きするように CSS でwidth
が指定してあるとかだとずれることがありそうだなと。②もしかしたらですが(根拠はないのですが)、imgにloading=”lazy”(遅延読み込み)が自動付与されていますが、decoding=”async”(画像の非同期デコード)も自動付与されていることは関係ないでしょうか?
可能性はあるかもですが、この公式サイト上ではズレないので、別な要因、あるいは別な要因との組み合わせ、という可能性のほうが高いのではないかなと思います。
前に書きましたが、やはり
んーとなると width・height 以外の別の要因ですかねー。一旦コンテンツをガバっと消して、少しずつ戻していきながら都度都度スクロールが正しく動作するか確認していき、正しく動作しないものがでてきたらその場所が原因だとわかるので、さらに具体的に原因を追求していく、という感じで絞り込んでいくのが良いのかなと思います。
が確実かなと思います。あとは一旦、独自に追加した CSS をすべて消して試してみるとか、高速化プラグインを入れているなら無効化してみる、とか。
♥ 0Who liked: No user②ちなみに、あまりよくない&実際に試してはいないのですが、下記の記述等で画像の読込遅延(Lazy loading)の機能を停止するアプローチでも、今回の症状は改善される可能性はあるのでしょうか?
どうなんでしょう? 基本的には
width
・height
があれば画像が読み込まれていなくても画像の表示範囲は確保されているとおもているのですが、試してみるのも良いかもしれませんね。③色々と検索してみたのですが、管理画面上で高さ(CSS)を設定しなくても、最初からhtml上で高さも幅も設定されているのに、画像の専有面積として認識されないのはなぜなのだろうと少し疑問に思ってしまいました。(勉強不足ですみません)
なんですかねー。CSS のほうで画像の幅も高さも auto にしている部分があれば、
width
とheight
があっても無効化されちゃうと思うので、もしそういう CSS を追加されているのであればそういう影響はあるかもしれません。■ちゃんと値が設定されている
width=”330″ height=”365″
※PXでないから?や、これはこれで問題無いはずです。
♥ 0Who liked: No userキタジマ様の意図する内容:管理画面上で幅と高さが設定されてない(自動)のもの。
私の認識:html上でwidth・heightが設定されていないもの。あ、僕も「html上でwidth・heightが設定されていないもの」という認識でした。
管理画面上の高さが「style=”width:auto;height:355px”」にてhtml上に反映され、u-smooth-scrollの計算式に合算されるというニュアンスで合っていますでしょうか?
あーそうか、今の WordPress って
style
でwidth
とheight
が入っちゃうのでした…。これ確か公式の issues でもレスポンシブ対応しようとすると画像が歪んだりするということで報告があっていた気がするので、そのうち良い感じに修正されたら良いなと思っています。コアで修正されるまでの一時的な感じにはなりますが、下記のコードを My Snow Monkey プラグインか子テーマのfunctions.php
に追加すると、デフォルトよりは素直っぽい挙動になるかもしれません。/** * Remove width/height of style attribute at core/image. * For WordPress 6.3.0. Fixed in 6.3.1. * * @see https://github.com/WordPress/gutenberg/issues/53555 */ add_filter( 'render_block_core/image', function( $block_content, $block ) { $attrs = $block['attrs'] ?? array(); $w = $attrs['width'] ?? ''; $h = $attrs['height'] ?? ''; if ( $w && preg_match( '@^\d+@ms', $w ) && $h && preg_match( '@^\d+@ms', $h ) ) { $w = str_replace( 'px', '', $w ); $h = str_replace( 'px', '', $h ); $size_style = "width:{$w}px;height:{$h}px"; $ratio = "{$w}/{$h}"; $block_content = str_replace( $size_style, "aspect-ratio:{$ratio}", $block_content ); } return $block_content; }, 10, 2 );
別ページから、アンカーのある該当ページに移動する場合ですとズレが発生しなかったのですが、この差はページ内とページ外からのリンクで仕組みが異なるからでしょうか?
仕組みは違うのですが、画像が遅延読み込みで読み込まれず高さが保持されていない状態でアンカーに移動するとズレる、という部分は同じ気がするので、ちょっとわからないです…。
ちょっと書いてみました。数値は適当に書き換えてください。
@media (min-width: 640px) { .c-entries-carousel .spider__canvas { width: calc(100% + var(--entries--carousel--gap) * 4); // 4 は枚数 - 1 transform: translateX(-10%); } .c-entries-carousel .spider__slide { max-width: calc(20% - var(--entries--carousel--gap)); } }
ただ、やはり、現状 Swiper でいうアクティブなスライドを中央に配置するような機能が Snow Monkey のスライダーには無いので、無理矢理感はあるかなと思います。他に実現できるプラグインがあるようなら、それを使うほうが安定するのではないかと思います。
♥ 0Who liked: No userんーとなると
width
・height
以外の別の要因ですかねー。一旦コンテンツをガバっと消して、少しずつ戻していきながら都度都度スクロールが正しく動作するか確認していき、正しく動作しないものがでてきたらその場所が原因だとわかるので、さらに具体的に原因を追求していく、という感じで絞り込んでいくのが良いのかなと思います。♥ 0Who liked: No userphpでもメディアクエリが使えると聞いていたので(自身でやったことはないのですが)今回の場合はphp内で分岐したほうが良いのかな?と思ったのですが別にcssでも問題ないのですね。
んー PHP 自体ではできないと思うので、PHP で
style
タグを突っ込むみたいなことですかね? それでも良いと思いますが、既に独自の CSS ファイルがあるならそれを使ったほうが簡単だと思います。♥ 0Who liked: No user最近の投稿のカルーセル、基本3枚表示でスライドだったと思いますが、これを真ん中の1枚だけをちょっと大きめに表示、左右のものははみ出した部分が隠れるように表示したい、という認識であっていますかね?
♥ 0Who liked: No userちなみに上記コードまだ試せていないのですが、特に条件分岐など無さそうなので上記コードですと全ての閲覧環境・全てのページで表示されるという理解でよろしいでしょうか?
そうですね、そうなります。
PCやタブレットなどデバイス別(メディアクエリ別?)で表示したり、トップページや特定のページのみ(ページidで指定でしょうか)表示させたいときの条件分岐の書き方など教えていただけると大変有難いです……
「PCやタブレットなど」は CSS でメディアクエリを使って出し分けるのが無難です。「トップページや特定のページのみ」については、WordPress の条件分岐タグを使えば良いです。下記は公式ドキュメント(英語)のページですが、ぐぐったらいろいろでてくるかなと思います!
♥ 0Who liked: No userwidth
・height
が指定されていない画像に、width
・height
を指定するとどうなりますか?♥ 0Who liked: No user -
投稿者投稿