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

0
いいねをした人: 居ません
  • このトピックには2件の返信、2人の参加者があり、最後にSNM-FUNにより2年、 4ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #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つございます「アイキャッチ画像の位置」をカスタムテンプレート同様に、新たに独自に作ることなどが可能であれば、それも1つの手であるかとも考えており、
    様々想定しておりますが、こういったケースの場合、どの方法が最適かお手数お掛けし恐れ入りますが、ご教示いただけますと幸いです。何卒宜しくお願い申し上げます。

    0
    いいねをした人: 居ません
    #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
    いいねをした人:
    #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
    いいねをした人:
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「アイキャッチ画像の位置をカスタマイズしたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。