Simple Journal – 1.1 モックアップのディレクトリ構造について

WordPressテーマ「SimpleJournal」を作成するにあたり、事前にHTMLでモックアップを作成します。

今回のモックアップのディレクトリ構造は以下。

WordPressテーマ作成用のプロジェクトフォルダ simplejournal 以下に mockup ディレクトリを作成し、その中にモックアップに必要なファイルを配置します。

今回作り込むのは、以下のCSSファイルおよびHTMLファイル。

style.css
テーマに適用するスタイルシートです。

index.html
テーマのトップページに相当するHTMLファイルです。

page.html
テーマの個別ページに相当するHTMLファイルです。

single.html
テーマの投稿ページに相当するHTMLファイルです。

archive.html
テーマのアーカイブページ(カテゴリ別一覧ページやタグ別一覧ページ)に相当するHTMLファイルです。

search.html
テーマの検索ページに相当するHTMLファイルです。

404.html
テーマの Page Not Foundページ(該当のページが存在しなかったときに表示するページ)に相当するHTMLファイルです。

 

そしてこれらのHTMLおよびCSSから参照する CSS、javaScript、画像などは assets ディレクトリに配置することにします。

また、 Templates ディレクトリ以下に Dreamweaver のテンプレートファイル common.dwt が格納されており、各ページの共通部分(ヘッダーやフッターなど)は Dreamweaver でこのファイルを編集することにより一括で変更できるようにしています。

 

なお今回は、SASS(Syntactically Awesome Style Sheets)というテクノロジーを使ってスタイルシートの編集(生成)をおこなっていく予定です。

SASSについては次回の記事で説明します。

※今回作成したファイルはGitHubで公開しています。

【仕切り直し】WordPressテーマ「Simple Journal」ができるまで

前回の更新から半年以上が経過してしまいました。

「SimpleJounrl」という名前のWordPressテーマの作成途中ですが、仕切り直しとおさらいの意味を込めて、またゼロから作り始めていこうと思います。

テーマ作成の手順は以下のとおり。
以前のものを踏襲しつつも、より実際に近い手順を紹介していくつもりです。

1. WordPressテーマ作成の準備

1. モックアップを作成する

1-1. モックアップのディレクトリ構造
1-2. SASS+CompassでCSSを編集
1-3. HTMLを編集

2. テーマ開発環境を準備する

2-1. VCCWの導入
2-2. テーマのディレクト構造
2-3. 必要最小限のテーマを作成(style.css + index.php)

3. テーマを作り込む

3-1. テーマのパーツを作成
3-1-1. ヘッダーを作成(header.php)
3-1-2. フッターを作成(footer.php)
3-1-3. 関数ファイルを作成(functions.php)
3-2. 固定ページのテンプレートを作成(page.php)
3-3. 投稿ページのテンプレートを作成(single.php)
3-4. コメント欄を作成(comments.php)
3-5. アーカイブページのテンプレートを作成(archive.php)
3-6. 検索ページのテンプレートを作成(search.php)
3-7. NotFoundページのテンプレートを作成(404.php)
3-8. トップページのテンプレートを作成(index.php)

4. テーマを配布する

4-1. テーマ配布の準備をする
4-1-1. スクリーンショットを追加
4-1-2. バージョン情報を付加
4-2. テーマをzipにして配布する

 

それでは早速、次回からモックアップの作成にはいりたいと思います。