HTML→WordPress化のテンプレートタグ忘備録

WordPress化するときにサクッと使えるよう、まとめてみました。

インクルードタグ
テンプレートタグbloginfo()
よく使うテンプレートタグ
ループ
条件分岐
カスタムヘッダー

インクルードタグ

<?php get_header(); ?>　
header.phpの読み込み

<?php get_footer(); ?>
　footer.phpの読み込み

<?php get_sidebar(); ?>
sidebar.phpの読み込み

<?php comments_template(); ?>
comments.phpの読み込み

<?php get_search_form(); ?>
検索フォームの読み込み

get_header(),get_sidebar(),get_footer()はそれぞれのphpファイルを読み込むテンプレートタグ
引数を与えると読み込むファイル名の一部を変更できる。

sidebar-top.php

<?php get_sidebar('top');?>
<!--sidebar-top.phpを読み込む-->

また、get_template_part()でもphpファイルを読み込むことができる

sidebar-top.php

<?php get_template_part('header');?>
<!--header.phpを読み込む-->

WordPress CODEX|インクルードタグ

bloginfo()

bloginfo()は、サイトの基本情報を出力するテンプレート

bloginfo('stylesheet_url')
テーマのディレクトリ内のstyle.cssまでのURLが自動的に出力される

<?php bloginfo('stylesheet_url'); ?>

例

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />

bloginfo('template_url')
テーマのディレクトリのURLが出力される

<?php bloginfo('template_url'); ?>

相対指定のパスを以下のように書き換えることで画像の読み込みが可能になる。

例

<img src="<?php bloginfo('template_url'); ?>/images/header/site_id.png" alt="サイトID" />

<?php bloginfo('name');?>
WordPressの管理画面で設定したブログタイトルを出力

<?php bloginfo('description');?>
WordPressの管理画面で設定した説明文を出力

<?php bloginfo('url'); ?>
サイトのURLを出力

これでもOK

<?php echo home_url('/');?>
<!--トップページへのリンクを出力-->

WordPress CODEX|インクルードタグ

よく使うテンプレートタグ

<?php the_title(); ?>
記事タイトルを表示

<?php the_content(); ?>
記事の本文を表示

<?php the_permalink(); ?>
記事のパーマリンクを表示

<?php the_category(); ?>
記事のカテゴリーを表示（リンク付き）

<?php the_tags(); ?>
記事のタグを表示

<?php the_date(); ?>
記事の投稿日を表示

<?php the_time(); ?>
記事の投稿時間を表示

<?php the_excerpt(); ?>
記事の抜粋を表示

WordPress CODEX|テンプレートタグ

ループ

投稿や固定ページ、アーカイブなどで記事を処理するための仕組み

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

have_posts()は処理すべき記事があるかを判断

the_post()は、処理すべき記事をセットする

the_contentで記事を出力

一連の流れを繰り返すのがループ

これでもOK

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

WordPress CODEX|ループ

WordPress CODEX|ループの使用例

条件分岐

is_home();
トップページが表示されているときにifで囲まれたHTMLを表示

<?php if(is_home()): ?>
  // HTML
<?php endif; ?>

is_single()
is_page()
is_category()

開いているページに応じた条件分岐

カスタムヘッダー

[外観]>[ヘッダー]の管理画面から、メインイメージを管理できるようにする。

functions.php

<?php
//カスタムヘッダー
add_theme_support( //特定のテーマをサポートすることを通知する関数
  'custom-header', //追加する機能として、カスタムヘッダーを指定
  array(
    'width' => 1080, //横幅
    'height' => 300, //縦幅
    'header-text' => false, //ヘッダーにテキストを表示しない
    'default-image' => '%s/images/top/main_image.png', //デフォルトイメージのURL
  )
  );

header.php

<img src="<?php header_image(); ?>" width="<?php echo get_custom_header() ->width; ?>" height="<?php echo get_custom_header() ->height; ?>">

WordPress CODEX|カスタムヘッダー