[SNM-FUN]

追加情報です。

トップページ以外の固定ページから全ページ共通部分（ヘッダー・フッター）にあるトップページの各セクションのページ内リンクを押す際にずれが生じるのですが、ずれて表示されるセクションの1つ上のセクションにあるアコーディオンを開いた状態をオフにすると改善されました。開いた分だけずれているのでしょうか。

また、実は再度確認したところトップページ以外の固定ページからだけでなく、トップページから同様ページ内リンクを押してもずれて表示されるリンクがあり、そちらはEWWW Image Optimizerの設定の1つである「遅延読み込み」をオンにして改善しました。

♥ 0

いいねをした人: 居ません

[SNM-FUN]

ご返信いただき誠にありがとうございます。
回答させていただきます。

この中だと画像の読み込みに関連しそうなのは「EWWW Image Optimizer」ですが…停止すると何か変わったりしますか？

無効化しましたが、改善されませんでした。

「jQuery使用」とありますが、非同期読み込み的なことに使っていますか？

いえ特に行っていない認識ですが、コードを共有した方がよろしいでしょうか。

ちなみに、このサイトの場合だと、下記のページにある「目次」がページ内リンクになっています。僕の環境だと Chrome でも Safari でもずれに移動できましたが、これはどうですかね？下記のページでも同様に不具合が発生するなら Snow Monkey の何かに原因がある可能性が高いかなと。下記のページでは発生しないなら、ページの作り方や何らかの設定、ブラウザの何か…という可能性があるかもなと。

私の環境でもそちらのサイトについては同じくずれずに両ブラウザで移動できました。また再度確認したところChromeでもずれていました、、、

♥ 0

いいねをした人: 居ません

[SNM-FUN]

ご返信いただき誠にありがとうございます。回答させていただきます。

– スムーススクロールを使用しない場合はどうなりますか？
→改善されません

– ページを（ハードリロードなどでキャッシュを消さずに）リロードしたあと、再度リンクをクリックすると改善されますか？
→トップページから別の固定ページに移動し、リロードした後、リンクを押しましたが、改善されません

– ページを一度一番下までスクロールして、一番上まで戻った後、再度リンクをクリックすると改善されますか？
→改善されません

– 画像を非同期読み込みするようなプラグインあるいは JavaScript のライブラリーを使用していますか？
＜使用しているプラグイン＞
All-in-One WP Migration
BackWPup
EWWW Image Optimizer
SEO SIMPLE PACK
My Snow Monkey
Snow Monkey Blocks
Snow Monkey Editor
Snow Monkey Forms
Snow Monkey Google Fonts
WP Multibyte Patch

jQuery使用

♥ 0

いいねをした人: 居ません

[SNM-FUN]

キタジマさん
ご教示いただき誠にありがとうございます。
結果的に、My Snow Monkeyプラグイン内直下にfontsフォルダを作成し、 googleフォントから当該フォントをダウンロードし、それをfontsフォルダの中に入れた上で、以下のコードにより当該フォントの読み込みが成功し、かつカスタマイザー内の「フォントの太さ」でSemiBold 600を選択できるようになりました。

add_filter(
	'snow_monkey_font_family_settings',
	function( $settings ) {
		array(
			$settings['noto-sans-jp']['variation']['600'] = array(
				'label' => 'SemiBold 600',
				'src'   => MY_SNOW_MONKEY_URL . '/fonts/NotoSansJP-SemiBold.ttf',
			)
		);
		return $settings;
	}
);

♥ 1

いいねをした人:

[SNM-FUN]

サポートの件承知いたしました。
ご教示いただき誠にありがとうございます。

また共有いただきましたページを参考にしたところ無事表示されるようになりました。
この度はご教示いただき誠にありがとうございました。重ねて御礼申し上げます。
それではトピックを閉じます。

♥ 1

いいねをした人:

[SNM-FUN]

キタジマ タカシ様

ご返信いただき誠にありがとうございます。
説明不足で大変申し訳ございません。
現在Wordpressはバージョン5.9.3を使用しており、制作の都合上このバージョンで上記の問題を解決したいのですが、その場合Snow Monkeyは最新バージョンでも問題ないのでしょうか？

♥ 0

いいねをした人: 居ません

[SNM-FUN]

キタジマ タカシ様

ご返信いただき誠にありがとうございます。
現状、管理運用の手間を減らすためエディタ用とフロント用とを分けずにセレクタを指定しており、かつ最終的に読み込むCSSファイルは１つまとめております。その上でいただきましたご意見を踏まえ、さらに検討した結果、add_editor_style()、enqueue_block_editor_assetsフックの両方で同じ１つのCSSファイルを読み込むことにいたしました。
これによって、CSSファイル側では.editor-styles-wrapperクラスが挿入されることなど特段何も考えずにセレクタ指定をしても、フロント・エディタ側両方で同様のスタイルが反映されるようになりました。
2度同じファイルを読み込むという悪影響もございますが、この方法ではフロントへの表示には大きな影響がなく、影響はエディタ画面が表示されるときだけなので、CSS作成時の手間の軽減とそれによって生じる悪影響・デメリットとを天秤にかけ、手間軽減のメリットの方が大きいと考え一旦この方法を採用しました。
備忘録として残しておきます。

お力添えいただき誠にありがとうございました。大変助かりました。
重ねてお礼申し上げます。
トピック閉じておきます。

♥ 1

いいねをした人:

[SNM-FUN]

キタジマ タカシ様

ご教示いただき誠にありがとうございます。

.editor-styles-wrapper にクラスを追加するオフィシャルな方法は無いと思います。

そうなのですね。承知致しました。

body.slug-{スラッグ} ではなく .slug-{スラッグ} にしたら良いのではと思ったのですがどうですかね？

そうですね。bodyを必ずしも入れなければいけないというわけではないのですが、セレクタを.slug-{スラッグ}のみにした場合、以下のように置換がなされます。

.editor-styles-wrapper .slug-{スラッグ}{
...
}

ただし、.slug-{スラッグ}は現状bodyタグのクラスであり、エディター内のHTML構造上.editor-styles-wrapperはbodyタグの内側に含有されておりますので、.editor-styles-wrapper .slug-{スラッグ}というセレクタは存在せず、やはりこれでも結果的にエディターにフロントのスタイルは反映されません。

どうしても body.slug-{スラッグ} にする必要があるのであれば、追加 CSS や add_editor_style()ではなくて、enqueue_block_editor_assets で　wp_enqueue_style()すればクラスの置換が行われずに読み込めますよ。

ありがとうございます。確かにご教示いただいたこの方法でクラスの置換が行われなくなるため、.editor-styles-wrapperセレクタを意識せずにCSSを記述しても、フロント側同様のスタイルをそのままエディターに反映させられるようになるのですが、.editor-styles-wrapperの自動置換が無くなることで、今度は管理画面上のブロックエディター外の部分にもスタイルが反映されるようになるため、この方法を少し躊躇っていました。
その上で、やはり現状「ページごとに個別のCSSをフロントとエディタ側両方に同様に反映させる」ためにはご教示いただいた上記の方法しかなさそうでしょうか？

♥ 0

いいねをした人: 居ません

[SNM-FUN]

申し訳ございません。
上記と同じコメントを誤って再び送信してしまいましたので、2度目に送信したコメントの文章を削除し、本コメントを送信致しております。

♥ 0

いいねをした人: 居ません

[SNM-FUN]

Olein_jp様

ご返信いただき誠にありがとうございます。
ご教示いただきましたadmin_body_classフックを利用することでエディター内のbodyタグにもページごとで固有のslug-{スラッグ名}クラスを追加することができました。
ただし、追加はできたもののslug-{スラッグ名}クラスを経由して指定したスタイルはやはりエディターには反映されておりませんでした。よく考えてみると、現状CSSファイル内でslug-{スラッグ名}クラスを経由してスタイルを設定する際、以下のようにセレクタを組んでいるのですが、

body.slug-{スラッグ}{
...
}

エディター側では、editor-styles-wrapperクラスが自動的に挿入されますので、上記のセレクタは以下のように自動的に置換されるかと思います。

.editor-styles-wrapper.slug-{スラッグ}{
...
}

ただし、slug-{スラッグ名}クラスはbodyタグのクラスであるため、.editor-styles-wrapper.slug-{スラッグ}というセレクタは存在せず、結果的にslug-{スラッグ名}クラスを経由して指定したスタイルはエディタには反映されていないのかと思います。

そのため解決策として、エディター側ではbodyタグにslug-{スラッグ名}クラスを追加するのではなく、editor-styles-wrapperクラスを持つdivタグにslug-{スラッグ名}クラスを追加することで、上記のセレクタの置換が行われたとしても、エディタ側にフロントと同じスタイルが反映されるようにしようかと考えておりますが、調べたところなかなかこの手の情報がヒットせず、未だ解決に至っておりません。

どなたか「editor-styles-wrapperクラスを持つdivタグに任意のクラス（slug-{スラッグ名}クラスetc）を追加する方法」をご存知の方はいらっしゃいますでしょうか？

お手数お掛けし大変恐れ入りますが、ご教示いただけますと幸いです。
何卒宜しくお願い申し上げます。

♥ 0

いいねをした人: 居ません

[SNM-FUN]

まーちゅう様

上記コードで無事実装することができました。

この度は、ご教示いただき誠にありがとうございました。

それではトピック閉じさせていただきます。

 

P.S.

ご教示いただいた内容を参考に、.c-entry__metaを、以下.c-entry__header__header内に含有させる場合、以下のように実装できましたので念の為共有いたします。

 

/**
 * シングルページのページヘッダーにアイキャッチを追加
 *
 * @param $html テンプレートパーツの出力HTML
 * @param $name テンプレートパーツの名前
 */
// use Framework\Helper;
add_filter(
	'snow_monkey_template_part_render_template-parts/content/entry/header/header',
	function( $html, $name ) {
		if ( "post" === $name ) {

			ob_start(); // アイキャッチ画像のHTMLを記録開始
			if ( has_post_thumbnail() ) {
				?>
				<div class="c-entry__thumbnail">
					<?php the_post_thumbnail("large"); ?>
				</div>
				<?php
			}
			$thumbnail_html = ob_get_contents(); // 記録結果を変数に代入
			ob_end_clean(); //記録終了

			$search_1  = '<h1 class="c-entry__title"';
			$replace_1 = '<div class="c-entry__header__header"><h1 class="c-entry__title"' ;
			$search_2  = '</header>' ;
			$replace_2 = '</div>'.$thumbnail_html.'</header>';
			$html = str_replace(
				[
					$search_1,
					$search_2
				],
				[
					$replace_1,
					$replace_2
				],
				$html
			);
		}
		return $html;
	},
	10,
	2
);

♥ 2

いいねをした人:

[SNM-FUN]

キタジマ様

ご返信いただき誠にありがとうございます。

ご教示いただきましたコードで問題なく実装できました。

トピック閉じさせていただきます。

♥ 1

いいねをした人:

[SNM-FUN]

GONSY様

ご返信いただき誠にありがとうございます。

ご教示いただきました内容で実装できました。

以上で、本トピック閉じます。

♥ 1

いいねをした人:

[SNM-FUN]

Olein_jp様、KUMAI KAZUYUKI様

ご返答いただき誠にありがとうございます。

 

本題とは逸れますが、個別投稿を作るほどの内容はないけど、投稿は作成されていて、けど一覧からはリンクを張りたくない、と言うことですかね？

WordPress使う理由はどこかにあるのかな？と思ったりもしました。

はい申し訳ございません言葉足らずでした。現段階で個別投稿を使用することはないですが、将来的には内容を追加する予定ですので、あくまで現段階に限って一覧のみの使用を想定しております。

 

CSSで、対象の <a> に対して pointer-events:none; を設定してしまう、というのはどうですかね。

基本的にはCSSをいじられることはないのかなと思い、こちらを参考に実装することに致しました。とても助かりました。ありがとうございます。

♥ 0

いいねをした人: 居ません

[SNM-FUN]

以下の通り設定し、結果的に、、、、、、、、、、、、できました！！
ご回答いただいたお二方ありがとうございました！！

こちらも皆さんの参考になればと思い、以下に設定した内容を記載しております。ぜひご参照ください！（無駄なところがあるかもしれません、、）

• ヘッダーを全幅にする
• ヘッダーレイアウトを2行に
• ヘッダーコンテンツに記述（記述内容を以下に記載しております）
• 「お問い合わせ」をグローバルナビに入れ、menu-item-contactクラス付与

ヘッダーコンテンツ
<div class="header-tel">
<div>TEL</div>
<div class="header-tel-number">0000-00-0000</div>
</div>
<div class="header-btn-recruit"><a class="c-btn">採用情報</a></div>

追加CSS
/*==========================*/
/* Header
/*==========================*/
[data-has-global-nav=true] .l-2row-header__row:last-child{
margin-top: 0px;
}
.c-fluid-container{
padding-right: calc(192px + 22px);
position: relative;
}

.c-header-content{
display: flex;
align-items: center;
}

.header-tel{
display: flex;
justify-content: flex-start;
font-weight: bold;
font-size: 20px;
}

.header-tel-number{
margin-left: 6px;
}

.header-btn-recruit{
display: table;
}

.header-btn-recruit a.c-btn{
background-color: #fff;
color: var(--accent-color,#cd162c);
border: 2px solid var(--accent-color,#cd162c);
border-radius: 22px;
font-weight: bold;
width: 175px;
height: 44px;
margin-left: 23px;
display: flex;
align-items: center;
justify-content: space-around;
}

.header-btn-recruit a.c-btn::after{
content: "";
width: 7.7px;
height: 7.7px;
border-top: 2px solid var(--accent-color,#cd162c);
border-right: 2px solid var(--accent-color,#cd162c);
transform: rotate(45deg) translate(1px, 1px);
}

.menu-item-contact{
position: absolute;
top: 0;
right: 0;
width: 192px;
height: 100%;
}

.c-navbar{
justify-content: flex-end;
}

.c-navbar__item{
flex: initial;
}

.c-site-branding__title{
position: absolute;
height: 100%;
top: 0;
display: flex;
align-items: center;
}

.l-2row-header .p-global-nav .c-navbar__item>a{
padding-top: 16px;
padding-bottom: 12px;
}

.p-global-nav .c-navbar__item>a{
font-size: 16px;
line-height: 1.5;
}

@media (min-width: 64em){
.l-2row-header__row:first-child {
padding-top: 4px;
padding-bottom: 0px;
}
}

ふぅ〜追加CSSでできて、よかった、、🥷
トピック閉じておきます

♥ 7

いいねをした人:

[投稿者]

投稿