WP テーマ作成手順

themesフォルダ内に作成したいテーマフォルダを作成

style.cssを作成(必須)

/*
Theme Name: BISTRO CALME
Theme URI: http://example.com
Description: BISTRO CALMEのテーマです。
Version: 1.0
Author: Nakashima
Author URI: https://gihyo.jp
*/

index.phpを作成(必須)

index.htmlがあればindex.phpに拡張子を変更

画像とCSSファイルパスを修正

テンプレートタグ:get_template_directory_uri() 使用してテーマディレクトリのURIを変更する。 ※子テーマの時はget_stylesheet_directory_uri()を使用

//CSS
<link href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.min.css" rel="stylesheet">

//img
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/logo@2x.png" alt="BISTRO CALME">

WEBサイトのタイトルを表示する

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

WP管理画面からテーマの変更

『外観』→『テーマ』から作成したテーマを選択し、有効にする。

テンプレート階層を考える

http://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg

上記をよくみてテンプレート階層を考え作成していきます。

主なテンプレートファイル

  • front-page.php トップページ

  • single.php 投稿記事ページ

  • page.php 固定ページ

  • category.php カテゴリーページ

  • serch.php 検索結果ページを表示

  • archive.php 記事一覧を表示

  • 404.php 404エラーページを表示

テンプレートを作り込む

トップページへのリンクを貼る

テンプレートタグ:home_url()を使用してTOPページのURLを返します。

<h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/logo@2x.png" alt="BISTRO CALME"></a></h1>

テンプレートタグ:body_class()を使用してbodyタグのclass属性を表示

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

テンプレートを分割

headerやfooter、sidebarなどは別ファイルにして管理し、インクルードタグで読み込みします。

<?php get_header(); ?>
<?php get_footer(); ?>

最初に外部から不正アクセスされ処理を実行するのを防ぐセキュリティを設置(全てのファイルに設置)

各ファイルの冒頭に下記を記述

<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>

header.phpならこんな感じ

<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>

  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="format-detection" content="telephone=no">

  <!-- css -->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/shared/css/reset.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/shared/css/common.css">
<?php wp_head(); ?>

</head>

CSSに日付を入れるようにする

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css?<?php echo date('Ymd-Hi'); ?>" type="text/css">

自動でcssに日付を入れるようにするはこちら

head内にwp_head関数を記述する

wp_head関数を記述することを推奨されています。プラグインなどの機能が使えなくなることもあるので忘れずに記述します。

<?php
wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css' );
wp_enqueue_script('jquery');
wp_enqueue_script('bistro-calme-main', get_template_directory_uri() . '/assets/js/main.js');
wp_head();
?>
</head>

footer.phpにもwp_footer関数を記述する

<?php wp_footer(); ?>
</body>
</html>

wp_body_open関数はbodyタグの直後に何かを挿入する際に使用する。使用するかわからない時は入れておきましょう。

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

JS,外部CSSの読み込み

<?php
wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css' );
wp_enqueue_script('jquery');
wp_enqueue_script('bistro-calme-main', get_template_directory_uri() . '/assets/js/main.js');
wp_head();
?>
</head>

ページ別に表示を変える(条件分岐)

トップページだけ表示を変えるis_homeタグ

    <?php if ( is_home() ): ?>
    <div class="jumbotron">
        <div class="jumbotron_item" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/home/jumbotron-1@2x.jpg')"></div>
    </div>
    <?php endif; ?>

<?php
if ( is_home() ){
    wp_enqueue_script('bistro-calme-home', get_template_directory_uri() . '/assets/js/home.js');
}
?>

その他のページの条件分岐タグ

  • is_single('IDやスラッグ'):記事ページかを判定
  • is_page('IDやスラッグ'):固定ページかを判定
  • is_category('IDやスラッグ'):カテゴリーページかを判定

ページタイトルの表示を有効にする

functions.phpを作成

add_theme_support関数を記述(パラメータに機能を書く)

<?php
/**
 * <title>タグを出力する
 */
add_theme_support( 'title-tag' );

headerのtitleタグを削除 → これをやらないと各ページのタイトルが表示されないので忘れずに削除する

add_fileter関数でタイトルの区切り文字を変更

/**
 * タイトルタグの区切り文字をエン・ダッシュから縦線に変更する
 */
add_filter('document_title_separator', 'my_document_title_separator');
function my_document_title_separator($separator){
    $separator = '|';
    return $separator;
}
add_fileter関数でtopページだけタイトルに説明文が入るようにする
/**
 * タイトルタグのテキストを変更する
 */
add_filter('document_title_parts', 'my_document_title_parts');
function my_document_title_parts($title){
    if (is_home()) {
        unset($title['tagline']); // タグラインを削除
        $title['title'] = 'BISTRO CALMEは、カジュアルなワインバーよりなビストロです。'; //テキストを変更
    }
    return $title;
}

ループ作成

TOPページに新着情報を表示

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class('news'); ?>>
            
            <div class="news_pic">
                <a href="<?php the_permalink(); ?>">
                    <?php if ( has_post_thumbnail() ): ?>
                        <?php the_post_thumbnail('medium'); ?>
                    <?php else: ?>
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/noimage_600x400.png" alt="">
                    <?php endif; ?>
                </a>
            </div>
            
            <div class="news_meta">
                <?php the_category(); ?>
                <time class="news_time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time>
            </div>
            
            <h2 class="news_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="news_desc">
                <?php the_excerpt(); ?>
                <p><a href="<?php the_permalink(); ?>">[続きを読む]</a></p>
            </div>
        </article>

    <?php endwhile; ?>
<?php endif; ?>

WP関数

  • have_post():現在のWPクエリにループできる記事があるかチェック
  • the_post():ループ中の投稿情報をグローバル変数$postにロードする テンプレートタグ

  • the_title():タイトル取得

  • the_ID():現在のIDを表示
  • post_class('クラス名'):投稿に応じたクラス属性
  • the_category():カテゴリーulとliで表示

アイキャッチ画像を使用する

アイキャッチ画像を使用可能にする

functions.phpに下記を記述

/**
* アイキャッチ画像を使用可能にする
*/
add_theme_support( 'post-thumbnails' );
記事のアイキャッチ画像を表示する

表示させたい箇所に下記を記述

<?php if ( has_post_thumbnail() ): ?>
    <?php the_post_thumbnail('medium'); ?>
<?php else: ?>
    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/noimage_600x400.png" alt="">
<?php endif; ?>

サイズ指定

  • thumbnail:サムネイル
  • medium: 中サイズ
  • large:大サイズ
  • full:フルサイズ(アップロードした画像の元サイズ)
  • array(100,150):他のサイズ指定

投稿記事ページを作成

single.phpを作成

投稿記事ページの場合、表示している記事を1回だけループするというメインクエリが用意されている

<div class="col-12 col-md-9">
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class('article'); ?>>
                <header class="article_header">
                    <h2 class="article_title"><?php the_title(); ?></h2>
                    <div class="article_meta">
                        <?php the_category(); ?>
                        <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time>
                    </div>
                </header>
                <div class="article_body">
                    <div class="content">
                        <?php the_content(); ?>
                    </div>
                </div>
                <div class="postLinks">
                    <div class="postLink postLink-prev"><?php previous_post_link('<i class="fas fa-chevron-left"></i>%link'); ?></div>
                    <div class="postLink postLink-next"><?php next_post_link('%link<i class="fas fa-chevron-right"></i>'); ?></div>
                </div>
            </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>

カテゴリー一覧とアーカイブ一覧を作成

1.サイドバーにカテゴリー一覧とアーカイブ一覧へリンクを作成

<div class="col-12 col-md-3">
    <?php get_sidebar('categories'); ?>
    <?php get_sidebar('archives'); ?>
</div>

2.カテゴリーと月間アーカイブへリンクするテンプレートを作成(sidebar-categories.phpsidebar-archives.php

  • テンプレートタグ wp_list_categories( $args ):カテゴリーページへのリンク一覧を表示する
  • テンプレートタグ wp_get_archives( $args );アーカイブページへのリンク一覧を表示する

sidebar-categories.php

//カテゴリー一覧へのリスト表示
<aside class="archive">
    <h2 class="archive_title">カテゴリ 一覧</h2>
    <ul class="archive_list">
        <?php
        $args = array(
            'title_li' => '', //見出しを削除
        );
        wp_list_categories( $args );
        ?>
    </ul>
</aside>

sidebar-archives.php

<aside class="archive">
    <h2 class="archive_title">月別アーカイブ</h2>
    <ul class="archive_list">
        <?php
        $args = array(
            'type' => 'monthly', //月別を指定
        );
        wp_get_archives( $args );
        ?>
    </ul>
</aside>

記事の一覧ページを作成

category.phpやarchive.phpを使っても良いですが、カテゴリー一覧と月間アーカイブを同じにしたい場合はindex.phpで作成しても良いでしょう。

日付別表示のテンプレート階層(優先順位) 1.date.php 2.archive.php 3.index.php

カテゴリー表示のテンプレート階層(優先順位) 1.category-{slug}.php 2.category-{id}.php 3.category.php 4.archive.php 5..index.php

WPテンプレートパーツを作成

template-partsフォルダ内にloop-news.phpを作成

<article id="post-<?php the_ID(); ?>" <?php post_class('news'); ?>>
    <div class="news_pic">
        <a href="<?php the_permalink(); ?>">
            <?php if ( has_post_thumbnail() ): ?>
                <?php the_post_thumbnail('medium'); ?>
            <?php else: ?>
                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/noimage_600x400.png" alt="">
            <?php endif; ?>
        </a>
    </div>
    <div class="news_meta">
        <?php the_category(); ?>
        <time class="news_time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time>
    </div>
    <h2 class="news_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <div class="news_desc">
        <?php the_excerpt(); ?>
        <p><a href="<?php the_permalink(); ?>">[続きを読む]</a></p>
    </div>
</article>
パーツを読み込み

get_template_part('template-parts/loop', 'news');

<div class="col-12 col-md-9">
    <?php if ( is_month() ): ?>
        <h2 class="main_title"><?php the_time('Y年m月'); ?></h2>
    <?php else: ?>
        <h2 class="main_title"><?php wp_title(''); ?></h2>
    <?php endif; ?>

    <div class="row">

        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <div class="col-md-4">
                    <?php get_template_part('template-parts/loop', 'news'); ?>
                </div>
            <?php endwhile; ?>
        <?php endif; ?>

    </div>
</div>

固定ページ作成page.php

<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php get_header(); ?>

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>

        <h2 class="pageTitle"><?php the_title(); ?><span><?php echo strtoupper($post->post_name); ?></h2>

        <div class="content">
            <?php the_content(); ?>
        </div>

    <?php endwhile; ?>
<?php endif; ?>

<?php get_footer(); ?>

functions.php

/**
* カスタムメニュー機能を使用可能にする
*/
add_theme_support( 'menus' );
<nav class="gnav">
    <?php
    $args = array(
    'menu' => 'global-navigation', // 管理画面で作成したメニューの名前
    'menu_class' => '', // メニューを構成するulタグのクラス名
    'container' => false, // <ul>タグを囲んでいる<div>タグを削除
    );
    wp_nav_menu($args);
    ?>
</nav>

リンク

get_permalink(記事ID)を使用する方法

<a href="<?php echo get_permalink(50); ?>">ABOUT</a>

home_url()を使用する方法

<a href="<?php echo home_url('/contact/'); ?>">メールフォーム</a>

get_term_by(スラッグ,スラッグ名,タクソノミー名)でターム情報を取得、 get_term_link(タームIDかオブジェクト,タクソノミー名)でタームページリンクを取得する方法

<?php
$news = get_term_by('slug', 'news', 'category');
$news_link = get_term_link($news, 'category');
?>
<a href="<?php echo $news_link; ?>">最新情報の一覧</a>

サイト内検索

serchform.phpを作成

<form action="<?php echo home_url('/'); ?>" method="get" class="header_search">
    <input type="text" name="s" value="<?php the_search_query(); ?>" placeholder="キーワードを入力">
    <i class="fas fa-search"></i>
</form>

読み込む

<?php get_search_form(); ?>

search.phpを作成(結果表示ページ)

<?php get_header(); ?>

<h2 class="pageTitle">サイト内検索<span>SEARCH</span></h2>

<main class="main">
    <div class="container">
        <h2 class="main_title">「<?php the_search_query(); ?>」の検索結果</h2>
        <div class="row">

            <?php if ( have_posts() ) : ?>
                <?php while ( have_posts() ) : the_post(); ?>
                    <div class="col-md-4">
                        <?php get_template_part('template-parts/loop', 'news'); ?>
                    </div>
                <?php endwhile; ?>
            <?php else: ?>
                <div class="col-12 text-center">
                    <p>検索結果はありませんでした</p>
                </div>
            <?php endif; ?>

        </div>
    </div>
</main>

<?php get_footer(); ?>

404.phpを作成

<?php get_header(); ?>

<h2 class="pageTitle">404 NOT FOUND<span>ERROR</span></h2>

<div class="main">
    <div class="container">
        <p>お探しのページが見つかりませんでした。</p>
        <p>申し訳ございませんが、<a href="<?php echo home_url('/'); ?>">こちらのリンク</a>からトップページにお戻りください。</p>
    </div>
</div>

<?php get_footer(); ?>

WP Multibyte Patchで日本語環境を正しく動作させる

プラグインでインストールします。

パンくずリストを作成

  1. Breadcrumb NavXT プラグインをインストール
  2. Breadcrumb NavXT を設定(WPダッシュボード -> 設定 )
  3. パンくずリストを表示  ・テンプレートファイルを作成(例:template-parts/breadcrumb.php)  bcn_display関数パンくずリストを表示  function_exists( 'bcn_display' ):指定した関数が定義されているかチェック

template-parts/breadcrumb.php

<div class="breadcrumb">
    <div class="breadcrumb_inner">
        <?php
        if ( function_exists( 'bcn_display' ) ) {
            bcn_display();
        }
        ?>
    </div>
</div>

メールフォームを作成

1.MW WP Formをインストール 2.フォームをテキストエディタで作成&MW WP Formに上記を貼り付け&各項目のフォームタグを置き換え

------MW WP Form 入力欄------

<div class="form">
    <div class="form_row">
        <label class="form_label" for="fullname">お名前<span>必須</span></label>
        <div class="form_content">
            [mwform_text name="fullname" id="fullname"]
        </div>
    </div>

    <div class="form_row">
        <label class="form_label" for="email">メールアドレス<span>必須</span></label>
        <div class="form_content">
            [mwform_email name="email" id="email"]
        </div>
    </div>

    <div class="form_row">
        <label class="form_label" for="message">メッセージ</label>
        <div class="form_content">
            [mwform_textarea name="message" id="message"]
        </div>
    </div>

    <div class="form_row form_row-center">
        [mwform_submitButton name="send" class="btn btn-send" confirm_value="確認画面へ" submit_value="送信する"]
    </div>

    <div class="form_row form_row-center">
        [mwform_backButton class="btn btn-back" value="戻る"]
    </div>
</div>

3.バリデーションルールを追加 4.完了画面を作成 5.自動返信メールを作成

------自動返信メール設定------

-件名-
お問い合わせありがとうございました。

-送信者-
BISTRO CALME

-Reply-to(メールアドレス)-
info@example.com
※任意に変更してください。

-本文-
お問い合わせありがとうございました。次の内容で承りました。
後日、ご連絡させていただきます。

■送信内容
お名前 : {fullname}
メールアドレス : {email}
メッセージ : {message}

-自動返信メール-
email

6.管理者宛メール設定

------管理者宛メール設定------
-送信先(E-mailアドレス)-
info@example.com
※任意に変更してください。


-件名-
お問い合わせがありました。

-送信者-
BISTRO CALME

-Reply-to(メールアドレス)-
info@example.com

-本文-
お問い合わせが、次の内容でありました。

■送信内容
お名前 : {fullname}
メールアドレス : {email}
メッセージ : {message}

7.ショートコードを固定ページのお問合せページとお問合せ完了ページに貼り付け

8.自動整形機能を停止する WPは自動整形の機能が働いていますが、フォームようなHTMLタグのみで構成したページでは不要なpタグなどが入ることがあります。

自動整形を止めるにはremove_filter()関数を使います。

remove_filter():フィルターフックに付加されている関数を除去する

if(is_page('contact')){
    remove_filter('the_content', 'wpautop');
}

カスタム投稿はこちら acots.hatenablog.com

現在のテンプレート確認するプラグイン

Show Current Template – WordPress プラグイン | WordPress.org 日本語