コンテンツマーケティングの時代とはいえ、WordPressである程度記事を書き溜めてくると、デザインや使いやすさにも注意を払いたくなることがあります。せっかく素晴らしい内容の記事を書いても、読みやすいデザインになっていなければ、記事の価値が目減りすることに気づき始めるからです。

そこで今回は、少しのコードをコピー＆ペースト（以下、コピペ）するだけで、WordPressのデザインや機能性を向上させる便利なコードを6個ご紹介します。

コピペだけでWordPressのデザインや機能性を向上させるコード

1. 丸いサムネイルを出力する

ブログサイトのトップページや、記事一覧のサイドバーで表示される機会の多いアイキャッチ画像。SNSでシェアする場合にも表示されるので、設定しておきましょう。

デフォルトではアイキャッチ画像は利用できないので、functions.phpに下記のコードを追加します。

<code>
add_theme_support( 'post-thumbnails' );
</code>

アイキャッチ画像を正方形にしたい場合には、set＿post＿thumbnail＿size ( XXX, XXX ) を指定します。例えば、set＿post＿thumbnail＿size( 100, 100 )とすると、100x100の正方形のサイズもサムネイルとして保存されます。

<code>
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100 );
</code>

また、set＿post＿thumbnail＿size (XXX, XXX, XXX) の3つ目の因数をtrueにすることで、そのサイズで画像が切り抜かれます。

<code>
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100, true );
</code>

functions.phpでアイキャッチ画像の設定ができたら、index.phpなどのテンプレートファイルの任意の場所に下記のコードを挿入してアイキャッチ画像を表示します。

<code>
<?php the_post_thumbnail(); ?>
</code>

アイキャッチ画像には「wp-post-image」というクラスが付加されています。これを利用して、CSSにborder-radiusを指定してあげると、丸いサムネイルが取得できるというわけです。

<code>
img.wp-post-image {
  border-radius: 50%;
}
</code>

2. アイキャッチ画像を利用した擬似パララックス

アイキャッチ画像をタイトルの背面に敷き詰めて、ヒーローイメージを作ります。その際、スクロールするとアイキャッチ画像が固定されており、パララックスに似た印象を与えることができます。
※正確には背面の画像は動いていないのでパララックスではありません

まず、index.phpやsingle.phpなどのループ部分の背景にアイキャッチ画像を敷きます。その中に、タイトルや日付などを入れます。

<code>
<div id="herobox" style="background:url('<?php $image_id = get_post_thumbnail_id();$image_url = wp_get_attachment_image_src ($image_id, true);echo $image_url[0];?>')">
  <a href="<?php echo the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
  <div class="post_date"><?php the_date(); ?><</div>
</div>
</code>

ここでは、サムネイルのURLだけを知りたいので、サムネイルidを調べて、URLのみを返すやり方を使っています。

CSS部分では、background-cover属性を設定することで、背景画面を全面に敷くことができます。
さらに、flexboxを活用することで、中に入れてある要素をボックスの中央に配置させます。background-attachmentでfixedを指定することで、背景画像が固定化されます。

<code>
#herobox {

  background: url("./default.jpg")
  background-position: center center;
  background-cover: cover;
  background-repeat: no-repeat;

  background-attachment: fixed;
  display: block;

  width: 100%;

  min-height: 300px;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  margin-bottom: 10px;

  text-shadow: 0 1px 2px #333;
  color: white;

}
</code>

スマートフォンでは表示が上手くいかないことがあります。その場合はMediaQueryで以下の指定をしてあげましょう。

<code>
#herobox {
  background-attachment:scroll !important;
}
</code>

こうすると、スクロールによる背景の固定はされませんが、背景画像が拡大されすぎて何の画像かわからなくなるというバグを回避することができます。

3. Twitterアカウント名が出てきたら自動リンク化する

「@アカウント名」が出てきた時に自動でTwitterのリンクが生成されたら、編集作業の工程も減るので楽になります。これを実現するために、正規表現を使って@で始まる文字列を探し、Twitterアカウントへのリンクに置換します。

<code>
function add_twitter_link($result) {
  $pattern= '/(?<=^|(?<=[^a-zA-Z0-9-_\.]))@([A-Za-z]+[A-Za-z0-9_]+)/i';
  $replace= '@<a href="http://www.twitter.com/$1">$1</a>';
  $result= preg_replace($pattern, $replace, $result);
  return $result;
}

add_filter( "the_content", "add_twitter_link" );
</code>

@の前にも正規表現を使っているのは、メールアドレスだった場合にリンク化しないようにするためです。

4. 新着記事に「NEW!」と表示word

記事一覧を表示するテンプレートファイルに下記のコードを追加することで、新着記事に「NEW!」という文字を追加することができます。

<code>
  $post_time = get_the_time('U');
  $days = 5;
  $last = time() - ($days  24  60 * 60);
  if ($post_time > $last) {
    echo '<span style="color:red">NEW!</span>';
  }
</code>

上記の例では5日以内に公開された記事が対象ですが、$daysの数を変えることで調整することができます。

5. サイドバーのカテゴリーをカテゴリーごとにデザインする

サイドバーなどでカテゴリーリストを表示する場合には、下記を使います。

<code>
<?php wp_list_categories(); ?>
</code>

すると、このようなHTMLが出力されます。

<code>
<ul class="cat">
<li class="cat-item cat-item-1"><a href="#">Product</a></li>
<li class="cat-item cat-item-2"><a href="#">Event</a></li>
<li class="cat-item cat-item-3"><a href="#">Access</a></li>
</ul>
</code>

これを利用して、ul内の要素の順番を:nth-childで指定してあげれば、li要素ごとのデザインが可能になります。

<code>
ul.cat:nth-child(1){
  color:red;
}
ul.cat:nth-child(2){
  color:green;
}
ul.cat:nth-child(3){
  color:blue;
}
</code>

上記はシンプルに色を変えているだけですが、CSSを編集することでさらに凝ったデザインも可能です。

6. 日付を「●日前」表示にする

ちょっとした小技ですが、日付を「●日前」と表示させてみましょう。

まずは、functions.phpに下記のコードを追加します。

<code>
function x_time_ago( $type = 'post' ) {
  $d = 'comment' == $type ? 'get_comment_time' : 'get_post_time';
  return human_time_diff($d('U'), current_time('timestamp')) . " " . __('前');
}
</code>

続いて、ループ内の表示させたいところに、下記のコードを挿入します。

<code>
<?php echo x_time_ago(); ?>
</code>

こうすることで、「4日前」といった形で日付が表示されるようになります。