WordPressはじめの一歩テーマ作成ハンズオン[子テーマ] フォローアップ

  • ブックマーク
  • Feedly

WordCamp Kansai 2015が7/25(土)、7/26(日)に行われました。
私は半年前から実行委員(セッションチーム)として活動させていただき、ハンズオンも3セッション世話役として参加させていただきました。

なにか振り返りを書こうと思っていたのですが、西川さんのブログを読んだら特に何も言うことがなくなってしまったので、貼らせていただきます。長くてアツい文章ですが、たくさんの人に読んでもらいたいです:-)

WordCamp Kansai 2015。貢献というテーマ、セッションvsハンズオン、スポンサーとGPL、Campの目的について

ハンズオンについては世話役だけでなく、自分がいちばん準備や当日の流れについて管理していたということもあったので、少しだけ言わせてください。

ハンズオンは部屋や世話役の人数のこともあり、参加していただける人数はあまり多くありませんでした。
見学だけでもしたかったけれど断られて残念だったという話を聞きました。

見学を受け入れたとしても、どこまでOKするのか、また延長コード・電源コードなど多数の人が使用している部屋で、いっぱいの人数を入れてしまうと事故にもなりかねない。
実行委員全員、できるだけたくさんの人にいろんな経験をしていただきたいという気持ちは一緒です。ハンズオンの部屋担当の方も苦渋の決断だったかと思います。お断りするのは大変心苦しかったと思いますが、私は英断だったと思っています。

スライドが用意されていたものについては今後まとめて公式サイトにアップされる予定ですので、ご参加いただけなかった方もぜひ参考にしていただければと思います。

テーマ作成ハンズオン「子テーマ」フォローアップ

まず私が作成させていただいたスライドです。

こちらのハンズオンは、普段HTMLやCSSを書いてWebサイトは作ることができるけれど、WordPressではサイト製作をしたことがないという方を想定したハンズオンでした。

ですが思ったよりもそういった製作者の方ではない方が多かったようで、なかなかスムーズにハンズオンが進められず、詰まらずサクサクとできた方には待ちぼうけの時間が多かったと思います…。本当に申し訳ございません…。

正直に言うと、テーマ作成は、HTMLやCSSなど基本的なWebサイト製作の知識がないとかなり難しいと思います。
Web製作者、または目指す方はそこからスタートすることをお勧めします。
そうでない方、たとえばご自分のお店のサイトやブログをお持ちの方などは、膨大な学習コストを考えると、細かいカスタマイズが必要な場合は「餅は餅屋」で製作者に依頼することも手です。
もしくは子テーマの説明でまず紹介させていただいた公式ディレクトリテーマより、好みのテーマを探してそのまま使用するのがいいかと思います。
(「コードを書かずに完成!コーポレートサイト作成ハンズオン」を参加してからテーマ作成ハンズオンに参加していただいた方も多かったと思いますが、そちらのハンズオンで、WordPressのデフォルト機能やプラグインだけでも十分しっかりしたサイトができることを経験いただいたと思います。)
挑戦したい!ということなら同じくHTMLやCSSからぜひ頑張ってみてください。

前置きが長くなりすみません、ハンズオン中にお伝えしきれなかったことをまとめていきます。

エディタはUTF-8が扱えるものを

Windowsの方で「メモ帳」を使っている方がいたようなのですが、文字コードの関係でメモ帳はダメです。
どんなものを使えばいいかわからない方は無料でオープンソースのBracketsをおすすめします。

MAMPやXAMPPを使用している時のWordPressフォルダのディレクトリ

Windowsの場合、デフォルトの設定でインストールしていれば、Cドライブの中のMAMP(もしくはXAMPP)フォルダの中のhtdocsフォルダの中にWordPressの全ファイルが入っているフォルダを設置しているはずです。
C:\MAMP\htdocs\wordpress
こんな感じです。

Macの場合はアプリケーションフォルダの中のMAMPの中のhtdocsです。(Finderから見てみてください)

作成したテーマファイルは上の例でいくとwordpressフォルダの中の「wp-content」フォルダの中の「themes」フォルダに設置します。
このWordPressのフォルダを見失ってしまっていた方がたくさんおられたので、記載しました。おうちで続きをやってみようと思ったけれど、場所がわからなくなった方は参考にしていただければと思います。

CSSで上書きしたいけど反映されない

子テーマを有効化したあと、いよいよCSSでカスタマイズというところで、たとえば見出しのデザインを変更しようと上書きしてみたけど反映されなかった。というような質問がありました。
これはCSSの優先順位によるものなので、WordPressとは少し離れますが、
.entry-title よりも
.example .entry-title のほうが優先順位が高くなります。
ですので、親要素についているclass名も併記したりしてみて反映されたか確認してみてください。
そのページ(記事単体のページ、記事一覧ページ、ブログのトップページなど)によってスタイルを変えたいなどがあれば、body要素についているclass名を併記して使うと実現できます。

CSSの優先順位について参考になる記事:!importantはもう使わない!CSSの優先順位をおさらいしよう

テーマ作成では必須の「テンプレート階層」

WordPressがページを表示するとき、どのような優先順位でテンプレートファイルが読み込まれるのか、というのが「テンプレート階層」です。
テーマ作成において避けて通れないものなので、全部は覚えきれないと思うのですが、わからなくなったときはCodexを参照するといいかと思います。

テンプレート階層-WordPress Codex 日本語版

PHPファイルをカスタマイズしたいと思ったときは

子テーマは親テーマを上書きしてカスタマイズしていきます。親テーマのファイル構造などがわからないと、カスタマイズしたくてもできない…ということになってしまいます。
「自分が今見ているページがどのテンプレートファイルを読み込んでいるのか」、をAdminBar(ログインしているときにサイトを見ると上に出ている黒い管理バー)に表示する便利なプラグインがありますので、そちらを使ってみてください。どのテンプレートをカスタマイズすればいいのかがわかりやすいです。(ファイルの中を見るとさらにテンプレートを読み込んでいることもありますが、手探りで探すよりも格段に楽です)

Show Current Template « WordPress Plugins
作:JOTAKI Taisukeさん

リニューアル時など、自分が作ったテーマではないものをカスタマイズするときにも助かっています。

最後に

私も実はそんなにWordPressに詳しくありません。PHPも書けません。いつも四苦八苦しながらCodexを見たりしてなんとか製作をしています。
これをきっかけにテーマ作成をどんどんすすめたいと思っていただけたら幸いです。ぜひ情報交換をしましょう:-)

公式ディレクトリテーマへの申請も、今年は挑戦してみようかなぁと僭越ながら思いはじめています。

ブログデザインのハンズオンの振り返り記事はまたの機会に…。では!

  • ブックマーク
  • Feedly

この記事を書いた人

アカリ