WordPress 初心者が学ぶ、オリジナルテーマ作成の最小構成のはじめの一歩

2014-10-07

WordPress 初心者が学ぶ、オリジナルテーマ作成の最小構成のはじめの一歩

10/11（土）に東京で開催される WordCamp Tokyo 2014 が開催されます。WordCamp Tokyo への参加は２回目になります。（参照：WordCamp Tokyo 2012に参加してきました！ | THE HAM MEDIA BLOG）昨年も参加しようと考えていたものの、オープンソースカンファレンス北海道の開催と重なってしまい、残念ながら参加できなかったので、２年ぶりの参加です。

ついでに今回はリレーブログにも参加しようとエントリーをしたため、簡易な記事ではありますが、スタート位置に立ったつもりで、オリジナルテーマを作成する流れについて書いてみようと思います。

オリジナルのテーマを作成するときに、すでにテーマ作成を覚えた方はイチからすでに作っていると思いますが、初心者だとどのような構成でどう作って良いのか戸惑うことのほうが多いのではないでしょうか？

デザイナーさんで WordPress 初心者の方は WordCamp に参加する前に、今一度テーマの作成方法の基礎について振り返ってみましょう。

尚、本エントリーは初心者向けの内容になっておりますので、すでにテーマ作成について理解されている方は、最後に余談をかいておりますので、そちらを読んでください。

WordPress の準備：インストールなど

今回の本題はテーマ作成についてのため、 WordPress の準備、インストールなどは終わっている前提で以下を進めます。

もしも、インストール部分もよく理解されていないという方は、以下のリンクを参考にしてみてください。

[連載]WordPressでWebサービスを作る方法（2:開発環境の構築） | Stocker.jp / diary

WordPressインストール・超初心者向け | unpco

テーマのデザインと仕様

オリジナルのテーマを WordPress のテーマファイルにするまえに、先に HTML のコーディングを終えておくことをおすすめします。

このコーディングをする前には、どこをどのような構成にするのかも考えておく必要がありますが、ひとまず最初は静的にHTML を作っておきましょう。

例えば超簡易なデモとして下記のようなデザインを実現するとします。

コンテンツの部分は、一覧の時は複数のエントリーを表示して、詳細の時は１記事だけの表示するという構成で考えます。

どのようにコーディングするのかはざっくりとだけ書いておきます。

HTMLのコーディングとポイント

大枠だけですが、通常のHTMLのコーディングと同じように進めます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サイトタイトル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header class="l-header">
    ヘッダーの中身
  </header>
  <div class="l-container">
    <div class="l-main">

      <article class="mod-entry">
        <h2 class="mod-entry-head">Entry Title</h2>
        <div class="mod-entry-body">
          <p>Entry Text〜</p>
        </div>
      </article>
      <article class="mod-entry">
        <h2 class="mod-entry-head">Entry Title</h2>
        <div class="mod-entry-body">
          <p>Entry Text〜</p>
        </div>
      </article>
      〜
    </div>
    <aside class="l-side">
      サイドバーの中身
    </aside>
  </div>
  <footer class="l-footer">
    フッターの中身
  </footer>
</body>
</html>

今回の超シンプルなテーマでは気にしなくても良いのですが、デザインによっては繰り返し出力されるときとそうではないときなどを気にしながら進める必要がある為、コンテンツ部分は繰り返されれる可能性も考えつつ、スタイルする必要があります。

記事部分はものすごく簡易にしたものをいれてみております。

また、更新する人が誰で、その人のHTMLの理解度はどのくらいかなども、予め把握しておく必要があります。更新時にリッチテキストエディタのみで更新されるのか、それともHTMLを書いて更新がはいるのかなどでも、用意しておくべきスタイルの考慮が必要なためです。

そのあたりについては今回は省略します。

最小限テーマで必要なファイル

静的 HTML ができたらそのファイルをWordPressのテーマ用に必要なWordPressのテンプレートタグなどに置き換えます。

置き換える前に、必要なファイル構成を考えます。

今回のようなシンプルな構成の場合、用意するテーマファイルは必要最小限だけで対応可能です。

テーマのフォルダが置かれているのは wordpress/wp-content/themes で、そこにオリジナルテーマ用のフォルダを一つ作成してファイルを配置します。

オリジナルテーマ用のフォルダを作成したら、その中身は以下のように構成をします。

オリジナルテーマフォルダの中身

index.php
style.css

この２つのファイルが配置されていたら、どちらの中身が空っぽだったとしても管理画面上から変更することが可能になります。

このファイルのみで管理画面でテーマ選択をしようとすると以下のような表示になります。

フォルダ名だけが表示されるという事態に。

もしもファイル選択の時の画像を表示したい場合は、作成したデザインファイルのキャプチャなどを用意して、 screenshot.png テーマフォルダの中に配置します。

screenshot.pngを配置

index.php
style.css
screenshot.png

テーマフォルダにいれておくと、テーマ選択時に画像からでも判別することができます。

尚、拡張子はpngではなくとも、jpgでも名前がscreenshotであれば表示をしてくれるようになります。

作成した静的 HTML を WordPress のテーマにする

用意したテーマの index.php に静的状態で作成したHTMLをいれます。CSSは style.css にまとめて入れます。

構成を分ける？わけない？

なお、様々な紹介サイトなどでは、この段階でこのHTMLの構成を分解して、 header.php footer.php sidebar.php と分ける紹介のほうが多いですが、一覧と詳細ページの表示を出し分けたり、他にもトップページや固定ページなどで表示を変更するなどということをしない限りは、 index.php のみにまとめてしまう 作りで大丈夫です。

しかし、あとあと表示内容がそれぞれで違うようなことがすでに見えている場合は、他のブログでも紹介されているとおりに、構成を分けて作成をしてください。

今回はまるっと入れてみます

そのまま入れると、登録したエントリーなどは何も表示されませんが、静的HTMLで作成したページがまるっと表示されるようになります。

そこに、必要な箇所を WordPressのテンプレートタグに置き換えます。

タイトルとエントリー部分をテンプレートタグに

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title>
  <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<?php wp_head(); ?>
</head>
<body>

  <header class="l-header">
    ヘッダーの中身
  </header>
  
  <div class="l-container">
    <div class="l-main">

      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="mod-entry">
        <h2 class="mod-entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div class="mod-entry-body">
          <?php the_content(); ?>
        </div>
      </div>
      <?php endwhile; endif; ?>

    </div>
    <aside class="l-side">
      サイドバーの中身
    </aside>
  </div>

  <footer class="l-footer">
    フッターの中身
  </footer>

<?php wp_footer(); ?>

</body>
</html>

これだけの中身でも、一覧と個別ページなどが表示されます。

入れたタグはタイトル部分とCSSファイルの指定部分、wp_head()とwp_footer()と記事の表示部分です。

個々に見て行きたいところですが、そこは割愛させていただきます。テンプレートタグの説明については WordPress Codex を参照してください。

WordPress Codex の参照について

尚、テンプレートタグなどを参考にする場合、私は WordPress Codex を基本的に見るようにしています。しかし、こちらは英語で表記されているため、 WordPress Codex 日本語版なども参照してください。

ただし、以前勉強会で、WordPress Codex 日本語版を参照るするのもあり〜というような話をいれたところ、 @eastcoderさんに、「更新されていない（遅れている）ケースが多いから英語のほうを参照するほうが良いです」と指摘がありました。日本語版ページは参照するな！とかではなく、”もしかすると最新と比べると差分があるかもしれない” ということも頭にいれつつ、参照するようにしてください。

Codex 日本語版のサイトの見方・閲覧上の注意には下記の記載もありますので、引用として掲載をしておきます。

新旧バージョンの変更点
各ページの内容は最新の WordPress に合わせて更新されていきます。日本語版では、どのバージョンで何が変わったのかを「更新履歴」として各ページの一番下に載せています。まずは「バージョン」カテゴリからチェックしてみてください。
検索
Codex の情報量は膨大で、日本語版に用意できていないページがまだたくさんあります。日本語版・英語版の両方を検索するには、ページ右上の「ドキュメント横断検索」からどうぞ。
古い情報
更新作業が追いついていないページがあります。最新の英語版を見るには、サイドバーの「他の言語」またはページ右下の「原文・最新版」リンクから。
間違い
Wiki で情報を書き込みやすくしている反面、誤った情報が掲載される可能性もあります。それを他の人が容易に訂正できるのもまた Wiki の特徴ですが、すぐに訂正できない場合があります

引用元：WordPress Codex 日本語版について：サイトの見方・閲覧上の注意

WordPress Codex 日本語翻訳に参加を！

現在、日本語版の上記の改善として、「日本語版を更新してみよう」という動きが全国であるため、興味のある方は、WordPress Codex 日本語翻訳にも参加してみてください！

[WordPress] WordPress Codex 日本語版を更新してみよう | tama's memo

【予告】地域合同企画：春の翻訳＆ドキュメンテーション祭り | WordBench

WordPress 翻訳祭り—今さら注意してもらえない「日本語」について | 半月記

3.9.1回目くらいのWordBench福岡あるいはWordPressの勉強会もしくは春の翻訳祭開催中！ – WebCake

WordBench 翻訳＆ドキュメンテーションまつり東京編 | ja.naoko.cc

※追記（2014/10/07 12:00）

一部不適切な表現をしてしまっていたため、文章を一部変更しました。また、日本語版についてにも記載されている内容を引用させていただき、あわせて日本語版の翻訳の動きが各地である旨のリンクを追加させていただきました。

他に必要なテーマファイルについて

最小の構成が把握できたところで、次のステップへと移りますが、今回は長々と書いている時間がないため、中途半端ではありますが、このあたりでストップしようと思います。

style.css で記載が必要なこととかも今回省略となってしまいましたが、最小とかきましたがまだまだ必要な設定項目、テンプレートタグがあります。

他に必要なテーマファイル、例えば前述もしていた header.php や footer.php などの共通箇所をモジュールに分けたファイルや、sidebar用のphp（sidebar.php）や、様々な機能制御としての functions.phpなどなど。

また、どのページを表示する際はどのPHPが優先的に利用されるのかなどはテンプレート階層を覚えておく必要があります。このテンプレート階層はWordPressのテーマファイルを構成するにあたり、頭に入れておくべき情報であるため、これはテーマを作成するにあたり、必ず確認しておくようにしましょう。

Template Hierarchy « WordPress Codex

表示をそれぞれのページなどで分ける場合に必要な構成仕様になります。

例えば、詳細ページでの表示を分ける場合は single.php を用意しておいたり、固定ページの場合は page.php を用意します。

表示を分ける必要があるページはどこかを考えて、必要なファイルを用意するようにしましょう。

オリジナルテーマ作成の最小構成のはじめの一歩

ものすごく簡易な内容になってしまいましたが、オリジナルテーマ作成での最小構成、みなさんは把握しておりましたでしょうか？WordPressの初心者が最初に覚えておいたほうが良いところだと思います。

もちろん、この内容だけではかなり不十分ではありますが、既存のテーマをカスタマイズするスタートよりは、最小の構成を理解し、その後に自分が必要な構成やテンプレートタグを理解してステップアップしていくほうが、WordPress のコツを抑える早い道だと思っています。もちろん人によっては、この道よりも、既存テンプレートをカスタマイズしていくような方が覚えが早い人もいるかもしれないですので、自分の進め方に合わせて、勉強して、仕事へとつなげて行けるようにしてください。

・・・とはいうものの、いきなり仕事でやらなきゃいけなくなった！という人も多くいると思います。その時こそ、このような最小の構成から入り、静的HTMLを一度作ってみて、そこでWordPressでの出力が必要な箇所をテンプレートタグに置き換えながら進めるという方法を是非とってみてください。

今回のこのエントリーが、WordPress 初心者の目にとまり、最小限のところから、さらに必要な部分を徐々に徐々に勉強して肉付けして、完成へと進めるきっかけとなれたら嬉しいです。

最後に、リレーブログを書こうと思った背景について

テーマの最小構成についての内容はここまでにしておきます。このエントリーの最後に、このリレーブログを書こう！と思ってしまった背景も駄文ですが書いておこうと思います。

いきなり正直に言ってしまうと、スタッフの人に「書いてみませんか？」と声をかけられたからというのがきっかけです。しかし、それはあくまできっかけに過ぎず、最初は「参加に対しての意気込み」や「どういうイベントなのか」、「人と人とのつながりになる」なんてエントリーを自分が書くことに、何かピンとくるものが無かったのです。

「何かピンと浮かぶものが出たら、書こう」

などと考えていると、結局忙しさに追われて考えても出てくるものがありませんでした。

その後、いろいろと考えたのですが結局書きたい内容も浮かばずに仕事だけに追われてしまいそうな状況だったので、リレーブログのエントリーを断念しようと思うように。

そんなときに、自分が初心者だったときのことを思い返してみて、WordPress の何が最初に知れたらうれしかったか、何につまずいたり戸惑ったりしたかを考えてみると、以前はインストールにものすごく苦労したことを思い出す中、テーマ作成をどこからどう始めてよいかを悩んだなーということにたどり着いたという。

デフォルで入っているテーマを自分なりに修正してデザインをあててみたり、配布されているテーマからがんばってみたり、と。でも、一からテーマ作成をして必要な機能を肉付けするような作りをしないと、テーマ作成の基礎の理解がつかないなとも感じたり。

そんな考えに辿り着いた時に、これからの WordPress を知るために、まずはそうだ、まずは基礎の内容もエントリーして、みてもらった上で、わからないことがあれば WordCamp に参加しにきてみて、スタッフや会議室A・Bで行われるようなアンカンファレンスで質問してもらうようなのがいいのかなーと思います。

セッション紹介 | WordCamp Tokyo 2014：タイムテーブルの会議室AとBの内容

初心者はいろいろな人と出会って色々と学ぼう

そういう ”どのようにテーマ作成をしたらよいか” などの話は、結構重要なので、まずは「WordPress 初心者テーマ基礎」と検索をかけていろいろな記事を参考にしてください。

で、今回検索をしていましたら、下記のような過去のエントリーを見つけて、そういえば読んだなーと。

「htmlすら知らなかった私が2週間でWordpressの新テーマを作成するまでにやったこと」と参考にした記事まとめ | OZPAの表4

記事中に、いろいろな人に教えてもらったことなどが書いてあるエントリーです。

先程も書きましたが、 WordCamp に参加する最大のメリットは初心者からでも参加できてわからないことを質問できる場所があるということだと思います。当日はたくさんの教えてくれる ”神” が周りにいるということ。これまでのリレーブログの方たちも書いているように、WordCamp に参加することでたくさんの出会いを通して、自分一人だとわからなかった WordPress について知りたいことを聞ける場所です。

と、最後の余談まで、とても長くなってしまいましたが、ここまで読んでいただき、ありがとうございます。

当日は私もセッションを聞きにいったり、アンカンファレンスに参加していますので、もし見かけたら気軽に声をかけてください。

「あ、(´ ºムº `)の人だ！」

と。

参照：