WordPressでなるべくプラグインを使わずにカスタマイズしてみた

  • あとで読みたい人は…

メリクリです。@cappeeです。

先日WordPressでブログを構築しました。私は重くなるのでなるべくプラグインを使わずにカスタマイズしたい派です。そこで今回カスタマイズした機能を一覧でメモしておきたいと思います。

最新の記事にサムネイルを表示する

最新記事を表示する sidebar.php に下記のコードを貼り付けて、表示件数・サムネイルとなるアイキャッチ画像がなかった場合のイメージ・サムネイルのサイズ(ここでは50px)などを指定すればOKです。これなら好きなタグやクラス名を使えるのでとても便利ですね。

<ul>
<?php $posts = get_posts('numberposts=5'); //最新5件を表示
foreach($posts as $post): ?>
 <li>
 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
 <?php
 if (has_post_thumbnail()):
 $title = get_the_title();
 the_post_thumbnail(array(50,50), array('alt' => $title, 'title' => $title));
 else: //アイキャッチ画像がなかった場合の処理
 ?>
 <img src="<?php bloginfo('template_url'); ?>/images/no_thumb.png" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" width="64" height="64" />
 <?php endif; ?>
 </a>
 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
 </li>
<?php endforeach; ?>
</ul>

下記を参考にしてますので、詳しくはこちらをご覧ください。

WordPressでプラグインを使わずに最新記事をアイキャッチ(サムネイル画像)付きで表示する方法

人気の記事をサムネイル付きで表示する

人気の記事は「WordPress Popular Posts」というプラグインを使用します。インストールして有効化したら、人気記事を表示する sidebar.php などに下記を貼り付けてください。

<?php get_mostpopular('range=weekly&order_by=views&limit=5&stats_comments=0&pages=0&thumbnail_width=50&thumbnail_height=50&thumbnail_selection=usergenerated'); ?>

また、インストールした timthumb.php に脆弱性があるそうです。その対応も含め詳しくは参考にさせていただいた下記をご覧ください。

WordPress Popular Postsでウィジェットを使わずに人気記事をアイキャッチ(サムネイル画像)付きで表示する方法

最新記事と人気記事を統一する

最新記事で指定したliやaのクラス名を人気記事でも追加したい場合は、「plugins」フォルダの「wordpress-popular-posts」フォルダにある「wordpress-popular-posts.php」を修正します。<li>や<a などでファイル内検索すると探しやすいです。1071行目移行にカスタマイズするソースコードがあるかと思います。

ここまででも一見問題ないのですが、このままだと最新記事はWordPressで自動的に中央をトリミングした正方形のサムネイル画像が表示され、人気記事はトリミングなしの縮小したアイキャッチ画像が表示されてしまいます。そこまで気にしない方はそのままでいいですが、どうも気になります。できれば人気記事の方を最新と同じサムネイル画像にしたかったのですが、なんせプラグインのファイルを修正する必要があるためうまくいきませんでした。ご存知の方がいればご教授いただきたいですm(__)m

そこで、下記のアイキャッチ画像を表示する方法を参考にし、最新記事の方を修正することにしました。

アイキャッチ画像の「URL,横幅,高さ」を取得する[WordPress(WP)]

画像のimgタグを囲っているaタグにはCSSで幅と高さ、そして overflow:hidden; を指定してください。

<ul>
 <?php $posts = get_posts('numberposts=5'); //最新5件を表示
 foreach($posts as $post): ?>
 <li><a href="<?php the_permalink(); ?>">
 <?php
 if (has_post_thumbnail()):
 $title = get_the_title();
 $thumbnail_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得
 $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); //「full」サイズのアイキャッチの情報を取得
 $src = $image[0]; //url ?>
 <img src="<?php echo $src;?>" height="50" />
 <?php
 else: //アイキャッチ画像がなかった場合の処理
 ?>
 <img src="<?php bloginfo('template_url'); ?>/images/no_thumb.png" alt="<?php the_title(); ?>" width="50" height="50" />
 <?php endif; ?>
 </a><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></li>
 <?php endforeach; ?>
 </ul>

ページャーをカスタマイズする

デフォルトだとなんとも悲しいページャー(改ページ)なのでプラグインももちろんありますが、プラグインを使わずに index.phpファイルに直接記述してカスタマイズしたいと思います。タグやクラス名も変更することが可能です。

<div class="tablenav"><?php global $wp_rewrite;
 $paginate_base = get_pagenum_link(1);
 if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
 $paginate_format = '';
 $paginate_base = add_query_arg('paged', '%#%');
 } else {
 $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
 user_trailingslashit('page/%#%/', 'paged');;
 $paginate_base .= '%_%';
 }
 echo paginate_links( array(
 'base' => $paginate_base,
 'format' => $paginate_format,
 'total' => $wp_query->max_num_pages,
 'mid_size' => 5,
 'current' => ($paged ? $paged : 1),
 )); ?></div>

色んな方法があるので、参考にしたこちらをご覧ください。

プラグインを使わないでWordPressにページナビを実装してみる

前の記事、次の記事を表示する

記事の詳細ページの終わりに「前の記事」「次の記事」のリンクを表示させる方法です。content-single.php に下記を貼り付けます。

<ul class="clearfix">
 <li style="width:300px;float:left;"><?php previous_post_link('%link', '&laquo; %title', TRUE) ?></li>
 <li style="width:300px;float:right;text-align:right;"><?php next_post_link('%link', '%title &raquo;', TRUE) ?></li>
 </ul>

詳しくはこちらが参考になります。

WordPressで前の記事、次の記事を表示するタグ

以上です。もっともっとWordPressの勉強が必要ですねっ。

Pocket
article clipper WordPressでなるべくプラグインを使わずにカスタマイズしてみた

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)