WordPress

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

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

 

インクルードタグ

 

<?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ファイルを読み込むテンプレートタグ。引数を与えると読み込むファイル名の一部を変更できる。

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

 

 

 

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

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

 

WordPress CODEX|インクルードタグ

 

bloginfo()

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

 

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

テーマのディレクトリ内のstyle.cssまでの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(); ?>

記事の投稿時間を表示

 

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|ループ

 

 

条件分岐

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

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

 

  • is_single()
  • is_page()
  • is_category()

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

 

 

 

カスタムヘッダー

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

functions.php

//グローバルメニュー
register_nav_menus(
  array(
    'place_global' => 'グローバル'
  )
);

 

<?php wp_nav_menu(array(
  'container' => 'nav',
  'container_class' => 'menu',
))
?>

 

 

wp_nav_menuに設定できるオプション

<?php
$defaults = array(
  'theme_location'  => '',    //カスタムメニューの名前
  'container'       => 'div', //<ul>を囲む親要素のタグ
  'container_class' => '',    //親要素のクラス名
  'container_id'    => '',    //親要素のid名
  'menu_class'      => 'menu',//<ul>のクラス名
  'menu_id'         => '',    //<ul>のid名
  'before'          => '',    //各リンクテキストの前につけるテキスト
  'after'           => '',    //各リンクテキストの後につけるテキスト
  'link_before'     => '',    //<a>タグの前につけるテキスト
  'link_after'      => '',    //<a>タグの後につけるテキスト
);
wp_nav_menu( $defaults );

 

このオプションをうまく使って、CSSを適用しやすいように設定していく。

 

 

アイキャッチ画像の設定

アイキャッチを登録できるようにする(function.php)

// アイキャッチ画像
function theme_setup(){
    add_theme_support('title-tag');    
    add_theme_support('post-thumbnails');    
  }
add_action('after_setup_theme','theme_setup');

 

 

アイキャッチ画像をページに表示

    <?php
  if(has_post_thumbnail()):
    the_post_thumbnail();
  endif; ?>

 

 

サイズを指定する書き方

the_post_thumbnail('thumbnail');  //小サイズ(最大150px)
the_post_thumbnail('medium');     //中サイズ(最大300px)
the_post_thumbnail('large');      //大サイズ(最大1024px)
the_post_thumbnail('');           //オリジナルサイズ

 

 

アイキャッチがない場合別の画像を表示する

<?php if(have_posts()): 
    while (have_posts()): 
        the_post();
        if (has_post_thumbnail()) : 
            the_post_thumbnail('large'); 
        else : ?>
            <img src="<?php echo TEMPLATEPATH; ?>/img/nowprinting.jpg" alt="画像準備中">
        <?php endif ; 
    endwhile;
else : ?>
<p>表示できる記事がありません。</p>
<?php endif; ?>

 

 

<img>タグにアイキャッチのurlを出力する方法

<img src="<?php the_post_thumbnail_url('サムネイルのサイズ指定'); ?>" alt="" class="">

この方法なら、クラス名も簡単に指定できるので、スタイルの適用がやりやすい。

 

 

その他

 

CSS、JavaScriptの読み込み

<?php
function my_scripts() {
  wp_enqueue_style( 'style-css', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all' );
  wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

 

<?php get_header(); ?>によって読み込まれる。

カテゴリーページのタイトルから「カテゴリー:」をなくす

/** カテゴリページのタイトルから "カテゴリ:"の接頭語を削除する */
add_filter( 'get_the_archive_title', function ($title) {
    if ( is_category() ) {
        $title = single_cat_title( '', false );
    } elseif ( is_tag() ) {
        $title = single_tag_title( '', false );
    } elseif ( is_author() ) {
        $title = '<span class="vcard">' . get_the_author() . '</span>' ;
    }
    return $title;
});