-
検索結果
-
キタジマさん、Olein_jpさん、
ありがとうございます。
カスタムフィールドブロックは
Snow Monkey Blocks のカスタムフィールドブロックのことです。
ちょっとやってみて、またここにご報告します！
Who liked:
カスタムフィールドブロックを使って出力していますが、他のフィールドは問題なく出力されており、テーブルの料金表のみが「Array」と出力されてしまいます。
この「カスタムフィールドブロック」というのは Snow Monkey Blocks のカスタムフィールドブロックのことですかね？
だとした場合、Snow Monkey Blocks のカスタムフィールドブロックは値として文字列がくることを期待しているため、配列がくると正しく表示することができません。
Advanced Custom Fields の Table Field がどのような値を持っているかはわからないので具体的なコードは提示できませんが、カスタムフィールドブロックにはフックがあって値を操作して出力することができるので、そこで表の形に整形して出力すればいけるのかなとは思います。
// name が「あいうえお」なカスタムフィールドの値を書き換えて出力する add_filter( 'snow_monkey_blocks_custom_field_value_あいうえお' function( $value ) { // ここで $value を書き換えて return する return $value; } );ただ、結構大変そうな気はするので、ACF のほうに表の形で出力する何らかの機能があるのであれば、それを使うのが良いと思います。
Who liked:.single-{products} .is-provider-wp-oembed-blog-card .wp-oembed-blog-card__body↓
.single-product .is-provider-wp-oembed-blog-card .wp-oembed-blog-card__bodyに変更してみてください！
また、同じブログカードで画像を正方形にしたかったので画像サイズを弄ってみたりしたのですがイマイチうまくいきません。
またブログカードの角丸を解除したく、
余白や角丸、シャドウなどブログカードの効果もなしに
これでどうでしょう？
.single-product .is-provider-wp-oembed-blog-card { --wp-oembed-blog-card--figure--aspect-ratio: 1 / 1; --wp-oembed-blog-card--border-radius: 0; --wp-oembed-blog-card--box-shadow: none; --wp-oembed-blog-card--box-shadow--hover: none; --wp-oembed-blog-card--padding: 0; }Who liked:お問い合わせフォームに、物件用項目を作ると、自動で入力されるように反映できました！
自動返答メールにも反映されています。ありがとうございました！
add_filter( 'snow_monkey_forms/control/attributes', function( $attributes ) { // URLからpost_idを取得 $post_id = isset($_GET[‘post_id’]) ? intval($_GET[‘post_id’]) : null; // name 属性値を持つブロックが対象 // name が building という名前のとき if ( isset( $attributes[‘name’] ) && ‘building’ === $attributes[‘name’] ) { // ?post_id で指定された投稿のタイトルを初期値として設定 $attributes[‘value’] = get_the_title( $post_id ); } return $attributes; } );Who liked:
「商品ページから問い合わせフォームにリンクされている」という状況であれば、そのリンクに URL パラメーターを追加することで比較的簡単に実現できます。下記のページにページタイトルをフォームに埋め込むサンプルコードがあります。
もしフォームが商品ページのそのまま設置されているならこういう感じですかね。
add_filter( 'snow_monkey_forms/control/attributes', function( $attributes ) { // name 属性値を持つブロックが対象 // name が fullname という名前のとき if ( isset( $attributes['name'] ) && 'fullname' === $attributes['name'] ) { // ?post_id で指定された投稿のタイトルを初期値をして設定 $attributes['value'] = get_the_title( $post_id ); } } return $attributes; } );Who liked: No user上記の「任意のタクソノミーの投稿」のところを見ていただければと思うのですが、「リッチメディア」は「Snow Monkey bbPress Support v0.18.0 をリリー…」と途中で省略されているけど、「テキスト」は「Snow Monkey bbPress Support v0.18.0 をリリースしました」と全部表示されていると思います。
なのでテキストなのに省略されているのであれば、なにかカスタマイズされている可能性が高いのではないかと思います。
– 子テーマでテンプレート・テンプレートパーツを上書きしていないか
– My Snow Monkey でテンプレート・テンプレートパーツを上書きしていないか
– 子テーマのfunctions.phpにタイトルの文字数を変更するようなフィルターを使ったコードがないか
– My Snow Monkey にタイトルの文字数を変更するようなフィルターを使ったコードがないかあたりを確認してみるとなにかわかるかもしれません。
Who liked: No user一応できるっちゃできるのですが、Snow Monkey Blocks のグリッドブロックは現状タブレット・スマホで設定を変えられないので、結局 CSS は書かなければいけなくなり、それならば、スライダーを2個入れておいて、Snow Monkey Editor のウィンドウサイズによるブロックの表示・非表示機能で適宜表示状態を設定したほうが簡単な気はします。
一応グリッドでブロックで試してみたので記録として残しておきます。
### ブロック
<!-- wp:snow-monkey-blocks/grid {"columnsOption":"columns","columns":2,"rowsOption":"free","gridTemplateRows":"auto 1fr","style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"className":"hogehoge"} --> <div class="wp-block-snow-monkey-blocks-grid smb-grid smb-grid--columns:columns smb-grid--rows:free hogehoge" style="--smb-grid--gap:var(--wp--preset--spacing--40);--smb-grid--columns:2;--smb-grid--grid-template-rows:auto 1fr"><!-- wp:image {"id":2846,"sizeSlug":"full","linkDestination":"none","smb":{"gridColumn":"1 / 2","gridRow":"1 / -1"}} --> <figure class="wp-block-image size-full"><img src="http://localhost:8888/wp-content/uploads/2023/07/image.jpeg" alt="" class="wp-image-2846"/></figure> <!-- /wp:image --> <!-- wp:heading --> <h2 class="wp-block-heading">タイトル</h2> <!-- /wp:heading --> <!-- wp:group {"layout":{"type":"constrained"},"smb":{"alignSelf":"start"}} --> <div class="wp-block-group"><!-- wp:paragraph --> <p>ジョバンニは、いつか町はずれのポプラの木が幾本も幾本も四方へ出るのでした。そしてそのこどもの肩のあたりが、どうも済みませんでしたから、とてもみんなは乗り切らないのです。</p> <!-- /wp:paragraph --> <!-- wp:buttons --> <div class="wp-block-buttons"><!-- wp:button --> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">ボタン</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div> <!-- /wp:group --></div> <!-- /wp:snow-monkey-blocks/grid -->### CSS
@media (max-width: 600px) { .hogehoge { --smb-grid--columns: 1 !important; } .wp-block-image { --smb--grid-row:2 / 3 !important; } .hogehoge h2 { --smb--grid-row:1 / 2 !important; } }ちなみに、Snow Monkey Blocks v20.5.1 現在、
--smb--grid-row、--smb--grid-columnがエディター上でしか反映されない不具合があったのですぐに修正入れます…！Who liked:1000点以上の商品情報をブロックエディターで運用するのは、なかなか大変かと思います。
カスタム投稿タイプを使用することが前提であれば、私の場合は、カスタムフィールド ＋ 独自のテンプレートを用意するか、該当のカスタム投稿タイプのみカスタムフィールドを表示できるようにフックで挿入します。この方法がベストではありませんが、HTMLの自由度は高くなるので、別のトピック（以下）の件も解消しやすいと思います。
カスタムフィールドは、Advanced Custom Fields を使えば、【関係（旧：関連）フィールド】で、複数の投稿を紐づけられます。
※投稿タイプでフィルタリングできるので「商品」の中から選択するたけでOKです。
※検索窓もついているので、商品名などで検索→選択することも可能です。
カスタムフィールドを多用するのはあまり好ましくありませんが、「クライアント側での更新作業のし易さ」という点では、実用的な面もあります。
いま制作しているセレクトショップの商品情報は、ACF Proを使用しています。
「Recommend item」に【関係（旧：関連）フィールド】で、6つまで選択できるようにして、各商品のアイキャッチを表示するようにしています。
【関係（旧：関連）フィールド】は、無料版でも使えるので、案件のポリシーに反していないようなら検討してみてください。Who liked:
【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】
【当該サイトのURL】いつもお世話になっております。
今、下記画像のような構成でページを作っています。
商品ページのようなもので、2カラムにして左カラムには画像を「スライダーブロック」で配置、右カラム見出しや表、ボタンなど複数の要素を組み合わせた形になります（※実際のページが出せないため、画像がわかりにくかったら申し訳ありません…）
上記レイアウトで、PC時は特に問題などもないのですが、この配置だとモバイルでの縦並び時に、
・画像（左カラム）→見出し（右カラム）→表などその他の要素（右カラム）
の順となってしまい、やや不都合です。
これをモバイルで閲覧時に、
・見出し（右カラム）→画像（左カラム）→表などその他の要素（右カラム）
のような変則的な並びにしたいです。
実在のページで言うと、ちょうどAmazonの商品ページのようなイメージです。
これを実現しようと思ったら、単純にカラムの表示順を並べ替えるだけでは子要素まで制御できないのでどうしようかと思っていたところ、グリッドレイアウトに行き着き、snow monkeyでも「グリッド」ブロックが利用できるようになったのでこちらを利用すれば良いのではと思い当たりました。
また参考ページも見つけまして、実現したいこととしてはまさに下記ページのようなレイアウトでした（左右は逆ですが）。
これに倣ってCSS等調整しようと思ったのですが、snow monkeyの「グリッド」ブロックではどこまで指定出来て、どこまでCSS直に編集をしなければいけないのかがわからず躓いてしまいました。
たとえば列×行を2×2にして、画像のほうを2行分割り当てる…という作業において、snow monkeyのカラムと行を使っても良いのか？（snow monkeyの「グリッド」はレスポンシブに対応していないとのことだが、メディアクエリで表示を制御するので問題ないのか？）など。
実際に列と行はsnow monkey側で指定して、エリアの指定と子要素のクラス付与はcssで記述記述しましたがうまくいきませんでした…。
上記レイアウトの順序入れ替えを実現するために、どのような設定やcssの記述をすれば良いのかアドバイスいただけますと幸いです。
また特段「グリッド」ブロックに拘っているわけでも無いので、たとえば右カラムに配置した「見出し」と「その他要素」を切り分けて、表示順を制御できるスマートな方法が他にあればそちらもご教示いただきたいです。
ただし理想の順になるようにモバイルでは別に全く新しく要素を組み直して、snow monkey editorのウィンドウサイズで出し分ける、という方法は今回は商品ページという性質上数も多く、また将来に渡ってページも追加されることが予想されることから、全てのページにPC・モバイル用ふたつの要素を作るとなるとメンテナンス工数が膨大になるのでなるべく同じ要素をデバイスサイズ毎に制御したいです。
長文になってしまいましたが、アドバイスいただけますと幸いです。
何卒よろしくお願いいたします。
