Web オープナー ラボ

テーマの基本構造

Home »  テーマの基本構造

テーマの基本構造

On 4月 8, 2016, Posted by , With テーマの基本構造 はコメントを受け付けていません。

通常のHTMLを使用したWebページのデザインでは、「index.html」というトップページのテンプレートファイルと、フォントや各構成要素(スタイル)を記述する「style.css」を基本に用います。

一般的なレイアウト例

 ヘッダ header
 サイドバー (side bar)  コンテンツ(本文)contents
 フッダ footer

WordPressでは、テーマといってページごとにヘッダ、本文、フッダ、サイドバーをphpで分割してそれぞれのphpファイルを組み合わせて、デザイン・レイアウトなどを決めるシステムです。すべてのphpファイルとcssをまとめて「テーマ」(テンプレート)と呼びます。

したがってWordpressではワンクリックでテーマを替えればレイアウトなどがレスポンシブテーマならPC・タブレット・スマホ用に一括自動生成されるので変更が簡単です。

以下は、基本的なビジネスサイトのサイト構成例です。

WordPressをインストールするとデフォルト(初期)テーマが含まれており、最新WordPress 4.4.2では「Twenty Sixteen」で、そのままテーマを変えなければ「Twenty Sixteen」が自動的にデフォルトテーマになっています。Wordpressデフォルトテーマは「twenty ××」と10、11、12、13、14、15、16となっており、以前のバージョンであるほどシンプルなファイル構成なので、学ぶには初期の方がいいかも分かりませんが、最新のテーマを使用するのが普通ですので、「Twenty Sixteen」では以下のファイル構成になっています。

スタイル

スタイルシート  style.css  文書の構造、色、フォントなどを各ページで共通して決めておくものです。
 RTL スタイルシート  rtl.css  Wordpressは世界標準ブログですから、RTL(Right To Left)右から左へ書くアラビア語など向けのスタイルシートです。英文でも和文でも横書きは左から右なので使いません。

テンプレート

参考までにWordPressの公式テーマ TWENTY SIXTEENの例です。以下のようなファイルがあります。太字は必須ファイルで、その他はテーマによって増えたり様々に違いがあります。

 Twenty Sixteen 内容 共通  備考(階層)
index.php  TOPページ  最初に表示されるメインインデックス(ホーム、TOP)
header.php  テーマヘッダー(最上部)  ○  タイトル、メニューナビゲーションなど
footer.php  テーマフッター(最下部)  ○  下部に共通して表示する部分
sidebar.php サイドバー(ウィジェッド)  ○  ワンページ設定の際は使用しない
sidebar-content-bottom.php  本文下部(ウィジェッド)
page.php 固定ページテンプレート
single.php 投稿ページテンプレート
search.php 検索結果
searchform.php 検索フォーム  ウェッドで入力用フォーム
archive.php アーカイブ  過去記事の一覧表示
comments.php コメント  閲覧者からのコメント
functions.php テーマのための関数
image.php 画像添付テンプレート  記事内に写真・画像を挿入するとき
404.php 404 テンプレート サーバーエラーの時に表示されるページ
content.php  トップ /template-parts/
content-page.php  固定ページ /template-parts/
content-single.php  投稿ページ /template-parts/
biography.php  投稿ページ /template-parts/
content-search.php  該当有り /template-parts/
content-none.php  該当無し /template-parts/
back-compat.php  古いバージョン対応 /inc/
customizer.php  カスタマイズ /inc/
template-tags.php  ロゴ /inc/

カスタマイズ

カスタマイザの4種類の「ベース配色」を使用すると、サイトのイメージを瞬時に変えられます。

  1. (デフォルト白)
  2. グレイ
  3. ダーク

ソーシャルメニュー

トゥエンティシックスティーンを使用すると、フッターに完璧なサイズのアイコンでTwitter、Facebook、Google+をはじめ25種類のあなたのソーシャルメディアプロファイルへのリンクを表示することができます。

 

参考:

WordPress Codex 日本語版

https://github.com/

Comments are closed.