PC、ゲーム、デジタル機器などの初心者向けの話題や小技などをつらつらと……

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Loading...

WordPressサイトのHTMLとCSSの基本骨子となるテンプレート作成

 これからWordPress用サイトを構築していくわけだが、これからもWordPressサイトはいくつか作成していきたいと考えているため、まずは基本骨子となるテンプレート的なモノを作成しようかと。

 これからしていくことをまとめると、

  • HTML5に準拠した基本ソースの作成(DOCTYPE宣言等)
  • ノーマライズCSSの適応
  • style.cssにテーマに関する情報を記述

等のフォーマットを決め、それらをテンプレートとすることでこれから先作成するであろうWordPressサイトの作成時に使い回していこうかと。

HTML5に準拠したHTML基本ソースを記述

 HTML5で作成していくために、DOCTYPE宣言は<!DOCTYPE html>を使用。XHTML等従来のものより随分と簡略化されたので記述しやすくなった。
 続いて言語コードの指定。<html lang="ja">で言語は日本語に設定。まず記述するのはこのふたつで、文字コードやスタイルシート等の指定はこの後に続く<head>内に記述していく。

 今回はWordPress用のHTMLコーディングのため、上記にWordPress用テンプレートタグを追加あるいは対応箇所を手直しして完成したものが以下となる。

<!DOCTYPE html>
<html lang="ja">

<head>
  
  <?php bloginfo('name'); ?>
  
  

  

  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

  <?php wp_footer(); ?>
</body>
</html>

 上記記述内容を簡単に説明すると、

  • 1行目:HTML5のDOCTYPE宣言
  • 2行目:言語コードの指定
  • 5行目:文字コードの指定(WPテンプレートタグ使用でUTF-8を指定)
  • 6行目:サイトタイトルの指定(WPテンプレートタグ使用)
  • 7行目:スタイルシートを指定(WPテンプレートタグ使用) ※ノーマライズCSSを指定
  • 8行目:スタイルシートを指定(WPテンプレートタグ使用)
  • 10~12行目:IE8以下のHTML5対応のため、html5shivスクリプト適応コードの記述
  • 14行目:WordPress用プラグイン動作のために必要なWPテンプレートタグ
  • 17行目:表示ページ毎に自動的にclassを付加する、body要素用テンプレートタグ
  • 19行目:WordPress用プラグイン動作のために必要なWPテンプレートタグ

となる。

 IE8以下のHTML5対応のためのhtml5shivスクリプト適応コードはGoogle Codeで公開されているものになるが、JavaScriptがOFFの環境では機能しない点に注意。

 また、7行目と8行目はそれぞれスタイルシート指定となっているが、サイト用のCSSは8行目となり、7行目はノーマライズCSS適応のための記述となる。ノーマライズCSSについては後述。

 追加したWordPress用テンプレートタグの中でも特に14・17・19行目のものはWordPress用のHTMLコーディングでは記述推奨あるいは必須のもので、

【<!--?php wp_head(); ?--> と <!--?php wp_footer(); ?-->】
 どちらも多くのWordPressプラグインが動作する際に必要とするテンプレタグ。これらの部分に動作に必要なスクリプト等が自動で出力される。
 <!--?php wp_head(); ?-->は<!/head>の直前に、<!--?php wp_footer(); ?-->は<!/body-->の直前に記述する。
【<!--?php body_class(); ?-->】
 表示するページ毎に自動的に異なるclassを付加するbody要素用のテンプレタグ。これがあるとページ毎に異なるCSSの摘要が容易となる。

 上記のような用途があり、個人的は今回作成するサイトではあまり利用しないとは思ったが、いつかは何らかの役に立つかも知れないので記述しておくことに。
 ただ<!--?php body_class(); ?-->は余計な記述を無駄に出力するため、わざわざそれらを消去するための方法等も紹介されているので、本当に必須となるかどうかは今のところ結構微妙……

 他にも<head>内にはスクリプトの指定なども記述するが、今回は特にスクリプトを利用する予定はないので除外。

style.cssに基本情報を記述

 WordPress Codexによると、WordPressで使用するスタイルシートには必ず使用するテーマの詳細を記述する必要があるとのこと。

style.css は、テーマの「CSS スタイル」情報に加えて、コメントの形式で必ず「テーマ詳細」を記述する必要があります。管理パネルのテーマ設定ダイアログで問題が生じるので、同じ詳細内容が別のテーマのコメントヘッダ/en にあってはなりません。既存のテーマを複製して自分用のテーマを作るときは、最初にこの情報を変更してください。

引用 - WordPress Codex

 これに則って、必要となるテーマ基本情報記述(+文字コード)が冒頭に記述されたCSSテンプレートを作成する。

@charset "UTF-8";

/*
Theme Name: テーマ名
Theme URI: テーマURI
Description: テーマの説明
Author: テーマ作者名
Author URI: テーマ作者のURI
Version: バージョン情報
Tags: テーマに関するタグ
License: ライセンス
License URI: ライセンスURI
*/

 上記に加え、必要に応じてコメントの記述もできる模様。これらの記述で絶対必要なのは「Theme Name」のみで、その他は必要に応じて省略することも可能。

 「Tags」にはテーマに関する特徴を表すタグを記述する。タグの種類は公式サイトで用意されており、タグを記述することで管理画面からのテーマ検索の際、特徴フィルターを使用した検索に反映される。

 上記を基本テンプレートとして用意し、今回は「License」及び「License URI」以外を使用。テーマを公開する気はないが、タグも一応設定。

 またWordPress用CSSの基本を作成する際、WordPress側で自動的に与えられるclassがあるため、それらに関するスタイルを定義しておくと良いということだが、今回は取りあえず上記で基本テンプレ完成とし、WordPress側から与えられる各種classに関しては都度対応していくことにしようかと。

ノーマライズCSSを用意し、適応する

 前述のHTMLコーディングの時に少し触れたが、今回はふとしたことからリセットCSSやノーマライズCSSのことを知ったため、それらを適応することに。

 リセットCSSとノーマライズCSSを簡単に説明すると、

【リセットCSS】
 ブラウザにはそれぞれ「デフォルトCSS」があり、この違いによりブラウザ毎に表示が異なるのを解消するため、完全に全スタイルをゼロにしてしまうために作成されたCSS。
【ノーマライズCSS】
 リセットCSSでは有益なスタイルも全てゼロにしてしまうため、その防止のためブラウザのデフォルトCSSはそのまま活かしつつブラウザ間の誤差を補正(ノーマライズ)する目的で作成されたCSS。

 ノーマライズCSSはリセットCSSの発展改良型とする意見もあれば、全くの別物とする意見もある。要はどちらもブラウザ間の表示方法を解消しようというもので、そのためのアプローチ方法が異なるというもの。

 これらのメリットにはブラウザ間の誤差がなくなること以外にも、HTML5対応のものならば新要素に対する補正も同時に行ってくれるとのことなので、今回はノーマライズCSSの利用を決定。

 ノーマライズCSSは公式サイトの「Normalize.css」から最新版をダウンロードして作成テーマフォルダ内に保存した後、HTMLの<head>内にスタイルシート読み込みのための記述を行う。

<head>
  
  
</head>

 CSS適応は記述順となるため、まず最初に全スタイルを補正させるためにノーマライズCSS適応の記述はサイト用CSSの記述の前に行う(前述にて7行目がノーマライズCSS用記述、8行目がサイト用CSS用記述としていたのはこのため)。

 またどちらのCSSもWPテンプレートタグを用いた記述となっているが、ノーマライズCSS用のタグ<?php echo get_template_directory_uri(); ?>はテーマフォルダの場所(URL)を出力するタグとなり、サイト用CSS用のタグ「<?php echo get_stylesheet_uri(); ?>」は現在有効(使用)中のテーマのスタイルシートの場所(URL)を出力するタグとなる。

 よってテーマフォルダの場所(URL)を出力するはスタイルシートだけにではなく、例えばテーマフォルダ直下の他のファイルやフォルダを参照する場合等にも使用できる。

 今回適応したノーマライズCSSでは、HTML5で登場した<article>や<header>、<footer>等の新要素がブロックレベル要素としてレンダリングされるようにするための記述が織り込まれているため、よりHTML5が利用しやすくなった。

今回作成した基本テンプレートを下地としてコーディング開始

 取りあえず今回作成したHTML及びCSSテンプレートを基本として、これから本格的にWordPressサイト構築のためHTML&CSS&PHPコーディングを開始していく。
 とは言ってもこれからの状況に応じて、また作成するサイト毎に最も適応した形にHTMLもCSSも変更を加えていく可能性は大だが。

 ここまで来るのにえらく時間がかかったが、作成予定のサイトは既存の運営サイトのHTMLとCSSをそっくりそのままではないがその多くを流用するため、割とサクサクと進んでいく予定。

 ……あくまで予定だが(笑)



Loading...
コメント
コメントの投稿
【Font & Icon】
管理者にだけ表示を許可する
プロフィール

雪陽炎

Author:雪陽炎
 PCやデジタル機器類いじりの他にも、あれやこれやと趣味を持つ器用貧乏な奈良県民。
 初心者向け兼自身の忘備録としてPC及びデジタル機器関連の情報をまとめてます。

参加ブログランキング

にほんブログ村 PC家電ブログ パソコン・周辺機器へ にほんブログ村 PC家電ブログ 家電・AV機器へ
にほんブログ村 PC家電ブログ PCオーディオへ
人気ブログランキングへ
人気ブログランキングへ
最新記事
スポンサ-ドリンク
最新コメント
最新トラックバック
Amazon
楽天
ブロとも申請フォーム

この人とブロともになる

関連記事Loader

[猫カフェ]futaha

スポンサードリンク
本館/別館サイト
カテゴリ
ブックマーク
最近のチェックリスト / PC関連
最近のチェックリスト / AV関連
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。