フォーラムへの返信
-
投稿者投稿
-
WordPress のブロックウィジェットの更新は、 REST API で json を通信することでおこないます。(テーマやウィジェットに限らず)何らかの PHP エラーが発生していると、この REST API の通信にも影響があり、json の中にエラーメッセージが入り込んでしまうことで json が崩れて、このエラーが発生することがあります。
何がエラーメッセージを出してしまっているかは調査しないとわからないので、ウィジェット更新のタイミングでサーバーのエラーログに何かエラーがでていないかを確認してみてください。
また、ブラウザのデベロッパーツール→コンソールを開いた状態でウィジェットを更新すると、そこにもエラーメッセージがでるかもしれません。そこもあわせて確認してみてください。
♥ 0Who liked: No userタブブロックを動作させる script は共通の js ファイルではなくてタブブロック用のファイルに書いてあるので、カスタム HTML ブロックにコードを書くとタブブロックとは認識されずに js ファイルが読み込まれず動作しないということはあるかもしれません…。
カスタム HTML 化しない場合はどうでしょうか?
♥ 0Who liked: No user右のグリッド画像にリンク設定をしたいと思っておりまして、、
なるほど…。
カスタマイズで右と左の枠をheightで設定すれば良いものなのでしょうか・・?
画面が広くなったら画像も広くならないとですよね? 画像のトリミングは NG で画角は維持しないといけないとすると、
height
で高さを固定したらwidth
も固定しないとなので、それだと画面に合わせて画像が大きくならなくなってしまいますよね。なのでやるとすれば画像のサイズとカラムのサイズをびっちり計算して合わせるしかないのかなと…。ちょっとこちらでやってみました。共有していただいた URL に現在使用されている画像からサイズを計算して適用してみました。エディターをコードエディターに切り替えて下記のコードを貼り付け、ビジュアルエディターに戻すと表示されます。
<!-- wp:group {"align":"full","layout":{"type":"default"}} --> <div class="wp-block-group alignfull"> <!-- wp:snow-monkey-blocks/flex {"layout":{"orientation":"horizontal","type":"flex","flexWrap":"wrap"}} --> <div class="wp-block-snow-monkey-blocks-flex smb-flex"> <!-- wp:image {"sizeSlug":"large","smb":{"flexBasis":"73%"}} --> <figure class="wp-block-image size-large"><img src="https://placehold.jp/2173x1100.jpg" alt=""/></figure> <!-- /wp:image --> <!-- wp:snow-monkey-blocks/grid {"columnsOption":"columns","columns":2,"rows":2,"smb":{"flexBasis":"27%"}} --> <div class="wp-block-snow-monkey-blocks-grid smb-grid smb-grid--columns:columns smb-grid--rows:rows" style="--smb-grid--gap:0;--smb-grid--columns:2;--smb-grid--rows:2"> <!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} --> <figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure> <!-- /wp:image --> <!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} --> <figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure> <!-- /wp:image --> <!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} --> <figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure> <!-- /wp:image --> <!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} --> <figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure> <!-- /wp:image --> </div> <!-- /wp:snow-monkey-blocks/grid --> </div> <!-- /wp:snow-monkey-blocks/flex --> </div> <!-- /wp:group -->
とりあえず全幅にするために全体を全幅のグループブロックで囲って、左右のカラム分割のためにフレックスブロックを入れました。で、左側は普通に画像ブロック、右側は4個を並べるためにグリッドブロックを使いました。
そして、左の画像ブロックのサイズ→基本サイズを 73%、右側のグリッドブロックのサイズ→基本サイズを 27% にしました。ただ、ページに掲載されていた画像に基づいて計算すると、本当は 73% ピッタリではなくて 0.73091153716… のように小数になってしまったので、若干ずれて上下に余白が入ってしまいます。ぴったり整数になるような画像サイズにすれば余白がなくなるはずです。
問題点としては、スマホでもこのレイアウトを維持してしまうので、スマホではカラム落ちさせたいという場合は CSS を追加するか、Snow Monkey Editor プラグインの「表示設定(ウインドウサイズ)」の設定でスマホでは非表示にするようにして、スマホはスマホ用で別につくる、みたいなことが必要になります…。
ここまで書いてあれですが、このレイアウトが必須であるなら、僕なら「カスタム HTML ブロック」で HTML を書いちゃうかなぁと思います。既存ブロック + CSS で無理やり実装すると後々メンテナンスが面倒になる可能性があるので…。
♥ 0Who liked: No userこれですよね。
これはアコーディオンブロックを使っているので、構造化データは出力されません。構造化データが出力されるのは FAQ ブロックを使った時になるので、構造化データが必要な場合は FAQ ブロックを使うのが良いです。
♥ 0Who liked: No user一般的に 403 の原因というとこんな感じでしょうか。
– .htaccess でアクセス制限していないか
– セキュリティ系プラグインでアクセス制限していないか
– サーバー側で IP アドレス制限などをしていないか
– ファイルのパーミッションを変更していないかクラッキングされた可能性が高いのであれば現状のバックアップをとった上で、過去のバックアップを復元するとか、FTP で WordPress のコアファイルを入れ替えるとかをやってみるのも良いかもですね。
♥ 0Who liked: No userということは正しく追加はできて、計測も問題なしということですかね?
♥ 0Who liked: No userまた、シークレットウィンドウで見ると、Firefoxと同じ正しい表示でした。
なるほどです。恐らくブラウザキャッシュの影響ではないかと思います。サーバーの設定や使用しているプラグインの設定によってブラウザキャッシュを強く残すようになっている場合、CSS や JS、画像を更新したのにキャッシュ(ブラウザに一時的に保存されている古いバージョン)が使用されて、新しいものが反映されないということが起こり得ます。
♥ 0Who liked: No userありがとうございます!
パラメーターが色々あって、タグマネージャーの ID みたいにぽんと入れれば終わりというわけではなさそうなので、サクッと機能追加するのは難しそうですね…。今後のアップデートで、「Google 同意設定を有効化」にチェックを入れると下記のコードが出力されるようになる、さらに
default
の各パラメーターの値はフィルターフックでカスタマイズできるようにする、というのはやりたいなと思いました。<script> // Define dataLayer and the gtag function. window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} // Set default consent to 'denied' as a placeholder // Determine actual values based on your own requirements gtag('consent', 'default', { 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'analytics_storage': 'denied' }); </script>
ということで、現段階では独自にアクションフックを使って計測タグを挿入する形になるかなと思います。現状タグマネージャーのコードは
wp_head
の優先度10
で出力されているので、wp_head
の優先度10
未満で計測タグを出力するようにすると良いのかなと。add_action( 'wp_head', function () { ?> // ここに計測タグ <?php }, 1 );
これでタグマネージャーのコードより前に(「直前」にコントロールする方法は現状無いです…)出力されると思うので試してみてください!
・Safariのファーストビューのメインコピーが表示されないです
Snow Monkey Editor のアニメーション機能を使用されていると思うのですが、スクロールと要素の位置でアニメーションが発火(フェードインの実行)する仕組みになっているので、一番最初の要素だとそれがうまく動かないみたいです。後で修正できるか調査してみようと思いますが、とりあえずその部分についてはアニメーションを外すのが良いかなと思います。
・Chromeのインライン画像の位置がおかしくなり、行がずれて表示されていたり、離れすぎて表示されています。アイコンリストも左に寄りすぎています。
Safari と Chrome で確認してみたのですが、どちらもスクショいただいたような表示は確認できませんでした。シークレットブラウザで見てもスクショのような崩れが発生しますか?
♥ 0Who liked: No userヘッダーコンテンツはヘッダーに内包されるので、スクロール時にヘッダーコンテンツが消えるというよりはヘッダーがスクロールとともに隠れるということかな?と思ったのですが認識はあっていますか?
もしあっているのであれば、ヘッダーがスクロールで隠れないようにするしかないと思うので、ヘッダー位置の固定表示を試してみると良いかもしれません。
あるいは、ドロップナビゲーション(スクロールすると上からにゅっとでてくるナビゲーション)にも Facebook アイコンを表示したいということであれば、ヘッダーコンテンツを使わずに、メニューに Facebook アイコンを追加するのが簡単だと思います。メニューでカスタムリンクを追加するときに「リンク文字列」に FontAwesome が使用できます。
なるほどです。ACF でつくったということは、その方がカスタムフィールドに入力された CSS を出力する処理をどこかに書いていると思うので、カスタムフィールドの名前をもとに調査すると何かわかるかもしれません…!
♥ 0Who liked: No user -
投稿者投稿