Wordpressの自作テーマの作り方まとめ

こんにちは、メガネです。
仕事でよくWordpressを使用します。ですが、デフォルトテーマをそのままのデザイン、少しのカスタマイズで使用するという事はほとんどありません。

そこで今回は自作のテーマを作成する時の手順を書いていきたいと思います。
制作環境は、 Gulp + SCSS です。

f:id:yuki-takagi-imworks:20180730105619j:plain

ディレクトリ設定

テーマフォルダは下記の構成です。

wp-content
　themes
　　meganeTheme※テーマ名
　　　index.php
　　　style.css※SCSSから自動生成
　　　scss
　　　　style.scss

gulpの設定

gulpfile.js

今回gulpを導入する目的は、SCSSのコンパイルのみとします。

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var plumber     = require('gulp-plumber');

gulp.task('sass',function() {
  gulp.src('./scss/**/*.scss')
  .pipe(plumber({
    errorHandler: function(err) {
      console.log(err.messageFormated);
      this.emit('end');
    }
  }))
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(gulp.dest('./'));
});

gulp.task('sass-watch', ['sass'], function() {
  var watcher = gulp.watch('./scss/*.scss', ['sass']);
  watcher.on('change', function(event) {});
});

gulp.task('default', ['sass-watch']);
導入するパッケージ 詳細
gulp gulp本体。
gulp-sass gulpでsass（scss）をコンパイルする時に必要なパッケージ。
※scssは複数作成される想定でテーマ内に「scss」というディレクトリを作成する想定で、「scss」ディレクトリ内をウォッチする設定になっています。
gulp-plumber sass（scss）コンパイル中にエラーが発生しタスクが強制終了してしまうのを防ぐためのパッケージ。

テーマの宣言

次にstyle.scssを作成します。
今回は style.scss から style.css を生成しますが、上記に記載したように「scss」ディレクトリ内に style.scss を作成し、gulpでテーマディレクトリ直下に style.css を吐き出すような仕組みです。

style.scss
/*   
Theme Name: meganeTheme
Theme URI: https://meganetech.hateblo.jp/
Description: メガネのテーマ 
Author: 広告代理店で働くメガネ
Author URI: https://meganetech.hateblo.jp/
Version: 1.0.0
*/

/* ここからCSSを記載 */
.aligncenter {
  display: block;
  margin: 0 auto;
}
.alignleft { float: left; }
.alignright { float: right; }
各項目の説明

最低限必要なものは「Theme Name」です。テーマ名は管理画面に表示されますのでこちらも設定しておきましょう。

項目名 詳細
Theme Name テーマ名
管理画面の「外観」 > 「テーマ」を表示した際、名前として使用されます。
Theme URI テーマURI
テーマの配布ページなどを設定します。
Description テーマの説明
テーマについての詳細を記載します。
Author 作成者名
Author URI 作成者のサイトURIなど
Version テーマのバージョン

index.phpの作成

何はともあれWEBサイトを公開するにはindexファイルが必要ですが、
ヘッダー、フッターファイルは別ファイルとして作成しincludeする形にしておきます。

header.php
<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title><?php bloginfo('name'); ?></title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/assets/js/script.js"></script>
  <?php wp_head(); ?>
</head>
項目名 詳細
<?php wp_head(); ?> Wordpressのプラグイン情報やその他の機能を有効にするための記述を読み込むための使用。
footer.php
<footer class="copy">
  <p>copyright &copy; <?php bloginfo('name'); ?>. All rights Reserved.</p>
</footer>
</div><!-- /wrapper -->
<?php wp_footer();?>
</body>
</html>
項目名 詳細
<?php wp_footer(); ?> Wordpressのプラグイン情報やその他の機能を有効にするための記述を読み込むための使用。
index.php
<?php get_header(); ?>
<body id="#top" <?php body_class();?>>

<header id="header">
  <h1 id="logo"><a href="./"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.jpg" alt="<?php bloginfo('name'); ?>" /></a></h1>
</header>

<div class="wrapper">
  <div class="container">
  <h2>記事一覧</h2>
    <?php if(have_posts()): while(have_posts()): the_post(); ?>
      <div class="article">
        <a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a>
      </div>
    <?php endwhile; endif; ?>
  </div><!-- /container -->
</div>

<?php get_footer(); ?>
項目名 詳細
<?php get_header(); ?> Wordpressで「header.php」を読み込むために使用。
<?php get_footer(); ?> Wordpressで「footer.php」を読み込むために使用。

本当に最低限の記述のみとなってしまいました。
そのうちしっかりしたテーマを作成していきたいと思います。

Wordpressプラグイン 「Custom Field Suite」使い方まとめ

Wordpressのプラグイン「Custom Field Suite」の使い方についてまとめています。

仕事上、Wordpressでサイト構築をする事が割と頻繁にあるのですがほぼ必須のプラグインとなっています。

このプラグインについてまとめているサイトは多いですが、私が使用したい情報が1つのサイトにまとまっていないため出来る限り1つのサイトで解決出来るようにまとめページを作ってみました。

Custom Field Suite 公式ページ

Wordpress公式プラグインページ
ja.wordpress.org


公式ドキュメント
Getting Started - Custom Field Suite
※2017/04/19確認 プラグインページからのリンクは切れていました。

フィールドタイプの種類

フィールドタイプ 詳細
単一行テキスト 1行テキスト（改行不可）
テキストエリア 複数行テキスト（改行可）
リッチエディタ リッチエディタ（Wysiwyg）
ハイパーリンク URLとテキストを個別に設定可能。
リンク先の設定（target）として下記を設定可能。
None（指定なし）
_blank
_self
_top
日付 カレンダーから日付を選択
カラーピッカー カラーピッカーを利用可能
真/偽（簡易チェックボックス） チェックボックスを利用可能
セレクト（ドロップダウンリスト） セレクトボックスを利用可能
関連ポスト 「投稿タイプ」と最小、最大件数を指定して関連する記事を選択可能
利用可能な種類は下記
投稿（post）
固定ページ（page）
添付ファイル（attachment）
任意のカスタムポストタイプ
Term 最小、最大件数を指定して下記を選択して関連付ける事が可能
category
post_tag
post_format
カスタムポストタイプ
ユーザー 最小、最大件数を指定して現在作成されているユーザーを選択可能
ファイルを選択 ファイルを追加する事が可能（リッチエディタの「メディアを追加」とほぼ同義）
ループ（複製フィールド） ループの中に任意のフィールドタイプを選択して追加するとループが可能
タブ タブが作成される。
タブフィールドを複数設定するとタブが横に追加される。
ただし、タブを作成するとそれ以降の全てがタブ内に収まってしまうので要注意。

テンプレートからの呼び出し

テンプレートから呼び出す時はフィールドごとに異なります。

テキストフィールドの呼び出し
<?php echo CFS()->get( 'first_name' ); ?>
テキストエリアフィールドの呼び出し
<?php echo CFS()->get( 'first_name' ); ?>
リッチエディタフィールドの呼び出し
<?php echo CFS()->get( 'first_name' ); ?>
ハイパーリンクフィールドの呼び出し
<?php echo CFS()->get( 'the_hyperlink' ); ?>
日付フィールドの呼び出し
<?php echo CFS()->get( 'my_date' ); ?>
表示例：2015-10-31

<?php echo date( 'F j, Y', strtotime( CFS()->get( 'my_date' ) ) ); ?>
表示例：October 31, 2015
カラーピッカーフィールドの呼び出し
<?php echo CFS()->get( 'my_color' ); ?>
真/偽（簡易チェックボックス）フィールドの呼び出し
<?php echo CFS()->get( 'checkbox' ); ?>

真偽値を使った判別をする場合は下記。

<?php if ( get_post_meta($post->ID, 'checkbox' ,TRUE) ): ?>
  <div>チェックが入っている場合はこの文章が表示されます</div>
<?php else: ?>
  <div>チェックが入っていない場合はこの文章が表示されます</div>
<?php endif; ?>
セレクト（ドロップダウンリスト）フィールドの呼び出し
<?php
$values = CFS()->get( 'my_select' );
foreach ( $values as $key => $label ) {
  echo $label;
} ?>
関連ポストフィールドの呼び出し
<?php
$values = CFS()->get( 'related_posts' );
foreach ( $values as $post_id ) {
  $the_post = get_post( $post_id );
  echo $the_post->post_title;
} ?>
Termフィールドの呼び出し
<?php
$values = CFS()->get( 'field_terms' );
foreach ( $values as $term_id ) {
    $the_term = get_term($term_id);
    echo $the_term->name;
} ?>
ユーザーフィールドの呼び出し
<?php
$values = CFS()->get( 'field_users' );
foreach ( $values as $user_id ) {
    $the_user = get_user_by( 'id', $user_id );
    echo $the_user->user_login;
} ?>
ファイルのアップロードフィールドの呼び出し
<?php echo CFS()->get( 'my_file' ); ?>

画像の場合はIDが出力されるので、下記のように画像IDからURLを取り出す必要があります。

<?php $fieldName = get_post_meta($post->ID, 'cfs_image', true); ?>
<?php $fieldName = wp_get_attachment_image_src($fieldName, 'full'); ?>
<img src="<?php echo $fieldName[0]; ?>" alt="Image alt">

wp_get_attachment_image_src の使い方は下記からご確認ください。
関数リファレンス/wp get attachment image src - WordPress Codex 日本語版

ループフィールドの呼び出し
<?php
$fields = CFS()->get( 'loop' );
foreach ( $fields as $field ) {
  echo $field['content1'];
  echo $field['content2'];
    $fields = $field['loop_child'];
    foreach ((array)$fields as $field):
  ?>
    <div><?php echo $field['field_name']; ?></div>

  <?php endforeach;
} ?>

※2019/10/1 コメントにてご指摘頂きましたが、表記が一部間違っていたため修正しました。
「loop_child」の部分は子ループです。ループの中でループを回す場合に必要です。
なお、子ループでforeachの中で（array）を使用している理由は、

Warning: Invalid argument supplied for foreach() in [path]

というエラーが出てしまうためです。
詳細は下記のサイトを参考にしてください。
kotori-blog.com