WordPressカスタマイズ事例

デザインテーマを作る(中級)

デザインテーマを作る(初級)」に続いて、次はちょっとWordPressの関数を使って、CMSっぽくしてみましょう。
 
その際にあらかじめ知っておく必要があるのが
「WordPressにはページの種別のようなものがあってそれぞれにテンプレートがある」
ということです。

以下に代表的なものを挙げます。

  • 固定ページ:page.php
  • 投稿記事ページ:single.php
  • 投稿アーカイブページ:archive.php
  • 投稿カテゴリアーカイブページ:category-[カテゴリ名].php
  • カスタム投稿の場合
    • 記事ページ:single-[カスタム投稿名].php
    • アーカイブページ:archive-[カスタム投稿名].php
    • タクソノミー(カスタム分類)アーカイブページ:taxonomy-[カスタム投稿名].php
  • 検索結果ページ:search.php

ざっとこのくらいあります。
他にも合わせ技的なテンプレートもありますが、基本上記だけ把握しておけばWordPressでデザインテーマは作れます。
 
さて、次にページレイアウトについて。
WordPressでは、ページのレイアウトについて3つの部分はデフォルトでテンプレートとして持っています。

  • ヘッダー:header.php
  • フッター:footer.php
  • サイドバー:sidebar.php

これらの3つを使って共通部を表現していきます。
 
 
それでは、WordPressで固定ページを作ってみます。
固定ページは page.php でしたね。
かなりシンプルに書きますので、皆さんは自分なりにアレンジしてください。

<?php get_header(); //ヘッダー:header.phpを取得、表示 ?>
<div class="container">
<div class="row">
<div class="col-sm-9">
<?php while ( have_posts() ) : the_post(); //管理画面で登録した内容を取得、表示 ?>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
<div class="col-sm-3">
<?php get_sidebar(); //サイドバー:sidebar.phpを取得、表示 ?>
</div>
</div>
</div>
<?php get_footer(); //フッター:footer.phpを取得、表示 ?>

投稿ページやアーカイブページも同様の流れです。
このようにWordPressではテンプレートファイルで登録内容と共通部を取得してhtmlにすることができます。


関連するWordPressカスタマイズ事例