[shone]

＞キタジマさん

 

ご回答ありがとうございます！

返信遅くなりまして申し訳ございません。

 

んー PHP 自体ではできないと思うので、PHP で style タグを突っ込むみたいなことですかね？

 

『メディアクエリ』という書き方が悪かったかもしれません、自分でPHPでの内容出し分けの方法を検索したときにそういった表現が出てきたのでそのまま描いたのですが、実際にはメディアクエリというか、PHPでの条件分岐の書き方の情報だったのかなと思いました。

PHPでメディアクエリ｜スマホ・タブレット・PCの切り分け

CSSやjQueryでは、よくやるメディアクエリの指定。 PHPでも同じことができる！ PHPでメディアクエリする時、いい点はブラウザでソースを表示した時、他のコードがソースに…

hajimete.org

スマホ・タブレット・PCをPHPで条件分岐する方法

スマホ・タブレット・PC(ユーザーエージェント)によって条件分岐する方法のメモ。読み込むCSSやJSなどの外部ファイルをユーザーの端末ごとに切り替えることで別々のレイア…

bambooworks.co

 

いずれにせよ、PHPでデバイス毎出し分けするよりCSSで出し分けたほうが良いとのことで、アドバイスいただいたようにクラスを付与してCSSで出し分けできました！

またアニメーションも、追加でCSSでやろうと思うとうまくいかなかったのですが、『Blocks Animation: CSS Animations for Gutenberg Blocks』プラグインを別で入れているので、こちらを使い別ページのブロック内で仮にアニメーションを付与したバナー画像を作り、ブロックをHTML化することでCSSへの追加記述無く簡単なアニメーションまで実装できました。

同プラグインのアニメーション設定はけっこう細かいので、これだけで色々と動きは付けられそうです。

 

色々試行錯誤しましたが、結果的に想定通りの実装ができかつ今後にも応用が効きそうな内容になりました。

この度はアドバイスありがとうございました！

♥ 0

Who liked: No user

[キタジマ タカシ]

ブロックに用意されているフィルターフックの一覧表などはあるのでしょうか。

ある程度はこの公式サイトのお知らせ記事に書いているとは思いますが、まとまっているものはありません…すみません。
/wp-content/plugins/snow-monkey-blocks を VS Code 等で開いて、apply_filters で全文検索するのが確実ではあります。

Snow Monkey テーマのフックについては GitHub の wiki にまとめていますが、こちらももしかしたら漏れがあるかもしれないので、VS Code 等で全文検索するのが確実だとは思います…。

Home

Premium WordPress Theme. This theme is published here for users and developers. Please buy themes when using themes on live site. we can not provide support to…

github.com

♥ 2

Who liked:

[中野桂輔]

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

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