ゆるくはじめるWordPress.

最初に覚えておきたいテンプレートタグ【WordPressテーマ作り STEP6】

template-tag-top

テンプレートファイルにHTMLを移したら、次は動的に内容を表示させたい場所にテンプレートタグを入れていきます。
今回はHTMLのヘッダー情報など、サイトの基本的な情報を表す部分を中心に、これは最初に覚えておくと便利!だと思われるテンプレートタグを使用例を交えながらまとめていきたいと思います。

header.phpに使うテンプレートタグの例

元のHTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sitename</title>
<meta name="description" content="サイトの説明文">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="" type="text/css" media="screen">
</head>

例えば上記のようにHTMLのヘッダー情報を書いていた場合、必要な箇所をテンプレートタグに置き換え、不要なものは削除してみると次のようになります。

<head>の書き換え

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen">
<?php wp_head(); ?>
</head>

言語の指定は <?php language_attributes(); ?>

WordPressで設定された言語情報を表示させます。日本語の環境のみで使用するのであればタグを使わずに直接<html lang="ja">としておいても問題なしです。


文字コードは <?php bloginfo( 'charset' ); ?>

WordPressで設定された文字コードの情報を表示させます。
バージョン3.5.0以降は”UTF-8″が固定で表示されるようになったようです。


CSSへのリンクは <?php echo get_stylesheet_uri(); ?>

<?php get_stylesheet_uri(); ?>は現在有効化されているテーマのスタイルシートのURIを返すタグなので、そこからURLを出力して利用するためにechoを入れて使います。

これでスタイルシートがきちんと適応されるようになったので、一度サイトを確認してみて、自分が作った通りの見た目になっていればOK。


<?php wp_head(); ?> を付け加える

テーマとして動かすのに必要な<?php wp_head(); ?>タグを追加します。プラグインを入れて、新たに<head>内にタグが必要になった時などに、ここから勝手に出力してくれたりします。無いと不具合が出たりするので</head>の前に入れておきましょう。


<title>タグは削除

WordPressのバージョン4.1からタイトルタグを自動生成できるようになったので、そちらを利用するために<title>タグ部分を削除。
代わりに下記コードをfunctions.phpに書き加えます。

functions.php

add_theme_support ('title-tag');

これだけで<?php wp_head(); ?>が各ページで適切に<title>タグを生成してくれます。
出力されたページのソースを確認してちゃんと<title>タグが付いていいれば大丈夫。

上記の方法を使いたくない場合は、<?php wp_title(); ?>でも現在のページのタイトルを表示できます。デフォルトの状態だとタイトルの前に»記号が付くので、記号を付けたくない場合は<?php wp_title( '' ); ?>とすれば記号が削除されます。よくある『記事名|サイト名』のようにしたければ<?php wp_title( '|', true, 'right' ); ?>で。


<meta>タグのdescriptionとkeywordsも削除

ページの内容を検索エンジンなどに伝えるために必要な要素ですが、ページごとに内容が違う方が望ましく、むしろ全ページで同じ内容だとSEO的にもよろしくないようなので一旦削除。
これらがなければ検索エンジン側でいい感じに説明文を作ってくれるそうなので、同じ内容が入っているくらいならいっそ無い方が良いって事らしいです。
ページごとに任意の内容を設定できるようにする事も可能なので、それについてはまた後日記事にしたいと思います。
参考:メタディスクリプションは不要?削除してもアクセスに影響なし – Welcart カスタマイズ


ブログの情報を表示させるbloginfo()

サイト名やサイトの説明など、WordPressの設定>一般で設定した情報を<?php bloginfo(); ?>で呼び出す事ができます。下記は一例。

‘name’ サイトのタイトル
‘description’ キャッチフレーズ(サイトの簡単な説明)
‘url’ サイトのURL

bloginfo() 使用例

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>

参考:テンプレートタグ/bloginfo – WordPress Codex 日本語版


グローバルメニューを設置する

グローバルメニューなど、メニューの設置方法は下記ページにまとめました。

テーマにカスタムメニューを追加する【WordPressテーマ作り STEP7】
もしグローバルメニューなどのメニューをサイトに入れたいと思ったら、カスタムメニューが使えるとかなり便利! カスタムメニュー化しておくと、テンプレートファイルを触らずに管理画面から

sidebar.phpに使うテンプレートタグの例

タグクラウドを表示させる

タグクラウドを表示させることができる<?php wp_tag_cloud(); ?>。デフォルトでは下記のように値が設定されていて、使われた回数が多い程タグの文字が大きく表示されるようになってます。

wp_tag_cloud() 初期値

<?php
$args = array(
  'smallest'                  => 8, 
  'largest'                   => 22,
  'unit'                      => 'pt', 
  'number'                    => 45,  
  'format'                    => 'flat',
  'separator'                 => "\n",
  'orderby'                   => 'name', 
  'order'                     => 'ASC',
  'exclude'                   => null, 
  'include'                   => null, 
  'topic_count_text_callback' => default_topic_count_text,
  'link'                      => 'view', 
  'taxonomy'                  => 'post_tag', 
  'echo'                      => true,
);
wp_tag_cloud( $args );
?>

この値を自分で設定し直して、好みの形にカスタマイズする事もできます。
例えば、使用回数にかかわらず常に同じ大きさでタグを表示させたい(最小値も最大値もフォントサイズを100%とする)場合は下記のように。

wp_tag_cloud() 使用例

<h4>TagCloud</h4>
<div><?php wp_tag_cloud('smallest=100 & largest=100 & unit=%'); ?></div>

参考:テンプレートタグ/wp tag cloud – WordPress Codex 日本語版


footer.phpに使うテンプレートタグの例

footer.phpの例

<footer>
<p>© 2016 <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

<?php wp_footer(); ?>を加える

フッターには<?php wp_footer(); ?>タグを付け加えます。
これも<?php wp_head(); ?>同様、入れておかないとないとプラグインがうまく動かなかったりするので、</body>の直前に入れておきましょう。


このあたりまでやってみると、実際WordPressに設定したサイト名がページに反映されていたりして楽しくなってくるんじゃないでしょうか?
今回触れなかったheaderのグローバルメニューや、sidebarのウィジェット化の事も今後記事にしていきたいなと思います。


スポンサーリンク

公開日:2016-1-25