[キタジマ タカシ]

Snow Monkey Editor v9.3.0 で修正してみました！（WordPress 6.3 以上が必要）
お手好きのときにでもアップデートしてご確認いただければと思います。

♥ 1

Who liked:

[まーちゅう]

Reusable Blocks User Interface

このプラグインは、管理メニューに「再利用ブロック」を追加し、簡単に編集できるようにするプラグインです。また、ショートコードを使って簡単に投稿にブロックを挿入す…

ja.wordpress.org

こちらのプラグインを使用して、再利用ブロックのスラッグが footer の場合は以下のコードで実装出来ます。

add_action(
	'snow_monkey_prepend_footer',
	function() {
		if ( function_exists( 'rbui_get' ) ) {
			echo rbui_get( 'footer' );
		}
	}
);

♥ 2

Who liked:

[まーちゅう]

元々の画像の左側に空白があるので、空白の無い画像に差し替えてみてはどうでしょうか？
https://misato.or.jp/wp-content/uploads/2022/09/21-08-04-00-16-48-734_deco-1920×1859.jpg

♥ 2

Who liked:

[Olein_jp]

現在タグは並列の関係のみでタグ一覧表示をすると全て出てきてしまう

こちらは WordPress のタグの仕様ですのでやむを得ないかなと思います。

用途に分けてタグにてカテゴライズされたい場合には、カスタムタクソノミーを独自で用意されると実現できるかと思います。

カスタムタクソノミーは Custom Post Type UI といったカスタム投稿・タクソノミーを管理画面で用意することができるプラグインを利用すると簡単かもしれません。ぜひ「Custom Post Type UI カスタムタクソノミー」といったキーワードで検索して試してみてください。

♥ 0

Who liked: No user

[長谷川 喜洋]

申し訳ございません。
先程確認したところ、下記の状況を確認し、修正することで表示されるようになりました。

• 別の記事Aにも先頭固定表示を設定していた
• その記事AではカスタムHTML内の記述がおかしく、記事そのものがエラーにより表示・編集を受け付けなくなっていた

大変申し訳ございませんでした。こちらに原因がございました。

お手数をおかけしました。

♥ 1

Who liked:

[長谷川 喜洋]

ありがとうございます。

仰っていただいた方法を試してみましたところ、500系のサーバーエラーがでていました。
一度、サーバー側へ確認してみます。

♥ 0

Who liked: No user

[キタジマ タカシ]

unitoneのようなFSEのことですかね？

ですです。

※Snow Monkeyの隠しコマンド的なのがあるのも結構好きですが（u-smooth-scrollとか）

あー確かにその辺は unitone にはないですね…。移植できるのは移植しても良いかもですね。

♥ 1

Who liked:

[キタジマ タカシ]

こちらで試してみたらエラーは出なかったので、特定の設定の状況で発生するのかもしれません。

デベロッパーツール→ネットワーク→Fetch/XHRを開いた状態で「先頭固定表示を除外する」をオン・オフすると recent-posts?ccontext=〜 というリクエストが確認できると思います。「レスポンス」タブを開くと普通なら下記の画像のようなレスポンスが確認できると思うのですが、それでエラーになったときのリクエストを選択してもらうと多分これとは違うレスポンスが帰ってきているのではないかと思います。それを教えてください！

♥ 0

Who liked: No user

[hisanobu]

unitoneのようなFSEのことですかね？

機能的な面や、今後本格的に移行するのかすごく気になります…！

※Snow Monkeyの隠しコマンド的なのがあるのも結構好きですが（u-smooth-scrollとか）

 

一旦実装としては出来ましたが、もし他の良い方法があればということでしばらくトピック開いて置かせていただきたいと思います。

♥ 1

Who liked:

[hisanobu]

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もシンプルになりウィジェットも別で実装できます。（ショーケースのサイトはこの方法？）

結局それなりのコードの記述が必要であり、どの方法が良いかなといった感じではありますね…。

♥ 1

Who liked:

[キタジマ タカシ]

ご報告ありがとうございます！

ちょっとどう対応するのがベストかまだわからないので、ひとまず応急処置的な CSS を共有します。

.smb-items {
  overflow: hidden;
}

これをカスタマイザーの追加 CSS に貼り付けてみてください！

♥ 1

Who liked:

[GONSY]

自分がもし実装するとしたら、再利用ブロックを使ってフッターの作成、あとで編集しやすいように考えます。
 
前提として…
外観→カスタマイズ（カスタマイザー）→デザイン→フッターを以下のように設定します。

• PC 時のフッターウィジェットエリアのカラム数：1
• タブレット時のフッターウィジェットエリアのカラム数：1
• □フッターを全幅にする にチェックを入れる
  ※フッターをコンテンツ幅にするなら不要

以下のいずれかのプラグインを有効化して『再利用ブロック』を左メニューに表示＆ショートコードを利用できるようにします。

Easy Access Reusable Blocks

You can access the Reusable Block(s) List screen with a single click from the admin.

ja.wordpress.org

Reusable Blocks User Interface

このプラグインは、管理メニューに「再利用ブロック」を追加し、簡単に編集できるようにするプラグインです。また、ショートコードを使って簡単に投稿にブロックを挿入す…

ja.wordpress.org

Reusable Blocks Extended

Extend Gutenberg Reusable Blocks feature with a complete admin panel, widgets, shortcodes and PHP functions.

ja.wordpress.org

再利用ブロック内でフッターのレイアウトを作成→保存します。
そしてショートコードをコピー。
ウィジェットメニューの「フッター」にショートコードブロックを置き、ショートコードをペーストします。
 
フッター内の上下のpaddingが不要ならCSSを追記

.l-footer .l-footer-widget-area {
  padding: 0 !important;
}

 
こんな流れで独自のフッターを設置できると思います。
参考サイトのフッターだと 再利用ブロック内でカラムブロック（全幅）を利用すれば近いイメージになると思います。

カラムの調整はしていませんが、10分程度で以下のフッターができました。
よかったら1つの方法として参考にしてください。

Demo Site for SM

Snow Monkeyの検証用サイト

demo.gonsy.net

♥ 3

Who liked:

[hisanobu]

【お使いの 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 を完全にオリジナルのものにして独自に実装し直すのも手かもしれません…。

♥ 0

Who liked: No user

[GONSY]

メンテナンス性が悪いうえに、強引な方法なので不具合出るかもしれませんが、以下で実装可能かと思います。

@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;
	}

}

 
実装したページ

背景固定 – Demo Site for Snow Monkey

demo.gonsy.net

1つのCSSですべてのカバーブロックに適用させることはできませんが、参考になれば幸いです。

♥ 3

Who liked: