CMS構築基礎③

訓練日誌
2025.06.26

TOPページの活用法

WordPressでは、TOPページに表示されるテンプレートの優先順位が決まっています。

index.php: 基本となるテンプレートファイルで、カテゴリーやタグの一覧ページなどにも使用されます

home.php: index.phpよりも優先してTOPページに表示されます

front-page.php: 最も優先度が高いTOPページのテンプレートです。このファイルが存在する場合、管理画面の表示設定で固定ページがフロントページに設定されていてもfront-page.phpが優先的に表示されます

投稿ページの活用法

投稿ページは、企業の「新着情報」や「更新が必要な記事」など、時系列で情報を提供したい場合に便利です

・ 記事には日付、コメント、前後の記事リンクなどが表示されます

・ テーマによっては、関連記事の表示や日付の非表示設定が可能です

・ 作成した記事は更新順に時系列で並び、必ず「投稿記事一覧」のようなアーカイブページに表示されます

・カテゴリーを設定して記事を分類できます

・パーマリンク設定が適用されます

固定ページの活用法

固定ページは、「会社案内」「お問い合わせ」「サイトマップ」など、時系列に並ぶ必要のない単体のページを作成する際に使用します

・ 固定ページ同士で階層を作ることができます

・ 固定ページごとに適用するデザインテンプレートを切り替えることができます

・ カスタムメニューを使って固定ページへのリンクを表示できます

・ 投稿記事のように、カテゴリーやタグの設定はできません

・ 固定ページのコンテンツ内に直接PHPコードを記述しても動作しません

固定ページのカスタムテンプレート

固定ページごとにレイアウトやデザインを変更したい場合に「カスタムテンプレート」を利用できます。これにより、サイドバーのデザイン変更や、ページに合った広告・ナビゲーションの配置などが可能になります

・ テンプレートとなるPHPファイル（例: ○○.php）を作成します

・ ファイル名は、WordPressで既存のテンプレート名やテンプレートパーツ名以外であれば自由に設定できます

条件分岐タグ

WordPressには、表示しているページの種類によって異なるコンテンツを表示するための「条件分岐タグ」が用意されています。これらをif文と組み合わせて使用します。

タグ説明
is_home()メインページ（ブログのトップページ）
is_front_page()フロントページ
is_admin()管理画面
is_single()投稿ページ
is_page()固定ページ
is_category()カテゴリーページ
is_tag()タグページ
is_date()日付別ページ
is_archive()アーカイブページ
is_search()検索結果ページ
is_404()404 Not Found ページ

if文の活用

PHPのif文を使って、特定の条件に合致した場合にのみコンテンツを表示させることができます

<?php if (条件) : ?>
    条件に当てはまるときに表示するものをココに書く
<?php else: ?>
    条件に当てはまらないときに表示するものをココに書く
<?php endif; ?>

複数の条件を細かく分岐させたい場合は、elseifを使用します

<?php if ( is_single() ) : ?>
    // 記事ページで表示するものをココに書く
<?php elseif ( is_page() ) : ?>
    // 固定ページで表示するものをココに書く
<?php else: ?>
    // 上記のどちらにも当てはまらないときに表示するものをココに書く
<?php endif; ?>

注意点:

・ ifやelseifの後にはコロン（:）を記述します（セミコロン;はエラーになります）

・ endifの後にはセミコロン（;）を記述します

・ 括弧の数に注意し、全角文字は使用しないようにしましょう

ループ処理のタグと合わせる

WordPressで投稿コンテンツを表示させるには、以下のループ処理のタグを組み合わせます

・ have_posts(): 次の記事があるかを確認します

・ the_post(): 次の記事を取得します

・ while: 条件が真の間、処理を繰り返します

一般的な投稿ページの記述例：

<?php if(have_posts()): while(have_posts()):
    the_post();?>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
<?php endwhile; endif; ?>

これは、「記事があればタイトルをh1タグで囲み、次に本文を表示させるという処理を、ある記事の数だけ繰り返して行う」という意味です。

他のページに投稿を表示させる

「query_posts」を使用すると、ループ処理の前に表示させたい記事の条件（件数や特定カテゴリーなど）を追加することで、他のページに投稿を一覧表示させることができます

<?php query_posts('showposts=5&cat=0'); while(have_posts()) : the_post(); ?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
<?php endwhile; ?>

この例では、「showposts=5」で表示件数を5件、「cat=0」で全てのカテゴリーから記事を抽出しています（cat=0は全カテゴリーを意味します。）

アイキャッチ画像の表示方法

WordPressの投稿記事には、サムネイル画像として「アイキャッチ」を設定できます

任意の場所で以下のコードを記述すると、アイキャッチ画像が表示されます

<?php the_post_thumbnail(); ?>

サイズを指定したい場合は、以下のいずれかを記述します。

・ <?php the_post_thumbnail('thumbnail'); ?> (サムネイルサイズ)

・ <?php the_post_thumbnail('medium'); ?> (中サイズ)

・ <?php the_post_thumbnail('large'); ?> (大サイズ)

・ <?php the_post_thumbnail('full'); ?> (フルサイズ)

アイキャッチ機能を使用するには、テーマのfunctions.phpファイルに以下のコードを追加する必要があります

add_theme_support('post-thumbnails');

CSSのクラス名を追加したい場合は、以下のように記述します。

<?php the_post_thumbnail('thumbnail', 'class=sample'); ?>

ウィジェットの活用について

ウィジェットは、WordPressのサイドバーやフッターなどの特定のエリアに、カレンダー、アーカイブ、検索機能といったコンテンツを簡単に配置できる機能です

ウィジェットを設置するには、以下の手順が必要です

  1. sidebar.phpなど表示させたいパーツファイルに以下のコードを記入します。
    php <?php dynamic_sidebar('sidebar'); ?>
  2. functions.phpにウィジェット用のコードを記入します。
    php if ( function_exists('register_sidebar')) register_sidebar(array( 'name'=>'sidebar', 'id' => 'sidebar', 'before_widget'=>'<div>', 'after_widget'=>'</div>', 'before_title' => '<h3>', 'after_title' => '</h3>' ));
  3. 上記の設定を行うと、管理画面に「ウィジェット」メニューが表示され、ウィジェットの追加や設定が可能になります

コメント