[akosan]

【お使いの Snow Monkey のバージョン】バージョン: 20.5.1
【お使いの Snow Monkey Blocks のバージョン】バージョン 19.10.1
【お使いの Snow Monkey Editor のバージョン】バージョン 9.2.5
【お使いのブラウザ】chrome
【当該サイトのURL】https://gojiai.info/_lib/

### 実現したいこと

・投稿のサムネイルと題名の表示順を逆にしたい
・ブログの題名が長すぎた場合にデザインが崩れるので表示されるブログ題名の表示文字数を25文字に制限し残りは…で表示したい
・題名の下にリンクつきボタンを表示したい

この画像のデザインを実現したいと思っています

現在は

SNOW MONKEY BLOCKSの「グリッド」を挿入。２カラムに設定。

左カラム「任意のタクソノミーの投稿」右カラム「最近の投稿」を挿入しています。

記事を更新したときに自動で表示してほしいのでこの方法をとっています。

 

### 発生している問題

出来ない

### 試したこと

過去のフォーラムを参照、ネット検索

・投稿のサムネイルと題名の表示順を逆にしたい
→わからない

・題名の下にリンクつきボタンを表示したい
→疑似要素でやってみたら表示出来たのですがアクセスビリティを考えるとhtmlで入れた方がやはりいいだろうと思いなおしました。PHPでの挿入になると考えましたがどう入れたらいいのかわからずでした。

お手数ではありますがご教示いただけると幸いです。

♥ 0

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

[キタジマ タカシ]

Snow Monkey はフックで一覧部分の各項目部分をカスタマイズできるので、それを使って完全にオリジナルの HTML で出力するのもありなのかなと思いました。下記の記事にサンプルコードがあります。

Snow Monkey Blocks v19.3.1 をリリースしました

Snow Monkey Blocks v19.3.1 の概要 機能追加 新しいブロックを追加：カスタムフィール…

snow-monkey.2inc.org

記事では snow_monkey_pre_template_part_render_template-parts/loop/entry-summary で一覧の各項目（.c-entry-summary） をカスタマイズしていますが、フック名を変えれば一覧部分全体（.c-entries）も完全にオリジナルの HTML で出力させることもできます。

♥ 1

いいねをした人:

[akosan]

キタジマさん

ありがとうございます。新しい機能なんて便利なのでしょうか…！記事を参考にしながらデバックモードでslugの部分を確認して作ってみました。

// 記事一覧部分全体（template-parts/loop/entry-summary）をカスタマイズ
add_filter(
	'snow_monkey_pre_template_part_render_template-parts/loop/entry-summary',
	function( $html, $name, $vars ) {
		// 最近の投稿以外の場合は処理しない
		if ( $vars['_context'] !== 'snow-monkey-blocks/recent-posts' || $vars['_context'] !== 'snow-monkey-blocks/recent-posts' ) {
			return $html;
		}

	// _entries_id が # 以外のときは処理しない アンカー名がhome_picku以外は処理しない
	if ( $vars['_entries_id'] !== '#home_pickup' ) { // clientId かアンカー名が入る
		return $html;
	}

		ob_start();
		?>
		<div>
			<div><?php the_title(); ?></div>
			<div><?php echo esc_html( get_post_meta( get_the_ID(), 'test', true ) ); ?></div>
			<a class="<?php the_permalink(); ?>">詳しく見る</a>
			<div><?php the_post_thumbnail('thumbnail'); ?></div>
		</div>
		<?php
		return ob_get_clean();
	},
	10,
	3
);

 

真ん中のこの部分のみうまくいきませんでした。

// _entries_id が # 以外のときは処理しない アンカー名がhome_pickup以外は処理しない
if ( $vars['_entries_id'] !== '#home_pickup' ) { // clientId かアンカー名が入る
return $html;
}

 

というのもコメントに// clientId かアンカー名が入る　とあるのですがこれが何を指すのかわからないままとりあえずやったためです。

clientId→検索するもわからず
アンカー名→htmlアンカー？とりあえず試してみたものの失敗

この２つについてはどこを見ればわかるでしょうか？既出でしたら申し訳ありません。

♥ 0

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

[キタジマ タカシ]

あ、これ内部的なmので HTML 上では確認できなかったかもです。要は「このブロックだけ」フックでカスタマイズしたい、という場合に、そのブロックを何らかの値で識別する必要があります。アンカーが指定してある場合はそれで識別できますが、ない場合は普通には識別できないので、内部的に id を発行してそれをひっそり持ってる、みたいな感じです。

if ( $vars['_entries_id'] !== '#home_pickup' ) { // clientId かアンカー名が入る
  return $html;
}

↓

var_dump( $vars['_entries_id'] );
if ( $vars['_entries_id'] !== '#home_pickup' ) { // clientId かアンカー名が入る
  return $html;
}

としたら値が画面上に出力されて確認できると思うので試してみてください。

♥ 3

いいねをした人:

[akosan]

キタジマさん、ありがとうございます。理解できました。

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

♥ 1

いいねをした人:

[投稿者]

投稿