任意のタクソノミーの投稿の特定の場所にカテゴリーを表示させたい

0
いいねをした人: 居ません
  • このトピックには5件の返信、3人の参加者があり、最後にakosanにより1年、 2ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #121872
    akosan
    閲覧者
    31

    【お使いの Snow Monkey のバージョン】バージョン: 20.0.1
    【お使いの Snow Monkey Blocks のバージョン】バージョン 19.1.0
    【お使いの Snow Monkey Editor のバージョン】バージョン 9.2.1
    【お使いのブラウザ】chrome
    【当該サイトのURL】https://sora-sanpo.com/_lib/lesson/

    ### 実現したいこと

    「任意のタクソノミーの投稿」の特定の場所に、その記事に設定しているカテゴリーをタグのような感じで表示させたいです。

    デザインで表すとこのような感じです。

    任意のタクソノミーの投稿ブロックのレイアウト「シンプル」をCSSでデザイン変更しました。

    …が、この先がわからずにいます。

    連続で申し訳ありませんが、ご教示いただけると幸いです。

     

    ### 発生している問題

    カテゴリーを特定の場所にタグのように表示したいができない

     

    ### 試したこと

    過去フォーラムの検索

    0
    いいねをした人: 居ません
    #121931
    アバター画像キタジマ タカシ
    閲覧者
    2289

    「シンプル」にするとデフォルトでカテゴリーラベルが画像の上に表示されると思うのですが、提示いただいた URL の「シンプル」のところだとカテゴリーラベルが表示されていない(CSS で消しているわけではなくて HTML 自体出力されていない?)ようにみえます。もしカテゴリーラベルが表示されるようになれば、それを CSS で調整するのが一番お手軽かなと思います。もし何か設定やカスタマイズで非表示にされているのであれば、まずは表示されるようにしてみてください!

    1
    いいねをした人:
    #122050
    akosan
    閲覧者
    31

    キタジマさん

    ありがとうございます。カテゴリーラベルを表示しCSSでの調整を行ってみました。

    ラベルはposition:absoluteで位置を調整されているのですが、親要素のposition:relativeが画像 .c-entry-summary__figure に設定されています。

    ですので、CSSで.c-entry-summary__figure画像内での移動はできるのですが、外に出すことができませんでした。

    それならば.c-entry-summary__figureposition:relativeを変更すればいいのでは?と思いやってみたのですが、今度はデザイン全体が崩れてしまい無理でした。

    この場合どのようにしたらいいでしょうか?

    0
    いいねをした人: 居ません
    #122059
    es:エス
    参加者
    134

    akosanさん

    positionは触ることなく、.c-entry-summary__figureoverflow: hidden; を打ち消した上で、.c-entry-summary__figure .c-entry-summary__term の各カテゴリの term--category-slug-category 等の位置を toprightに加えて transform で指定すれば、親要素である画像上からはみ出させて画像のように並べることができましたので、お試しいただけたらと思います。

    ただすべての画面解像度で見え方をチェックした訳ではないため、参考としていただいて、適宜ご調整いただけましたら幸いです。

    2
    いいねをした人:
    #122077
    アバター画像キタジマ タカシ
    閲覧者
    2289

    確かに position 調整する方式だと逆にややこしくなりそうですね…。一応フックを使ったやり方も考えてみたので共有します。

    add_filter(
    	// template-parts/loop/entry-summary を書き換える
    	'snow_monkey_template_part_render_template-parts/loop/entry-summary',
    	function( $html, $name, $vars ) {
    		// 「シンプル」のときだけ実行
    		if ( 'simple' === $vars['_entries_layout'] ) {
    			// カテゴリーラベルを取得して、各項目の最後に追加する。
    			ob_start();
    			\Framework\Helper::get_template_part(
    				'template-parts/loop/entry-summary/term/term',
    				$name,
    				array(
    					'_context' => $vars['_context'],
    					'_terms'   => $vars['_terms'],
    				)
    			);
    			$terms = ob_get_clean();
    
    			return str_replace(
    				'</section>',
    				$terms . '</section>',
    				$html
    			);
    		}
    		return $html;
    	},
    	10,
    	3
    );

    これで画像に重なって表示されるやつ(デフォルト)と、項目の最後に追加されたやつの2箇所にタームが表示されるようになります。この状態で画像上のタームは CSS で消して、最後に追加されたタームは CSS で位置調整すると position だけでやる場合よりも調整しやすいかなと思います。

    1
    いいねをした人:
    #122078
    akosan
    閲覧者
    31

    es:エスさん

    ご教示くださってありがとうございます。

    無事に実現できました。

    CSSはこのようにしました※画面の各サイズで変更が必要です

    .c-entry-summary__figure{
    overflow:visible;
    }
    
    .lesson_list .c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(1){
    transform:translate(75px,73px);
    }
    
    .lesson_list .c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(2){
    transform:translate(130px,37px);
    }
    
    .lesson_list .c-entry-summary--lessons .c-entry-summary__figure span:nth-of-type(3){
    transform:translate(212px,0px);
    }
    

    解決したのでトピックを閉じさせていただきます。

    2
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「任意のタクソノミーの投稿の特定の場所にカテゴリーを表示させたい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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