GOUTEN.NET

デザイナー・GOUTENの生態を観察するブログ

WordCamp Kobe 2013「テーマ構築チュートリアル」非ライブ版

この記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それ以外の場合はどうぞこの記事をお楽しみください。

2013年6月15日にスペースアルファ三宮で開催されたWordCamp Kobe 2013の「テーマ構築チュートリアル」セッションに僕(@gouten5010)も解説役として登壇をさせていただきました。
今回、復習したいあなたや見逃してしまったあなたのために、セッション内容を大公開しちゃいます!
※今回セッションに使ったテーマをダウンロードできるおまけつき!

2013年6月15日にスペースアルファ三宮で開催されたWordCamp Kobe 2013の「テーマ構築チュートリアル」セッションに解説役(…と言っても補助程度)として僕(@gouten5010)も登壇させていただきました。

このセッションが終わってから数人ほどですが「実は見たかった」というありがたい要望がありまして、実際にコーディングをされた@___kikiiiさんとの相談の結果、このブログにてセッション内容を公開することにしました!
スライド使って説明するセッションじゃなかったからね、仕方ないね。

せっかくなのでWordCamp Kobe 2013でこのセッションを受けれなかった方は、この記事を読んで受けた気になってください!

そしてなんと!セッションで完成したテーマをダウンロードできるオマケ付きです!
※WordCamp Kobe 2013のセッション時点でWordPressのバージョンは3.5.1でした。
今回の説明も3.5.1をベースに進めていき、配布テーマもそれに準じます。

最 後 ま で ゆ っ く り 読 ん で い っ て ね !

wckobe2013-theme-tutorial-title

はじめに

今回のセッションは構築の一例をライブで見て、要求されたワイヤーフレームやサイト構造を実現するためにはどのようにすればいいのかを、制作のヒントとして学んでいただく目的をもって進めました。

実際のコーディングは@___kikiiiさん、解説と言う名の補助要員はGOUTENでお送りしました。

当日、前提としてやっておいたこと

  • テーマを作るためのベースとなるhtmlは作成済み
  • データベースにライブラリ・記事内容の登録済
  • WordPressのインストール完了、一般的な設定済
  • 使用するプラグインファイルのインストール済 (有効化はしていません)
  • パーマリンクは「/%category%/%post_id%/」に変更済 (この時、WP No Category Baseプラグイン)

コーディングの流れ

  1. テーマフォルダ作成してindex.html・style.css・依存ファイルをコピー
  2. フロントページ作成
  3. 共通で読み込むテンプレートの分割
  4. カテゴリーアーカイブページ作成
  5. シングルページ作成
  6. 固定ページ作成
  7. 404ページ作成
  8. テーマ完成

作成したhtmlベースのサイトとその構成

今回のセッションではベースのhtmlは完成した状態(←大事なことなので言うのは2回目)で進行させて頂きました。

作成サイトに関して

今回のセッション用に作成したサイトの完成形は画像のような感じです。
設計事務所という想定で作成しました。

wckobe2013-theme_html

一部画像リンクが切れている箇所がありますが、原因調査中です。とりあえずは気にしないでください。

サイト構成に関して

サイトマップは以下の画像のような構成になっています。

wckobe2013-theme-html-tree

フロントページはフロントページのことです。
ただし、サイドバーに関してはフロントページのみの表示です。

下層ページには6つのコンテンツがあり、そのうち制作実績を載せるworksページと新着情報を載せるinformationページをWordPressで言うところの「投稿」で実装し、カテゴリーで分類します。

本来コンテンツ内容の登録が大幅に違う場合はカスタム投稿タイプをつかって投稿を分けるのがいいのですが、今回は別のコンテンツでカスタム投稿タイプを使用するのに加えて、カテゴリーの条件分岐も使いたかったのでカテゴリーで分けるようにしました。

その他のページは、404ページ以外は固定ページの機能を使います。
また、会社概要等を載せるaboutページに関しては、表示する項目が多いので専用のテンプレートを用意します。

テンプレートの構成に関して

テンプレートは以下の画像のような構成になっています。

wckobe2013-theme-php

フロントページ(トップページ)はfront-page.phpを使って表示します。

共通するパーツであるヘッダー(header.php)・フッター(footer.php)・サイドバー(sidebar.php)は分割して各テンプレートに読み込ませます。

カテゴリーアーカイブに関して、informationページはindex.phpを使用し、worksページはindex.phpの中で条件分岐タグを使用してカテゴリーの場合のみサムネイル(アイキャッチ)を表示するようにしています。

個別ページはaboutスラッグの場合のみpage-about.phpを呼び出すようにします。

1 2 3 4 5 6 7 8 9 10

TO PAGE TOP