unitoneのようなFSEのことですかね?
ですです。
※Snow Monkeyの隠しコマンド的なのがあるのも結構好きですが(u-smooth-scrollとか)
あー確かにその辺は unitone にはないですね…。移植できるのは移植しても良いかもですね。
こちらで試してみたらエラーは出なかったので、特定の設定の状況で発生するのかもしれません。
デベロッパーツール→ネットワーク→Fetch/XHRを開いた状態で「先頭固定表示を除外する」をオン・オフすると recent-posts?ccontext=〜
というリクエストが確認できると思います。「レスポンス」タブを開くと普通なら下記の画像のようなレスポンスが確認できると思うのですが、それでエラーになったときのリクエストを選択してもらうと多分これとは違うレスポンスが帰ってきているのではないかと思います。それを教えてください!

unitoneのようなFSEのことですかね?
機能的な面や、今後本格的に移行するのかすごく気になります…!
※Snow Monkeyの隠しコマンド的なのがあるのも結構好きですが(u-smooth-scrollとか)
一旦実装としては出来ましたが、もし他の良い方法があればということでしばらくトピック開いて置かせていただきたいと思います。
GONSYさま、 キタジマ タカシさま
ご丁寧に返信、実装例までご提供くださりありがとうございます!
ちょっと色々試してみました。
>GONSY さんが書かれている設定&CSS の追加までは同じ…
ウィジェットからだとセクションブロックの全幅は左右に余白が空いてしまい、テキストが一回り小さくなります。

これはc-fluid-container
が親にあるため左右のpadding
の打ち消しが必要ですが、他のブロックにも影響しないよう、フッターの全幅のセクションブロックにのみ効かせるよう少し工夫が必要でした。
--_font-size-level
が-1になっているのでこちらも打ち消しが必要です。
他にウィジェットを挟むことでブロックに影響ありそうな箇所があるかもしれません。
もう1つの実装方法は、固定ページで下書きを作ってパーツ化し、アクションフックでパーツ化した固定ページを丸ごと出力する方法です。
/* footerに固定ページ設置 */
add_action(
'snow_monkey_prepend_footer',
function () {
/* 特定のページを指定して固定ページの内容を表示 */
if (!is_page('contact')) {
$new_query = new \WP_Query(
[
'pagename' => 'footer_cta',/* 作成したページのスラッグ */
'post_type' => 'page',/* 固定ページを指定 */
'post_status' => ['draft']/* 下書きページの指定 */
]
);
if ($new_query->have_posts()) {
while ($new_query->have_posts()) {
$new_query->the_post();
the_content(); // 固定ページの内容を表示
}
wp_reset_postdata(); // ループ後にリセット
}
}
}
);
こちらだと、footerタグ直下に固定ページのブロックが直接設置されるので、HTMLもシンプルになりウィジェットも別で実装できます。(ショーケースのサイトはこの方法?)
結局それなりのコードの記述が必要であり、どの方法が良いかなといった感じではありますね…。
ご報告ありがとうございます!
ちょっとどう対応するのがベストかまだわからないので、ひとまず応急処置的な CSS を共有します。
.smb-items {
overflow: hidden;
}
これをカスタマイザーの追加 CSS に貼り付けてみてください!
自分がもし実装するとしたら、再利用ブロックを使ってフッターの作成、あとで編集しやすいように考えます。
前提として…
外観→カスタマイズ(カスタマイザー)→デザイン→フッターを以下のように設定します。
- PC 時のフッターウィジェットエリアのカラム数:1
- タブレット時のフッターウィジェットエリアのカラム数:1
- □フッターを全幅にする にチェックを入れる
※フッターをコンテンツ幅にするなら不要
以下のいずれかのプラグインを有効化して『再利用ブロック』を左メニューに表示&ショートコードを利用できるようにします。
再利用ブロック内でフッターのレイアウトを作成→保存します。
そしてショートコードをコピー。
ウィジェットメニューの「フッター」にショートコードブロックを置き、ショートコードをペーストします。
フッター内の上下のpaddingが不要ならCSSを追記
.l-footer .l-footer-widget-area {
padding: 0 !important;
}
こんな流れで独自のフッターを設置できると思います。
参考サイトのフッターだと 再利用ブロック内でカラムブロック(全幅)を利用すれば近いイメージになると思います。
カラムの調整はしていませんが、10分程度で以下のフッターができました。
よかったら1つの方法として参考にしてください。
【お使いの Snow Monkey のバージョン】20.5.1
【お使いの Snow Monkey Blocks のバージョン】19.10.1
【お使いの Snow Monkey Editor のバージョン】9.2.5
【お使いのブラウザ】chrome, safari
【当該サイトのURL】
### 実現したいこと
以下のようにフッタータグの直下に直接セクションブロックを設置したい。
<footer>
<div class="wp-block-snow-monkey-blocks-section alignfull"></div>
<div class="c-copyright"><div>
</footer>
### 発生している問題
footerタグ内の直下にセクションブロックを挿入したいのですが、ウィジェット「フッター」から追加するとl-footer-widget-area
の入れ子になってしまい、テキストやpadding
などが意図しない大きさになってしまいます。(フルワイドのセクションにならない)

理想としては、https://snow-monkey.2inc.org/2023/05/24/ainosato-shika/ で紹介されているサイトのフッターのようにしたいのですが、どのような方法がありますでしょうか?
出来るだけHTMLを直書きではなく、ブロックで実装したいと思っています。
### 試したこと
ウィジェットを追加しフッター前に設置したり、padding
などの打ち消しなどをしてみましたが、都合が悪く複雑になってしまうため、シンプルな方法で実装したいです。
手持ちの Pixel6 で確認したのですが、ヘッダーは表示されたままでした。動画で見せていただくことって可能ですか?
Android のバージョンによって、あるいは機種によってそうなるのかは分かりませんが、無理そうなら、フックでドロワーの HTML を完全にオリジナルのものにして独自に実装し直すのも手かもしれません…。
メンテナンス性が悪いうえに、強引な方法なので不具合出るかもしれませんが、以下で実装可能かと思います。
@media screen and ( max-width: 768px ) {
/* 【カバー】ブロックの「高度な設定」で指定したクラス名 */
.fixed_bg {
overflow: hidden;
}
/* Snow Monkey Blocksで指定した画像は使用しない */
.fixed_bg .has-parallax {
display: none;
}
/* 都合が悪いのでブロック設定で設定したオーバーレイの数値を戻す */
.fixed_bg .wp-block-cover__background {
opacity: 1 !important;
}
/* 新たにスマホ用にオーバーレイを指定 */
.fixed_bg .wp-block-cover__background::before {
background-color: #CD162C; /*任意*/
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:0;
opacity: .7; /*オーバーレイの不透明度*/
width:100%;
height:100%;
}
/* 新たに背景画像を指定 */
.fixed_bg .wp-block-cover__background::after {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat: no-repeat;
/* 位置は任意で調整 */
background-position: 20% center;
/* 画像はPC用と同じものを使用 */
background-image:url('https://demo.gonsy.net/wp-content/uploads/2022/12/david-maunsell-nVRxhLH74iw-unsplash.jpg');
/* 適宜調整 */
background-size: 1200px;
}
}
実装したページ
1つのCSSですべてのカバーブロックに適用させることはできませんが、参考になれば幸いです。
【お使いの Snow Monkey のバージョン】バージョン: 20.5.1
【お使いの Snow Monkey Blocks のバージョン】バージョン 19.10.1
【お使いの Snow Monkey Editor のバージョン】バージョン 9.2.5
【お使いのブラウザ】chrome
【当該サイトのURL】https://go-to-world-cup2022.com/route-factory/company/
### 実現したいこと
上記の当該サイトURLからスマホ時ドロワーナビのメニュー(Topページのコンテンツに遷移するメニュー)を押下した
遷移直後にドロワーヘッダーが表示されるように修正をしたいです。
遷移後に上下にスワイプすると
ドロワーヘッダーが表示されるのですが、遷移直後に表示させることが実現したいことになります。

上記からTOPページ遷移

上記ドロワーヘッダーが遷移直後に表示されている状態にしたいです。
### 発生している問題
こちらの事象についてiphoneで実施した際は遷移直後でもドロワーヘッダーが表示されているのですが、
AndroidのDIGNO BXという機種で実施した際、ドロワーメニューが表示されないという事象が発生しております。
機種に限らず遷移後にスワイプをしなくてもドロワーヘッダーが表示されるような修正方法があれば
ご教示いただきたいと思います。
### 試したこと
①My Snow Monkeyに子テーマを作成して下記の中身を削除しました。
wp-content/plugins/my-snow-monkey/override/assets/js/drop-nav.js
②先方よりheaderのaria-hidden:trueが原因ではないかという指摘をいただいたため、
下記のファイルのaria-hidden:trueを削除しました。
・wp-content/plugins/my-snow-monkey/override/template-parts/header/center.php
・wp-content/plugins/my-snow-monkey/override/template-parts/nav/drawer.php
・wp-content/plugins/my-snow-monkey/override/template-parts/nav/footer-sticky.php
・wp-content/plugins/my-snow-monkey/override/template-parts/nav/drawer.php
・wp-content/plugins/my-snow-monkey/override/templates/layout/header/1row.php
・wp-content/plugins/my-snow-monkey/override/templates/layout/header/2row.php
・wp-content/plugins/my-snow-monkey/override/templates/layout/header/center.php
③Google検索でWP Fastest Cacheが原因となり得る旨、記載があったためこちらのプラグインを無効化
上記を実施しても遷移直後にドロワーヘッダーが表示されない状況です。
お忙しいところ恐縮ですが、解決方法があればご教示いただきたく存じます。
ご回答ありがとうございます。
iPhone の仕様なんですね。
背景固定の機能は使えないということでしょうか?
背景固定の設定を無しにして、以下のコードを追加CSSに書いたのですが、画像ごと表示が消えてしまいました。
解決策が見えておりません。
お手数おかけしますがよろしくお願いいたします。
.Section-Image {
position: fixed; /* fixedに変更する。それ以外は同じ。 */
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
}
ひとまず下記をコピペしてください。
.p-entry-content > h4,
.is-layout-constrained > h4 {
border-bottom: 1px solid #ccc; /* 下線 */
padding-bottom: 4px; /* 文字の底面と下線の間の余白 */
font-size: 23px; /* 文字の大きさ */
}
.p-entry-content > h4
が記事直下の h4
を対象とするセレクタ、.is-layout-constrained > h4
がグループブロックなどの子ブロックを内包するブロックの直下の h4
を対象とするセレクタです。
それぞれの CSS プロパティにコメントを入れているので、お好みで色や大きさ等変えてみてください。どれも基本的なプロパティなので今後 h5 や h6 をカスタマイズしたいとなったときにも覚えておくと便利だと思うので、一度詳しく調べてみると良いかと思います!
こちらに提示されているコードで可能だと思います。
お試しください。
Olein_jp様
以下のコードでカラーパレットに色を追加することができました。
解決に至る情報を提供していただき、ありがとうございました。
なお、追加部分は 株式会社ベクトル 石川栄和様の記事を参考にさせていただきました。
'wp_theme_json_data_theme',
function( $theme_json ) {
// theme.json の内容を格納.
$get_data = $theme_json->get_data();
// 追加するカラーパレットを生成.
$add_color_palette = array(
array(
'slug' => 'accent-100',
'color' => 'var(--accent-color--100)',
'name' => 'Accent-100',
),
array(
'slug' => 'accent-200',
'color' => 'var(--accent-color--200)',
'name' => 'Accent-200',
),
array(
'slug' => 'accent-300',
'color' => 'var(--accent-color--300)',
'name' => 'Accent-300',
),
);
// カラーパレットをマージして新しいカラーパレットを生成.
$new_color_palette = array_merge(
$get_data['settings']['color']['palette']['theme'],
$add_color_palette
);
// 更新データを生成.
$new_data = array(
'version' => 2,
'settings' => array(
'color' => array(
'palette' => $new_color_palette,
),
),
);
// ラーパレットを更新.
return $theme_json->update_with( $new_data );
}
);
解決しましたので、トピックを閉じさせて頂きます。