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」を読み込むために使用。

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