メモ

WordPressとおやつの会 #9 いってきました。

Posted on by seigo

WordPressの最近のカスタマイズをおさらいしたくて、「WordPressとおやつの会 #9」に行ってまいりました。

というわけで、勉強会のメモをおいておきます。

今回の話題は「WebデザイナーのためのWordPressテーマ作成入門」ということで、WordPressの一機能「テーマ」を重点的に、テーマをカスタマイズする方法について勉強しました。

まずは子テーマの紹介

テーマのカスタマイズ方法の一つに「子テーマ」を紹介されました。

子テーマ – WordPress Codex 日本語版

WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。
さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。
このような理由で、使用しているテーマをカスタマイズする方法として子テーマをおすすめします。

ということで、子テーマは親テーマが仮にアップデート更新されても影響を受けることなく機能拡張できる手法です。

今回の本命。テーマフレームワーク

しかし、テーマを作る際、フルスクラッチでやることが最も拡張性が高いですが、スピード感を考えると手間がかかることもあります。そこで、紹介されたのがテーマフレームワークです。

テーマで作る際、毎度作る部材や仕組みってありますよね、それを、枠組みとして提供するものをテーマフレームワークといいます。

フレームワークという言葉自体はここがわかりやすいです。

今回は「_S」 underscoresを使ってみよう。

さてそのテーマフレームワーク。ですが今回は「_s」という、アンダースコアーズという名のテーマフレームワークを勉強会では紹介されました。

Underscores | A Starter Theme for WordPress

_s の特徴

  • HTML5に沿ったテーマです
    • viewportもちゃんとある
    • IE周りの分岐コードも書かれてて素敵
  • 404のエラーページも完備
  • デザイン要素は含まれていないシンプルなものです
    • 既存のテーマってデザインを除いてシンプルにするのって大変なときありますよね。
  • 上記のリンクでオンラインで作成できる
    • 出来上がったオリジナルテーマはテーマ＞インストール＞アップロード＞zip指定で行う。
  • ライセンスはGPLライセンス

_s の使い方

  • Underscores | A Starter Theme for WordPressにアクセスする。
  • 表示されてすぐのGENARATEボタンの横のテキストフィールドからテーマ名を作ります。
    • 私は今回テスト用だったので「setgotest」といれました
  • 細かく設定する場合は「Anvanced Options」を入力。
    • 今回はXAMPPでlocalhost:8081で行ったのでそれに合わせました
      • Author > TanakaSeigo
      • Author URI > http://localhost:8081/
      • Theme Name > setgotest
  • GENARATEボタンを押すとTheme Nameの名前でzipがダウンロードできます。
  • WordPressの管理画面に行き
    • 外観：テーマ＞テーマのインストール
    • 「検索 | アップロード | おすすめ | 最新 | 最近の更新」とあるのでアップロードを押す
    • 参照ボタンで先程のzipファイル指定して、いますぐインストールボタンを押す
    • インストールできたら有効化を押す
  • これで反映完了なので、サイトにアクセス。

実際にレイアウトを変えてみよう

404ページを変えてみた

WordPressではありもしないページにアクセスすると404ページが表示されます。これも親切に404.phpという形で用意されています。

しかし、以下のように英語になっているので

<h1 class="entry-title"><?php _e( 'Oops! That page can&rsquo;t be found.', 'setgotest' ); ?></h1>

となっているので、以下に変更しました。

<h1 class="entry-title">おっと。アクセスしたこのページはありませんよ。（意訳）</h1>

_eという関数は多言語対応時、重要な関数ですが、扱いが少々癖があるので直に書き換えました。

_eについての説明の記事もあったので以下においておきます。

基本レイアウトを変えてみた

レイアウトはデザイン要素は最低限で、制作者側が好きなように変更できます。

layoutsフォルダには基本的なレイアウトCSSが入っています。これをimportするだけでレイアウトが変更できます。

style.cssの最上部に以下の行を追加。

元ソース Reset付近

/* =Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,

以下に変更。今回はlayouts/sidebar-content-sidebar.cssにしました。

/* =Reset
-------------------------------------------------------------- */

@import url('layouts/sidebar-content-sidebar.css');

html, body, div, span, applet, object, iframe,

これでレイアウトが変わります。

おわりに

勉強会はCSSやPHP(HTML)などレイアウトの基本構成がわかったので、テーマのファイル構成に合わせて、いろいろと他にもレイアウト変更してみました。

幸い、フルスクラッチで手を加えたことがあったので、つまづくことも少なく行えました。

また、デザインとしてのコードが最小限でシンプルにもかかわらず、HTML5的な配慮もありつつ、かゆいところに手が届く感じがいいですね。underscore。

その他参考文献

、、、、
seigo