[キタジマ タカシ]

実際にはメディアクエリというか、PHPでの条件分岐の書き方の情報だったのかなと思いました。

なるほどです。記事をみた感じだと、確かにメディアクエリではなくて UA で条件分岐させる方法みたいでした。

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

アニメーションも便利なプラグインがあるんですね…。

解決済みということで、トピックのクローズをお願いします！

♥ 1

Who liked:

[shone]

【お使いの Snow Monkey のバージョン】25.3.3
【お使いの Snow Monkey Blocks のバージョン】20.4.3
【お使いの Snow Monkey Editor のバージョン】9.3.3
【お使いの PHP のバージョン】
【お使いのブラウザ】chrome
【当該サイトのURL】制作中のため無し

### 発生している問題

お世話になっております。

タイトルの通り、snow monkey forms（バージョン6.3.0）を使用しフォームを作成したところ、添付ファイルを選ぶ『ファイル』で表示される「選択されていません」のテキストが枠外へはみ出してしまいます。

※画像添付します

本来折り返しがきくべきところだと思うのですが、効いていないようです。

ちなみに2つのフォームを1ページで表示したい関係上、『タブ』ブロックの中にsnow monkey formsを入れていますがそちら関係ありますでしょうか？

また直接関係はなさそうですが、「解除」ボタンもテキストリンク？のアンダーラインがアップデート情報の参考画像では付いていたと思うのですが、こちらも付いていないようで、これは何か原因がありますでしょうか？

解決策ありましたらご教示いただけますと幸いです。

何卒よろしくお願い致します。

[中野桂輔]

あ、いえいえ、謝っていただくことはありません、ドキュメント整備していくのも労力がかかることだと思います。

テーマのフックもブロックのフックもapply_filtersで全文検索してみれば確実、またテーマのフックについてはGitHubのwikiにまとめてある（漏れはあるかもしれない）、とそれがわかっただけでも私にとっては収穫でした。
自分が忙しいとお知らせ記事も読めてない時があるので…。

この度はお忙しい中ご返信くださりありがとうございました。

♥ 1

Who liked:

[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