Aki Hamano
フォーラムへの返信
-
フォーラム: 使い方全般
返信が含まれるトピック: オリジナルメタボックスのバリデーションについて@non888 さん
はじめまして。
Gutenbergを利用されているという前提で、サーバサイドで生成したエラーメッセージを記事保存時に表示させたいという事かと思いますが、技術的には実現出来ます。試したことはありませんが、以下のコードが参考になると思います。
https://wordpress.stackexchange.com/questions/362975/admin-notification-after-save-post-when-ajax-saving-in-gutenbergtransient
を使ったり、@wordpress
のパッケージを使ってReact寄りのJavaScriptを書いたりする必要があるので、難易度的には高いかもしれません。ただここまでやらなくても、試されている通りフロントエンド側は自前のjQueryでチェック、サーバサイドでnonce/権限チェックやサニタイズをされていれば、セキュリティ的にも問題ないと思います。
一点だけ改善点をお伝えすると、メタボックスの追加(
add_meta_box
)は、admin_menu
フックではなくadd_meta_boxes
フックで追加する事が推奨されています。フォーラム: 使い方全般
返信が含まれるトピック: Twenty Twenty-Oneでモバイルでデスクトップメニュー表示以下のコードではいかがでしょうか。
@media only screen and (max-width: 481px) { .menu-button-container #primary-mobile-menu { display: none; } .primary-navigation { position: static; width: 100%; } .primary-navigation > .primary-menu-container{ position: static; opacity: 1; height: auto!important; visibility: visible; padding: 0; transform: initial; } .primary-navigation > div > .menu-wrapper { padding-bottom: 0; } .primary-navigation > div > .menu-wrapper .sub-menu-toggle { display: flex; } .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul { display: none; } }
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Twenty-Oneでモバイルでデスクトップメニュー表示こんにちは。
こちらのフラットな環境では正しく表示されたので、
- プラグインが影響している
- 他に独自に記述したCSSが影響している
- Twenty Twenty Oneのバージョンが古い
のなどの可能性が考えられますので、原因の切り分けを行ってみて下さい。
フォーラム: 使い方全般
返信が含まれるトピック: Twenty Twenty-Oneでモバイルでデスクトップメニュー表示はじめまして。
CSSの上書きで対応出来ると思います。
例えば、以下のようなCSSをカスタマイザーの「追加CSS」に設定してみて下さい。@media only screen and (max-width: 481px) { .menu-button-container #primary-mobile-menu { display: none; } .primary-navigation { position: static; width: 100%; } .primary-navigation > .primary-menu-container{ position: static; opacity: 1; height: auto!important; visibility: visible; padding: 0; transform: initial; } .primary-navigation > div > .menu-wrapper { padding-bottom: 0; } }
CSSの知識が必要となりますが、適宜希望のレイアウトに合わせて調整してみて下さい。
フォーラム: 使い方全般
返信が含まれるトピック: videoタグのcontrols属性に追記すると無効コンテンツと出るこんにちは。
「解決」をクリックするとブロックが「壊れる」とのことで、
壊れたら困ると思うのが素人の感覚で、メッセージも「想定されていない無効のコンテンツ」と書かれてあるものですから、「このままではいけない。直さなければならない」と思っていたのです。「壊れる」という言葉を聞くと不安に思うかもしれませんが、あくまで影響が及ぶのはそのブロックのみであり、記事やWordPress全体に影響が出るわけではありませんので、心配なさらなくて大丈夫です。
また、ブロック側でも対処の選択肢を示してくれている通り、「直さなきゃいけない」と受け取るのは正しい感覚だと思います。
しかし、ご回答を拝見していると、どうやらHTMLソースが壊れているわけではなく、完全なHTML記述しかやる方法がないよ、というだけなのでしょうか。
おっしゃるとおり、検索していると「ブロックが壊れる」と書いてあるため、直さなきゃと思ってしまいますが、要は「ブロックが分解される。一度分解されると分解前の状態である”ブロック”には戻せないよ」ということでしょうか。→その通りです。
しかし、実は、「HTMLに変換」したあとの状態も、「カスタムHTMLブロック」と同じことだった、ということでしょうか。
→その通りです。「ブロックの問題を解決」ポップアップにある「HTMLに変換」というボタンを押すと、自分が書いた(またそのせいで壊れてしまった)コードを保持した上で、カスタムHTMLブロックに変換されます。
フォーラム: 使い方全般
返信が含まれるトピック: videoタグのcontrols属性に追記すると無効コンテンツと出るはじめまして。
Gutenbergの動画ブロックは、サイドバーの設定にある通り、videoタグについて以下の属性を設定出来ます。
autoplay loop muted controls playsinline poster preload
上記以外の属性(
controllist
やoncontextmenu
)は設定出来ず、無理にHTML編集モードから追記するとブロックが壊れます。これはGutenbergの仕様で、このブロックに関わらず想定されていないタグ・属性を追記するとブロックが壊れる場合があります。
そのまま保存すればサイト側では編集した通りに表示はされますが、エディタ側ではブロックは壊れたままとなります。
上記の通り動画ブロックでは対応出来ませんが、単純にvideoタグを埋め込むだけなのであればカスタムHTMLブロックを使えば良いと思います。
カスタムHTMLブロックであれば、書いたHTML通りに出力されるので、好きな属性を設定出来ると思います。新規でカスタムHTMLブロックを追加するか、参考サイトに記載されているように「HTMLに変換」のどちらかを行ってみて下さい。
フォーラム: 使い方全般
返信が含まれるトピック: スペーサーの間隔を調整したい@mrsmith11 さん
はじめまして。
スペーサーブロックは高さをpx固定になるので、テーマによってスペーサー自体の高さが変わる事はありません。おそらく、
- スペーサーの前のブロックの下余白(
margin-bottom
) - スペーサーの後のブロックの上余白(
margin-top
)
がテーマによって異なるため、見た目上の間隔に違いが出ているのだと思います。
ブラウザの開発者ツール等を使って、スペーサーの上下にあるブロックにどのようなmarginがあたっているか確認してみて下さい。
フォーラム: テーマ
返信が含まれるトピック: Twenty Twenty-One モバイルメニューを中心寄せにしたい@rskd さん
はじめまして。
モバイル表示で、右上の「Menu 三」というハンバーガーボタンを押下した時に開くメニュー内の項目の事で良いでしょうか。
それでしたら、以下のようなCSSで対応出来ると思います。
@media only screen and (max-width: 481px) { .primary-navigation .menu-wrapper { text-align: center; } }
フォーラム: 使い方全般
返信が含まれるトピック: 配列のカスタムフィールドに対して絞込み表示@non888 さん
はじめまして。
調べたところ配列のカスタムフィールドはシリアライズされており、絞込みが難しいとのことですが、何か方法がありましたらご教授いただけますでしょうか。
→上記はおっしゃる通りで、以下2点の問題点があると考えています。
- 正確な絞り込みが出来ない:
LIKEは部分一致検索のため、正しく絞り込みできない可能性があります。
例えば、チェックボックスの選択肢が「テキスト」「ロングテキスト」とあったとして、「テキスト」だけで絞り込みたいとしても、LIKE検索では両方ヒットしてしまう事になります。
REGEXPであれば、前方/後方一致を駆使すれば上手くできるかもしれませんが、正規表現を書くのが大変だと思います。 - 処理が重くなる場合がある:
複数選択肢での絞り込みがOR検索であった場合、以下のようなコードになります。'meta_query' => array( array( 'key'=>'key1', 'value'=>'キーワードA', 'compare'=>'LIKE' ), array( 'key'=>'key1', 'value'=>'キーワードB', 'compare'=>'LIKE' ), array( 'key'=>'key1', 'value'=>'キーワードC', 'compare'=>'LIKE' ) 'relation'=>'OR' ) )
選択肢の数にもよりますが、上記のようなクエリを発行するとかなり重くなる場合があります。
上記二点を解決するため、発想を変えて以下のように「カスタムタクソノミー」で管理される事をおすすめします。
- register_taxonomyで、絞り込みを行いたい投稿にタクソノミーを紐づける
- カスタムフィールドで作っていた選択肢をタームとして登録する
- 検索フォームの選択肢はテンプレートファイルに直書きせず、get_termsなどで出力する
- 検索結果ページでは、GETパラメータで渡ってきたタームスラッグを元に、以下のようにクエリを投げる
$args = array( 'post_type' => 'XXXX', 'posts_per_page' => -1, 'tax_query' => array( array( 'taxonomy' => 'cat_xxx', //カスタムタクソノミーのスラッグ 'field' => 'slug', 'terms' => array( 'slug1', 'slug2' ), 絞り込むタームスラッグ ) ) )); ); $query = new WP_Query( $args );
上記のようにすれば、正確に絞り込みができ、コードもシンプルになり、また負荷も抑える事が出来るのではないかと思います。
フォーラム: 使い方全般
返信が含まれるトピック: wp_nav_menu()で子メニュー、孫メニューをdivで囲むには@brassh さん
はじめまして。
警告エラーの通り、start_lvl
とstart_el
の引数に問題があるように見えます。参考:WordPress で PHP7.0にアップデートしたら start_lvl() と start_el() でエラーが出た場合の対処法
この対応で2と3の問題が解消されるかは分かりませんが、一度試してみていただけますでしょうか。
フォーラム: 使い方全般
返信が含まれるトピック: cloudfront CDNでのWebPが配信されない問題の解決策はじめまして。
おそらく、以下どちらかが原因かと思います。
- uri.matchでの正規表現に、画像のリクエストURIが引っかかっていない
- Viewer requestの設定が正しくない
前者であれば、
console.log
などで正規表現にちゃんと引っかかっているかどうか確認出来ると思います。どちらにしましても、WordPressではなくAWSの話になるので、詳細はAWSのサポートにご確認いただければと思います。
フォーラム: その他
返信が含まれるトピック: 二段階認証解除できず困ってますはじめまして。
サーバにFTP接続出来るのであれば、以下の方法で一旦強制的に二段階認証をOFFに出来ると思いますが、いかがでしょうか。- WordPressがインストールされたサーバにFTP接続
{WordPressをインストールしたディレクトリ}/wp-content/plugins
に移動- 「
google-authenticator
」というフォルダがあると思うので、「_google-authenticator
」などの別名にリネーム
以上の手順で、ユーザー名・パスワードでログイン出来るようになっていると思います。
ログイン後の二段階認証の再設定手順は、以下となります。- 「プラグイン」メニューを開くと、「Google Authenticator」プラグインが無効化されていると思うので、一旦削除
- iPhone側で「「Google Authenticator」アプリの設定を行う
- 「Google Authenticator」プラグインを再度インストール
- WordPress側で、Google Authenticatorの再設定を行う
フォーラム: バグ報告と提案
返信が含まれるトピック: グループブロックで section にした際の表示崩れ@asako08 さん
情報ありがとうございます。
私の方でも再現出来ました。おそらくですが、1つ目のcolumnsブロック > 2つめのcolumnブロック > groupブロックについて、
.wp-block-group__inner-container
の閉じタグが表示側で正しい位置で出力されていないため、DOM構造が崩れてしまっているように思います。Gutenberg本体の不具合だと思いますが、Gutenbergプラグインを入れても再現したので、開発バージョンでも修正されていないと思われます。
.wp-block-group__inner-container
が複数回表示される件についてはissueを立てていますので、こちらが改善すれば今回の不具合もあわせて改善される可能性があります。Group block: child group block has multiple inner container div #34404
取り急ぎの解決手段としては、親のGroupブロックを使わないか、使うのであればdivタグのままにしておくしか方法はないと思います。
- この返信は3年、 6ヶ月前にAki Hamanoが編集しました。
フォーラム: バグ報告と提案
返信が含まれるトピック: グループブロックで section にした際の表示崩れこんにちは。
一番上のGroupブロックのタグをSectionにした時に、子のcolumnsブロックのすぐ下にcolumnsブロックが入ってしまうという事でしょうか。
※改めてツリーを記載しますgroup(section) - columns - column - column - columns ←ここに入ってしまう - column - column - group(div)
仕様として、columnsブロックが子として持てるのはcolumnブロックなので、columnsブロックが子として入る事は考えにくいです。
一度ブラウザの開発ツール等で、フロントエンド側のDOM構造が本当にそのように変わってしまっているのか確認いただけないでしょうか。
通常であれば、以下のようなDOM構造で正常に出力されるはずです。<section class="wp-block-group has-dark-background-color has-background"> <div class="wp-block-columns"> <div class="wp-block-column"></div> <div class="wp-block-column"></div> </div> <div class="wp-block-columns"> <div class="wp-block-column"></div> <div class="wp-block-column"> <div class="wp-block-group"> <div class="wp-block-group__inner-container"> <div class="wp-block-group__inner-container"></div> </div> </div> </div> </div> </section>
ただし、最深部のGroupブロックでwp-block-group__inner-containerが二重に出力されてしまっており、これに関してはGutenberg側の不具合かもしれません。
フォーラム: バグ報告と提案
返信が含まれるトピック: metaタグの自動挿入