WordPressでテーマをインストールしたものの一覧表示のレイアウトを多少修正したいなー、といった場合に使えるテクニックです。
目次
インストールしたテーマのディレクトリを探す
WordPressにインストールしたテーマはWordPress本体をインストールしたディレクトリに存在するwp-content中のtheme内に格納されています。
例えばmy-custom-themeという名前のテーマをインストールした場合は、下記ディレクトリにテーマファイルが格納されています。
/wp-content/themes/my-custom-theme
テーマディレクトリを見つけることが出来たら早速中身を覗いてみましょう。
一覧表示に用いられているphpファイルを探す
一覧表示用として用いられているファイルは、テーマディレクトリ内に存在しているhome.phpまたはindex.phpです。
両方存在している場合はhome.phpが優先して利用されますのでこちらを修正します。
どちらかしか存在しない場合は、そのファイルが一覧表示用として用いられますのでそれを修正します。
表示部分のコードを修正する
一覧表示用のphpファイルの内容を見てみましょう。
例えば下記の様になっていたとします。
<div class="items">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<dl>
<dt>
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ): ?>
<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/noimg.png" alt="no image" width="100" height="100" />
<?php endif; ?>
</a>
</dt>
<dd>
<p class="title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</p>
<div class="description">
<?php the_excerpt(); ?>
</div>
</dd>
</dl>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div>
この場合、<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>という記述から<?php endwhile; else: ?>という記述までが、記事一件分の内容を表示している箇所となります。
つまり、ここを自分の好きなようにカスタマイズすることで一覧表示のレイアウトを変更出来るということになります。
もし上記のような記述が見当たらず、開いたファイル内で
<?php get_template_part( 'list' ); ?>
というようにget_template_part()関数が記述されていた場合は、そこで指定されている名前のphpファイルがテーマディレクトリ内に存在しているので、そのファイルを確認してみましょう。
この場合はlist.phpとなります。
好きな構造のHTMLに修正した後に、<?php the_permalink(); ?>や<?php the_excerpt(); ?>といった記事内容を表示する関数を埋め込み完了となります。
よく用いられる代表的な関数は下記のとおりです。
<?php the_permalink(); ?>- 記事詳細ページへのリンクを出力します
<?php the_post_thumbnail( 'thumbnail' ); ?>- 記事に登録したアイキャッチ画像のサムネイルを出力します
<?php the_title(); ?>- 記事のタイトルを出力します
<?php the_excerpt(); ?>- 記事の抜粋文を出力します
また、上記例に出てくる<?php if ( has_post_thumbnail() ): ?>という部分は、投稿に対してアイキャッチ画像が設定されているか否かを判定しており、
もしアイキャッチ画像が設定されている場合は<?php if ( has_post_thumbnail() ): ?>から<?php else: ?>までの部分が出力され、設定されていない場合は<?php else: ?>から<?php endif; ?>までの部分が出力されます。
おわりに
今回は一覧表示の部分のみのカスタマイズを例に解説しましたが、その他のページにおいても同様の手順でカスタマイズ可能です。個別投稿ページの場合はsingle.php、固定ページはpage.php、アーカイブページはarchive.php、カテゴリーページはcategory.php、タグページはtag.phpといったように対応しているので、対応するphpファイルが存在する場合はそのファイルを修正すればOKです。存在しない場合はindex.phpで代用されるので、index.phpを修正するようにしましょう。