- このトピックには8件の返信、4人の参加者があり、最後に
により8ヶ月、 3週前に更新されました。
-
投稿
-
【お使いの 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などの打ち消しなどをしてみましたが、都合が悪く複雑になってしまうため、シンプルな方法で実装したいです。いいねをした人: 居ません自分がもし実装するとしたら、再利用ブロックを使ってフッターの作成、あとで編集しやすいように考えます。
前提として…
外観→カスタマイズ（カスタマイザー）→デザイン→フッターを以下のように設定します。- PC 時のフッターウィジェットエリアのカラム数：1
- タブレット時のフッターウィジェットエリアのカラム数：1
- □フッターを全幅にする にチェックを入れる
※フッターをコンテンツ幅にするなら不要
以下のいずれかのプラグインを有効化して『再利用ブロック』を左メニューに表示＆ショートコードを利用できるようにします。
再利用ブロック内でフッターのレイアウトを作成→保存します。
そしてショートコードをコピー。
ウィジェットメニューの「フッター」にショートコードブロックを置き、ショートコードをペーストします。
フッター内の上下のpaddingが不要ならCSSを追記.l-footer .l-footer-widget-area { padding: 0 !important; }
こんな流れで独自のフッターを設置できると思います。
参考サイトのフッターだと 再利用ブロック内でカラムブロック（全幅）を利用すれば近いイメージになると思います。カラムの調整はしていませんが、10分程度で以下のフッターができました。
よかったら1つの方法として参考にしてください。いいねをした人:GONSY さんが書かれている設定＆CSS の追加までは同じで、再利用ブロックを使わずにブロックウィジェット管理画面でセクションブロックを全幅で配置するとどうなりますかね？
いいねをした人: 居ませんGONSYさま、 キタジマ タカシさま
ご丁寧に返信、実装例までご提供くださりありがとうございます！
ちょっと色々試してみました。
>GONSY さんが書かれている設定＆CSS の追加までは同じ…
ウィジェットからだとセクションブロックの全幅は左右に余白が空いてしまい、テキストが一回り小さくなります。
これは
c-fluid-containerが親にあるため左右のpaddingの打ち消しが必要ですが、他のブロックにも影響しないよう、フッターの全幅のセクションブロックにのみ効かせるよう少し工夫が必要でした。--_font-size-levelが-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もシンプルになりウィジェットも別で実装できます。（ショーケースのサイトはこの方法？）
結局それなりのコードの記述が必要であり、どの方法が良いかなといった感じではありますね…。
いいねをした人:unitoneのようなFSEのことですかね？
機能的な面や、今後本格的に移行するのかすごく気になります…！
※Snow Monkeyの隠しコマンド的なのがあるのも結構好きですが（u-smooth-scrollとか）
一旦実装としては出来ましたが、もし他の良い方法があればということでしばらくトピック開いて置かせていただきたいと思います。
いいねをした人:unitoneのようなFSEのことですかね？
ですです。
※Snow Monkeyの隠しコマンド的なのがあるのも結構好きですが（u-smooth-scrollとか）
あー確かにその辺は unitone にはないですね…。移植できるのは移植しても良いかもですね。
いいねをした人:
- このトピックに返信するにはログインが必要です。