WordPressテーマ作成の時に覚えておくと便利なテンプレートタグ
WordPressテーマを作る時に使用頻度の高いテンプレートタグをまとめておきます。
エンジニア速報は Twitter の@commteで配信しています。
テンプレートタグとは
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をコマンドでインストールする
- [開発環境] Vagrant+Virturlbox+VCCWの使い方
- [雛形] WordPressのif文(条件分岐)
- [雛形] 便利なテンプレートタグ
- [構築] functions.phpに書いておくべきこと
- [構築] パンくずリストを出す方法
- [構築] コメントを設置する簡単な方法
- [管理画面] プラグインの自動更新通知メールを停止させる
- [管理画面] 管理画面のユーザーページに項目を追加する
- [管理画面] カスタムポストを追加する
- [翻訳] 多言語サイトを作るプラグイン「bogo」の使い方
- [フォーム] 「MW WP Form」の使い方と住所自動入力
- [関連記事] プラグインを使わずにWordPressで関連記事を出す方法
- [SEO] タイトルのカスタマイズ
- [pre_get_posts] カテゴリページや検索結果の表示を調整
以上、基本的ですがWordPressテーマ作成の時に知っておくと便利なテンプレートタグや条件分岐でした。
スポンサード リンク
関連記事
- WordPressプラグインの自動更新通知メールを停止させる
- WordPress:pre_get_postsを用いてカテゴリページや検索結果の表示を調整する
- WordPress:タイトルを自在にカスタマイズする方法
- プラグインを使わずにWordPressで関連記事を出す方法
- WordPressプラグイン「MW WP Form」の使い方と住所自動入力(郵便番号で動かない場合)
- WordPressでカスタムポストを追加するシンプルな方法
- WordPress管理画面のユーザーページに項目を追加する
- よく使うWordPressのif文(条件分岐)まとめ
- WordPressでパンくずリストを出す方法
- WordPressのfunctions.phpに書いておくと捗ること
Leave a Comment