Gatespace's Blog

ニッチなWordPressとAWS徒然日記

_s を使ったテーマ作成

スターターテーマ _s を使ってWordPressのテーマをつくる（準備編）

12月 19, 2012 , , ,
この記事をシェアする

WordPressにはデフォルトで「Twenty Eleven（3.5から）」「Twenty Twelve」「Twenty Ten」というテーマが付属してきます。
また、公式のテーマディレクトリにも多くのテーマが登録されているので、そこから好みのテーマを選ぶこともできます。
ですが、オリジナリティを出したい（平たく言えば企業サイトなどでオリジナルのデザインにしたい）場合は、独自のテーマをつくる必要があります。

テーマをつくる上でどのような手法をとるかは高野直子さんが「WordPress テーマ開発4つのアプローチ #wacja2012」という記事を書かれたので、そちらもご覧ください。

WordPressに慣れてきた方は「子テーマ」でテーマを作られていると思います（親テーマを直接カスタマイズするとテーマのアップデート時にカスタマイズ箇所が消えるのでダメですよ）。
しかし、子テーマも親テーマへの依存が大きかったり、functions.phpで定義された関数を変更するのに癖があったりします。また、ありがちなこととして、親テーマのほとんどのテンプレートを子テーマで書き換えていませんか？

そんな人にお勧めなのが「スターター・テーマ」を利用したテーマ開発です。
これから何回かに分けて _s（underscores） というスターター・テーマを利用したテーマ開発の手順を書いていきます。

なお、ある程度テーマの作成（カスタマイズ）に慣れた人向けの内容となりますので、ご了承ください。
[show_underscores]

この記事の対象

  • HTMLとCSSでサイトを構築できる（テーマの元になるHTMLを組める）
  • WordPressのテーマの構造やテンプレート階層を理解している
  • フルスクラッチでテーマをつくるのが（毎回）手間と思っている
  • 子テーマ（あるいは既存テーマを複製）での制作に限界を感じている

目次

  1. _s（underscores）とは
  2. 公式サイトのジェネレーターを使ってファイルをつくる
  3. ダウンロードしたファイルの中身
  4. ジェネレーターでAdvanced Optionsを入力していた場合のメリット
  5. この時点で備わっている（いない）機能

1. _s（underscores）とは

Underscores A Starter Theme for WordPress

_s（underscores）はWordPressのテーマです。Automattic社のテーマチームが汎用テーマを作るために自社開発しました（HTMLでいえばフレームワークですかね）。

_s（underscores）は公式サイトに

I’m a theme meant for hacking so don’t use me as a Parent Theme.

とあるように、親テーマとしてではなく、ハッキング（カスタマイズ）されること前提としています。そのため、ある程度のテンプレートファイルとcssで構成されていますが、見栄え（css）に関してはリセットがされているくらいで、まっさらな状態です。

_s（underscores）のテーマファイルはGitHubで公開されています（テーマディレクトリには公開されていません）。
ここからフォークしたり、zipファイルをダウンロードしてカスタマイズすることも可能ですが、今回は公式サイトのジェネレータを使って元になるファイルを作成したいと思います。

2. 公式サイトのジェネレーターを使ってファイルをつくる

公式サイトにはジェネレーターがあります。

スクリーンショット 2012-12-15 11.41.18

基本的には「Theme Name」の欄に名付けたいテーマ名（テキスト）を入力し、「GENERATE」ボタンを押すだけですが、「Advanced Options」をクリックするとテーマ名の他に

  • Theme Slug：テーマのディレクトリ（フォルダ）名
  • Author：テーマ作者名
  • Author URI：テーマ作者のURL
  • Description：テーマの説明

を設定できるので、入力した方がよいでしょう（後で手を入れる箇所が少なくなります）。

これだけで関数名や翻訳ファイル用のテキストドメインなどがオリジナルのテーマ名に変更されたテーマファイル（zip）をダウンロードできます。

3. ダウンロードしたファイルの中身

ダウンロードしたファイルの中身
ダウンロードしたファイルの中身

ダウンロードしたファイルの中身は写真の様になります。
公式サイトのジェネレーター入力したTheme Name（Theme Slug）に基づく名前でテーマフォルダが作成されています（テーマ名に空白が入っていてもハイフンに変換されます）。
その中に以下のテンプレートファイルが入っています。カスタマイズしていく上で足りないファイル、いらないファイルが出てくると思いますが、次からの説明で必須と書かれているファイルは削除しないようにしてください。

スタイルシート

  • style.css （必須）
    テーマスタイルシート。テーマの情報 および ウェブページの外観を制御するスタイルシート
  • rtl.css
    アラビア語など右から左に記述する言語用のスタイルシート。詳しくはCodex参照。

テーマ関数ファイル

  • functions.php（必須）
    WordPressの初期化中に管理パネルとサイト表示の両方で読み込まれます。
    ウィジェットエリアの設定や、自動フィードリンクなどこのファイルで設定する項目があります。

テンプレートファイル

  • index.php（必須）
    メインテンプレート。テンプレート階層においてどのテンプレートファイルも存在しない場合使われる。
  • single.php
    投稿（カスタム投稿タイプ）の個別表示用テンプレート。
  • page.php
    固定ページ用の個別表示用テンプレート。
  • 404.php
    404 Not Found テンプレート。存在しないページを要求された時に表示される。
  • archive.php
    アーカイブ（カテゴリーやタグ（カスタム分類）、日別、著者）用テンプレート。
  • image.php
    アップロードしたメディアのうち画像を単体で表示するテンプレート。
  • search.php
    検索結果表示用テンプレート

モジュールテンプレートファイル（テンプレートファイルなどに読み込まれるファイル）

※必須と書いてあっても、index.phpなどで読み込まない場合は削除可能です。

  • header.php（必須）
    ヘッダー部分。get_header() で読み込まれる。
  • sidebar.php（必須）
    サイドバー部分。get_sidebar() で読み込まれる。
  • footer.php（必須）
    フッター部分。get_footer() で読み込まれる。
  • comments.php（必須）
    コメント部分。comments_template() で読み込まれる。
  • content.php（必須）
    ループ内の投稿に関する部分。get_template_part( ‘content’ ) で読み込まれる。
  • content-single.php
    ループ内の投稿に関する部分。single.phpにおいてget_template_part( ‘content’, ‘single’ ) で読み込まれる。このファイルがない場合はcontent.phpが読み込まれる。
  • content-page.php
    ループ内の投稿に関する部分。page.phpにおいてget_template_part( ‘content’, ‘page’ ) で読み込まれる。このファイルがない場合はcontent.phpが読み込まれる。
  • no-results.php
    アーカイブテンプレートなどにおいて、投稿が見つからない場合に表示する部分。get_template_part( ‘no-results’ ) で読み込まれる。このコードを使わない場合は削除可。
  • searchform.php
    検索フォーム。実際には使われていないので、必要に応じて get_search_form() で読み込むこと。

その他のファイル

  • screenshot.png
    テーマのスクリーンショット。300 x 255のPNGファイル。
    テーマファイルを公式ディレクトリに登録するのであれば必須。
  • license.txt
    ライセンスに関するテキスト。GPL v2に関する内容なので、特に変更する必要無し。
    テーマファイルを公式ディレクトリに登録するのであれば必須。
  • README.md
    テーマの説明。

ディレクトリ（フォルダ）

  • inc
    • extras.php（以前はtweaks.php）
      functions.phpに呼び出される。
      オリジナルの関数のうち、主にコアの機能を置き換えるコード。（body_classへのクラスの追加など）。
    • template-tags.php
      functions.phpに呼び出される。
      オリジナルの関数のうち、主にテンプレートタグの様に使うコード。（ページナビゲーションや投稿日の出力など）
    • custom-header.php
      functions.phpに呼び出される。
      カスタムヘッダーに関する設定。
      使う場合はfunctions.phpの
      //require( get_template_directory() . '/inc/custom-header.php' );
      のコメントアウトを削除し、header.phpに以下のコードを記述すること
      [sourcecode language=”php”]<?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?>
      <a title="<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>" href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home">
      <img alt="" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" />
      </a>
      <?php } // if ( ! empty( $header_image ) ) ?>[/sourcecode]
    • theme-options
      • theme-options.php
        functions.phpに呼び出される。
        独自のテーマオプション（設定）ページを設置する場合のサンプルファイル。
        使う場合はfunctions.phpの
        //require( get_template_directory() . '/inc/theme-options/theme-options.php' );
        のコメントアウトを削除する事。
  • js
    • html5.js
      _s は HTML5でマークアップされているので、古いバージョンのブラウザでも見られるようにするJavaScript。
    • keyboard-image-navigation.js
      アタッチメント（画像）の単体表示ページでキーボードナビゲーションを有効にするためのJavaScript（jQuery）。
    • small-menu.js
      スマートフォンなどのウィンドウサイズが小さいデバイスにおいてメニューをドロップダウンメニューに変換するためのJavaScript（jQuery）。
  • languages　翻訳ファイル（.moファイル）を入れておくディレクトリ（フォルダ）
    • readme.txt
  • layouts　レイアウトに関するcssファイルのサンプル。必要に応じて読み込むこと。
    • content-sidebar-sidebar.css
    • content-sidebar.css
    • sidebar-content-sidebar.css
    • sidebar-content.css
    • sidebar-sidebar-content.css

テーマファイルの中身ですが、テキストなどが英語で記述されているので翻訳ファイルは自分で用意しないといけません。しかし、先ほど紹介した直子さんが_s テーマの日本語ファイルを作成されているのでそちらをダウンロードし、languagesディレクトリに追加してください。

4. ジェネレーターでAdvanced Optionsを入力していた場合のメリット

ジェネレーターでAdvanced Optionsを入力していた場合、style.cssに入力した内容が反映され、関数名のプレフィックスや翻訳テキストに使うテキストドメインも変更されています。
GitHubからテーマファイルをダウンロードした際は自分で書き換える必要があるので地味に便利です（その場合、書き換えすべきテキストとその方法はREADME.mdに書かれていますので説明は省略）。

5. この時点で備わっている（いない）機能

この状態でダウンロードしたテーマを適用してみます。

別途、詳細は書きますが、style.cssは最低限のリセットとWordPressが自動で付与するクラスについての設定がされているだけなので、このような状態になります。
ただし、ウィジェットエリアが1箇所（IDがsidebar-1でsidebar.php内）、カスタムメニューが1箇所（IDがprimaryでheader.php内）配置されています。

最低限必要と思われる機能は設定されていますので、見た目を変えるだけであれば、style.cssを編集するだけで良いでしょう。

さて、これで _s をカスタマイズする準備ができましたので、次回から各ファイルについて詳しく説明していきたいと思います。

参照サイト

この記事をシェアする

Related Post

_s を使ったテーマ作成 WordPress

WordPressスターターテーマ _s の Sassオプション

9月 1, 2014
_s を使ったテーマ作成 WordPress

スターターテーマ _s をフォークして翻訳ファイル対応

4月 23, 2013
_s を使ったテーマ作成

スターターテーマ _s を使ってWordPressのテーマをつくる（ファイルパスとブログ情報編）

2月 22, 2013