calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

WordPressテーマ作成の時に覚えておくと便利なテンプレートタグ

  • 作成：2018/01/22
  • 更新：2018/12/27
  • WordPress

WordPressテーマを作る時に使用頻度の高いテンプレートタグをまとめておきます。

PR
IT/WEB業界への転職なら
Sponsored Link

テンプレートタグとは

CMSでは、html等の骨組みにデータを流し込んで出力します。

WordPressのテンプレートタグとは、タイトルや画像・サイトURLの絶対パスなどを読み込み出力させるためのものです。テンプレートタグは自動で絶対パスやサイトの設定等を読み込むので、サイトを移行させた時もURLやパスなどを書き換える必要がなくなり便利です。WordPressテーマ作成をする時に必ず使う機能の一つなので是非覚えておきましょう。

トップページURL出力

bloginfo('homeやtemplate_directory')などは廃止されています。URLは以下のタグを使います。管理画面>設定>サイトアドレスの部分を出力。

<?php echo home_url(); ?>

// 例
<?php echo home_url('/foo/contact'); ?>

ページタイトルだけを出力する新しい方法

※2018/01/28追記。wp_titleはWordPress4.4以降から非推奨になったので、「wp_get_document_title」関数を使いましょう。

// functions.phpに以下を記述してページタイトルだけを呼び出せるように設定
add_theme_support( 'title-tag' );
function nohead_document_title($title){
	if(!doing_action('wp_head')){
	//doing_actionで、wp_headから呼ばれていない場合を判別
	unset( $title['site'] ); //サイトタイトルを削除しページタイトルだけを残す
	}
return $title;
}
add_filter('document_title_parts','nohead_document_title');

// body内の出力したい場所にこれを書く
<?php echo wp_get_document_title(); ?>

URL無害化

URLとして無効・危険な文字を防ぎたい場合はesc_urlをつけてもOK。

<?php echo esc_url( home_url() ); ?>

bodyにクラス付与

body要素にclass属性をつけます。

<body <?php body_class( $class ); ?>>

img パス

画像のパスは使用頻度高し。

<?php echo get_template_directory_uri(); ?>

// 例
<img src="<?php echo get_template_directory_uri(); ?>/img/foo.png" alt="">

style.cssのパス

bloginfo('stylesheet_url')は非推奨。get_stylesheet_uri()は、スタイルシートの URI を返します。

<?php echo get_stylesheet_uri(); ?>

// 例
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">

テンプレートパーツ組み込み

ページ内にあるバナーなど共通のコードを読み込む。

<?php get_template_part();?>

// 例 include/banner.php ファイルを読み込む
<?php get_template_part('include/banner');?>

グローバルナビゲーション

グローバルナビゲーションなどの中身は管理画面で変更できるように、カスタムメニューに登録します。以下はナビ名をgnavにして、コード内のdivを消してulをつけた例。後はフッターも同じ要領で追加しておく。

<?php
  wp_nav_menu(
    array(
      'menu' => 'gnav',
      'container' => '',
      'items_wrap' => '<ul class="foo">%3$s</ul>'
    )
  );
?>

アーカイブ リスト

日付のアーカイブを出力。以下はカスタムポスト「news」のアーカイブ数を12ヶ月で表示させた場合。

<?php
$my_archives = array(
	'type'            => 'monthly',
	'limit'           => '12',//アーカイブ数を12ヶ月
	'format'          => 'html',
	'before'          => '',
	'after'           => '',
	'show_post_count' => false,//投稿件数
	'echo'            => 1,
	'order'           => 'DESC',
	'post_type'     => 'news'
);
wp_get_archives( $my_archives );
?>

テンプレートタグ/wp get archives - WordPress Codex 日本語版

条件分岐

html / phpを入れ込めるif文。

<?php if() : ?>
<?php elseif () :?>
<?php else : ?>
<?php endif; ?>

// 例
<?php if(is_page('profile')) : ?>
  profileページの時、出力
<?php elseif (is_page('lp')) :?>
  lpページの時、出力
<?php else : ?>
  その他
<?php endif; ?>

ブラウザ判別

ブラウザ判別用の条件分岐。

<?php
global $is_IE;
if ( $is_IE ) {
// IE
}
?>

グローバル変数一覧

$is_iphone / iPhone Safari
$is_chrome / Chrome
$is_safari / Safari
$is_opera / Opera
$is_macIE / Mac IE
$is_winIE / Windows IE
$is_gecko / FireFox
$is_IE / IE

【WordPress】各ブラウザごとに条件分岐できるグローバル変数 - ONZE

グローバル変数 - WordPress Codex 日本語版

モバイル判別

モバイルの時だけ広告を表示したい時など。

<?php if ( wp_is_mobile() ) : ?>
<?php else: ?>
<?php endif; ?>

functions.phpに関しては、WordPressのfunctions.phpに書いておくと捗ることに書きました。合わせて読むとWordPressコーディングが捗ると思います。

WordPressカスタマイズに便利なテクニックはこちら

以上、基本的ですがWordPressテーマ作成の時に知っておくと便利なテンプレートタグや条件分岐でした。

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。