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で公開しています。