ありがとうございます。その後いろいろ調べながらやってみたのですが実現できず、とん挫しています。
エラーメッセージが出たので
}
return $html;
を追加してエラーは出なくなったのですが表示はできずでした。
Advanced Custom Fieldsの関数get_fieldを使えばいいのでは？と思い変更したのですがそれではダメでした。※get_post_metaでも出来るようでしたが
https://lucy.ne.jp/bazubu/advanced-custom-fields-36452.html
add_filter(
// template-parts/loop/entry-summary を書き換える
'snow_monkey_template_part_render_template-parts/loop/entry-summary',
function( $html, $name, $vars ) {
// 「シンプル」のときだけ実行
if ( 'simple' === $vars['_entries_layout'] ) {
// カスタムフィールドを取得して、それをもとに加工した HTML をバッファリングする
// ACF や実際に保存されているデータの構造がわからないので実際の状況にあわせて書き直してください。
$course_types = get_field( 'course_type' );
ob_start();
foreach ( $course_types as $course_type ) {
echo '<span>' . $course_type . '</span>';
}
$course_type_html = ob_get_clean();
return str_replace(
'</section>',
$course_type_html . '</section>',
$html
);
}
return $html;
},
10,
3
);
投稿タイプ「news」のみ対象となっていますが、カテゴリーとタグの各一覧ページにも表示させられるでしょうか。
下記でどうでしょうか？
// news カスタム投稿アーカイブ以外では表示しない
if ( ! is_post_type_archive( 'news' ) ) {
return;
}
↓下記に変更
// news カスタム投稿アーカイブ、カテゴリーアーカイブ、タグアーカイブ以外では表示しない
if ( ! is_post_type_archive( 'news' ) && ! is_category() && ! is_tax() ) {
return;
}
キタジマさん
ご返信ありがとうございます！
ツールバーを非表示にして改めてコードを確認すると、キタジマさんの仰る通り下記コードが出力されなくなりました。
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
}
</style>
また、下記コードについては記述してみましたが、余白はそのままでした。
検証ツールを見たところmarginやpaddingの余白は確認できなかったため、やはりツールバーなのかなと思いました。
そこで1点お伺いしたいのですが、ツールバーを非表示にしても開発環境・実機ともにヘッダー上部に空白があるのですが、
ツールバーは非表示にするとツールバー部分にあった余白はなくなりますでしょうか？
今ままでの経験上なくなっていたと思うのですが、今回はその様子がないのでお伺いしたいです。
エスさん
ご回答ありがとうございます！
ヘッダーのロゴを消してみましたが、特に変化なしでした。
ただ、エスさんの仰る通りコードの出力は関係ないように思えてきたので、
別の要因（主にツールバー？）で余白が生まれているのかなと思います
ありがとうございます、エリア内に収まりました！
経緯がわかりづらくてすみません、まず最初にウィジェットの「アーカイブ上部」を設置したところ崩れてしまいました。
アクションフィルターならいけるのかな？とsnow_monkey_prepend_archive_entry_contentを試したのですが同じでした…。
スクショはウィジットです。
投稿タイプ「news」のみ対象となっていますが、カテゴリーとタグの各一覧ページにも表示させられるでしょうか。
カテゴリーの1つをクリックしたあとも、常駐しているように見せる感じです。
その先の個々の投稿ページには必要ありません。
よろしくお願いいたします。
北山さん キタジマさん
この件、コード、CSS等は関係なくて、大きめのロゴを設定しているからではないかな？と思ったのですが、いかがでしょうか。
画像からもロゴを設定されているようですので、私の方でも試したところ、大きめのロゴで似たようになりました。
大きめのロゴあり
ロゴなし
なお、最初に上げられていたコードは、特になにもしていない私の環境でも確認できていますので、特に関係ないように思います。
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
}
</style>
ロゴのサイズを見直したり、削除したりしても変化がないか、ご確認いただければと思います。
んーそうですか…。
僕のサイト（Snow Monkey と Snow Monkey じゃないサイトの2つ）でも検証したのですが、
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
}
</style>
ログイン中は上記の CSS が出力され、非ログイン時・管理バー非表示設定時は上記の CSS の出力がなくなりました。だからやはり管理バーが怪しいとは思うのですが、どうしても CSS で対応するのであれば下記の CSS で強制的に margin-top を 0 にできると思います。
html:root {
margin-top: 0 !important;
}
失礼しました、ご共有いただいたサイトの方法でツールバーの非表示は試してみましたが、特に変わらずでした。
また、下記の理由からツールバーが原因とは考えにくいと思っております。
・検証ツールで確認したところ、ツールバーと余白の高さが若干異なる
・実機（iPhone13）で管理画面にログインせずにサイトを確認したところ、余白は残ったままだった
先に提示いただいた CSS でセレクタは html だとわかっているので、問題点としては
– 現在ログインしているのか
– ログインしている場合、何らかの方法で管理バーを非表示にしているのか
– 非表示にしている方法が WordPress の標準の設定方法以外（例：CSS で消す）の場合、標準の設定方法で消すようにしたらどうなるか
というところになるのかなと考えています。
は試してみましたかね？
キタジマ様
お世話になっております。
通知に気づかず、ご返信が遅れてしまい申し訳ございません。
ご回答ありがとうございます！
問題の空白箇所ですが、「ツールバー」と「l-containerクラス」の間に存在しておりました。
また、念のためツールバーも削除してみましたが、余白は変わらずに残っておりました。
下記に添付画像について記載いたしましたので、ご確認いただけますと幸いです。
1枚目：赤丸内部のヘッダー上部部分にうっすらとですがドロップシャドウのような影が確認できました。
その上部に問題の空白部分がございます。
2枚目：bodyタグ内の範囲が青く表示されております。
3枚目：bodyタグ直下のl-containerクラスの範囲が青く表示されております。
（→bodyタグ直下の要素は様々ありましたが、検証ツール内で削除し、見やすい状態にしたものが添付画像になります。）
また、テーマカスタマイズ・テーマファイルエディタの方で、
HTMLタグやbodyタグにマイナスマージンを付与しましたが、うまく反映されませんでした。
margin-topやpadding-topの指定による余白が見当たらず、解決方法の検討がついておりません。
何か解決法等があれば、お教えいただきたいです。
よろしくお願いいたします。
画像1
画像2
画像3
かしこまりました。画像の変更だけよろしくお願いいたします。
<div class="wp-block-snow-monkey-blocks-section-break-the-grid alignfull smb-section smb-section-break-the-grid smb-section-break-the-grid--right smb-section-break-the-grid--mobile-image is-style-smb-section-undecorated-title" style="--smb-section-break-the-grid--shadow-color:#f78da7;--smb-section-break-the-grid--shadow-transform:translate(5%, 5%);--smb-section-break-the-grid--content-background-color:rgba(255, 255, 255, 0.8);padding-top:120px;padding-bottom:120px;--smb-section--fixed-background-color:#7bdcb5"><div class="smb-section__fixed-background"></div><div class="smb-section__inner"><div class="c-container"><div class="smb-section__contents-wrapper smb-section-break-the-grid__contents-wrapper"><div class="c-row c-row--lg-middle"><div class="c-row__col c-row__col--1-1 c-row__col--lg-1-2"><div class="smb-section-break-the-grid__content smb-section-break-the-grid__content--w--20 smb-section-break-the-grid__content--p-m smb-section-break-the-grid__content--horizontal-10"><div class="smb-section__header smb-section-break-the-grid__header"><h2 class="smb-section__title smb-section-break-the-grid__title">かっこいい<br>タイトルが入ります</h2><div class="smb-section__lede-wrapper smb-section-break-the-grid__lede-wrapper"><div class="smb-section__lede smb-section-break-the-grid__lede">リード分が入ります。リード分が入ります。リード分が入ります。リード分が入ります。</div></div></div><div class="smb-section__body smb-section-break-the-grid__body"><!-- wp:snow-monkey-blocks/buttons -->
<div class="wp-block-snow-monkey-blocks-buttons smb-buttons"><!-- wp:snow-monkey-blocks/btn {"borderRadius":"100px","className":"is-style-ghost"} -->
<div class="wp-block-snow-monkey-blocks-btn smb-btn-wrapper is-style-ghost"><a href=""><span class="smb-btn__label">私たちについて</span></a></div>
<!-- /wp:snow-monkey-blocks/btn --></div>
<!-- /wp:snow-monkey-blocks/buttons --></div></div></div><div class="c-row__col c-row__col--1-1 c-row__col--lg-1-2"><div class="smb-section-break-the-grid__figure smb-section-break-the-grid__figure--w-40"><div class="smb-section-break-the-grid__shadow"></div><img src="http://demo.local/wp-content/uploads/2023/05/AdobeStock_319972399-1024x683.jpg" alt="" width="1024" height="683" /></div></div></div></div></div></div></div>
他のサイトではsmb-section-break-the-grid__figure--w-lというのが使われていて、アップデートでsmb-section-break-the-grid__figure--w-40に置き換わった際に異なる動きになったものかと思っています。
また、
@media (max-width:63.9375em)
.smb-section-break-the-grid--left.alignfull .smb-section-break-the-grid__figure, .smb-section-break-the-grid--right.alignfull .smb-section-break-the-grid__figure {
right: 0;
left: 0;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
というcssが当たっていて、全幅の時モバイルでも画像が全幅になるという仕様になっていました。
1つはバリエーションへの変換で、「高さ100%」から「配置可能」には変換できるのですが、その逆ができないようです。おそらくこちらは不具合かなと思います。
あれ、ほんとですね。確認します！
もう1つが、コンテンツスライダーの中にパネルを入れると、シャドウの効果が打ち消される（CSSではbox-shadow: var(–smb-panels–item-box-shadow);が残っているため可視範囲外になって見えなくなっている？）ことです。
これは仕様的にできないのです…。
Snow Monkey のスライダーブロックは独自のスライダーライブラリ（Spider）を使っていて、Spider のコンセプトは「なるべく CSS だけで動くスライダーをつくる」となっています。一般的なスライダーライブラリは CSS の translateX を js で変化させてスライド動作を実現していることが多いのですが、Spider は横スクロール機能を使ってスライド動作を実現しています。そして、横スクロールさせるにいは overflow を指定する必要があり、overflow を指定するとはみ出た部分は消えてしまう = box-shadow は見えなくなる、ということになってしまうのです。
ということで、コンテンツスライダーの子であるスライドブロックにはボックスシャドウの設定があるのですが、今試してみたところ、上下のシャドウは見えるけど左右は見えないという状態になってしました…。こちら次のアップデートで修正いれます！
↑で添付いただいたツールバーの右から二番目、下向きの「ｖ」みたいなのがあると思いますが、そこに「ハイライト」という WordPress 表示の文字色変更ツールがあると思います。で、これもカラーコードが設定できなくて、Snow Monkey Editor もこれと同じコンポーネントを使っているから WordPress コアの方でコンポーネントの不具合が修正されれば Snow Monkey Editor のほうも直るのかなと思っていました。
もし他のテーマやプラグインで、こういう部分文字列の色設定機能があって、それだと正しく動くということであれば僕のほうでもそれを調査してみたいなと思うので、もしご存知でしたら教えてください！
