• aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. デザインの記事
  4. WordPressでよく使うテンプレートタグのまとめ【インクルード・出力・ループタグ】

WordPressでよく使うテンプレートタグのまとめ【インクルード・出力・ループタグ】

  • 2015.07.01
  • デザイン
  • WordPress
Updated: 2019.07.12
前回のエントリーではテンプレートファイルについて紹介しましたが、今回はWordPressのカスタマイズに使用する独自のテンプレートタグをまとめました。 CMS(コンテンツ・マネージメント・システム)としては最もメジャーなWordPressですが、その理由の一つにはカスタマイズが魅力的な点が挙げられると思います。カスタマイズには必須となるテンプレートタグですが、たくさんの種類があるので、ここでは目的別に分けてよく登場するものを中心に紹介します。   テンプレートタグを正しく使用しWordPressのメリットを最大限に引き出したサイト作りを目指していきましょう!  
1. 【インクルードタグ】 特定のテンプレートファイルを呼び出します
<?php get_header(); ?> ヘッダーテンプレートのheader.phpを呼び出します
<?php get_footer(); ?> フッターテンプレートのfooter.phpを呼び出します
<?php get_sidebar(); ?> サイドバーテンプレートのsidebar.phpを呼び出します
<?php get_search_form(); ?> 検索フォームテンプレートのsearchform.phpを呼び出します
<?php comments_template(); ?> コメントフォームテンプレートのcomments.phpを呼び出します
<?php get_template_part(); ?> その他任意のテンプレートファイルを呼び出します
   
2. 【出力タグ】 サイトの情報やメタデータ、URLなどを出力します
<?php wp_head(); ?> headタグ内に挿入し各種プラグインなどを出力します
<?php wp_footer(); ?> body終了タグ直前に挿入し各種プラグインなどを出力します
<?php wp_title(); ?> ページのタイトルを出力します
<?php wp_list_pages(); ?> 固定ページのリンク付きリストを出力します
<?php wp_list_categories(); ?> カテゴリーのリンク付きリストを出力します
<?php wp_tag_cloud(); ?> タグのリンク付きリスト(タグクラウド)を出力します
<?php wp_get_archives(); ?> アーカイブのリンク付きリストを出力します
<?php wp_nav_menu(); ?> ナビゲーションメニューを出力します
<?php wp_enqueue_script(); ?> 外部のjavascriptファイルを読み込み出力します
<?php the_widget(); ?> ウィジェットを出力します
<?php next_post_link(); ?> 次の記事へのリンクを出力します
<?php previous_post_link(); ?> 前の記事へのリンクを出力します
<?php bloginfo( 'name' ); ?> ワードプレス管理画面内で設定したサイトのタイトルを出力します
<?php bloginfo( 'description' ); ?> ワードプレス管理画面内で設定したキャッチフレーズを出力します
<?php bloginfo( 'admin_email' ); ?> ワードプレス管理画面内で設定したメールアドレスを出力します
<?php bloginfo( 'charset' ); ?> 適用されている文字コードの種類を出力します
<?php bloginfo( 'atom_url' ); ?> Atom feedのURLを出力します
<?php bloginfo( 'rss2_url' ); ?> RSS 2.0 feedのURLを出力します
<?php echo home_url(); ?> サイトのURLを出力します
<?php echo get_stylesheet_uri(); ?> ベースとなるスタイルシート(styles.css)のURLを出力します
<?php echo get_template_directory_uri(); ?> テーマのディレクトリにあたるURLを出力します
<?php echo get_stylesheet_directory_uri(); ?> スタイルシートのディレクトリ、または子テーマのディレクトリにあたるURLを出力します
<?php the_post_thumbnail(); ?> サムネイル画像を出力します。
<body <?php body_class(); ?>> body要素に個別のクラス名を与えます。
   
3. 【投稿ページタグ】 投稿に関する情報や内容などを出力します
<?php the_date(); ?> 記事が投稿された日時を出力します
<?php the_title(); ?> 記事のタイトルを出力します
<?php the_content(); ?> 記事の本文を出力します
<?php the_excerpt(); ?> 記事の抜粋を出力します
<?php the_permalink(); ?> 記事のURL(パーマリンク)を出力します
<?php the_category(); ?> 記事のカテゴリー(リンク付き)を出力します
<?php the_tags(); ?> 記事のタグを出力します
<?php the_author(); ?> 記事の投稿者を出力します
<?php the_ID(); ?> 記事のIDを出力します
<?php the_terms(); ?> カスタム分類(カスタムタクソノミー)を出力します
上記のテンプレートタグは次で紹介する「ループタグ」というループ処理を行うタグの中で使用します。  
4. 【ループタグ】 投稿記事などを繰り返し(ループ)表示させます
<< 基本ループ >> 投稿がある場合に繰り返し表示されます。プログラミングでいうところのwhile文のような役割になります。
<?php if(have_posts()): ?>
 <?php while(have_posts()): the_post(); ?>

 //ここにループする内容(ワードプレスでの記事)を記述します

 <?php endwhile; ?>
<?php endif; ?>
    << 条件分岐ループ >> 投稿がある場合に繰り返し表示され、無い場合には別の内容を出力します。記事が無い場合のアラートを表示するケースが多いですね。
<?php if(have_posts()): ?>
 <?php while(have_posts()): the_post(); ?>

 //ここにループする内容(ワードプレスでの記事)を記述します

 <?php endwhile; ?>
 <?php else: ?>

 //ここに記事が無い場合の内容を記述します

<?php endif; ?>
    << 条件指定・変更ループ(query_posts) >> メインのループの表示条件を指定したり変更するループです。特定のカテゴリーを指定したり、投稿の表示数を制限したりすることが可能です。他のループへの影響が出ないようにループの最後にはwp_reset_query()で条件をリセットすることを忘れないようにしましょう。
<?php query_posts( $args ); ?> //条件の変更内容を定義
<?php if(have_posts()): ?>
 <?php while(have_posts()): the_post(); ?>

 //ここにループする内容(ワードプレスでの記事)を記述します

 <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?> //条件をリセットする
  条件指定の例:
<?php

 //カテゴリー名と投稿記事の表示数をカッコ内に記述して指定
 query_posts( ‘category_name=カテゴリースラッグ&posts_per_page=10’ );

?>
    << カスタムループ(WP_Query) >> メインとなるループとは別に存在するカスタムループを生成します。サイト内で数種類の独立したループを設置する場合に使用します。上記のquery_postsと同じく条件の指定が可能です。
<?php $the_query = new WP_Query( $args ); ?> //条件を定義
 <?php if($the_query->have_posts()): ?>
 <?php while($the_query->have_posts()):$the_query->the_post(); ?>

 //ここにループする内容(ワードプレスでの記事)を記述します

 <?php endwhile; ?>
 <?php endif; ?>
<?php wp_reset_postdata(); ?> //条件をリセットする
  条件指定の例:
<?php
 //引数($args)に数値を渡す
 $args = array (
 'cat' = カテゴリー名,
 'posts_per_page' => 10
 );

 //カテゴリー名と投稿記事の表示数を引数を使って指定
 $the_query = new WP_Query( $args ); ?>
※query_postsと同じくカッコ内に直接記述することも可能です   今回はWordPressのオリジナルテーマ作成には欠かすことのできないテンプレートタグについてまとめてみました。ループ処理などはPHPの知識なども入ってきていますので少し難しい印象がありますが、複雑な処理も実現できるので可能性がぐんと広がります。
XでシェアLINEで送るはてブに追加

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

  • Showcase
  • Startify UI
  • Functional Gradation Generator
  • Coloooors

keyword search

categories

  • デザイン(30)
  • Photoshop(26)
  • ワークショップ(24)
  • コーディング(18)
  • Sketch(16)
  • Illustrator(12)
  • カラースキーム(10)
  • タイポグラフィ(8)
  • Adobe その他(8)
  • フォトグラフィ(7)
  • Lightroom(4)
  • WordPress(4)
  • ナレッジ(4)
  • サイト運営(3)
  • Figma(2)
  • AfterEffects(2)
  • InVision(1)
  • Premiere(1)

recent articles

  • Figmaで柔らかな印象のメッシュグラデーションを作成する
    read more

    Figmaで柔らかな印象のメッシュグラデーションを作成する

    2022.12.09/Figma
  • Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
    read more

    Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する

    2022.09.23/Photoshop
  • Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
    read more

    Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する

    2022.06.10/Photoshop
  • デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
    read more

    デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)

    2022.06.03/デザイン
  • 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
    read more

    【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点

    2022.04.22/デザイン
  • 安さやチープな印象を強調させるデザインを考えてみる
    read more

    安さやチープな印象を強調させるデザインを考えてみる

    2022.04.01/デザイン
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト支援
  • クリエイティブ制作
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact