taccuma note

WordPress初心者がまず押さえておきたいテンプレートタグまとめ

WordPressのテーマを作成するときに色々なテンプレートタグが出てきますよね。全部覚えるのはなかなか難しいですが・・・これは押さえておかないとまともなテーマが作成できないぞっ!というものに限ってまとめてみました。

次テーマを作成するときのための自分用のメモも兼ねてます(;^ω^)
かなり長くなったので、複数ページに分けてみました。

header.php周辺で使いそうなタグ

<?php language_attributes(); ?>

言語属性の指定に使います。

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
~中略~

こんな風に使うと…

<!DOCTYPE HTML>
<html lang="ja">
<head>
~中略~

と表示されます。無理に使う必要もないけど、まぁ使った方が良いかな?ってレベル。

2.<?php bloginfo('name'); ?>

ブログタイトルを表示させるために使います。

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<title><?php bloginfo('name'); ?></title>

通常はこんな感じでOKですが、これだと特定の記事を表示させているときもタブにはブログのタイトルだけが表示されてて何だか変です。

記事タイトル | ブログタイトル

記事タイトル | ブログタイトル

個別に記事を表示させてるときはタブにも記事タイトルを表示させたい!そんなときは「All in One SEO Pack」という有名なプラグインを使うか・・・

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>

表記方法をこんな風にします。こうすると「All in One SEO Pack」を使わなくても、個別記事を表示させているときや固定ページを表示させているときは「ページタイトル | ブログタイトル」とタブに表示されます。

3.<?php echo get_stylesheet_uri(); ?>

今有効にしてるテーマのスタイルシートの場所(URL or URI)をはき出します。

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
~中略~
<!-- ▼スタイルシート -->
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css">

<?php echo get_template_directory_uri(); ?>

いま有効にしてるテーマのディレクトリ(フォルダ)までの場所(URL or URI)をはき出します。テーマディレクトリ直下にあるimagesフォルダ内の画像を読み出したい時などに使います。

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
~中略~
<!-- ▼スタイルシート -->
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css">
<!-- ▼ファビコン -->
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">

<?php wp_head(); ?>

header.phpの</head>直前にいれなければいけない必須のテンプレートタグ。これを忘れるとプラグインが動かないとか不具合が起こるので注意。

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
~中略~
<?php wp_head(); ?>
</head>

<?php body_class(); ?>

bodyの開始タグにそのページがどんなページなのか?などのクラスをつけてくれるテンプレートタグです。トップページには「home」、個別の記事表示にしたときは「single」、固定ページには「page」などのクラスが付きます。個人で作成して自分で使うテーマには無理につける必要もないタグですが、あったらあったでCSSを使ってスタイリングしやすくなります。たとえば、トップページと固定ページ、記事ページでヘッダーやフッターの色を変えるとか…。

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>
~中略~
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

※トップページでの表示例↓

<body class="home blog logged-in admin-bar no-customize-support">

<?php get_search_form(); ?>

検索フォームを読み出すテンプレートタグです。WordPressデフォルトの検索フォームじゃなく、自分でカスタマイズしたい場合はindex.phpやsingle.phpなどと同じ階層に「searchform.php」を作成して…その中にフォームのソースコード(<form>~</form>)をいれましょう。そうすればこのテンプレートタグはsearchform.phpを読み込んで表示させます。

<html <?php language_attributes(); ?>>
<head>
~中略~
</head>
<body <?php body_class(); ?>>
<header>
<div id="headerTopNavWrap">
<ul>
<li><a class="twitter-hover" href="https://twitter.com/taccuma" target="_blank"><i class="icon-twitter"></i>Twitter</a></li>
<li><a class="rss-hover" href="#"><i class="icon-rss"></i>RSS</a></li>
</ul>
<div class="searchWrap">
<?php get_search_form(); ?><!-- ※検索フォーム読み込み -->
</div>
</div>

<?php echo home_url('/'); ?>

トップページへのURL(URI)をはき出すテンプレートタグです。

<a href="<?php echo home_url('/'); ?>">Home</a>

ナビゲーション部分の「トップページに戻る」リンクを作るときなどに使えますね。

この記事をシェアする

コメント

コメントは管理人の承認後に公開されます...

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最近の投稿

おすすめ

タグクラウド

カテゴリー