• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

WordPressカスタマイズ5選!それ、こうやればできます!記事一覧/アーカイブページ編

WordPressのカスタマイズ

記事一覧ページやアーカイブページなど、複数の投稿をループして表示するページに使える
WordPressカスタマイズ方法をご紹介します。

WordPressでカスタマイズするときの注意点

WEBサイトは作成することがゴールではありません。

あくまでもリターン(直接的な収益、集客、ブランディングなど)を得ることがゴールであり、
そのために長期間運営していくことが必要になります。

その前提をふまえて、WordPressカスタマイズにおける最低限の注意点は以下の3点です。

WordPressコアファイル(wp-includesなど)をカスタマイズしない

パソコンやスマートフォンなどのアプリケーションは定期的にアップデートが行われますが、
WordPressもセキュリティの向上や機能の追加、仕様変更のアップデートが頻繁に行われます。

アップデートとは、WordPressのコアファイルを置き換えているということになります。
つまり、WordPressのコアファイルを直接カスタマイズしている場合は、
アップデートでカスタマイズが上書きされてしまうということです。

視点を変えればアップデートしなければ上書きはされないという考え方もできますが、
それはさらにオススメできません。

なぜなら、WordPressは世界中で多くのシェアを確保しており、
それだけハッカーの標的になることも多いです。

アップデートの中にはそういった攻撃から守るために、
脆弱性を修正するセキュリティ対策も含まれているのです。

アップデートされていない状態が続けばそれだけリスクが増していきます。
カスタマイズは必ずテーマファイル(wp-content/themes)に対して行いましょう。

配布テーマを利用する場合は子テーマを利用する

オリジナルテーマを利用する場合はその限りではありませんが、
配布されているテーマを利用する場合は子テーマを利用しましょう。

理由は配布テーマについても機能追加、仕様変更、セキュリティ対策を含めた
アップデートを開発者が定期的に行うためです。

子テーマを利用すれば必要な範囲だけのカスタマイズを行うことができ、
なおかつ親テーマのアップデートがあってもカスタマイズの内容を維持することが可能です。

目的を達成するための優先順位を考える

カスタマイズの記事でこれをご紹介するのも矛盾しているように見えるかもしれませんが、
あくまでも目的を達成するための手段としてWEBサイトを作成し、運営していることは忘れないでください。

時間をかけて自分でカスタマイズをすることが本当に目的を達成するために必要なのか、
一歩立ち止まって考えてみることをオススメします。

なぜなら本来時間をかけて注力すべきことは、コンテンツの中身であると考えるからです。

フリーランスや制作会社へ依頼をするといった方法を選ぶことで
コストと引き換えにコンテンツの中身に注力する時間を確保することもできます。

世界中のエンジニアがプラグインを多数配布していますので、
その中から求める機能を満たしてくれるものが見つかることもあるでしょう。

ご自身でのカスタマイズはあくまでも選択肢のひとつだということです。
そのうえで、本当に必要な方のお役に立てば幸いです。

アイキャッチ画像に関する情報を取得する

アイキャッチ画像の情報を取得だけ行い独自にカスタマイズしたい場合、
以下のテンプレートタグを利用することで取得が可能です。

// ループ内で
get_the_post_thumbnail_url();// URL
get_post_thumbnail_id();// ID
wp_get_attachment_image_src( $thumbnail_id, 'full' )[1];// 横幅
wp_get_attachment_image_src( $thumbnail_id, 'full' )[2];// 高さ
get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true );// alt(代替テキスト)
get_post( $thumbnail_id )->post_title;// title(タイトルテキスト)
get_post( $thumbnail_id )->post_excerpt;// キャプション
get_post( $thumbnail_id )->post_content;// 説明

補足:代替テキスト、タイトル、キャプション、説明の設定方法

代替テキスト、タイトル、キャプション、説明は
メディアライブラリへ画像をアップロードした際に設定することが可能です。

WordPressの管理画面内にあるメディアファイルで代替テキストやタイトル、キャプション、説明が設定ができるところ

補足:アイキャッチを有効化するには

オリジナルテーマでアイキャッチを有効化する場合は、
ご利用のテーマ内の functions.phpに以下を追加しましょう。

add_theme_support('post-thumbnails');

アイキャッチ画像をimgタグではなくbackground-imageとして表示する

カーソルを合わせた時にアイキャッチ画像がズームするようなアニメーションは
よく記事の一覧で採用されているデザインです。

imgタグでも実装できますがbackground-imageのほうが手軽に実装しやすいです。

ただCSSファイル内ではPHPの記述は使えないため、
ループの中でアイキャッチを呼び出し、インラインスタイルで出力します。

// ループ内で
<?php 
$thumb_url = get_the_post_thumbnail_url();
?>
<div class="post-thumbnail" style="background: url(<?php echo esc_url($thumb_url); ?>) no-repeat; background-size: cover;">

その記事が一番最初の記事かどうかを判定する

新着記事のみ目立つようにデザインを変えることはよくあります。
そういった場合に最初の記事かどうかを判定する方法です。

functions.php

/* 最初の記事を判定する関数
-----------------------------------------*/
if(!function_exists('is_first')) {
  function is_first(){
    global $wp_query;
    return ($wp_query->current_post === 0);
  }
}

実際のループ部分

if( is_first() ) {
  // 最初の記事の処理
} else {
  // それ以外の記事の処理
}

3日以内や1週間以内など、期間を指定してその期間内の記事かを判定する

指定した期間の記事にはNEWを表示するといった仕様にしたい場合に有効な方法です。

functions.php

/* 指定した○日以内の記事か判定する関数
-----------------------------------------*/
if(!function_exists('is_new_post')) {
  function is_new_post($the_post, $days) {
    $today = date_i18n('U');
    $posted = get_the_time('U',$the_post->ID);
    $elapsed = date('U',($today - $posted)) / (60*60*24) ;

    if( $days > $elapsed ){
      return true;
    } else {
      return false;
    }
  }  
}

実際のループ部分

if( is_new_post($post, 3) ) {
  // 3日以内に投稿された記事の場合の処理
} else {
  // それ以外の記事の場合の処理
}

ページネーションを実装する

一覧ページで次のページや前のページへ進むためのリンクは
投稿されている記事数、最大表示数の設定に応じて自動生成されるようページネーションを実装します。

<div class="pagination">
  <?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' => 2,
    'current' => ($paged ? $paged : 1),
    'prev_text' => '',
    'next_text' => '',
  )); 
  ?>
<!-- /.pagination --></div>

最後に

特に投稿記事のループを使う場面で利用できそうなものを抜粋してご紹介させていただきました。
参考になりましたら幸いです。

なお、WordPressのカスタマイズについては、記事にしてほしいリクエストも現在募集中です。
もし何かご希望があれば、以下よりリクエストお待ちしております。
WordPressでのホームページ作成、カスタマイズでのお困り事募集

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND