170108

_sとFoundationを使ってWordPressのテーマを作ってみよう

ブログのリニューアルをするすると言って早1年…。
今年こそは…!ということで、お正月からちょっとずつリニューアル準備をしています。
テーマを作成するにあたって、_sとFoundationを使っているので、その備忘録もかねてブログにも書いていこうと思います。

WordPressのテーマ作成について

WordPressのテーマを作るにアプローチの方法が3つあります。

1. スクラッチ

  • 自分で一からPHP・CSSを書いていく方法
  • 自由度は高いけど、その分PHPの知識が必要

2. 子テーマ

  • すでにあるテーマを使って、編集していく方法
  • 親テーマに依存されるというデメリットはありつつも、既存のものをベースとして使うので制作時間は短縮できる

3. スターターテーマ(_s)

  • 最低限のPHPが実装されているテーマをベースに、編集していく方法

スクラッチと子テーマは前に制作したことがあるのですが、_sでは作ったことが無かったので、作成してみることに。

_sって?

underscoresUnderscores | A Starter Theme for WordPress

Automattic社が作成している、WordPressのテーマで、装飾に関するCSSがほとんど当たっておらず、自分でCSSをあてていくことを目的にしているテーマです。

制作の流れとしては
1. _sのページでファイルをダウンロード
2. ダウンロードしてきたテーマを、自分のWordPress環境に置いて有効化
3. テーマにCSSを当てていく
という感じ。

CSSに関しては、自分でゴリゴリで書いてもいいですが、BootstrapFoundationなどのフレームワークを使うことで、レスポンシブ対応も比較的簡単に実装することができます。
私は今まで、フレームワークを使うことがあまり無かったのですが、これを機にFoundationを使ってみることにしました。

Foundationって?

foundation

Bootstrapとよく比較されているCSSフレームワーク。
Bootstrapとの違いは、HTML側にFoundationのclassを当てずに、自分の好きなclassを指定できるというところ。
ただし、Sassを使ってゴリゴリする場合は、黒い画面を叩いてあれこれしないといけません。
(なので個人的にはBootstrapよりも敷居は高いように思います。)

Bootstrapのように、もっと気軽に使いたいという場合は、CDNで読み込むと早いです。
(簡単にすぐ使えますが、機能が全部盛りなため、ファイルが大きいというデメリットはあります。)

ちなみに…

私は、_sを触ってみたかったので、今回は使わないことにしたのですが、 FoundationPressというFoundationをベースにしたWordPressのテーマもあります。
テーマディレクトリには登録されてないので、自分でGitからダウンロードして使います。
自分のサイトのサーバーにあげておき、子テーマを作る方法もよさそうです。

環境設定

1.テーマファイルのダウンロード

公式サイトから、ダウロードします。
テーマ名を入れてダウンロードしてもいいのですが、あらかじめ、オプション設定してから、ダウンロードするのがおすすめ。

underscores-a-starter-theme-for-wordpress

Advanced Options をクリックして、設定していきます。
ここを設定しておくことで、style.cssでのテーマ設定や、関数名のプレフィックスなどが、一括変更されたものをダウンロードすることができます。

underscores_setting

sassファイルで編集したい人は _sassify! にチェックをいれておきましょう。

2.テーマファイルを設置・有効化

ダウンロードしてきたファイルを、WordPressのテーマのディレクトリ ( [wp-content] > [themes] ) に設置。
テーマを有効化すると、まっさらな感じになります。これにスタイルを当てていきます。

default

3.CSSの読み込み設定

functions.php にCSSとJSの読み込みをしている関数があるので、そこを書き換えます。
(※_sをダウンロードするときにオプションを設定した場合、設定したテーマ名の関数名になってます。)

function _s_scripts() {
	wp_enqueue_style( '_s-style', get_stylesheet_uri() );
	wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
	wp_enqueue_script( '_s-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', '_s_scripts' );

CSSを読み込みたい場合は、 wp_enqueue_style();、Jsファイルを読み込みたい場合は、wp_enqueue_script();を使います。

cdnを読み込ませる場合の例

function _s_scripts() {
  	wp_enqueue_style( 'foundation', 'https://cdn.jsdelivr.net/foundation/6.2.4-rc2/foundation.min.css', array(), '6.2.4' );
	wp_enqueue_style( '_s-style', get_stylesheet_uri(), array('foundation') );
	wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
	wp_enqueue_script( '_s-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', '_s_scripts' );

wp_enqueue_style();でcdnのURLを入れて上げればOK。
(CDNのバージョンの確認はこちら。FoundationCDN)

これで、Foundationのclassが使えるようになります。
大まかなレイアウトであれば、HTML Templatesページにサンプルがいくつかあるので、そちらがわかりやすいです。
その他、細かいCSS周りは、Docsをどうぞ。

_sのファイル構造について

WordPressのテンプレートファイルは優先順位があるので、分からなくなった場合はCodexを参考にしましょう。
テンプレート階層 – WordPress Codex 日本語版

以下、_sのデフォルとファイル構造をざっくりとご紹介。

テーマ関数ファイル

ファイル名 概要
functions.php オプションの関数が含まれている、テーマ関数ファイル。
CSSやJSの読み込み、ウィジェットの設定などが書かれてます。
このファイルでタイポミスすると真っ白になったりするので注意が必要…

テーマテンプレートファイル

ファイル名 概要
index.php メインのテンプレート。テンプレートファイルがない場合は読み込まれる
single.php 投稿ページ用
page.php 固定ページ用
404.php 404 Not Found用
archive.php アーカイブ(カテゴリー・タグ一覧など)用
search.php 検索結果表示用

モジュールテンプレート

ファイル名 概要
header.php ヘッダーエリア
sidebar.php サイドバーエリア
footer.php フッターエリア
comments.php コメント用
content.php 投稿記事
( ※ get_template_part( ‘template-parts/content’, get_post_format() ); で読み込まれる)
content-none.php 投稿記事がない場合に表示
( ※ get_template_part( ‘template-parts/content’, ‘none’ ); で読み込まれる)
content-page.php page.phpでの記事の表示
( ※ get_template_part( ‘template-parts/content’, ‘page’ ); で読み込まれる)
content-search.php search.phpでの記事の表示
( ※ get_template_part( ‘template-parts/content’, ‘search’ ); で読み込まれる)

CSS

ファイル名 概要
style.css メインのスタイルシート。テーマ情報も含む。
rtl.css Right-to-Left Language の略で、アラビア語などの右から左へ記述する言語用のスタイルシート。

JS

ファイル名 概要
customizer.js テーマカスタマイザー用のJS
navigation.js ドロップダウンメニューのナビゲーション用のJS
skip-link-focus-fix.js タブキーを押したときに、フォーカスされる順番がおかしくなるのを解決するJS
詳細

ファイル名 概要
screenshot.png テーマのスクリーンショット
inc functions.phpで呼び出されてるファイルディレクトリ
languages 翻訳用のファイルディレクトリ

よくある問題

どのテンプレートを編集すればいいか分からない

Show Current Template というプラグインを使うと、読み込まれているphpファイルを一覧で出してくれるので便利です。

template

テンプレートのタグ分からない

WordPress Codexでひたすら調べましょう。
(日本語版もありますが、すべて翻訳されているわけではないので、英語ができる人であれば、英語版の方がいいかもです。)

ブログにソースを書いてくれてる人もいますが、情報が古く、推奨されてないテンプレートタグを使ってることもあるので気をつけましょう。
カテゴリ:非推奨 – WordPress Codex 日本語版

ブログ記事のテスト投稿が面倒

ブログのテーマを作成していく場合、記事が登録されてないと確認ができません。
すでに既存のブログがあればデータをエクスポートができるのですが、何もない場合はテストデータを使います。

英語版か日本語版、どちらかのテストデータをダウンロードし、WordPressの管理画面の [ツール] > [インポート] にある WordPress のインポートから、xmlデータをインポートします。

テストデータは、タイトルが長かったときの場合や、アイキャッチ画像が縦長だった場合など、いろんな状況を想定して作られています。
デザイン時に想定してなかったところも発見できるので、おすすめです。

エラー内容を確認したい

デバックモードにすることで、エラーメッセージを表示できます。
WordPressをインストールしたディレクトリにある wp-config.php を編集します。

define('WP_DEBUG', true);

define('WP_DEBUG', false); のところを define('WP_DEBUG', true); に変更すればOK。


_sでテーマを作るにあたっての準備段階を書いてみました。
Foundationまわりについては、まだ理解していない部分も多いので、もうちょっと勉強してまた今度書こうと思います。

Pocket