[shone]

>キタジマさん

ご返信いただきありがとうございます！

 

かなり昔につくった機能であるのと、構造化データに詳しくないのでよく覚えていないのですが、投稿は @type が BlogPosting、固定ページは article、それ以外は WebSite になっていたのではないかと思います。

 

ご回答いただきありがとうございます。では固定ページで作ったページをサイトのトップページに指定すると、articleになるのですが、これは正常な挙動ということでしょうか？

 

ひとまず、トップページについては一般的には WebSite が適切なのでしょうか？

アーカイブとか検索とかは UI をどうするかが難しいですが、投稿・固定ページは編集画面にセレクトボックスを持たせてそこから選んで任意の @type を変更できる、くらいはできるかもしれません。ただ、前述したように構造化データに詳しくないので、どういう選択肢を持たせたほうが良いのかがわからず…。これくらいはあったほうが良いというものがあればぜひ教えてください。

 

ありがとうございます！

正直私もそこまで詳しいわけではないのですが、トップページに関してはWebsiteを指定するようにしているところが多いのかなという印象です。

その他のページに関してはArticle、Blogposting、Webpageなどがあるでしょうか？あとは著者情報の属性がperson、corporation、organizationなど、このへんもどこかで選択できるようにできたら嬉しいなと思います（複数ユーザーがいる場合、ユーザーごとに属性を分けることってできるのでしょうか？たとえば会社全体としてのアカウントはcorporation、会社の中の個人が投稿する場合はperson、など）

その他のリッチリザルトに表示されるようなものまでカバーするとなるとキリがないですし（Recipe、HowTo、Reviewなど）そのあたりはブロック単位で指定するのかな？と思いますので、大きなところでページの属性と著者属性などが指定されていればとりあえず良いのかなと思うのですが…

このあたり、詳しい方がいたらご意見いただきたいところですね…

 

また他のテーマで申し訳ないのですが、参考ページのように設定、出し分けているものもあるようです。

構造化データ設定 – STORK19

STORK19では、トップページ、記事、パンくずリストなど、各種タイプの構造化データを出力できます。

www.stork19.com

 

お忙しいところ恐縮ですが、ご確認いただけますと幸いです。

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

お世話になっております。ご回答いただきありがとうございます！

スライダーのためだけに別のプラグインを導入したりもそれはそれでメンテナンスの手間などが増えるので、snow monkey内でできることはなるべくsnow monkeyで完結させたかったのですが、やはり難しいのですね…ありがとうございます。

どうしても実装しなければいけない要件でもないので、今回はsnow monkeyの範囲内でスライダーを実装しようと思います、ご回答ありがとうございました！

♥ 1

いいねをした人:

[shone]

＞キタジマさん

 

返信いただきありがとうございます！

また修正コードもありがとうございました。

 

その後、WP6.6.1とsnow monkey関連を全て現行の最新バージョンにしたところ、問題は修正されていました。

解決しましたのでトピック閉じさせていただきます。

♥ 1

いいねをした人:

[shone]

ちなみに問題解決するまでひとまずWP6.5.5にダウングレードして対応しようと思ったのですが、今回snow monkeyテーマの最新版にアップデートしたところWPの必須バージョンが6.6になってしまったようで、その関係かWPの外観＞カスタマイズのCSS編集などが保存できない（「有効化できません」）状態になってしまいました。。。

 

一旦、snow monkeyテーマも以前のバージョンに戻したいのですが、ダウンロードする方法などありますでしょうか？

お手数おかけしまして恐縮ですが、ご確認いただけますと幸いです。

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

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

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

キャプチャ添付させていただきます（見えますでしょうか？）

 

 

どうも.wp-profile-box__archives-btnのtext-decoration: noneは無効になっているようで、:rootのほうのunderlineがそのまま効いているように見えます…？

ちなみに特に該当部分のCSSは変更しておりません。

 

お忙しいところ恐縮ですが、ご確認いただけますと幸いです。

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

ご返信いただきありがとうございます！

 

問題が発生しているページの URL を共有頂くか、現象が確認できるスクショを共有頂くことはできますか？

 

URLが公開できないためスクショで恐縮ですが、以下のような状態です。
（※アイコンとプロフィール文は塗りつぶしています）

 

 

ちなみにこちらは試しにWPのバージョンを6.5.5にダウングレードしたところ正常に表示されていましたので、やはり6.6起因のものじゃないかな？と思います。

またアップデートが来ていたので「snow monkey editor」を10.0.3にアップデートしてみましたが、状況は変わらずでした。

 

お忙しいところ恐縮ですが、ご確認いただけますと幸いです。

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

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

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

それならば、スライダーを2個入れておいて、Snow Monkey Editor のウィンドウサイズによるブロックの表示・非表示機能で適宜表示状態を設定したほうが簡単な気はします。

こちらの初期コンテンツ作成時であればそのほうがシンプルにやりやすく、私も本来であればそうしたかったのですが…今後知識のあまりないクライアント側が更新作業をすることを考えると同じスライダーを「PC用」「スマホ用」で設置すると混乱したり設定忘れが起こりそうでして…なるべくクライアント側の作業は一工程でも減らしいため、裏側の処理や項目の工夫で四苦八苦しているところでした。。。

 

一応グリッドでブロックで試してみたので記録として残しておきます。

 

こちらサンプルコードありがとうございます！おかげさまで何となくの理解が進みました。

ただ、いただいたコードをカスタムHTMLに貼り付け表示を見つつ、自分で設定したブロックをHTMLに変換して見比べてやってみようかと思ったのですが…『グリッド』ブロックはHTMLに変換できないのでしょうか？うまく中身を見ることができませんでした…

 

なんとか読み取ろうとした感じですが、

・『グリッド』ブロックを用意

・『グリッド』ブロックにcssクラス「hogehoge」を付与

・ブロック設定のGRID-TEMPLATE-COLUMNSは『カラム数』で「2」に設定

・GRID-TEMPLATE-ROWSは『自由入力』で「auto 1fr」に設定

・『グリッド』内には「画像（要素1）」「見出し（要素2）」「段落とボタン（要素3／グループ化）」の3要素

・上記3要素をcssでモバイル時（メディアクエリ）で順序変更

 

のような流れであっていますでしょうか？

この仮定で、同じように自分で

 

・要素１：「スライダー」

・要素２：「見出し」「段落（サブテキスト）」の「グループ」化

・要素３：「ボックス」「表」「ボタン」などのグループ化

 

を用意し配置しようと思ったのですが、うまくいきませんでした。

またそもそも『グリッド』ブロック及びグリッドレイアウトの理解があまり進んでいなく、普通に3つの要素を用意してエディタ内で配置しようとすると、カラム数を2にしているために左、右、左（2列目）…といった順で要素が並んでしまい、最初の要素のみ左に配置し、それ以外を右側に配置するといPC表示時の見た目を作ることもできませんでした。

※繰り返しで恐縮ですが、PC時は左にスライダー、それ以外の要素は右にしたいのですがそれすらできなかったです…

 

モバイル時の順序を入れ替える以前に、まずどうやってエディタ上で、『グリッド』ブロックを使い上記のようなPCレイアウトを作るのか？でつまづいてしまいました。。。

 

ご面倒をおかけし大変恐縮ではございますが、

・どこまでブロックエディタ上で設定し、どこからHTML編集（HTMLに変換など必要？）がいるのか、

など手順のアドバイスをいただけますと幸いです…。

 

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

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

アドバイスいただきありがとうございます！

いただいたコードを試して無事に希望の見た目に調整することができました！本当にありがとうございます！

解決しましたのでトピック閉じさせていただきます。

♥ 1

いいねをした人:

[shone]

＞キタジマさん

 

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

またアドバイスいただきありがとうございます。

 

これが「特定のカスタム投稿タイプの記事上に埋め込まれたブログカードのみ」（「特定のカスタム投稿タイプの記事のブログカード」ではない）ということであれば、.single-{投稿タイプの名前} .is-provider-wp-oembed-blog-card をセレクタにして CSS でアイキャッチ画像以外を消せばいけるかもしれません。

 

上記で教えていただいたコードをもとに、productsというスラッグのカスタム投稿タイプ上で表示されるブログカードをカスタマイズするために、

 

.single-{products} .is-provider-wp-oembed-blog-card .wp-oembed-blog-card__body{
display: none;
}

 

のような感じで書いたのですが、どうやら投稿タイプの指定が効いていないのか？（外観＞カスタマイズ＞追加cssで記入したところ、スラッグ名のところが赤字になってしまいました）、全ての投稿上でブログカードのbodyが消えてしまいました。

何か解釈や書き方が間違っているでしょうか？？

 

また、同じブログカードで画像を正方形にしたかったので画像サイズを弄ってみたりしたのですがイマイチうまくいきません。

.wp-oembed-blog-card__figure img{
object-fit: contain;
}

では画像はトリミングされませんが余白が生まれてしまいますので…どのようにサイズ調整すれば良いでしょうか？

 

またブログカードの角丸を解除したく、

.wp-block-embed__wrapperや.wp-block-embed .is-type-rich .is-provider-wp-oembed-blog-card .wp-block-embed-wp-oembed-blog-card、.wp-block-embed

などわかるかぎりでborder-radius: 0を記入してみましたがうまくいきませんでした。。。

 

長くなってしまいましたが、

・特定のカスタム投稿タイプ上で（今回はスラッグ名「products」）
・ブログカードをサムネイル画像のみに
・サムネイルは正方形、余白や角丸、シャドウなどブログカードの効果もなしに

するために、アドバイスをいただけますと幸いです。

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

♥ 0

いいねをした人: 居ません

[shone]

＞GONSYさん

 

返信いただきありがとうございます！

またカスタムフィールドを使用したアドバイスありがとうございます！

 

カスタム投稿タイプを使用することが前提であれば、私の場合は、カスタムフィールド ＋ 独自のテンプレートを用意するか、該当のカスタム投稿タイプのみカスタムフィールドを表示できるようにフックで挿入します。

 

ただ、まさに今現在がカスタムフィールドで構築された投稿をフルリニューアルしているところでして、現行の投稿がカスタムフィールドを多用しすぎて動作が重くなりがちなこと（＋将来に渡って今後も商品が増えることを考えると今より重くなることはあっても軽くなることは基本的に無いこと）と、カスタムフィールドを使用しすぎて一覧性がかえって悪くなり、入力フォームを制限できること以外のメリットが薄い（デメリットのほうが目立ってきた）という事情がありまして…

 

それならいっそブロックエディタで構築したものをテンプレート化してパターンに登録・いつでも呼び出せるようにしたほうが、見た目ほぼそのままに編集できるので項目ごとの関係や意図を理解しやすく、今まで編集をしたことがない人間でも一度覚えてしまえば編集しやすいかなと思い今回はブロックエディタを再投資ております。

ですので、更新性は担保しつつ極力入力の手間や思考を省いた形式にはおおむねできているのですが、関連商品（関連記事）の設定時をいかにシンプルにするか？が目下の課題と言うことで、URLを直接貼り付けるだけのブログカード（「埋め込み」）形式が楽なのかなと考えた次第です。

そのため、ブログカードの見た目を整えたいというのが要望でした…！

♥ 0

いいねをした人: 居ません

[shone]

snow monkeyバージョン等の情報を書き忘れてしまいました、大変失礼しました。

【お使いの Snow Monkey のバージョン】25.4.3
【お使いの Snow Monkey Blocks のバージョン】20.5.1
【お使いの Snow Monkey Editor のバージョン】 9.3.3
【お使いのブラウザ】chrome
【当該サイトのURL】

よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

返信いただきありがとうございます！

またコードのアドバイスありがとうござます。

 

特に動的に何かをしているようには見えなかったので、動的に項目の増減等が不要なのであればフォームの作成画面で設定してしまうのが簡単だと思います。

 

なるほど、アップデート情報のサンプルコードを元に選択肢を上書きした感じだったのですが、これ自体は必須ではなくフォームのほうでラジオボタンを設定するだけで問題ない感じなんですね。

 

入力画面については、頂いたコードをベースに↑の修正を入れて調整すれば実現できるそうでしたが、そこから管理画面にいって入力画面に戻ったり、バリデーションエラーがあってエラー画面になったりしたときにも選択肢に応じて正しく画像を表示させるのが、どうやったら良いのだろう…という感じでした。

 

やはり簡単にはいかなそうですね…

キタジマさんで良い方法が思いつかないのであれば到底今の私には実現できないと思いますので…ちょっと今々の実装は一旦諦めることとします。。。

選択肢に応じて画像を出さなくても、注釈的にポップアップを添えておくくらいでも同じ目的は果たせそうですので、代替手段で対応してみます。

 

お忙しい中アドバイスいただきありがとうございました！

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

ご返信いただきありがとうございます！

僕も特にそういうのをつくった経験はないので、試したコードがあるのであればそれを共有してください！（それをもとにやったほうが簡単かなと思うので）

こちらかしこまりました。

ただ私自身がJavaScriptやjQueryの知識に乏しくほとんど何もわからない素人なので、色々検索しつつChatGPTと問答しながら試してみたという状況なのですが…ChatGPTも最初にsnow monkey formsのコードを読み込ませてそれを前提にしているはずが途中でコードを無視したりと、結局うまくいかずじまいでした。。。

ですので参考になるかはわかりませんが、一応、最終的に提示されたコードを共有させていただきます。

・snow monkey formsのコード

add_filter(
	'snow_monkey_forms/checkboxes/options',
	function( $options, $name, $setting ) {
		if ( 'checkboxes-xxxxx' === $name ) {
			return array(
				'option-1' => 'あいうえお',
				'option-2' => 'かきくけこ',
				'option-3' => 'さしすせそ',
			);
		}
		return $options;
	},
	10,
	3
);

・JavaScript

jQuery(document).ready(function($) {
	// チェックボックスの選択状態が変わるたびに実行
	$('[name="checkboxes-xxxxx[]"]').change(function() {
		// すべての関連画像を非表示にする
		$('.image-for-checkbox').hide();

		// 選択されているチェックボックスに応じて画像を表示
		$('[name="checkboxes-xxxxx[]"]:checked').each(function() {
			var selectedValue = $(this).val();
			// 対応する画像のIDに基づいて画像を表示（例: #image-for-option-1）
			$('#image-for-' + selectedValue).show();
		});
	});
});

・画像表示（HTML）

<img id="image-for-option-1" src="画像のURL" style="display:none;" alt="説明">

・画像表示（PHP）

 

<img id="image-for-option-1" src="<?php echo get_template_directory_uri(); ?>/path/to/image.jpg" style="display:none;" alt="説明">

以上になります。
お手数ですがお手すきの際にご確認いただけますと幸いです。

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

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

まさにそんな感じです！

たとえば資料請求やサンプル請求のフォームで、A、B、C、Dといった4つの選択肢があって、選択するとそれぞれのイメージが表示されるようにしたい（他のイメージは非選択時は隠しておきたい）といった感じです。

自分なりに調べてもみたのですが、jQueryと連携させてチェック時の条件分岐をする（？）といった方法でできる？ようなところまでは行き着いたのですが、実際に試してみても全くうまくいかず、完全にお手上げ状態でした。。。

アドバイスいただけると大変有難いです…！

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

♥ 0

いいねをした人: 居ません

[shone]

＞キタジマさん

 

ありがとうございます！

今再度確認してみたところ、なぜか自分でCSSに追記しなくてもunderlineが正常に表示されているようでした…？？

 

ただ元々PC時には解除ボタンはファイルをアップしない状態でも表示されていて、今はファイルを一度アップしないと解除ボタンが表示されず、また表示位置もさきほどまではボタンのすぐ近くにあったのが今は右端に寄っているようで…？？

特にプラグイン等更新したわけでもないので何か変更が入ったとも考えにくいのですが、とりあえず原因不明ですがこちら解決しました、ありがとうございました…！

 

こちらのトピックは、とりあえず暫定的にCSSでの対処法を教えていただきましたが正式にアップデートいただくまで閉じないほうがよろしいでしょうか？

♥ 0

いいねをした人: 居ません

[投稿者]

投稿