[中野桂輔]

おおー、動きました！変換もできますね。

WordPressの関数なので、きちんと調べれば自分でも気付けそうなことでした。お手を煩わせてしまい、すみません。勉強になりました。

教えていただきありがとうございました！

あともう一つ後学のためにお聞きしたいのですが、ブロックに用意されているフィルターフックの一覧表などはあるのでしょうか。（カスタムフィールドブロックの場合はview.phpにapply_filters関数があったのですが、他のブロックも「apply_filters」で検索してみれば漏れなく探せますか？）

♥ 1

Who liked:

[キタジマ タカシ]

あーすみません！ フックの構文をミスってました。

add_filter(
	'snow_monkey_blocks_custom_field_value_カスタムフィールド名',
	function( $value, $post_id ) {
		return $value; // ここで好きなフォーマットに変換して返す
	},
	10, // コールバック関数の優先度
	2   // 受け取る引数の数
);

add_filter() で引数を2つ受け取る場合は、ちゃんと2つ受け取ると指示しないとだめなので、上記のようなコードになります。

♥ 2

Who liked:

[中野桂輔]

返信ありがとうございます。

確かに汎用的なブロックで対応するのは難しそうですね…。でも、フックを用意していただけていたんですね。

ローカル環境でフィルターフックを試してみようと思ったのですが、
以下のコードのfunction( $value, $post_id ){の行でエラーが発生してしまいます。
カスタムフィールド名の部分を置き換えただけのつもりでしたが、何が原因でしょうか？

my-snow-monkey.php（一部）

add_filter(
'snow_monkey_blocks_custom_field_value_completion',
function( $value, $post_id ) {
return $value; // ここで好きなフォーマットに変換して返す
}
);

エラーとスタックトレース

Fatal error: Uncaught ArgumentCountError: Too few arguments to function {closure}(),
1 passed in C:\....\app\public\wp-includes\class-wp-hook.php on line 326 and exactly
2 expected in C:\....\app\public\wp-content\plugins\my-snow-monkey\my-snow-monkey.php:374

Stack trace:
#0 C:\....\app\public\wp-includes\class-wp-hook.php(326): {closure}('2024-03-04')
#1 C:\....\app\public\wp-includes\plugin.php(205): WP_Hook->apply_filters('2024-03-04', Array)
#2 C:\....\app\public\wp-content\plugins\snow-monkey-blocks\dist\blocks\custom-field\view.php(20): apply_filters('snow_monkey_blo...', '2024-03-04', 1153)
#3 C:\....\app\public\wp-content\plugins\snow-monkey-blocks\App\DynamicBlocks.php(32): include('C:\\Users\\...')
#4 C:\....\app\public\wp-content\plugins\snow-monkey-blocks\dist\blocks\custom-field\index.php(22): Snow_Monkey\Plugin\Blocks\App\DynamicBlocks::render('custom-field', Array, '', Object(WP_Block))
#5 C:\....\app\public\wp-includes\class-wp-block.php(258): Snow_Monkey\Plugin\Blocks\Bootstrap->{closure}(Array, '', Object(WP_Block))
#6 C:\....\app\public\wp-includes\class-wp-block.php(244): WP_Block->render()
#7 C:\....\app\public\wp-includes\class-wp-block.php(244): WP_Block->render()
#8 C:\....\app\public\wp-includes\class-wp-block.php(244): WP_Block->render()
#9 C:\....\app\public\wp-includes\class-wp-block.php(244): WP_Block->render()
#10 C:\....\app\public\wp-includes\blocks.php(1484): WP_Block->render()
#11 C:\....\app\public\wp-includes\blocks.php(1522): render_block(Array)
#12 C:\....\app\public\wp-includes\class-wp-hook.php(324): do_blocks('<!-- wp:snow-mo...') #13 C:\....\app\public\wp-includes\plugin.php(205): WP_Hook->apply_filters('<!-- wp:snow-mo...', Array)
#14 C:\....\app\public\wp-includes\post-template.php(256): apply_filters('the_content', '<!-- wp:snow-mo...') #15 C:\....\app\public\wp-content\themes\snow-monkey\template-parts\content\entry\content\content.php(17): the_content() #16 C:\....\app\public\wp-includes\template.php(792): require('C:\\Users\\...') #17 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Contract\Template_Tag.php(246): load_template('C:\\Users\\...', false, Array) #18 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Template_Part.php(69): Inc2734\WP_View_Controller\Helper::locate_template(Array, true, false, 'template-parts/...', 'works', Array) #19 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Contract\Template_Tag.php(294): Inc2734\WP_View_Controller\App\Template_Part::render('template-parts/...', 'works', Array) #20 C:\....\app\public\wp-content\themes\snow-monkey\template-parts\content\entry\entry.php(104): Framework\Helper::get_template_part('template-parts/...', 'works') #21 C:\....\app\public\wp-includes\template.php(792): require('C:\\Users\\...') #22 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Contract\Template_Tag.php(246): load_template('C:\\Users\\...', false, Array) #23 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Template_Part.php(69): Inc2734\WP_View_Controller\Helper::locate_template(Array, true, false, 'template-parts/...', 'works', Array) #24 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Contract\Template_Tag.php(294): Inc2734\WP_View_Controller\App\Template_Part::render('template-parts/...', 'works', Array) #25 C:\....\app\public\wp-content\themes\snow-monkey\templates\view\content.php(62): Framework\Helper::get_template_part('template-parts/...', 'works', Array) #26 C:\....\app\public\wp-includes\template.php(792): require('C:\\Users\\...') #27 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Contract\Template_Tag.php(220): load_template('C:\\Users\\...', false, Array) #28 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Template_Part.php(69): Inc2734\WP_View_Controller\Helper::locate_template(Array, true, false, 'templates/view/...', 'works', Array) #29 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Contract\Template_Tag.php(294): Inc2734\WP_View_Controller\App\Template_Part::render('templates/view/...', 'works', Array) #30 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\View.php(147): Inc2734\WP_View_Controller\Helper::get_template_part('templates/view/...', 'works') #31 C:\....\app\public\wp-content\themes\snow-monkey\templates\layout\wrapper\one-column.php(94): Inc2734\WP_View_Controller\App\View->view()
#32 C:\....\app\public\wp-includes\template.php(792): require('C:\\Users\\...')
#33 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Contract\Template_Tag.php(220): load_template('C:\\Users\\...', false, Array)
#34 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Template_Part.php(69): Inc2734\WP_View_Controller\Helper::locate_template(Array, true, false, 'templates/layou...', '', Array)
#35 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Contract\Template_Tag.php(294): Inc2734\WP_View_Controller\App\Template_Part::render('templates/layou...', '', Array)
#36 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\Contract\Template_Tag.php(143): Inc2734\WP_View_Controller\Helper::get_template_part('templates/layou...', NULL, Array)
#37 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\View.php(105): Inc2734\WP_View_Controller\Helper::get_wrapper_template('templates/layou...', Array)
#38 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\View.php(79): Inc2734\WP_View_Controller\App\View->_render()
#39 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\App\View.php(61): Inc2734\WP_View_Controller\App\View->_render_loop()
#40 C:\....\app\public\wp-content\themes\snow-monkey\vendor\inc2734\wp-view-controller\src\Bootstrap.php(45): Inc2734\WP_View_Controller\App\View->render('content', 'works')
#41 C:\....\app\public\wp-content\themes\snow-monkey\singular.php(25): Inc2734\WP_View_Controller\Bootstrap::render('content', 'works')
#42 C:\....\app\public\wp-includes\template-loader.php(106): include('C:\\Users\\...')
#43 C:\....\app\public\wp-blog-header.php(19): require_once('C:\\Users\\...')
#44 C:\....\app\public\index.php(17): require('C:\\Users\\...')
#45 {main} thrown in C:\....\app\public\wp-content\plugins\my-snow-monkey\my-snow-monkey.php on line 374

環境（Localを使用）

• WordPress のバージョン：6.4.3
• Snow Monkey のバージョン：25.3.3
  Snow Monkey のバージョン：20.4.3
• 使用しているプラグイン：結構多いため、必要そうであれば後で貼ります。
• PHPのバージョン：8.1.23
• MySQL のバージョン：MariaDB 10.4.32

♥ 0

Who liked: No user

[キタジマ タカシ]

あ！すみません、var_dump( $args ); は要らないので消してください！

function custom_modify_related_posts_query( $args ) {
	$args['orderby'] = 'date';
	$args['order'] = 'DESC';

	return $args;
}
add_filter( 'snow_monkey_related_posts_args', 'custom_modify_related_posts_query' );

♥ 1

Who liked:

[diiih]

早々にご対応ありがとうございます。

順序は希望通りに反映されたのですが、上部に下記添付のようなコードが表示されてしまいました。

コードの記載はMy Snow Monkeyを使用しております。

お手数ですがよろしくお願いします。

♥ 0

Who liked: No user

[キタジマ タカシ]

下記だとどうですかね？

function custom_modify_related_posts_query( $args ) {
	var_dump( $args );
	$args['orderby'] = 'date';
	$args['order'] = 'DESC';

	return $args;
}
add_filter( 'snow_monkey_related_posts_args', 'custom_modify_related_posts_query' );

♥ 1

Who liked:

[キタジマ タカシ]

カスタムフィールドにはどのようなデータでも保存できるので、Snow Monkey Blocks のカスタムフィールドブロックでは表示したいカスタムフィールドの指定だけをして、シンプルにそれを出力する、という仕様にしています。

確かにフォーマットを選択できる UI があれば便利かなとは思いますが、あらゆるフォーマットを追加し続けないといけなくなりそうなので、どういう UI が適切か（または僕の技術力的に可能なのか）が難しいかなと感じます。

一応フィルターフックが通るようにはしているので、コードを書けば好きなフォーマットで出力することは可能です。

add_filter(
	'snow_monkey_blocks_custom_field_value_カスタムフィールド名',
	function( $value, $post_id ) {
		return $value; // ここで好きなフォーマットに変換して返す
	}
);

♥ 2

Who liked:

[キタジマ タカシ]

現状、下記のコード最上部にある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 をすべて消して試してみるとか、高速化プラグインを入れているなら無効化してみる、とか。

♥ 0

Who liked: No user

[es：エス]

ひまわりさん

こんな感じだとどうでしょう？

.smf-action .smf-button-control__control {
background-color: #000;
background-image: initial;
color: #fff;
}

♥ 1

Who liked:

[Olein_jp]

こちらでも確認しましたが、クラス名は .smf-action .smf-button-control__control で問題なさそうなので、これで適応されないとなると、他に要因があると思います。

しかし、このスクリーンショットではそれを推測することが難しいですね…

♥ 0

Who liked: No user

[tatsumi-web]

追伸：
①下記のCSSを記述して検証しましたがダメでした・・・。
height: autoは打ち消している様子なのですが、管理画面上で高さを設定していない状態だと、その分ズレてしまいました。(html上のwidth と heightが優先されない)

.wp-block-image img {
    height: ●色々なパターン●;
    width: ●色々なパターン● !important;
}

②もしかしたらですが(根拠はないのですが)、imgにloading=”lazy”(遅延読み込み)が自動付与されていますが、decoding=”async”(画像の非同期デコード)も自動付与されていることは関係ないでしょうか？

<figure class="wp-block-image aligncenter size-full sme-animation-fade-in sme-hidden-sm" data-sme-animation-duration="2">
<img loading="lazy" decoding="async" width="1000" height="409" src="http://●●.png" alt="●●" class="wp-image-623" style="object-fit:cover" srcset="https://●●.png 1000w, https://●●.png 300w, https://s●●.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" />
</figure>

♥ 0

Who liked: No user

[tatsumi-web]

ご返信ありがとうございます。

CSS のほうで画像の幅も高さも auto にしている部分があれば、width と height があっても無効化されちゃうと思うので、

なるほど！！！！！
こちらの返信内容で、すごく腑に落ちたかもしれません。
現状、下記のコード最上部にあるCSSが効いており、.wp-block-imageクラス配下にある、すべてのimgに対してスタイルが設定(height: auto;)されているようなので。

これらの高さ＝autoとして設定してあるCSS群の設定を打ちけせれば(height: initial;等で？)、html上に記述された高さが優先＆認識されて、今回の症状が発生しないのかなと思いました。
(検証はしておらず、想定ですが。)

※管理画面上で高さを設定して症状が改善したのは、高さ設定→htmlタグにCSS直書きでオーバーライドされ→height: auto;が打ち消されたから。
(WP6.3以降の仕様じゃなかったら改善しなかった)

https://●●/wp-includes/css/dist/block-library/style.min.css?ver=6.4.3

.wp-block-image img {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    vertical-align: bottom
}

https://●●/wp-includes/css/dist/block-library/style.min.css?ver=6.4.3

html :where(img[class*=wp-image-]) {
    height: auto;
    max-width: 100%
}

https://●●/wp-content/themes/snow-monkey/assets/css/app/app.css?ver=1701828173

img,video {
    height: auto;
    max-width: 100%;
    vertical-align: middle
}

♥ 0

Who liked: No user

[キタジマ タカシ]

②ちなみに、あまりよくない＆実際に試してはいないのですが、下記の記述等で画像の読込遅延(Lazy loading)の機能を停止するアプローチでも、今回の症状は改善される可能性はあるのでしょうか？

どうなんでしょう？ 基本的には width・height があれば画像が読み込まれていなくても画像の表示範囲は確保されているとおもているのですが、試してみるのも良いかもしれませんね。

③色々と検索してみたのですが、管理画面上で高さ(CSS)を設定しなくても、最初からhtml上で高さも幅も設定されているのに、画像の専有面積として認識されないのはなぜなのだろうと少し疑問に思ってしまいました。(勉強不足ですみません)

なんですかねー。CSS のほうで画像の幅も高さも auto にしている部分があれば、width と height があっても無効化されちゃうと思うので、もしそういう CSS を追加されているのであればそういう影響はあるかもしれません。

■ちゃんと値が設定されている
width=”330″ height=”365″
※PXでないから？

や、これはこれで問題無いはずです。

♥ 0

Who liked: No user

[tatsumi-web]

ご連絡ありがとうございます。
勉強になります・・・、6.3から仕様が変更になったのですね、確かにうろ覚えではありますが以前はwidth・heightの値が変わったような気がします。

①さっそく頂いた記述を、my-snow-monkey.phpに記述を追加させていただきました、ありがとうございます。
②ちなみに、あまりよくない＆実際に試してはいないのですが、下記の記述等で画像の読込遅延(Lazy loading)の機能を停止するアプローチでも、今回の症状は改善される可能性はあるのでしょうか？改善されたとしても今回のように高さを認識させるようにした方が最善でしょうか？

add_filter( 'wp_lazy_loading_enabled' , '__return_false' );

③色々と検索してみたのですが、管理画面上で高さ(CSS)を設定しなくても、最初からhtml上で高さも幅も設定されているのに、画像の専有面積として認識されないのはなぜなのだろうと少し疑問に思ってしまいました。(勉強不足ですみません)

■ちゃんと値が設定されている
width=”330″ height=”365″
※PXでないから？

【管理画面上で高さを設定してない＝style付与されてない】
<div class="wp-block-column is-vertically-aligned-bottom sme-animation-fade-in is-layout-flow wp-block-column-is-layout-flow" data-sme-animation-duration="2">
<figure class="wp-block-image aligncenter size-full plan1">
<img class="wp-image-638" src="●●.png" sizes="(max-width: 330px) 100vw, 330px" srcset="●●-2.png 330w, ●●-2-271x300.png 271w" alt="" width="330" height="365" />
</figure>
</div>

♥ 0

Who 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
);

別ページから、アンカーのある該当ページに移動する場合ですとズレが発生しなかったのですが、この差はページ内とページ外からのリンクで仕組みが異なるからでしょうか？

仕組みは違うのですが、画像が遅延読み込みで読み込まれず高さが保持されていない状態でアンカーに移動するとズレる、という部分は同じ気がするので、ちょっとわからないです…。

♥ 1

Who liked: