wordpressプラグインjetpack人気の投稿とページウィジェットをカスタマイズ

ページデザインなど微塵も考えていないブログだが、本家のmaiyoko.comではいろいろやっています。
バックステージに装飾してる暇があったらオンステージを綺麗にしろ!

wordpressのウィジェットとしては欠かせないjetpack、ウィジェットとして使える「人気の投稿とページ」を使ってみた。
最近アクセスの多い記事をリスト表示してくれるもの。回遊率上げるには便利。
投稿内画像のサムネイル表示もしてくれるのだが、カスタマイズしたくなってくる。
サムネイルのサイズも変更できる(しかし正方形のまま)ようだが、今回はパス。
今回はサムネイルにもリンクを埋め込むことにした。
以降Jetpack2.9でのお話。

/wp-content/plugins/jetpack/modules/widgets/top-posts.php
のバックアップを取る。

改めてtop-posts.phpを開き、
class=’widgets-list-layout-blavatar’を探す。204行目あたり。
直前(201行)を見ると、foreachがあり、<li>でリスト化されていることがわかる。
つまり<li></li>内部(204,205行)をいじればいい。

<li>
	<img src="<?php echo esc_url( $post['image'] ); ?>" class='widgets-list-layout-blavatar' alt="<?php echo esc_attr( wp_kses( $post['title'], array() ) ); ?>" />
	<div class="widgets-list-layout-links"><a href="<?php echo esc_url( $post['permalink'] ); ?>" class="bump-view" data-bump-view="tp"><?php echo esc_html( wp_kses( $post['title'], array() ) ); ?></a></div>
</li>

204行がサムネイル、205行が記事タイトルになっていますね。
ここで、205行の<a href=”<?php echo esc_url( $post[‘permalink’] ); ?>” data-bump-view=”tp”>を204行の先頭に移動。

<li>
	<a href="<?php echo esc_url( $post['permalink'] ); ?>" class="bump-view" data-bump-view="tp"><img src="<?php echo esc_url( $post['image'] ); ?>" class='widgets-list-layout-blavatar' alt="<?php echo esc_attr( wp_kses( $post['title'], array() ) ); ?>" />
	<div class="widgets-list-layout-links"><?php echo esc_html( wp_kses( $post['title'], array() ) ); ?></a></div>
</li>

以上、こんだけ。

そのうちCSSとかいじりたくなりそう。

コメントを残す

メールアドレスが公開されることはありません。