title: cssを反映させたり、header, sidebar, footer に分けたり。テンプレートタグを記述してい…

WordPressテーマを作り始める。Initializr HTML5 というhtmlなテンプレートを元に。からのつづきです。

 

前回はテーマの有効化まででした。

Codexのテーマ開発ページ順序にできるだけ沿って進みます。（というかCodexの通りにやればできあがるはずなんですよ

テンプレートタグを書く前にcssを

前回 style.css を作成しました。

今後 style.css にスタイルは書きません、style.css はテーマ情報を書くものとして捉えます。

sass や less を使うつもりなのでディレクトリ構造的にもそのほうが管理しやすいからです。

css は sass に変換してテーマを作ります、わからない人は以前sassについて書いた記事を読むか、すっ飛ばしてください。

css をちょっと修正

Initializr という素晴らしいフレームワークなのですが若干修正。

--- a/css/main.css
+++ b/css/main.css
@@ -49,10 +49,10 @@ textarea {
 }

 .chromeframe {
-    margin: 0.2em 0;
+    margin: .2em 0;
     background: #ccc;
     color: #000;
-    padding: 0.2em 0;
+    padding: .2em 0;
 }

@@ -137,7 +137,7 @@ nav a:hover {

 .main aside {
     color: white;
-    padding: 0px 5% 10px;
+    padding: 0 5% 10px;
 }

 .footer-container footer {
@@ -206,7 +206,7 @@ nav a:hover {
     }

     .oldie nav a {
-        margin: 0 0.7%;
+        margin: 0 .7%;
     }
 }

これはWordPressコーディングガイドラインに則って。

次になぜか残ったままのバグを修正

--- a/css/main.css
+++ b/css/main.css
@@ -205,7 +205,7 @@ nav a:hover {
         display: inline;
     }

-    .oldie nav a {
+    .lt-ie9 nav a {
         margin: 0 .7%;
     }
 }

で、この後 css を scss に変換したり、 IE 用のスタイルを切り分けたり、scssをさらにsassに変換したり。

このあたりは自分の勉強のためやっておく。

とりあえずsassにしてコンパイルしたcssがこれ ↓

/* ==========================================================================
 * Normalize
 * ========================================================================== */
/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} */
/* ==========================================================================
 * Main Styles
 * ========================================================================== */
/* ==========================================================================
 * HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
 * ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222222;
}

body {
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection,
::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

img {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.chromeframe {
  margin: 0.2em 0;
  background: #cccccc;
  color: black;
  padding: 0.2em 0;
}

/* ===== Initializr Styles ==================================================
 * Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
 * ========================================================================== */
body {
  font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

.wrapper {
  width: 90%;
  margin: 0 5%;
}

/* ===================
 *  ALL: Orange Theme
 * =================== */
.header-container {
  border-bottom: 20px solid #e44d26;
}

.footer-container,
.main aside {
  border-top: 20px solid #e44d26;
}

.header-container,
.footer-container,
.main aside {
  background: #f16529;
}

.title {
  color: white;
}

/* ==============
 *  MOBILE: Menu
 * ============== */
nav ul {
  margin: 0;
  padding: 0;
}
nav a {
  display: block;
  margin-bottom: 10px;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  color: white;
  background: #e44d26;
}
nav a:hover, nav a:visited {
  color: white;
}
nav a:hover {
  text-decoration: underline;
}

/* ==============
 *  MOBILE: Main
 * ============== */
.main {
  padding: 30px 0;
}
.main article h1 {
  font-size: 2em;
}
.main aside {
  color: white;
  padding: 0 5% 10px;
}

.footer-container footer {
  color: white;
  padding: 20px 0;
}

/* ==========================================================================
 * Author's custom styles
 * ========================================================================== */
/* ==========================================================================
 * Media Queries
 * ========================================================================== */
@media only screen and (min-width: 480px) {
  /* ====================
   *  INTERMEDIATE: Menu
   * ==================== */
  nav a {
    float: left;
    width: 27%;
    margin: 0 1.7%;
    padding: 25px 2%;
    margin-bottom: 0;
  }
  nav li:first-child a {
    margin-left: 0;
  }
  nav li:last-child a {
    margin-right: 0;
  }
}
@media only screen and (min-width: 768px) {
  /* ====================
   *  WIDE: CSS3 Effects
   * ==================== */
  .header-container,
  .main aside {
    -webkit-box-shadow: 0 5px 10px #aaaaaa;
    -moz-box-shadow: 0 5px 10px #aaaaaa;
    box-shadow: 0 5px 10px #aaaaaa;
  }

  /* ============
   *  WIDE: Menu
   * ============ */
  .title {
    float: left;
  }

  nav {
    float: right;
    width: 38%;
  }

  /* ============
   *  WIDE: Main
   * ============ */
  .main article {
    float: left;
    width: 57%;
  }
  .main aside {
    float: right;
    width: 28%;
  }
}
@media only screen and (min-width: 1140px) {
  /* ===============
   *  Maximal Width
   * =============== */
  .wrapper {
    width: 1026px;
    /* 1140px - 10% for margins */
    margin: 0 auto;
  }
}
/* ==========================================================================
 * Helper classes
 * ========================================================================== */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}
.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix {
  *zoom: 1;
}
.clearfix:before {
  content: " ";
  display: table;
}
.clearfix:after {
  content: " ";
  display: table;
  clear: both;
}

/* ==========================================================================
 * Print styles
 * ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a {
    text-decoration: underline;
  }
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /* Don't show links for images, or javascript/internal links */
  .ir a:after {
    content: "";
  }

  a[href^="javascript:"]:after, a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  /* h5bp.com/t */
  tr {
    page-break-inside: avoid;
  }

  img {
    page-break-inside: avoid;
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
}

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* Welcome to Compass. Use this file to write IE specific override styles.
 * Import this file using the following HTML or equivalent:
 * <!--[if IE]>
 *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
 * <![endif]--> */
/* ===============
 *  ALL: IE Fixes
 * =============== */
.ie7 .title {
  padding-top: 20px;
}

@media only screen and (min-width: 480px) {
  /* ========================
   * INTERMEDIATE: IE Fixes
   * ======================== */
  nav ul li {
    display: inline;
  }

  .lt-ie9 nav a {
    margin: 0 0.7%;
  }
}

 

css は テーマフォルダ/css/ 以下のものを使うようにします。

index.php の css, js パスをテンプレートタグで置き換える前にちょっと

前回のままだとスタイルが反映されません。

css や js のリソースファイルパスをWordPressのテンプレートタグに書き変え。

ちょっとこの辺りの関数について。

get_stylesheet_uri()

テーマのスタイルシート style.css のURIを返す関数です。

今回は使いません。

get_template_directory_uri()

テーマディレクトリのURI（最後のスラッシュ / は省略されます）を返す関数です。

子テーマを使ってる場合、親テーマのURIが返されます。

子テーマで書き変えられたくない場合に使います。

get_stylesheet_directory_uri()

テーマディレクトリのURI（最後のスラッシュ / は省略されます）を返す関数です。

子テーマを使ってる場合、子テーマのURIが返されます。

get_template_directory_uri() と違うところですね。

主に画像やリンクで使われます。

 

という感じ。

スタイルシートやスクリプトは、wp_enqueue_style や wp_enqueue_scripts を使うほうがいいのですが、順を追うためこれらは後回し。

パスをテンプレートタグで置き換える

index.php を開いて書き変え。

--- a/index.php
+++ b/index.php
@@ -14,10 +14,11 @@
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width">

-	<link rel="stylesheet" href="css/normalize.min.css">
-	<link rel="stylesheet" href="css/main.css">
+	<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/screen.css">
+	<!--[if lt IE 9]>
+	<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ie.css"><![endif]-->

-	<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
+	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
 </head>
 <body>
 <!--[if lt IE 7]>
@@ -84,10 +85,10 @@
 </div>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
+<script>window.jQuery || document.write('<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

-<script src="js/plugins.js"></script>
-<script src="js/main.js"></script>
+<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/plugins.js"></script>
+<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/main.js"></script>

 <script>
 	var _gaq = [

こんな感じで書き変えましたー。

これでcssが効きます。

表示された
表示された。管理バーはまだ。

index.php から header, sidebar, footer を切り出す

index.php が少しは形になったので基本テンプレートの3つを分けます。

header.php

ヘッダー部分は上からまるごと、ナビゲーション下のところまで。

<?php
/**
 * ヘッダー
 *
 * <head> セクションをすべてと、<div class="main-container"> までを表示
 *
 * @package    WordPress
 * @subpackage Hoho
 */
?>
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/screen.css">
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ie.css"><![endif]-->

	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please
	<a href="http://browsehappy.com/">upgrade your browser</a> or
	<a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.
</p>
<![endif]-->

<div class="header-container">
	<header class="wrapper clearfix">
		<h1 class="title">h1.title</h1>
		<nav>
			<ul>
				<li><a href="#">nav ul li a</a></li>
				<li><a href="#">nav ul li a</a></li>
				<li><a href="#">nav ul li a</a></li>
			</ul>
		</nav>
	</header>
</div>

<div class="main-container">

 

sidebar.php

サイドバーは <aside> 部分。

<?php
/**
 * サイドバー
 *
 * メインウィジェット領域を含むサイドバー。
 *
 * @package    WordPress
 * @subpackage Hoho
 */
?>

<aside>
	<h3>aside</h3>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
</aside>

 

footer.php

フッターはヘッダーで切った class=”main-container” の閉じタグから下全部。

<?php
/**
 * フッター
 *
 * class="main-container" div の閉じタグ以降のコンテンツ
 *
 * @package    WordPress
 * @subpackage Hoho
 */
?>

</div>
<!-- #main-container -->

<div class="footer-container">
	<footer class="wrapper">
		<h3>footer</h3>
	</footer>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/plugins.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/main.js"></script>

<script>
	var _gaq = [
		['_setAccount', 'UA-XXXXX-X'],
		['_trackPageview']
	];
	(function (d, t) {
		var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
		g.src = '//www.google-analytics.com/ga.js';
		s.parentNode.insertBefore(g, s)
	}(document, 'script'));
</script>
</body>
</html>

 

index.php

それぞれheader, sidebar, footer があったところに各々、

  • get_header()
  • get_sidebar()
  • get_footer()

を書く。

<?php
/**
 * メインのテンプレートファイル
 *
 * WordPressテーマに必要な2つのテンプレートファイルのうち最も基本的なもの（もう一つは style.css）。
 * 特定のクエリに一致しない時にページを表示するため読み込まれる。
 * 例: home.phpファイルが存在しない時に使われる。
 * 詳しくは Codex へ: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package    WordPress
 * @subpackage Hoho
 */

get_header(); ?>

<div class="main wrapper clearfix">

	<article>
		<header>
			<h1>article header h1</h1>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
		</header>
		<section>
			<h2>article section h2</h2>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
		</section>
		<section>
			<h2>article section h2</h2>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
		</section>
		<footer>
			<h3>article footer h3</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
		</footer>
	</article>

	<?php get_sidebar(); ?>

</div>
<!-- #main -->

<?php get_footer(); ?>

 

とりあえず今回はこれで。

css等、若干端折ってるところがあるので Github のコミットを追ってもらうのが間違いないです。

次はWordPressのテーマに必須なテンプレートタグを使っていく予定です。

フィードバック: 1件

css の記述に良く分からないのが既にいっぱい(ノД`)

コメント、してみません？