[みしま]

このあたりの参考サイトの方法が手軽に上下中央にできるかと思います。

上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽

CSSでblock要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSSのFlexboxを使う方法が現在では一番手軽です。中央揃えしたい要素の親に対して…

ics.media

Flexboxは、その子要素に対して働くので、
中央に配置したいものがcontainerなら、その外、親の要素を作って、そこにdisplay:flexなどを指定すると手軽です

<div class="container__wrapper">
  <div class="container">
    <div class="heart">
       <a href="#"><i class="bx bx-heart"></i></a>
    </div>
  </div>
</div>
として、
.container__wrapper {
  display:flex;
  justify-content: center;
  align-items: center;
  width:100vw;
  height:100vh;
}

など、親要素の幅や高さの指定は状況似合わせてある程度いろいろな指定ができると思います。

♥ 1

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

[みしま]

サニタイズの視点、完全に飛んでましたので助かります。
esc_htmをつかって、下記のようなカスタマイズとして利用させていただきます。
ありがとうございます！

add_filter(
	'snow_monkey_template_part_render_template-parts/loop/entry-summary',
	//entry-summary-postが対象
	function( $html ) {
		if (get_post_type() === 'item'): //カスタム投稿 itemに限定する
			// 以降の出力を変数に格納する
			ob_start();
			?>
			<div class="price__wrapper">
				<p>税込<?php echo esc_html(number_format(get_field('price'))); ?>円</p>
			</div>
			<?php
			// 変数に格納
			$kw_price = ob_get_clean();
			// </header>を書き換える
			return str_replace(
				'</header>',
				'</header>'.$kw_price,
				$html
			);
		endif;
		return $html;
	}
);

♥ 4

いいねをした人:

[みしま]

ob_start()を知らなかったので勉強になりました。

当初理解できなかったのですが、昨日の配信で
・snow_monkey_template_part_render_<slug>
・str_replace
に触れてらっしゃったのでどのような処理かわかりました。

記載いただいたようにするとheaderとして上部固定などもできるようになりました。
お手数おかけしました。ありがとうございました。

♥ 1

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

[みしま]

参考サイトまでありがとうございました。

みなおしてみたところ、完全な勘違いをしておりました。

wp_enqueue_style()・wp_enqueue_script()の記載時にtype属性を出さない設定をするものと思いこんでいましたが過去のテーマを見てみたところ、function.phpに、下記の参考サイトのコードを貼り付けていただけでした。

ワードプレスで外部CSSやjsの読み込みコードからtype属性を消す方法｜WEB TIPS～ホームページ制作の覚え書き

2018年11月20日2020年11月7日Tweet 最近は、外部CSSやjsの読み込み時にtype=”text/ja…つづきを読む【WEB TIPS】

whitewood-hp.com

My Snow Monkeyに上記のコードを貼り付けて自分で読み込んだものも含めてWarningを36個減らすことができました。

SEO上はまったく問題に思っていませんでしたが、サイトのinfo＠ドメイン宛に頂いた営業メールのタイトルが「【重要】旧ソースコードでアクセス低下の可能性」であり、メール本文にも「一昔まえに作られたホームページ」「正しくホームページが表示されなくなるなどのアクシデント」「現在のエラーを改善」など満載だったので、クライアントが受けるイメージの対策としてそういったメールをもらわないように、念の為エラーやワーニングの件数を減らそうと思ったしだいでした。

大変お騒がせ致しました。

♥ 0

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

[投稿者]

投稿