wordpressテーマ自作まとめ #PHP

経緯

wordpressテーマをお仕事で自作しました。~~（始めはただのHTML案件だったはずが・・・）~~
今後忘れないためにまとめ。

固定記事や投稿記事を追加したときに、どのファイルが読み込まれるか把握が必要でした。
wordpressテンプレート階層
codex テンプレート階層

制作の流れ

HTML, CSSで静的ページを作成していたので、これをwordpressテーマにしました。
index.htmlを分解して、まずindex.php, header.php, footer.phpを作ってとりあえずトップページを作成し、会社概要などの固定用ページ表示用にpage.phpを用意。
サイドバーが必要だったのでsidebar.phpを用意。
お知らせ・ブログなどはカスタム投稿タイプをfunctions.phpに作成して、archive-***.phpで一覧ページ、single-***.phpで詳細ページを実装しました。

ファイル構成

archive-***.php => カスタム投稿一覧
single-***.php => カスタム投稿詳細ページ
functions.php => 機能定義用PHPファイル
footer.php => 共通フッター(index.php,page.php等で呼び出す)
header.php => 共通ヘッダー(index.php,page.php等で呼び出す)
sidebar.php => 共通サイドバー(index.php,page.php等で呼び出す)
page.php => 固定ページ詳細用テンプレート
~~single.php => 投稿ページ詳細用テンプレート(今回不使用)~~
index.php => 必須トップページになる
style.css => テーマの名前や作者情報を記載
taxonomy-***.php => タクソノミーの一覧テンプレート的な

index.php

get_headerでheader.phpの内容を取得して、HTMLを出力する。footer, sidebarも同様。

index.php

      <?php get_header(); ?> 
        <div id="main">
          <div class="right">
            ・・・省略（トップのコンテンツ記載）・・・
          </div>
          <?php get_sidebar(); ?>

        </div>
      <?php get_footer(); ?>

header.php

headタグやheaderタグ（メニューなど）HTMLで上のほうにくるタグを記載。

header.php

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hogehoge</title>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css" />
    <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script>                                    
    <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
 ・・・省略・・・

footer.php

footerタグ（マップを載せたり・問合せ先を載せたり）HTMLで下のほうにくるタグを記載。

footer.php

    <footer>
    ・・・省略・・・
    </footer>
  </body>
</html>

functions.php

ほかのPHPファイルとは異なり、テーマを設定したときに使える機能を定義したりするファイル。
codex functions.php 概説

カスタム投稿タイプ
カスタム投稿タイプを使えるようにすると、投稿とは別に投稿タイプが追加できる。
管理画面から投稿の別メニューが表示される。
参考URL

functions.php

function hoge_post_type() {                                                                                               register_post_type( 'hoge',
    array(
      'label' => 'ほげ',
      'public' => true,
      'has_archive' => true,
      'menu_position' => 5,
      'supports' => array('title', 'editor','thumbnail','revisions')
    )
  );
add_action( 'init', 'hoge_post_type' );

カスタムタクソノミー
カスタムタクソノミーはカスタム投稿タイプに設定できるカテゴリー。
参考URL
codex カスタム分類

functions.php

function taxhoge_post_type() {
  register_post_type('taxhoge',
    array(
      'label' => 'ほげ',
      'public' => true,
      'has_archive' => true,
      'menu_position' => 8,
      'supports' => array('title', 'editor','thumbnail','revisions')
    )
  );

  register_taxonomy(
    'taxhoge-cat',
    'taxhoge',
    array(
      'hierarchical' => true,
      'update_count_callback' => '_update_post_term_count',
      'label' => 'カテゴリ',
      'singular_label' => 'カテゴリ',
      'public' => true,
      'show_ui' => true
    )
  );
}
add_action( 'init', 'taxhoge_post_type' );

カスタムフィールド
カスタム投稿タイプで投稿するときに任意のテキストボックスなどを用意してユーザーに入力させることができる。
codex カスタムフィールドの使い方
一部functions.phpに記述して作成したが、プラグインを使うほうが簡単で管理しやすい感じだった。

archive-***.php

カスタム投稿タイプで作成した記事の一覧ページ用テンプレート、***はregister_post_typeで登録した投稿タイプになる。
archive-hoge.phpなど

一覧ページは下記のような感じで作成すればOK。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>から<?php endwhile; endif; ?> のループ内で記事のデータを取得して一覧化する。

archive-***.php

<?php get_header(); ?>
<div id="main">
    <div class="right">
        <h1>タイトル</h1>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <article>
            <div class="thubmbnail-img"><?php the_post_thumbnail(); ?></div>
            <div class="hoge_text">
                <p><?php the_time('Y.n.j'); ?></p>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            </div>
          </article>
        <?php endwhile; endif; ?>
    </div>

    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

single-***.php

カスタム投稿タイプで作成した記事の詳細ページ用テンプレート、***はregister_post_typeで登録した投稿タイプになる。
single-hoge.phpなど

詳細ページは下記のような感じで作成、page.phpとほぼ同様の内容となった。
the_title()で投稿記事のタイトルを取得、the_content()で記事内容を取得できる。

single-***.php

<?php get_header(); ?>                                                                                                  <div id="main">
    <div class="right">
        <h2><?php the_title(); ?></h2>
        <div class="hoge_content">
            <?php if(have_posts()): ?>
            <?php while(have_posts()): the_post(); ?>
                <?php the_content(); ?>
            <?php endwhile; ?>
            <?php endif; ?>
        </div>
    </div>

    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

カスタムタクソノミーを取得

single-***.php

<?php
    $terms = get_the_terms($post->id, 'hoge-cat');
    if ($terms && ! is_wp_error($terms)){

        $links = array();
        foreach ( $terms as $term ) {
            $links[] = $term->name;
        }

        $categorys = join( "&nbsp;", $links );
    }
    echo $categorys;
?>

付加したカテゴリーがget_the_termsで取得できるため、取ってきた$termsを処理して
上記のような感じで表示。

page.php

固定詳細ページ用テンプレート、固定ページとして投稿したページに下記が適用される。

page.php

<div id="main">
    <div class="right">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <h1><?php the_title();?></h1>
            <?php the_content();?>
        <?php endwhile; endif; ?>
    </div>

    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

taxonomy-***.php

カスタム投稿タイプで投稿に付加したカテゴリーのリンク押下時に表示される一覧ページ用テンプレート***はregister_taxonomyで登録したタクソノミー名になる。

使用したWPプラグイン

Contact Form 7
お問合せフォームの作成のために使用した。
参考URL
Advanced Custom Fields
カスタムフィールドを作成するために使用した。自分でfunctions.phpに定義するより簡単に作れた。
参考URL