WordPressのコード一覧

header.phpの中でよく使うWordPressのコード

Table of Contents

headタグ内にWordPressのシステムのコードを出力

※</head>の前にコードを挿入

<?php wp_head(); ?>
</head>

テーマフォルダーのURLを表示

<?php echo get_stylesheet_directory_uri(); ?>

【使用例：CSSの読み込み時に使用】

※functions.phpの中でCSSを読み込む場合はこちら

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">

テーマフォルダー（親テーマ）のURLを表示

※子テーマで使用した場合は、親テーマのフォルダーのURLを取得する

<?php echo get_template_directory_uri(); ?>

CSSを条件分岐して表示

※functions.phpの中でCSSを分岐する場合はこちら

※条件分岐の詳細についてはこちら

<?php if(is_page('company')): ?>
  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/company.css">
<?php elseif(is_single() || is_category()): ?>
  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/single.css">
<?php endif; ?>

<body>タグにページに関連するクラス名を表示

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

サイトのタイトルを表示

※管理画面の[設定] > [一般] >「サイトのタイトル」に設定した内容を出力

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

【使用例：サイトのロゴのaltタグに使う】

<a href="<?php echo esc_url(home_url('/')); ?>">
  <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.svg" alt="<?php bloginfo('name'); ?>" width="170" height="100">
</a>

WordPressのトップページのURLを表示

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

もしくは

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

【使用例：グローバルナビゲーションのリンク先に使う】

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

指定したページの場合にクラス名を表示

<?php if(is_page('profile')) echo ' class="current"'; ?>

【使用例：グローバルナビゲーションの現在地表示に使う】

<ul>
  <li <?php if(is_page('profile')) echo ' class="current"'; ?>><a href="<?php echo esc_url(home_url('/')); ?>profile/">Profile</a></li>
  <li <?php if(is_single() || is_archive() || is_home()) echo ' class="current"'; ?>><a href="<?php echo esc_url(home_url('/')); ?>news/">News</a></li>
</ul>

カスタムメニューを表示

※必ずfunctions.phpの記述とセットで使用してください

<?php 
  wp_nav_menu(array(
    'theme_location' => 'main-menu',  // グローバルナビゲーション用のmain-menuを表示
    'container' => 'nav',  // ※必要なら追加<div>で出力されるソースコードを<nav>に変更
  )); 
?>

検索ボックスを表示

オリジナルのボタン画像を入れてサイト全体を検索する

<form id="form-search" class="search-form" action="<?php echo esc_url(home_url('/')); ?>" method="get">
    <input type="text" id="search" name="s" placeholder="記事を検索" class="search-box" value="<?php the_search_query(); ?>">
    <input type="image" src="<?php echo get_stylesheet_directory_uri(); ?>/img/icon-search.svg" alt="検索" class="btn-search">
    <!--<input type="hidden" name="post_type" value="diary"> ※特定のカスタム投稿のみ検索範囲にする場合は valueにカスタム投稿名を書く（例）diary-->
</form>