どうも Safari の flex-shrink （か flex-basis か flex-grow）のバグっぽい気がします。同じ文字列でも再現しなかったりしますし。flex をやめて absolute にする、くらいしか解決法が思いつかないのですが、そうしてしまうと目次内の数字が2桁以上になったときの余白問題とかがでてくるので、ちょっとどうしようかなというところです。他の解決法が思いつくまで保留します、すみません><
まだ開発環境の中だけですが、PWA + フルスクリーンでフッター固定ナビがセーフエリアにかかっている不具合を確認できたので、フッター固定ナビの下部にセーフエリア分の余白を追加しました（あと、フッター固定ナビとトップへ戻るボタンの再描画処理をちょっと調整しました）。一応これで PWA 時にフッター固定ナビがセーフエリアにかぶる問題は解決するはずです。
いくつか設定項目を設けてon/offとかで選択できても良いのかもしれないですね。
これは例えば「フッター固定ナビを常時表示する」みたいなことでしょうか？だとすれば、on にしたときに二重クリック問題が発生して、それを修正してほしいみたいな要望が別口からきたときにどうしようもないみたいなこともあるので、それはオフィシャルな対応じゃなく個別対応が良いかなと思いました。 aria-hidden 属性の切り替えで opacity を0/1しているのですが、追加 CSS で opacity: 1 !important するとか。
これでどうでしょう？
.search .c-entries .c-meta__item:last-child {
display: none;
}
フック追加してみましたがどうでしょう？
/**
* @param array $hierarchy
* @param string $slug
* @param string $name
* @param array $vars
* @return array
*/
add_filter(
'snow_monkey_member_post_view_hierarchy',
function( $hierarchy, $slug, $name, $vars ) {
return $hierarchy;
},
10,
4
);
問題なさそうならクローズしますー
あー理解しました、Safari でみたときになりますね。Chrome だとならないので気づきませんでした。 Safari の inline-flex のバグなんですかねー、どうなんだろう。
display: block にすると左端に表示されるナンバリングがずれちゃうんですよね。ちょっと考えます。
の、「WordPressのデバッグ設定を有効にする」の項目だと、
「WordPressのデバッグ設定を有効にす
る」
と折り返していると思います。（一応ローカルじゃない場合はこれのみ再現できてると思います）
その他に、ローカル環境では「Gutenbergのブロック開発環境〜〜〜」と入れると
「…ブロック開
発環境…」と折り返したりされます。
但し、なる場合とならない場合があるので、実際のURLでは再現出来なかったようで…
なかなか再現パターンが解りません。
aタグのスタイルで
width: 100%;
display: block;
とすれば横幅いっぱいになるので直るみたいです。
これ get_template_part() のアクションフックで実現しているのですが、プラグインだと get_template_part() 使ってないので出力されないんですよね。出力されるようにするためには各プラグインで独自処理が必要で、やり方が統一できないのでどうしようかなぁというところです。
プラグイン用にテンプレート読み込み＆テンプレート関連フックの処理を統一できるようになにか一つ composer ライブラリつくりましょうかねー、ちょっともろもろたまっているので後回しになるかもしれませんが issue には入れておきます…！
すみません、知り合いに聞いて自己解決しました。
子テーマ＞templates＞view にcontent-post.phpを改良したファイルを作成してカスタマイズをして、
子テーマ＞page-templates にone-column.phpを改良したファイルを作成し、上のcontent-post.php改良ファイルを読み込む指定を入れたら表示できました。
お騒がせしました。
対応してみていて偶然気づいたのですが、iPhone でツールバー（であっているのかな？ブラウザ下部にでるバーです）がでていない状態でフッター固定ナビゲーションの各ボタンやトップに戻るボタンを押すと、ボタン自体は反応せずツールバーが表示され、その状態でもう一回フッター固定ナビゲーションの各ボタンやトップに戻るボタンを押すとちゃんと反応する、という挙動になっていました。
多分これかなと。
そういうことで、この問題もでてきて当初考えていた上にずらす方法ではちょっと微妙な操作感だったので、ツールバーがでていないときはフッター固定ナビゲーションもトップに戻るボタンも非表示で、ツールバーがでているときだけ表示にもなる、という感じで調整しようと思います。
葉月さんからの連絡あったんで共有します。
bodyタグに入れるのは、やめた方が良いです…
ブロックエディターにまでおそらく当たる事で多くのブロックプラグインにも影響を及ぼすのでおかしくなる可能性があります。
また、縦書きをしているサイトだと、そこに影響が出ます。(補足: 禁則だとか無視されていくようで、ブラウザのバグらしい？)
記事部分以外に掛けるのがベストと思いますが、難しい問題(scssならmixin使えそうな気がしますが)
TablePressプラグインでショートコードを貼り付けるとか、TinyMCE Advancedで装飾ごとつくってしまうか考えたのですが、やはりgutenbergでテーブルブロックでやるのがシンプルなのかぁと思っています。
もちろん TablePress や TinyMCE Advanced が良いよ！という方もいると思います！僕はどちらも使ったことがないので、ブロックエディターのテーブルブロックでやる方法を…。
こんな感じでテーブルブロックで形をつくって、高度な設定のところに適当なオリジナルのクラス名を設定してください。
そして、下記の CSS をカスタマイザー > 追加 CSS に追加してください。クラス名が .my-table の想定で書いていますので、クラス名を変更する場合は適当に書き換えてください。
.my-table td {
white-space: nowrap;
background-color: #fff;
text-align: center;
}
.my-table tr:first-child td {
background-color: #fafafa;
}
.my-table td:first-child {
background-color: #f0f5f6;
}
.my-table tr:first-child td:first-child {
background-color: #fff;
}
するとこうなります。
TablePressプラグインでショートコードを貼り付けるとか、TinyMCE Advancedで装飾ごとつくってしまうか考えたのですが、やはりgutenbergでテーブルブロックでやるのがシンプルなのかぁと思っています。
どのクラスにcssを当てるのか、カスタマイザーcssを使うか、mysnowmonkyを使うのか、子テーマを作らなければならないのか、その辺りがよく分かっていません。cssの場所もChromeの検証画面で探してみたのですが構造がよく分かっていなくて・・・
素人な質問で恐縮ですがよろしくお願いいたします。
こちら今テストしてみたら
.wpaw-recent-posts__title .wpaw-posts-list__title{
word-break: break-word;
}
でちゃんと折り返しました。
もうスマホではトップに戻るボタンは消しちゃって良いのではと思うのですがどうでしょうね？
個人的には縦長だからこそあると良いなぁって思うんですよね…サイズの小ささの問題もある気はしているのですが、落としどころが見つかりそうなら残したいなぁと思っています。ON/OFF切り替えができても良いのかもしれないですね。
今ドロワーとフッター固定メニューについてはセーフエリア対応（padding-bottom を追加）しているのですが、コピーライトのところにも同じ余白をつけると良い感じでしょうか？
それですね！（フッター固定メニューを使えば解消出来るのか！試してみます）
