アイキャッチ画像の位置をカスタマイズしたい

♥ 0

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

このトピックには2件の返信、2人の参加者があり、最後にSNM-FUNにより2年、 6ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2022年5月26日 4:09 PM #105288
SNM-FUN
閲覧者

♥ 20
【お使いの Snow Monkey のバージョン】16.4.6
【お使いの Snow Monkey Blocks のバージョン】15.0.6
【お使いの Snow Monkey Editor のバージョン】 7.0.1
【お使いのブラウザ】Chrome

【当該サイトのURL】
ローカル環境

### 実現したいこと

投稿ページ（singular.php）のアイキャッチ画像の位置を調整して、アイキャッチ画像（.c-eyecatch）とエントリーヘッダー（.c-entry__header）とを横並びに配置したい

### 発生している問題

カスタマイザー> デザイン>投稿ページ設定>アイキャッチ画像の位置にて、「コンテンツの上」を選択した上で、CSSを調整し上記を実現しようとしたのですが、.c-eyecatchが .c-entry__bodyに含有されているため、CSSだけでは実装するのが困難、あるいは少し煩雑になるため、いっそのこと以下のような構造になるようテンプレートを上書きしようと考えました
```
<div style="display: flex;">
 <header class="c-entry__header">...</header>
 <div class="c-eyecatch">...</div>
</div>
<div class="c-entry__body">...</div>
```
### 考察

現状では、template-parts/content/entry/entry.phpを見ると、やはり.c-entry__body内にアイキャッチが配置されるようタグが置かれておりましたので、このタグを.c-entry__body外に出し、上記HTML構造が実現できるように配置し直そうと考えております。ただし、感覚にはなるのですが少し無理やりな実装のような気がしております。
またはその他の方法として、現在「なし」も含め4つございます「アイキャッチ画像の位置」をカスタムテンプレート同様に、新たに独自に作ることなどが可能であれば、それも１つの手であるかとも考えており、
様々想定しておりますが、こういったケースの場合、どの方法が最適かお手数お掛けし恐れ入りますが、ご教示いただけますと幸いです。何卒宜しくお願い申し上げます。

♥ 0

いいねをした人: 居ません
2022年5月26日 5:56 PM #105303
まーちゅう
参加者

♥ 367
こんにちは。
カスタマイザーの設定でアイキャッチ無しにしたうえで、My Snow Monkey に以下のコードを追加してみてください。
```
/**
 * シングルページのページヘッダーにアイキャッチを追加
 * 
 * @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();
			if ( has_post_thumbnail() ) {
				?>
<div class="entry-thumbnail">
	<?php the_post_thumbnail( 'medium' ); ?>
</div>
				<?php
			}
			$thumbnail = ob_get_contents();
			ob_end_clean();
			$search_1  = '<h1';
			$replace_1 = '<div class="entry-header"><h1' ;
			$search_2  = '</h1>' ;
			$replace_2 = '</h1>'.$thumbnail.'</div>';
			$html = str_replace(
				[
					$search_1,
					$search_2
				],
				[
					$replace_1,
					$replace_2
				],
				$html
			);
		}
		return $html;
	},
	10,
	2
);
```
CSSでの調整が必要になるので以下のような感じでレイアウト調整してみてください。
```
.entry-header {
	display: flex;
	justify-content: space-between;
}

.entry-thumbnail {
	width: 20%;
}
```
♥ 3

いいねをした人:
2022年5月26日 10:25 PM #105316
SNM-FUN
閲覧者

♥ 20
まーちゅう様

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

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

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

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

いいねをした人:
投稿者

投稿