ページデザインなど微塵も考えていないブログだが、本家の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とかいじりたくなりそう。