WordPress
カスタマイズ事例

WORDPRESS CUSTOMIZATION

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

デザインテーマを作る(初級)」に続いて、次はちょっと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を学んでゼロから自社サイトを作りたいという方は、こちらのページが人気でオススメです。
WordPressで会社ホームページをつくる手順
https://100webdesign.jp/services/wordpress/flow/

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!