林家次男

タグ: HTML5

  • WordPress 3.9 でキャプションとギャラリーが HTML5 に対応、テーマ作ってる人は要チェック。

    WordPress 3.9 でキャプションとギャラリーが HTML5 に対応、テーマ作ってる人は要チェック。

    そろそろ WordPress 3.9 が来そうですね！

    TinyMCE のメジャーバージョンが上がったり、その他細かく変わっている3.9、一応追えるだけ追ってます。

    今回は WordPress 3.9 から実装される、キャプションとギャラリーの HTML5 対応について。

     

    HTML5 対応とは

    WordPress 3.6 から追加されました HTML5 対応。

    3.6 から使えたのは、

    • コメントリスト
    • コメントフォーム
    • 検索フォーム

    の3つでした。

    3.9 からは新たにここへ、ギャラリーとキャプションが追加されるというわけです。

     

    キャプションの HTML5 対応での変化

    キャプション、HTML5 でない通常の出力コードは

    <div class="wp-caption" style="" id="attachment_xxx">
	<img height="xxx" width="xxx" src="http://example.com/img.jpg" alt="xxx" title="xxx" class="wp-image-xxx">

	<p class="wp-caption-text">
		キャプションのテキスト
	</p>
</div>

    div で画像とキャプションのテキストを囲う出力です。

    HTML5 に対応させると、

    <figure class="wp-caption" style="" id="attachment_xxx">
	<img height="xxx" width="xxx" src="http://example.com/img.jpg" alt="xxx" title="xxx" class="wp-image-xxx">

	<figcaption class="wp-caption-text">
		キャプションのテキスト
	</figcaption>
</figure>

    図表を示すタグである figure とその注釈を示す figcaption にそれぞれ置き換わり、正しい意味づけのマークアップへと変貌します。

     

    ギャラリーの HTML5 対応での変化

    ギャラリー、HTML5 でない通常の出力コードは

    <div class="gallery ..." id="gallery-x" ...>
	<dl class="gallery-item">
		<dt class="gallery-icon landscape">
			<a href="http://example.com/img.jpg">
				<img height="150" width="150" ... />
			</a>
		</dt>
		<dd class="wp-caption-text gallery-caption">
			キャプションのテキスト
		</dd>
	</dl>
	<dl class="gallery-item">
		…
	</dl>
	<br style="clear: both">
</div>

    出力は dl、定義リストでマークアップされています。

    HTML5 に対応させると、

    <div class="gallery ..." id="gallery-x" ...>
	<figure class="gallery-item">
		<div class="gallery-icon landscape">
			<a href="http://example.com/img.jpg">
				<img height="150" width="150" ... />
			</a>
		</div>
		<figcaption class="wp-caption-text gallery-caption">
			キャプションのテキスト
		</figcaption>
	</figure>
	<figure class="gallery-item">
		…
	</figure>
	<br style="clear: both">
</div>

    キャプションの対応と似た感じ、画像を figure で括り、キャプションは figcaption でキャプションを示すように。

    そして dt → div ですね。

    HTML5 マークアップによって意味づけがなされたことを見てとれます。

     

    キャプション・ギャラリーの HTML5適用方法

    コードは簡単、add_theme_support のにて記述。

    add_theme_support( 'html5', array( 'caption', 'gallery' ) );

    すでに記述がある場合は、配列に caption と gallery を足してやればいいです。

    適用できるもの全てを HTML5 にする場合はこう。

    // キャプション、コメントフォーム、検索フォーム、コメントリスト、ギャラリーを html5 マークアップにしてくれる
add_theme_support( 'html5', array( 'caption', 'comment-list', 'comment-form', 'gallery', 'search-form' ) );

    WordPress 3.8以下で足しておいても問題は起きないし何も変わらないので、今のうちに書いておくといいかも。

     

    css の追加・変更が必要

    HTML5 対応に伴い、スタイル指定を少し変えてやる必要があります。

    Twenty Thirteen, Twenty Fourteen のギャラリー&キャプション HTML5 対応&修正コミットを参考にしてスタイル指定をちょっと変えてあげればいいです。

     

    ﾎﾎまとめ

    毎回のバージョンアップで機能が次々と追加されるので楽しいですね。

    次は増えた関数で使えそうなのをまとめようと思います。

    バージョンアップマニアとしてはしばらく愉快な日々が続きそう。

  • 最後にちょっと修正を入れてテーマ制作終わりです。【テーマ作成 その⑧】

    最後にちょっと修正を入れてテーマ制作終わりです。【テーマ作成 その⑧】

    【テーマ作成 その⑦】からのつづきです。

     

    7回もああだこうだとやってしまいました、今回でラストです。

    WordPress Codex のガイドラインに沿って制作すれば簡単にできるよ、ってことで始めました。

    開発は継続しますが、テーマ作成の記事としては今回で終わります。

    では早速。

    wp_enqueue_style, wp_enqueue_script

    エンキューを使って css, js を読み込むことが推奨されてます。

    エンキューというのはプログラム用語でデータをリストへ格納する、って意味です。

    で、WordPress ではこれらをアクションフックで使ってね、ということなんでまずは Codex のサンプルを functions.php にコピペ。

    diff --git a/functions.php b/functions.php
--- a/functions.php
+++ b/functions.php
@@ -86,6 +86,17 @@ add_action( 'after_setup_theme', 'hoho_setup' );

 /**
+ * スクリプトとスタイルのエンキュー、アクションフック
+ */
+function theme_name_scripts() {
+	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
+	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
+}
+
+add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
+
+
+/**
  * メインのサイドバーを定義
  *
  * @since WordPress 2.2 (2.9.0: description プロパティ追加

     

    css, js をエンキューに移動

    エンキューの用意ができたんで、header.php, footer.php に書かれていた css, js をエンキューへ。

    jQuery は WordPress 側で呼んでくれるので割愛（CDN版を使うのもアリですね。

    ※ソースコードを貼ってるところの先頭行に -が付いてるのは削除行、+が付いてるのは追加行になります。

    diff --git a/header.php b/header.php
--- a/header.php
+++ b/header.php
@@ -25,13 +25,6 @@

 	<title><?php wp_title(); ?></title>

-	<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>
-
-	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
 	<?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>

diff --git a/footer.php b/footer.php
--- a/footer.php
+++ b/footer.php
@@ -38,12 +38,6 @@
 	</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>
-
 <?php wp_footer(); ?>
 </body>
 </html>

diff --git a/functions.php b/functions.php
--- a/functions.php
+++ b/functions.php
@@ -88,12 +88,32 @@ add_action( 'after_setup_theme', 'hoho_setup' );
 /**
  * スクリプトとスタイルのエンキュー、アクションフック
  */
-function theme_name_scripts() {
-	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
-	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
+function hoho_scripts() {
+
+	// メインのスタイルシート
+	wp_enqueue_style( 'hoho-style', get_stylesheet_directory_uri() . '/css/screen.css' );
+	// IE 用のスタイルシート
+	if ( ! is_admin() )
+		wp_register_style( 'hoho-style-ie', get_stylesheet_directory_uri() . '/css/ie.css' );
+	$GLOBALS['wp_styles']->add_data( 'hoho-style-ie', 'conditional', 'lt IE 9' );
+	wp_enqueue_style( 'hoho-style-ie' );
+
+
+	// コメント用スクリプト
+	if ( is_singular() )
+		wp_enqueue_script( 'comment-reply' );
+	// Modernizr ライブラリ
+	wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js' );
+	// メインの js
+	wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js' );
+
+	// コンソールエラー回避のためのヘルパースクリプト
+	if ( WP_DEBUG )
+		wp_enqueue_script( 'plugins-js', get_template_directory_uri() . '/js/plugins.js' );
+
 }

-add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
+add_action( 'wp_enqueue_scripts', 'hoho_scripts' );

 /**

     

    テーマのバージョンを THEME_VER に定義

    エンキューではバージョンを付加できる (例: style.css?ver=0.1) ので、css に関してはテーマのバージョンを付加させようと思います。

    テーマのバージョンを取得するには、WordPress のテンプレートタグ、wp_get_theme() を使います。

    wp_get_theme を使うと、現在のテーマ情報が取得できます↓こんな感じ

    WP_Theme Object
(
    [theme_root:WP_Theme:private] => L:\www\wp/wp-content/themes
    [headers:WP_Theme:private] => Array
        (
            [Name] => Hoho
            [ThemeURI] => http://hayashikejinan.com
            [Description] => hoho theme for WordPress.
            [Author] => hayashikejinan
            [AuthorURI] => http://profiles.wordpress.org/hayashikejinan
            [Version] => 0.1
            [Template] => 
            [Status] => 
            [Tags] => orange, two-columns
            [TextDomain] => 
            [DomainPath] => 
        )

    [headers_sanitized:WP_Theme:private] => 
    [name_translated:WP_Theme:private] => 
    [errors:WP_Theme:private] => 
    [stylesheet:WP_Theme:private] => hoho
    [template:WP_Theme:private] => hoho
    [parent:WP_Theme:private] => 
    [theme_root_uri:WP_Theme:private] => 
    [textdomain_loaded:WP_Theme:private] => 
    [cache_hash:WP_Theme:private] => c25c98525eeda79ecf4f4ca8615765c7
)

     

    で、バージョンの数字だけ欲しいのでバージョンだけ取得して、define で定義。

    diff --git a/functions.php b/functions.php
--- a/functions.php
+++ b/functions.php
@@ -9,6 +9,12 @@
  * @subpackage Hoho
  */

+// テーマのバージョンを取得・定義
+$ver = wp_get_theme();
+$ver = $ver->get( 'Version' );
+define( 'THEME_VER', $ver );
+
+
 /**
  * コンテンツエリアの最大許容幅を設定
  *

     

    これで THEME_VER という定数が使えるようになりました。

    wp_enqueue_style・wp_enqueue_script にハンドル・バージョン・スクリプト呼び出し情報付加

    ということで、エンキューにバージョン情報を。

    ここで wp_enqueue_style, wp_enqueue_script についてちょっと詳しく。

    wp_enqueue_style

    wp_register_style で登録して、wp_enqueue_style で出力する命令、って感じです。

    使い方は、<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?> という形で。

    パラメータ

    • $handle…これだけ必須のパラメータ。スタイルシートのハンドルとして使われる名前。
    • $src…css のURL。
    • $deps…この css 以前に読み込まないといけない場合指定するパラメータ。配列で指定。
    • $ver…css に付加されるバージョン。正しくキャッシュさせるために使う。
    • $media…css が定義されるメディアを特定。例: ‘all’, ‘screen’, ‘handheld’, ‘print’

    wp_enqueue_script

    ~style と似てます、register で登録、enqueue で出す。

    使い方は <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?> という形。

    パラメータがちょっと違いますね。

    パラメータ

    • $handle…同上。
    • $src…js のURL。
    • $deps…この js 以前に読み込まないといけない、または依存する js がある場合指定するパラメータ。配列で指定。
    • $ver…js に付加されるバージョン。正しくキャッシュさせるために使う。
    • $in_footer…通常 <head> 部分に js は配置されますが、true の場合 </body> 直前に配置できます（wp_footer() があれば

    ということです。

     

    これらを元にエンキュー部分を修正すると、

    diff --git a/functions.php b/functions.php
--- a/functions.php
+++ b/functions.php
@@ -97,10 +97,10 @@ add_action( 'after_setup_theme', 'hoho_setup' );
 function hoho_scripts() {

 	// メインのスタイルシート
-	wp_enqueue_style( 'hoho-style', get_stylesheet_directory_uri() . '/css/screen.css' );
+	wp_enqueue_style( 'hoho-style', get_stylesheet_directory_uri() . '/css/screen.css', array(), THEME_VER );
 	// IE 用のスタイルシート
 	if ( ! is_admin() )
-		wp_register_style( 'hoho-style-ie', get_stylesheet_directory_uri() . '/css/ie.css' );
+		wp_register_style( 'hoho-style-ie', get_stylesheet_directory_uri() . '/css/ie.css', array(), THEME_VER );
 	$GLOBALS['wp_styles']->add_data( 'hoho-style-ie', 'conditional', 'lt IE 9' );
 	wp_enqueue_style( 'hoho-style-ie' );

@@ -109,13 +109,14 @@ function hoho_scripts() {
 	if ( is_singular() )
 		wp_enqueue_script( 'comment-reply' );
 	// Modernizr ライブラリ
-	wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js' );
+	wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js',
+		array(), '2.6.2', false );
 	// メインの js
-	wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js' );
+	wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), THEME_VER, true );

 	// コンソールエラー回避のためのヘルパースクリプト
 	if ( WP_DEBUG )
-		wp_enqueue_script( 'plugins-js', get_template_directory_uri() . '/js/plugins.js' );
+		wp_enqueue_script( 'plugins-js', get_template_directory_uri() . '/js/plugins.js', array(), THEME_VER, true );

 }

     

    はいできました、パラメータを適切に指定。

    archive.php, search.php を作成

    アーカイブ表示用と検索結果表示用のテンプレートを作成します。

    といっても、index.php をコピーしてタイトルを変えるだけで済ませます。

    diff --git a/archive.php b/archive.php
new file mode 100644
--- /dev/null
+++ b/archive.php
@@ -0,0 +1,38 @@
+<?php
+/**
+ * アーカイブのテンプレートファイル
+ *
+ * 特定のクエリに一致しない時にアーカイブページ（タグ、カテゴリー、日付別、作成者）を表示するため読み込まれる。
+ * 例: date.phpファイルが存在しない時に日付別アーカイブとして使われる。
+ * 詳しくは Codex へ: http://codex.wordpress.org/Template_Hierarchy
+ *
+ * @package    WordPress
+ * @subpackage Hoho
+ */
+
+get_header(); ?>
+
+<div class="wrapper clearfix">
+
+	<div class="main clearfix">
+
+		<?php
+		// content.php を読み込む
+		get_template_part( 'content' ); ?>
+
+		<!-- pagination -->
+		<div class="navigation">
+			<div class="alignleft"><?php previous_posts_link( '&laquo; 前へ' ) ?></div>
+			<div class="alignright"><?php next_posts_link( '次へ &raquo;', '' ) ?></div>
+		</div>
+		<!-- pagination -->
+
+	</div>
+	<!-- #main -->
+
+	<?php get_sidebar(); ?>
+
+</div>
+<!-- #wrapper -->
+
+<?php get_footer(); ?>

diff --git a/search.php b/search.php
new file mode 100644
--- /dev/null
+++ b/search.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * 検索結果のテンプレートファイル
+ *
+ * @package    WordPress
+ * @subpackage Hoho
+ */
+
+get_header(); ?>
+
+<div class="wrapper clearfix">
+
+	<div class="main clearfix">
+
+		<?php
+		// content.php を読み込む
+		get_template_part( 'content' ); ?>
+
+		<!-- pagination -->
+		<div class="navigation">
+			<div class="alignleft"><?php previous_posts_link( '&laquo; 前へ' ) ?></div>
+			<div class="alignright"><?php next_posts_link( '次へ &raquo;', '' ) ?></div>
+		</div>
+		<!-- pagination -->
+
+	</div>
+	<!-- #main -->
+
+	<?php get_sidebar(); ?>
+
+</div>
+<!-- #wrapper -->
+
+<?php get_footer(); ?>

     

    コピーできたらページタイトルを表示するように小変更。

    diff --git a/archive.php b/archive.php
--- a/archive.php
+++ b/archive.php
@@ -16,6 +16,14 @@ get_header(); ?>

 	<div class="main clearfix">

+		<header class="page-header">
+
+			<h1 class="page-title">
+				<?php wp_title(''); ?>
+			</h1>
+
+		</header>
+
 		<?php
 		// content.php を読み込む
 		get_template_part( 'content' ); ?>

diff --git a/search.php b/search.php
--- a/search.php
+++ b/search.php
@@ -12,6 +12,14 @@ get_header(); ?>

 	<div class="main clearfix">

+		<header class="page-header">
+
+			<h1 class="page-title">
+				<?php wp_title(''); ?>
+			</h1>
+
+		</header>
+
 		<?php
 		// content.php を読み込む
 		get_template_part( 'content' ); ?>

     

    しゅっと終わらせました。

    別途表示させたいものがある場合、これらのテンプレートに書いていけばオッケーですね。

    header, footer 調整

    header: titleタグ、ヘッダータイトル修正、footer: copyright に書き変え。

    ここは WordPress 関係ないのでささっと。

    diff --git a/footer.php b/footer.php
--- a/footer.php
+++ b/footer.php
@@ -34,7 +34,11 @@
 	</div>

 	<footer class="wrapper">
-		<h3>footer</h3>
+
+		<p class="copyright">
+			&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?>.
+		</p>
+
 	</footer>
 </div>

diff --git a/footer.php b/footer.php
--- a/footer.php
+++ b/footer.php
@@ -34,7 +34,11 @@
 	</div>

 	<footer class="wrapper">
-		<h3>footer</h3>
+
+		<p class="copyright">
+			&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?>.
+		</p>
+
 	</footer>
 </div>

     

    404.php

    404エラー時に見せる用のテンプレート。

    URL打ち間違い等で404が出がちなので、凝りに凝ってるサイトさんをよく見かけます。

    最低限の404っぽさを出しつつ変更。

    <?php
/**
 * 404 エラーページ (Not Found) を表示するテンプレート
 *
 * @package    WordPress
 * @subpackage Hoho
 */

get_header(); ?>

<div class="wrapper clearfix">

	<div class="main clearfix">

		<article>
			<section>
				<h1>Not found <span>:(</span></h1>

				<p>申し訳ありませんが、あなたが表示しようとしたページは存在しません。</p>

				<p>考えられる原因は:</p>
				<ul>
					<li>URLの打ち間違い</li>
					<li>リンクの期限切れ</li>
				</ul>
				<p>です。</p>

				<h3>その他のヒント:</h3>

				<?php get_search_form(); ?>

			</section>
		</article>

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

	<?php get_sidebar(); ?>

</div>
<!-- #wrapper -->

<?php get_footer(); ?>

     

     

    css 調整

    css をちょっとだけ直し。

    diff --git a/css/screen.css b/css/screen.css
--- a/css/screen.css
+++ b/css/screen.css
@@ -116,8 +116,11 @@ a img.aligncenter {
 }

 .wp-caption {
-  background: white;
+  background: #eeeeee;
   border: 1px solid #f0f0f0;
+  -webkit-box-shadow: 0 5px 10px #aaaaaa;
+  -moz-box-shadow: 0 5px 10px #aaaaaa;
+  box-shadow: 0 5px 10px #aaaaaa;
   max-width: 96%;
   /* Image does not overflow the content area */
   padding: 5px 3px 10px;
@@ -259,6 +262,10 @@ nav a:hover {
 .main article h1 {
   font-size: 2em;
 }
+.main article img {
+  height: auto;
+  max-width: 100%;
+}

 .mceContentBody {
   padding: 0 20px;

diff --git a/sass/_main.sass b/sass/_main.sass
--- a/sass/_main.sass
+++ b/sass/_main.sass
@@ -93,8 +93,9 @@ a img
 		margin-right: auto

 .wp-caption
-	background: #fff
+	background: #eee
 	border: 1px solid #f0f0f0
+	@include box-shadow(0 5px 10px #aaa)
 	max-width: 96%
 	/* Image does not overflow the content area
 	padding: 5px 3px 10px
@@ -212,8 +213,12 @@ nav
 	padding: 30px 0

 .main
-	article h1
-		font-size: 2em
+	article
+		h1
+			font-size: 2em
+		img
+			height: auto
+			max-width: 100%

 // for visual editor
 .mceContentBody

     

    不要なファイルを消す

    Initializr という html5 なテンプレートを元に作り始めたんですけども、WordPress のテーマとしては不要なファイルがあるため削除。

    • .htaccess
    • crossdomain.xml
    • humans.txt
    • robots.txt

    の4つを消し去る。

    これでテーマ完成と相成りました（ダウンロードは こちら

    ※完成と言ってますが、記事中 css や html はスルーしてるため、なにかと見た目は残念なところがあります。公式テーマとしてリリースするまで待ってもらえると幸いです。

    終わりに

    そもそも自分のブログのテーマを変えようと思ったのがことの発端。

    せっかくなので簡単にできるところまでは Codex の解説も入れつつ記事にしていこうとやってきました。

    作成途中モチベーションがなくなったり忙殺されたりで間が空いたりしましたけども、作業内容としては 1日あれば充分できる内容だと思います。

    というより、Codex の通りにやればテーマなんて簡単に作れる（ある程度まではね）んですよ。

    少しの決意表明とやる気があれば充分、なことが伝われば幸いです。

     

    ちなみに、今後は記事を書かなくてよくなったためがっつり作成にとりかかり、WordPress公式ディレクトリに登録するところまでいくつもりです。

    では長々とやってきたテーマ作成はその⑧を以て終わりにしようと思います。

    〆

  • Theme Check 2回目。functions.php 多いですけど、ここ大事。【テーマ作成 その⑦】

    Theme Check 2回目。functions.php 多いですけど、ここ大事。【テーマ作成 その⑦】

    【テーマ作成 その⑥】からの続きです。

     

    テーマチェック2回目を行い、細かい所をブラッシュアップしていきます。

    今回はほぼ functions.php に書いていく感じです。

    よく詰まるところですが、Codex の通りにシンプルな実装をすれば問題なくできるのでがんばってみましょう。

    量が多いので若干端折ってるところはありますが、なるべくわかりやすいよう書いたつもりです。

    Theme Check

    1回目ではある程度 (基本的なテストをパスするぐらい) しかやってませんでしたので、滞りなくやっちゃいます。

    Theme Check やらの準備は過去記事を参照のこと。

    はい、いくつか出ました。

    出てます出てます
    出てます出てます

     

    ではひとつひとつ（都合により順番は前後しました）見ていきましょう。

    このテーマには投稿記事ページネーションのコードがありません

    必須: このテーマには投稿記事ページネーションのコードがありません。posts_nav_link() もしくは paginate_links() もしくは next_posts_link() と previous_posts_link() を使用して投稿記事ページネーションを追加してください。

    “前の記事へ” “次の記事へ” ってやつですね。

    Codex の posts_nav_link を参考に。

    ※ソースコードを貼ってるところの先頭行に -が付いてるのは削除行、+が付いてるのは追加行になります。

    --- a/index.php
+++ b/index.php
@@ -21,6 +21,13 @@ get_header(); ?>
 		// content.php を読み込む
 		get_template_part( 'content' ); ?>

+		<!-- pagination -->
+		<div class="navigation">
+			<div class="alignleft"><?php previous_posts_link( '&laquo; 前へ' ) ?></div>
+			<div class="alignright"><?php next_posts_link( '次へ &raquo;', '' ) ?></div>
+		</div>
+		<!-- pagination -->
+
 	</div>
 	<!-- #main -->
    できた
    できた

    wp_link_pages が見つかりませんでした

    必須: wp_link_pages が見つかりませんでした。参考: wp_link_pages <?php wp_link_pages( $args ); ?>

    記事を数ページに分けた時用のページャーを表示する関数ですね。

    記事を数ページに分けるなんてやらへんわ！とは思うものの実装。

    --- a/single.php
+++ b/single.php
@@ -16,6 +16,10 @@ get_header(); ?>
 		// content.php を読み込む
 		get_template_part( 'content' ); ?>

+		<div class="page-links">
+			<?php wp_link_pages(); // 記事内ページャー ?>
+		</div>
+
 	</div>
 	<!-- #main -->
    ぺーじゃー
    ぺーじゃー

    テーマ内にファイル readme.txt が見つかりませんでした

    推奨: テーマ内にファイル readme.txt が見つかりませんでした。 より詳しい情報は Theme_Documentation をご覧ください。

    Codex には、カスタム機能や設定の使い方を説明するために書けばいいよ、と書いてますね。

    テーマによってまちまちで、更新記録が書いてあったりします。

    Theme Check 通るように作成だけとりあえずしておきましょう。

    add_theme_support とは

    ここからいくつか add_theme_support という関数を使ってのテーマ機能登録になります。

    add_theme_support はアクションフックでの登録がいいみたいです、アクションフックっていうのは簡単に言うとですね、

    「WordPress のコアファイルをいじることなく、特定の場所に割り込んで動作を指定（関数を追加）できるよ」

    ってやつです、覚えたら頗る捗るやつ。

     

    で、アクションフックに取り付ける場合は、after_setup_theme というフックでなきゃいけません。

    Codex の after setup theme アクションフックに一例 (Twenty Twelve で使われてるコード) があるので、それをベースにまず functions.php へ記述。

    add_action( ‘フック’, ‘追加する関数’ ) という形で記述します。

    新規関数を作成して、それを add_action 。

    --- a/functions.php
+++ b/functions.php
@@ -17,6 +17,16 @@
 if ( ! isset( $content_width ) )
 	$content_width = 585;

+if ( ! function_exists( 'hoho_setup' ) ):
+
+	function hoho_setup() {
+		// ここに add_theme_support を書いていく
+	}
+
+endif;
+// 'after_setup_theme' フックが実行された時に 'hoho_setup' 関数を実行する処理
+add_action( 'after_setup_theme', 'hoho_setup' );
+
 /**
  * 自動的にRSSフィードのリンクを挿入
  *

    if ( function_exists ) ってのは関数があれば true を返す PHP の関数です、 プラグインの関数を呼び出すときに使ったりしますよね。

    今回は ! がついてるので、関数がなければ実行する処理になってます。（なぜかと言うと子テーマでここを触れるようにするため）

     

    アクションフックと関数が作れたら以前に書いたコード、RSSフィードのリンクってやつは add_theme_support の仲間なので作った関数に入れてあげる。

    --- a/functions.php
+++ b/functions.php
@@ -19,8 +19,17 @@ if ( ! isset( $content_width ) )

 if ( ! function_exists( 'hoho_setup' ) ):

+	/**
+	 * テーマのデフォルト設定や、WordPress 諸機能のサポートを登録・設定します。
+	 *
+	 * この関数は init フックの前に実行される after_setup_theme フックへ繋がっていることに注意してください。
+	 * init のアクションフックだと間に合わない機能があるからです。
+	 */
 	function hoho_setup() {
-		// ここに add_theme_support を書いていく
+
+		// 投稿・コメントページで自動的にRSSフィードのリンクを <head> に挿入
+		add_theme_support( 'automatic-feed-links' );
+
 	}

 endif;
@@ -28,13 +37,6 @@ endif;
 add_action( 'after_setup_theme', 'hoho_setup' );

 /**
- * 自動的にRSSフィードのリンクを挿入
- *
- * @since WordPress 3.0
- */
-add_theme_support( 'automatic-feed-links' );
-
-/**
  * メインのサイドバーを定義
  *
  * @since WordPress 2.2 (2.9.0: description プロパティ追加

     

    このテーマ内に投稿サムネイル (アイキャッチ画像) への参照が見つかりませんでした

    推奨: このテーマ内に投稿サムネイル (アイキャッチ画像) への参照が見つかりませんでした。 このテーマにサムネイルの機能をもたせるのなら functions.php 内に add_theme_support( ‘post-thumbnails’ ) を実装したほうがいいでしょう。

    サムネイルはもはやなくてはならないと思うので要チェック。

    Codex の add_theme_support( ‘post-thumbnails’ ) を見てみます。

    パラメータやらなんやらと書いてますね、わかりやすいよう、一番簡単な実装にしておきます。

    functions.php に記述。

    --- a/functions.php
+++ b/functions.php
@@ -30,6 +30,9 @@ if ( ! function_exists( 'hoho_setup' ) ):
 		// 投稿・コメントページで自動的にRSSフィードのリンクを <head> に挿入
 		add_theme_support( 'automatic-feed-links' );

+		// アイキャッチを有効化
+		add_theme_support( 'post-thumbnails' );
+
 	}

 endif;

     

    これで投稿画面にてアイキャッチを設定できるようになります。

    このテーマ内に the_post_thumbnail() への参照が見つかりませんでした

    推奨: このテーマ内に the_post_thumbnail() への参照が見つかりませんでした。サムネイル用には、カスタムフィールドを使う代りにこの機能を実装するようお勧めします。

    アイキャッチを設定できるようにしたものの、出力をしないといけませんね。

    Codex の一例がシンプルでわかりやすいのでその通りにします。

    --- a/content.php
+++ b/content.php
@@ -29,9 +29,21 @@
 			<section>

 				<?php if ( is_singular() ) : ?>
+
 					<?php the_content(); // 記事を表示 ?>
+
 				<?php else: ?>
+
+					<?php
+					// アイキャッチが設定されているか確認
+					if ( has_post_thumbnail() ) {
+						// アイキャッチ画像を出力
+						the_post_thumbnail();
+					};
+					?>
+
 					<?php the_excerpt(); // 記事の抜粋を表示 ?>
+
 				<?php endif; ?>

 			</section>
    アイキャッチ出ましたー
    アイキャッチ出ましたー

    これでアイキャッチが出るようになりました－。

    No reference to add_theme_support( ‘custom-background’, $args ) was found in the theme

    推奨: このテーマ内に add_theme_support( ‘custom-background’, $args ) への参照が見つかりませんでした。背景画像や背景色をテーマで使用するならこの機能を実装することをお勧めします。

    英語なんで和訳しつつ。

    このカスタム背景というのは、背景の色や画像のカスタマイズを提供するテーマ機能です。

    テーマを配布する時にユーザーが任意でカスタムできるよう WordPress が備えてる機能ですね。

    ただインラインで css を吐くので個人的には使わない機能ですけども、推奨されてるんで実装。

    --- a/functions.php
+++ b/functions.php
@@ -30,6 +30,9 @@ if ( ! function_exists( 'hoho_setup' ) ):
 		// 投稿・コメントページで自動的にRSSフィードのリンクを <head> に挿入
 		add_theme_support( 'automatic-feed-links' );

+		// カスタム背景有効化
+		add_theme_support( 'custom-background' );
+
 		// アイキャッチを有効化
 		add_theme_support( 'post-thumbnails' );

     

    1行だけでオッケーです。簡単！外観メニューに背景オプションが追加されます。

    背景オプションが追加されます。
    背景オプションが追加されます。

     

    ただ、テーマによってデフォルトの色とかを決めたい、って時には配列で指定してあげないといけません。

    配列とかちょっと難しいっぽいですけども、そんなことないです。

    Codex を参考に指定。

    --- a/functions.php
+++ b/functions.php
@@ -31,7 +31,15 @@ if ( ! function_exists( 'hoho_setup' ) ):
 		add_theme_support( 'automatic-feed-links' );

 		// カスタム背景有効化
-		add_theme_support( 'custom-background' );
+		add_theme_support(
+			'custom-background',
+			array(
+				// デフォルトの色
+				'default-color' => 'fff',
+				// デフォルトの画像
+				//'default-image' => get_template_directory_uri() . '/images/background.jpg',
+			)
+		);

 		// アイキャッチを有効化
 		add_theme_support( 'post-thumbnails' );

     

     

    No reference to add_theme_support( ‘custom-header’, $args ) was found in the theme

    推奨: このテーマ内に add_theme_support( ‘custom-header’, $args ) への参照が見つかりませんでした。ヘッダー画像を使用するならこの機能を実装することをお勧めします。

    カスタム背景と似てますね、ヘッダーをユーザーが自由に変えられるよう WordPress が備えてる機能です。

    ロゴ部分に使われたりスライダーとして使われたり、実装次第でいろいろできます。

    今回は可変幅でブラウザ幅100%になるヘッダー画像として実装してみます。

    --- a/functions.php
+++ b/functions.php
@@ -41,6 +41,9 @@ if ( ! function_exists( 'hoho_setup' ) ):
 			)
 		);

+		// カスタムヘッダー画像有効化
+		add_theme_support( 'custom-header' );
+
 		// アイキャッチを有効化
 		add_theme_support( 'post-thumbnails' );

     

    こちらも1行追加すればOKなんですけども、指定したいところがあるので配列を渡して指定してあげます。

    --- a/functions.php
+++ b/functions.php
@@ -42,7 +42,23 @@ if ( ! function_exists( 'hoho_setup' ) ):
 		);

 		// カスタムヘッダー画像有効化
-		add_theme_support( 'custom-header' );
+		add_theme_support(
+			'custom-header',
+			array(
+				// デフォルトの画像
+				'default-image' => get_template_directory_uri() . '/images/header.jpg',
+				// 幅を可変にするか否か
+				'flex-width'    => true,
+				// カスタムヘッダーの画像幅
+				'width'         => 9999, // 今回は幅 100% で使うため仮の数値 9999 にしておく
+				// 高さを可変にするか否か
+				'flex-height'   => true,
+				// カスタムヘッダーの画像高さ
+				'height'        => 300,
+				// ヘッダーテキストを使うか否か
+				'header-text'   => false,
+			)
+		);

 		// アイキャッチを有効化
 		add_theme_support( 'post-thumbnails' );

    指定されてない時でもデフォルトの画像を表示するため、imagesフォルダに header.jpg という画像を入れておきます。

     

    これで外観メニューにヘッダーのオプションが追加されます。

    ヘッダーオプションが追加されます。
    ヘッダーオプションが追加されます。

     

    しかしですね、カスタムヘッダーは出力を書いてあげないといけません。

    ということで header.php に出力をするべく記述。

    --- a/header.php
+++ b/header.php
@@ -43,6 +43,17 @@
 <![endif]-->

 <div class="header-container">
+
+	<?php
+	// カスタムヘッダーを設定した場合表示する
+	if ( get_header_image() ) : ?>
+		<section class="site-header">
+			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
+				<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
+			</a>
+		</section>
+	<?php endif; ?>
+
 	<header class="wrapper clearfix">
 		<h1 class="title">h1.title</h1>
 		<nav>

     

    html のマークアップを新たにしたので、css で見た目を整える。

    --- a/css/screen.css
+++ b/css/screen.css
@@ -212,6 +212,19 @@ a:hover img {
   color: white;
 }

+/* ================
+ *  MOBILE: Header
+ * ================ */
+.site-header a,
+.site-header a img {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+.site-header img {
+  height: auto;
+  width: 100%;
+}
+
 /* ==============
  *  MOBILE: Menu
  * ============== */
--- a/sass/_main.sass
+++ b/sass/_main.sass
@@ -170,6 +170,17 @@ a:hover
 .title
 	color: white

+/* ================
+ *  MOBILE: Header
+ * ================
+.site-header
+	a,
+	a img
+		@include opacity(1.0)
+	img
+		height: auto
+		width: 100%
+
 /* ==============
  *  MOBILE: Menu
  * ==============

     

    ちょっとこの部分は長いですけども、しっかりと。

    で、ちゃんとできるとこうなりました(∩´∀｀)∩ﾜｰｲ

    カスタムヘッダーのデフォルト画像が無事表示されます。
    カスタムヘッダーのデフォルト画像が無事表示されました。

     

    ついでに WordPress 3.6 からサポートされた add_theme_support( ‘html5’) を追加

    WordPress 3.6 から新しく、add_theme_support( ‘html5’) というコメントフォーム、検索フォーム、コメントリストを html5 マークアップにしてくれる機能が追加されました。

    せっかく html5 なテーマにしましたし、仕様要件を 3.6以降にしちゃいましょう、ということで追加。

    --- a/functions.php
+++ b/functions.php
@@ -63,6 +63,9 @@ if ( ! function_exists( 'hoho_setup' ) ):
 			)
 		);

+		// コメントフォーム、検索フォーム、コメントリストを html5 マークアップにしてくれる
+		add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form' ) );
+
 		// アイキャッチを有効化
 		add_theme_support( 'post-thumbnails' );

     

    このテーマ内に add_editor_style() への参照が見つかりませんでした

    推奨: このテーマ内に add_editor_style() への参照が見つかりませんでした。テーマへのエディタースタイルの実装を推奨します。これにより、エディターのコンテンツとこのテーマの実際の出力とをマッチさせることができ、ユーザーエクスペリエンスが向上します。

    ビジュアルエディタ用に css が使えるんですよね、それを指定しろってことです。

    add_editor_style() だけを書くと、テーマのフォルダ直下の editor-style.css を読む、って動作をするんですけども

    今回はテーマ表示用のスタイルシートへ一緒に記述することにするんで、テーマのスタイルを読むように指定。

    --- a/functions.php
+++ b/functions.php
@@ -27,6 +27,9 @@ if ( ! function_exists( 'hoho_setup' ) ):
 	 */
 	function hoho_setup() {

+		// ビジュアルエディタ用の css 読み込み
+		add_editor_style( 'css/screen.css' );
+
 		// 投稿・コメントページで自動的にRSSフィードのリンクを <head> に挿入
 		add_theme_support( 'automatic-feed-links' );

     

    ビジュアルエディタで使われるクラスを css に追加。

    --- a/css/screen.css
+++ b/css/screen.css
@@ -260,6 +260,10 @@ nav a:hover {
   font-size: 2em;
 }

+.mceContentBody {
+  padding: 0 20px;
+}
+
 /* =================
  *  MOBILE: Sidebar
  * ================= */
--- a/sass/_main.sass
+++ b/sass/_main.sass
@@ -215,6 +215,10 @@ nav
 	article h1
 		font-size: 2em

+// for visual editor
+.mceContentBody
+	padding: 0 20px
+
 /* =================
  *  MOBILE: Sidebar
  * =================

     

    ビジュアルエディタ用のスタイルを Before-After で見てみると…

    左: 適用前 右: 適用後
    左: 適用前 右: 適用後

     

    しっかり適用されてます。やったね！

    このテーマ内に nav_menu への参照が見つかりませんでした

    推奨: このテーマ内に nav_menu への参照が見つかりませんでした。テーマにメニューバーがあるのなら、そのための WordPress の nav_menu 機能を使用してください。

    外観 > メニュー で作成できるメニューですね。

    使えるようにするには機能を使うよ！ってことを書かなくちゃいけません。

    functions.php にまずメニューを登録。

    --- a/functions.php
+++ b/functions.php
@@ -66,6 +66,9 @@ if ( ! function_exists( 'hoho_setup' ) ):
 		// アイキャッチを有効化
 		add_theme_support( 'post-thumbnails' );

+		// メニューを登録
+		register_nav_menu( 'primary', 'ヘッダーのメニュー' );
+
 	}

 endif;

     

    登録すると、登録したメニューが出てきます。

    メニューが追加されました。
    メニューが追加されました。

     

    ただまぁこれも出力したいところへ記述が必要ですね、header.php の元々あったメニューを書き変え。

    html5 なマークアップにしたいため配列でそうなるよう指定します。

    --- a/header.php
+++ b/header.php
@@ -56,13 +56,24 @@

 	<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>
+
+		<?php
+		/**
+		 * ヘッダーメニュー
+		 */
+		wp_nav_menu(
+			array(
+				// 使うメニューの登録した名前を指定
+				'theme_location'  => 'primary',
+				// ul を囲むタグ。div か nav を指定。false でタグなし。デフォルト値は div
+				'container'       => 'nav',
+				// container にクラスを付与
+				'container_class' => 'nav nav-top menu-container',
+				// ul にクラスを付与。デフォルト値は menu
+				'menu_class'      => 'menu menu-top',
+			)
+		); ?>
+
 	</header>
 </div>
    メニューが実装されましたー
    メニューが実装されましたー

     

    続いてせっかくなのでフッターにもメニューを追加してみます。

    同じようにメニューを登録し、表示させたいところから呼び出す。

    --- a/functions.php
+++ b/functions.php
@@ -67,7 +67,12 @@ if ( ! function_exists( 'hoho_setup' ) ):
 		add_theme_support( 'post-thumbnails' );

 		// メニューを登録
-		register_nav_menu( 'primary', 'ヘッダーのメニュー' );
+		register_nav_menus(
+			array(
+				'primary'   => 'ヘッダーのメニュー',
+				'secondary' => 'フッターのメニュー',
+			)
+		);

 	}
    --- a/footer.php
+++ b/footer.php
@@ -13,6 +13,26 @@
 <!-- #main-container -->

 <div class="footer-container">
+
+	<div class="wrapper clearfix">
+		<?php
+		/**
+		 * フッターメニュー
+		 */
+		wp_nav_menu(
+			array(
+				// 使うメニューの登録した名前を指定
+				'theme_location'  => 'secondary',
+				// ul を囲むタグ。div か nav を指定。false でタグなし。デフォルト値は div
+				'container'       => 'nav',
+				// container にクラスを付与
+				'container_class' => 'nav nav-bottom menu-container',
+				// ul にクラスを付与。デフォルト値は menu
+				'menu_class'      => 'menu menu-bottom',
+			)
+		); ?>
+	</div>
+
 	<footer class="wrapper">
 		<h3>footer</h3>
 	</footer>

     

    ファイル header.php 内にハードコードされているようなリンクが見つかりました

    そもそも、元々 html5 なテンプレートを元に作り始めたんで、そのコードが残ってます。

    IE7以下のブラウザの場合 chrome frame をオススメするメッセージを出してくれるテンプレートなのですよね。

    まぁいらないんで消しときます。

    --- a/header.php
+++ b/header.php
@@ -35,12 +35,6 @@
 	<?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
-<!--[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">

     

     

    ここまでが終わると、すごくそれっぽくなります。というか、もうなってます。

    現時点上から下までのスクショ
    現時点上から下までのスクショ

     

    まだテーマチェックで日本語が～とだけは言われますが、日本語で書いてるので問題ないですね！

    7回目の今回はだいぶとボリュームが多いですし若干難しいところです。

    ここをしっかりと追えないとテーマをいじるにもなかなか手こずるところなので、きっちり学びたいところ。

    次回、見た目や細かいところを整え。

    ここまでのzipがこちら、今までの履歴は Github でも辿れます。

  • テーマを構成するテンプレート（single.php や page.php など）を作る。【テーマ作成 その⑥】

    テーマを構成するテンプレート（single.php や page.php など）を作る。【テーマ作成 その⑥】

    【テーマ作成 その⑤】からのつづきです。

     

    今回はテーマを構成するテンプレート（single.php や page.php など）を作っていきます。

    index.php をコピーして single, page を作成

    index.php だけだとちょっと困るんで、投稿用のテンプレートファイルである single.php、ページ用のテンプレートファイルの page.php を作ります。

    最初のコメントだけ書き変えてコピー→リネーム。

    <?php
/**
 * 投稿のテンプレートファイル
 *
 * @package    WordPress
 * @subpackage Hoho
 */

get_header(); ?>

<div class="wrapper clearfix">

	<div class="main clearfix">

		<?php
		// content.php を読み込む
		get_template_part( 'content' ); ?>

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

	<?php get_sidebar(); ?>

</div>
<!-- #wrapper -->

<?php get_footer(); ?>

     

    <?php
/**
 * 固定ページのテンプレートファイル
 *
 * 固定ページを表示するデフォルトのテンプレート
 *
 * @package    WordPress
 * @subpackage Hoho
 */

get_header(); ?>

<div class="wrapper clearfix">

	<div class="main clearfix">

		<?php
		// content.php を読み込む
		get_template_part( 'content' ); ?>

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

	<?php get_sidebar(); ?>

</div>
<!-- #wrapper -->

<?php get_footer(); ?>

     

    これで投稿・ページ用のテンプレートファイルが作成されました。簡単。

    抜粋と全文を出し分ける

    前々回 index.php を作成した後、ループ処理をテンプレート化しました。

    その時は抜粋表示だけさせる the_excerpt を使いましたけども、今の段階だと投稿テンプレートやページテンプレートでも抜粋になってしまってます。

    これね
    これね

     

    このままじゃよろしくないんで、single, page で表示を出し分けましょう。

    is_singular 関数を使う

    WordPress で使えるテンプレートタグ、ってやつです。

    この is_***** って関数は全て、判別するための関数なんですよ、べんり！

    is_singular は、is_single + is_page + is_attatchment 、つまり投稿とページと添付ファイルのテンプレートな時を判別してくれるやつです。

    これを前々回作成した content.php に実装します。

    振り分けを実装する

    content.php を編集。

    ※ソースコードを貼ってるところの先頭行に -が付いてるのは削除行、+が付いてるのは追加行になります。

    --- a/content.php
+++ b/content.php
@@ -24,7 +24,11 @@
 			</header>
 			<section>

-				<?php the_excerpt(); // 記事の抜粋を表示 ?>
+				<?php if ( is_singular() ) : ?>
+					<?php the_content(); // 記事を表示 ?>
+				<?php else: ?>
+					<?php the_excerpt(); // 記事の抜粋を表示 ?>
+				<?php endif; ?>

 			</section>
 			<footer>

     

    これで振り分けができましたー。

    comments.php は必須です。

    必須だよ、ということです。

    コメントのテンプレートで必要なのは、

    • コメントを送信するフォーム
    • コメントがあればループで表示

    です。

    フォームは一番簡単な方法で作ります。

    その方法は、WordPressで標準搭載されているコメントフォームを呼び出してあげる、です。

    フォームを呼び出す

    Codex の comment_form に詳しく書いてありますね。

    コメントはプラグインを使ってるブログがおそらく大多数だと思うんで、詳細は省いてあっさりいきます。

    <?php
/**
 * コメントを表示するためのテンプレート
 *
 * コメント・コメントフォームの両方が含まれる。
 *
 * @package    WordPress
 * @subpackage Hoho
 */
?>

<?php comment_form(); // コメントフォームを呼び出す ?>

     

    コメントをループで表示する

    このままだとフォームしか出ず、コメントを書いても表示されません。

    コメントを表示させるループを実装しましょう。

    コメントはプラグインを使ってるブログがおそらく大多数だと思うんで、詳細は省 (ry

    Codex の Enhanced Comment Display を参考に。

    <?php
/**
 * コメントを表示するためのテンプレート
 *
 * コメント・コメントフォームの両方が含まれる。
 *
 * @package    WordPress
 * @subpackage Hoho
 */
?>

<div id="comments" class="comments">

	<?php
	// パスワード保護機能のサポート
	if ( post_password_required() ) {
		echo '<p class="no-comments">この投稿はパスワードで保護されています。コメントを表示するには、パスワードを入力して下さい。</p>';
		return;
	}
	?>

	<?php if ( have_comments() ) : // コメントがある ?>
		<h4 id="comment-title">
			<?php comments_number(); ?>
		</h4>
		<ul class="comment-list">
			<?php wp_list_comments(); ?>
		</ul>
		<div class="navigation">
			<div class="alignleft"><?php previous_comments_link(); ?></div>
			<div class="alignright"><?php next_comments_link(); ?></div>
		</div>
	<?php else : // コメントがない ?>
		<?php if ( comments_open() ) : // コメントは公開状態だけどコメントがない ?>
			<p>コメントはまだありません。</p>
		<?php else : // コメント閉鎖中 ?>
			<p>コメントは閉鎖されています。</p>
		<?php endif; ?>
	<?php endif; ?>

</div>

<?php comment_form(); // コメントフォームを呼び出す ?>

     

    こんな感じで。

    comment のループは Codex の have_comments あたりを参照。

    コメント欄をカスタマイズしたいなら wp_list_comments あたりも見とくといいはず。

    コメント返信用のスクリプトを header で enqueue する

    コメントフォームを実装したら、コメント返信用のスクリプトを呼び出す必要があります。

    別になくてもいいのですが、ない場合、返信ボタンを押すとページ遷移処理から返信への処理をしてしまうので、あったほうがいいやつです。

    今まで出てきていない関数、wp_enqueue を使います。

    この先詳しくやるんで今は言われるがまま header.php に記述。

    --- a/header.php
+++ b/header.php
@@ -31,6 +31,7 @@

 	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>

+	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
 	<?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>

     

    page, single.php で comments.php を呼び出す

    コメントのテンプレートファイルはもちろん、作っただけじゃ呼び出されませんので、呼び出してあげます。

    呼び出す関数は comments_template 。

    引数でファイル名やコメントの種類を分けるかどうかを指定できたりします。

    --- a/content.php
+++ b/content.php
@@ -40,3 +40,5 @@

 	<?php endwhile; ?>
 <?php endif; ?>
+
+<?php comments_template(); ?>

     

    ついでに投稿へのリンクを content.php に追加

    これまではサイトのトップ画面から各投稿に飛べなかったので、飛べるようにリンクをつける。

    --- a/content.php
+++ b/content.php
@@ -15,7 +15,11 @@
 		<article <?php post_class(); ?>>
 			<header>

-				<h1><?php the_title(); ?></h1>
+				<h1>
+					<a href="<?php the_permalink(); ?>">
+						<?php the_title(); ?>
+					</a>
+				</h1>

 				<time><?php the_time( 'Y.n.j' ); ?></time>

     

    これでやっと各投稿・コメントを見られるようになりましたー。

    こんな
    こんな

     

    だいぶ形ができあがってきたのでいい感じです。

    まだまだやることは山ほどありますが、次は2回目のテーマチェックとともに、functions.php を触っていきます。

    ここまでのzipがこちら、今までの履歴は Github でも辿れます。

  • ループ処理の追加・テンプレート化とサイドバーの定義を【テーマ作成 その④】

    ループ処理の追加・テンプレート化とサイドバーの定義を【テーマ作成 その④】

    【テーマ作成 その③】つづき。

     

    投稿内容等を表示させるようにテンプレートタグを書いていきます。

    サンプルデータとしてテストデータ（過去記事参照）をあらかじめ突っ込んでおくといいです。

    ※ソースコード貼ってるところの先頭行に -が付いてるのは削除行、+が付いてるのは追加行になります。

    index.php ループ

    現時点ではテーマ、何一つWordPressで追加した投稿・ページ等出力されません。

    ので、そのへんを。

    The Loop、ループ処理について

    ループで投稿を表示するためにWordPressで使用するphpコードですな。

    一番ポピュラーなのがこの形、投稿があれば表示設定で設定した最大数分回ります。

    <?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : the_post(); ?>
		<!-- ここでループ処理 -->
	<?php endwhile; ?>
<?php endif; ?>

    if や while は基本的なプログラム構文ですね。

    index.php にループを追加

    index.php を開いて、↑のループを記述してみます。

    <?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">

	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>

			<article>
				～ 省略 ～
			</article>

		<?php endwhile; ?>
	<?php endif; ?>

	<?php get_sidebar(); ?>

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

<?php get_footer(); ?>

     

    ループ内に the_excerpt を記述

    the_excerpt は記事の抜粋を出力する関数。

    記事全文を出力する the_content  もありますね、the_content はおいおい作る single.php や page.php で使います。

    diff --git a/index.php b/index.php
--- a/index.php
+++ b/index.php
@@ -25,14 +25,9 @@
 					<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>
+					<?php the_excerpt(); // 記事の抜粋を表示 ?>

-					<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>

     

     

    the_title, the_time, the_category の記述

    Codex曰く入れといた方がいいよ、ってことなんで記述。

    それぞれループ内でのみ使える関数です。

    • the_title…記事タイトルを出力
    • the_time…投稿日を出力
    • the_category…記事のカテゴリまたはカテゴリへのリンクを出力

    見た目を整えるのは後回し、htmlタグや css の説明はスルー。

    フレームワークに元々書いてあったダミーテキスト部分を消して書き変えるとこんな感じに。

    ～略～
			<article>
				<header>

					<h1><?php the_title(); ?></h1>

					<time><?php the_time( 'Y.n.j.' ); ?></time>

				</header>
				<section>

					<?php the_excerpt(); // 記事の抜粋を表示 ?>

				</section>
				<footer>

					<?php the_category(); ?>

				</footer>
			</article>
～略～

     

    the_time の引数は phpの当該ドキュメントを参照。

    本来は多言語化できる書き方にしたほうがいいのですが説明めんどくさいため一旦これで。

    トップページにアクセスしてみると、無事ループが。

    ループされましたー
    ループされましたー

     

    このループで一応、日付別アーカイブやカテゴリアーカイブもリンク次第で勝手にループしてくれます。

    記事の要素に <?php post_class(); ?> を付ける

    投稿のスタイルを css で制御したいときに使う。

    ループ内のhtmlタグに追加すれば、投稿タイプに応じたクラスが付加される関数。

    記事をくくってる <article> なhtml5タグのところに付けておく。

    -			<article>
+			<article <?php post_class(); ?>>

     

    ループ部分をテンプレート化

    ループ部分ができました、ただこのままでは使い回せないので、ループ部分をテンプレート化します。

    テンプレート化って難しそうですけどなんてことはなく、ただファイルを分けて、分けたファイルを読み込むだけです。簡単！

    コンテンツ部分を分けるのでファイル名 content.php を作成。

    index.php から該当部分をまるごとコピー。

    <?php
/**
 * コンテンツループのテンプレートファイル
 *
 * ループを条件別に
 *
 * @package    WordPress
 * @subpackage Hoho
 */
?>

<?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : the_post(); ?>

		<article <?php post_class(); ?>>
			<header>

				<h1><?php the_title(); ?></h1>

				<time><?php the_time( 'Y.n.j' ); ?></time>

				<?php the_category(); ?>

			</header>
			<section>

				<?php the_excerpt(); // 記事の抜粋を表示 ?>

			</section>
			<footer>

				<?php the_tags(); ?>

			</footer>
		</article>

	<?php endwhile; ?>
<?php endif; ?>

     

    して、index.php からそれを読み込む。

     	<div class="main clearfix">

		<?php
		// content.php を読み込む
		get_template_part( 'content' ); ?>

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

     

    読み込む時は get_template_part を使うといいです。

    今後 get_template_part はふんだんに使っていくことになるはずなんでおいおい。

    サイドバーを調整

    さて、基本的なループが実装されたのでサイドバーへ。

    サイドバーがカラム落ちしたので直す

    ループを実装してサイドバーがカラム落ちしたので直します。

    変更点、多いです。

    index: wrapper 内に main を移動させる
sidebar: sidebarクラスな div で全体を囲む
css: 変更したクラスとともにスタイル修正
---
 css/screen.css   | 28 ++++++++++++++++++++--------
 index.php        | 41 +++++++++++++++++++++++------------------
 sass/_768up.sass | 17 ++++++++++++-----
 sass/_main.sass  | 14 +++++++++++---
 sidebar.php      | 13 +++++++++----
 5 files changed, 75 insertions(+), 38 deletions(-)

diff --git a/css/screen.css b/css/screen.css
index 24538c4..526c403 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -77,13 +77,13 @@ body {
 }

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

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

@@ -118,13 +118,18 @@ nav a:hover {
 /* ==============
  *  MOBILE: Main
  * ============== */
-.main {
+.main-container {
   padding: 30px 0;
 }
+
 .main article h1 {
   font-size: 2em;
 }
-.main aside {
+
+/* =================
+ *  MOBILE: Sidebar
+ * ================= */
+.sidebar aside {
   color: white;
   padding: 0 5% 10px;
 }
@@ -163,7 +168,7 @@ nav a:hover {
    *  WIDE: CSS3 Effects
    * ==================== */
   .header-container,
-  .main aside {
+  .sidebar aside {
     -webkit-box-shadow: 0 5px 10px #aaaaaa;
     -moz-box-shadow: 0 5px 10px #aaaaaa;
     box-shadow: 0 5px 10px #aaaaaa;
@@ -184,13 +189,20 @@ nav a:hover {
   /* ============
    *  WIDE: Main
    * ============ */
-  .main article {
+  .main {
     float: left;
     width: 57%;
   }
-  .main aside {
+
+  /* ===============
+   *  WIDE: Sidebar
+   * =============== */
+  .sidebar {
     float: right;
-    width: 28%;
+    width: 38%;
+  }
+  .sidebar aside {
+    padding: 0 13% 10px;
   }
 }
 @media only screen and (min-width: 1140px) {
diff --git a/index.php b/index.php
index 9efc61d..d20db78 100644
--- a/index.php
+++ b/index.php
@@ -13,37 +13,42 @@

 get_header(); ?>

-<div class="main wrapper clearfix">
+<div class="wrapper clearfix">

-	<?php if ( have_posts() ) : ?>
-		<?php while ( have_posts() ) : the_post(); ?>
+	<div class="main clearfix">

-			<article <?php post_class(); ?>>
-				<header>
+		<?php if ( have_posts() ) : ?>
+			<?php while ( have_posts() ) : the_post(); ?>

-					<h1><?php the_title(); ?></h1>
+				<article <?php post_class(); ?>>
+					<header>

-					<time><?php the_time( 'Y.n.j' ); ?></time>
+						<h1><?php the_title(); ?></h1>

-				</header>
-				<section>
+						<time><?php the_time( 'Y.n.j' ); ?></time>

-					<?php the_excerpt(); // 記事の抜粋を表示 ?>
+					</header>
+					<section>

-				</section>
-				<footer>
+						<?php the_excerpt(); // 記事の抜粋を表示 ?>

-					<?php the_category(); ?>
+					</section>
+					<footer>

-				</footer>
-			</article>
+						<?php the_category(); ?>

-		<?php endwhile; ?>
-	<?php endif; ?>
+					</footer>
+				</article>
+
+			<?php endwhile; ?>
+		<?php endif; ?>
+
+	</div>
+	<!-- #main -->

 	<?php get_sidebar(); ?>

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

 <?php get_footer(); ?>
diff --git a/sass/_768up.sass b/sass/_768up.sass
index 70e9bf6..36f87c5 100644
--- a/sass/_768up.sass
+++ b/sass/_768up.sass
@@ -3,7 +3,7 @@
  * ====================

 .header-container,
-.main aside
+.sidebar aside
 	@include box-shadow(0 5px 10px #aaa)

 /* ============
@@ -22,9 +22,16 @@ nav
  * ============

 .main
+	float: left
+	width: 57%
 	article
-		float: left
-		width: 57%
+
+/* ===============
+ *  WIDE: Sidebar
+ * ===============
+
+.sidebar
+	float: right
+	width: 38%
 	aside
-		float: right
-		width: 28%
+		padding: 0 13% 10px
diff --git a/sass/_main.sass b/sass/_main.sass
index fed9577..d6df2b3 100644
--- a/sass/_main.sass
+++ b/sass/_main.sass
@@ -62,12 +62,12 @@ body
 	border-bottom: 20px solid #e44d26

 .footer-container,
-.main aside
+.sidebar aside
 	border-top: 20px solid #e44d26

 .header-container,
 .footer-container,
-.main aside
+.sidebar aside
 	background: #f16529

 .title
@@ -100,10 +100,18 @@ nav
  *  MOBILE: Main
  * ==============

-.main
+.main-container
 	padding: 30px 0
+
+.main
 	article h1
 		font-size: 2em
+
+/* =================
+ *  MOBILE: Sidebar
+ * =================
+
+.sidebar
 	aside
 		color: white
 		padding: 0 5% 10px
diff --git a/sidebar.php b/sidebar.php
index 567535e..23f0573 100644
--- a/sidebar.php
+++ b/sidebar.php
@@ -9,8 +9,13 @@
  */
 ?>

-<aside>
-	<h3>aside</h3>
+<div class="sidebar clearfix">
+
+	<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>
+
+</div>

-	<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>

     

    サイドバーウィジェットを使えるように定義する

    サイドバーでウィジェットを使うには、サイドバーの定義をしてあげなくちゃいけません。

    サイドバーの定義は register_sidebar でできます、さっそく functions.php で定義してあげます。

    /**
 * メインのサイドバーを定義
 *
 * @since WordPress 2.2 (2.9.0: description プロパティ追加
 */
register_sidebar( $args = array(
		// サイドバーの名前、2つめの引数でテキストドメインを指定
		'name'          => __( 'メインのサイドバー', 'テーマのテキストドメイン' ),
		// サイドバー呼び出し用のID。小文字かつスペースは無きよう。
		'id'            => 'sidebar-main',
		// サイドバーの説明
		'description'   => '',
		// サイドバーウィジェットに付加されるクラス
		'class'         => '',
		// ウィジェットの前に配置する HTML
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		// ウィジェットの後に配置する HTML
		'after_widget'  => '</aside>',
		// ウィジェットタイトルの前に配置する HTML
		'before_title'  => '<h3 class="widgettitle">',
		// ウィジェットタイトルの後に配置する HTML
		'after_title'   => '</h3>' )
);

     

    こんな感じで。説明はコメントで入れつつ。テキストドメインってのはちょっと上でも書いた多言語化するためのやつです。

    ひとまずそれはスルー。

    定義したサイドバーを sidebar.php で呼び出す

    サイドバーを定義したのでめでたくウィジェットを使うことができます。

    ということで sidebar.php から呼び出します。

    基本的な形はこんな感じ

    <?php if ( is_active_sidebar( 'sidebar-main' ) ) : // '***' IDのサイドバーがあるとき ?>
	<?php dynamic_sidebar( 'sidebar-main' ); // '***' のサイドバーを呼び出す?>
<?php else : ?>
	<!-- ウィジェットがないときの処理 -->
<?php endif; ?>

     

    元のソースからの変更はこうなりました。

     <div class="sidebar">

-	<aside>
-		<h3>aside</h3>
+	<?php if ( is_active_sidebar( 'sidebar-main' ) ) : ?>

-		<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>
+		<?php dynamic_sidebar( 'sidebar-main' ); ?>

-</div>
+	<?php else : ?>
+
+		<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>

+	<?php endif; ?>
+
+</div>

     

    トップページにアクセスしてみると

    ウィジェット使ってない時
    ウィジェット使ってない時

     

    適当にウィジェットを追加してもう一度見てみます

     

    ウィジェットが無事反映されましたー
    ウィジェットが無事反映されましたー

     

    これでトップページの体裁がギリギリ整いましたかね。

    index.php しかないのでページ遷移しませんけども(´Д`)

    次は第一回目の Theme Check を通して修正入れていきます、ここまでのzipがこちら

    つづきます

  • header, footer に必須のテンプレートタグを入れ、管理バーが無事に出るまでの【テーマ作成 その③】

    header, footer に必須のテンプレートタグを入れ、管理バーが無事に出るまでの【テーマ作成 その③】

    【テーマ作成 その②】からの続き。

     

    流れを追いたい方は記事を辿るか、Githubのコミットを追いかけてください。

    header で必要なテンプレートタグを記述

    WodrPress Codexのテーマ開発、Template File Checklist 項を見ながら。

    language_attributes() を <html> に含める

    テキスト方向、言語情報の属性をセットしてくれる関数。

    IE用に振り分けされているので各々記述。

     <!DOCTYPE html>
 <!--[if lt IE 7]>
-<html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
+<html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
 <!--[if IE 7]>
-<html class="no-js lt-ie9 lt-ie8"><![endif]-->
+<html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8"><![endif]-->
 <!--[if IE 8]>
-<html class="no-js lt-ie9"><![endif]-->
+<html <?php language_attributes(); ?> class="no-js lt-ie9"><![endif]-->
 <!--[if gt IE 8]><!-->
-<html class="no-js"><!--<![endif]-->
+<html <?php language_attributes(); ?> class="no-js"><!--<![endif]-->

    文字コードの <meta> 要素を記述

    これはタイトルや他のメタ情報より前に書かんとだめなやつです。

    設定で設定したものが反映されます。

    -  <meta charset="utf-8">
+  <meta charset="<?php bloginfo( 'charset' ); ?>" />

    <title> 要素に wp_title() をセット

    wp_title() はそのまんま、タイトルを返す関数（WordPress 2.5 ～

    <title> じゃないところでも使えたり、区切り文字等の引数を指定できたりします。

    とりあえずそのまま記述。

    -  <title></title>
+  <title><?php wp_title(); ?></title>

    <meta> description要素に bloginfo() をセット

    ページ概要のメタタグに bloginfo( ‘description’ ) を記述。

    設定 > 一般 で入力してある “サイトの簡単な説明” が出ます。

    -  <meta name="description" content="">
+  <meta name="description" content="<?php bloginfo( 'description' ); ?>">

    wp_head() を記述

    プラグインのスタイルシートやスクリプトはこの関数にフックされているので、これを書かないとちょっと困ったことになります。

    ゴリゴリに自前でテーマを弄るなら書かなくても問題ないです。

    気合い入ってる企業サイトでは敢えて書いてないところもあります。

    </head> 直前に記述。

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

    <body> に <?php body_class(); ?> を付加

    header に含んでいるのでここで。

    body、投稿、コメント要素にWordPressが生成するクラスの属性を追加する関数。

    投稿の場合はループ内の要素にのみ適用。

     </head>
-<body>
+<body <?php body_class(); ?>>

    functions.php

    Codex の Functions File Explained というところに色々と書かれてます。

    テーマ弄るときに触ったことがある人もいるのでは？

    ざっくりざっくり言うと、ここに色々書いていけば機能を増やしたり色々拡張できたりするやつです。

    functions.php でやりたいことができるようになればプラグインを作ることができるのと同義、ってぐらいな勢いです。

    と同時に、functions.php でミスがあると正常動作しなくなることもあります。

    functions.php を作成

    新規でphpファイルを作ります、こんな感じ（この段階ではコメントだけなので何ら動作しない

    <?php
/**
 * functions
 *
 * テーマでは、functions.phpという名前の関数ファイルを使用することができます
 * 基本的にプラグインのように動作し、テーマに存在していれば自動的にWordPressの初期化時に読み込まれます
 *
 * @package    WordPress
 * @subpackage Hoho
 */

    で、functions.php、一番最後の閉じ ?> は不要です、むしろ書くとよろしくないです。（functions.php に限らず php ってそうだよね

    ※関数ごとのやつは絶対いりますよ！一番最後だけ！いらない。

    <?php

function hoho() {
	//処理
} ?>

<!-- いろいろあって -- >

<?php

     

    気になるひとは調べてみましょう。

    RSSフィード機能を追加

    RSS、出さないとダメですよねやっぱり。

    WordPress 3.0 から、RSSフィードは functions.php に書くことになってます。書きます。

    <?php
/**
 * functions
 *
 * テーマでは、functions.phpという名前の関数ファイルを使用することができます
 * 基本的にプラグインのように動作し、テーマに存在していれば自動的にWordPressの初期化時に読み込まれます
 *
 * @package    WordPress
 * @subpackage Hoho
 */

/**
 * 自動的にRSSフィードのリンクを挿入
 *
 * @since WordPress 3.0
 */
add_theme_support( 'automatic-feed-links' );

    functions.php はたいてい色々書きすぎてぐちゃーなるので、追って整理します。

    ぐちゃーとなるまでは書き足していきます。

    footer で必要なテンプレートタグを記述

    footer には必須のやつが1つ。

    wp_footer()

    これがないと wp_header() と同じく、プラグイン等がちゃんと動きません。

    </body> 直前に。

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

     

    ここまでできたら管理バーが無事表示されるはず！

    管理バー出奴
    管理バー出奴

     

    やっと管理バー、道はまだまだ長いです。

    ここまでのソースコードはこちら。

    次回以降、投稿を表示したりサイドバーのウィジェットを実装したり。

  • cssを反映させたり、header, sidebar, footer に分けたり。テンプレートタグを記述していく。【テーマ作成 その②】

    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のテーマに必須なテンプレートタグを使っていく予定です。

  • WordPressテーマを作り始める。Initializr HTML5 というhtmlなテンプレートを元に。【テーマ作成 ①】

    WordPressテーマを作り始める。Initializr HTML5 というhtmlなテンプレートを元に。【テーマ作成 ①】

    WordPressのテーマを作る。テーマを作るための下準備・知っておいた方がいいこと。 からの続きになります。

     

    1から作るとは言ったものの、0から作るのは時間がかかるので、WordPressのテーマ用ではないHTML5なテンプレートを元に作っていきます。

    せっかくなんで対応バージョンは3.6以上をターゲットに。

    「テーマなんて作ったことないよー(つд⊂)ｴｰﾝ」なひとはいっしょにぜひ。

    順次 Github にコミットしていきます。（最初張り切って英語でコミットしてますがそのうち日本語になるはず

    WordPressに超絶詳しいわけでは全くないので不備等あったら是非コメントくださいまし。

    自分でテーマを作ることのメリット

    メリット、考えてみました。

    • ソース全部を把握できる…はず
    • テーマの更新に惑わされない
    • やりたい放題
    • 色々試せる
    • 日本語だけに対応すればいい（日本用なら
    • 作りながらWordPressの勉強ができる

    こんな感じですかね。やっぱり実際に打ち込んで動かさないと覚えられないです。

     

    自分でテーマを作ることのデメリット

    対してデメリットも考えてみました。

    • 飽きる
    • やる気と比例してクオリティが上下（下がりがち
    • セキュリティ云々とかよくわかんない
    • こんな記事を書いたりすると怖いひとに突撃されるかもしれない

    デメリットはないも同然ですね！

    失敗して学ぶことの方が多いと思います。継続することが大事、あきらめないように。

    わからないところは学びながらやればいいんですよきっと。

     

    Initializrってなによ

    HTML5 Boilerplate という HTML5 のフレームワークをベースにしたHTML5テンプレートのジェネレーターです。

    HTML5 Boilerplate についてはHTML5カルタでおなじみの webcre8 さんが詳しく書いてらっしゃるので見ればいいと思うよ！

    HTML5のサイトが素早く作れるフレームワーク「HTML5 Boilerplate」をちゃんと触ってみた – WEBCRE8.jp

    簡単に言うと “HTML5でマークアップされた便利な機能がいっぱい詰まったテンプレートだよ” ってやつです。

     

    Initializr でテンプレートを生成

    まずは Initializrサイトへ。

    デモを見るもよし、ドキュメントを見るもよしです。

    レスポンシブなほうが望ましいのでレスポンシブをクリックしカスタマイズ画面へ。

    流行りのれすぽん
    流行りのれすぽん

    クリックするとチューニングが開き、カスタムできます。

    モバイルファースト等、とりあえず全部選んで Download it!

    だうんろーどいっと
    だうんろーどいっと

    Initializr のファイル構成

    jQuery の開発版以外はフルで選択しましたので色々詰まっています。

    ファイル構成はこんな ↓ 感じ

    initializr
│  .htaccess
│  404.html
│  apple-touch-icon-114x114-precomposed.png
│  apple-touch-icon-144x144-precomposed.png
│  apple-touch-icon-57x57-precomposed.png
│  apple-touch-icon-72x72-precomposed.png
│  apple-touch-icon-precomposed.png
│  apple-touch-icon.png
│  crossdomain.xml
│  favicon.ico
│  humans.txt
│  index.html
│  robots.txt
│  
├─css
│      main.css
│      normalize.css
│      normalize.min.css
│      
├─img
└─js
    │  main.js
    │  plugins.js
    │  
    └─vendor
            jquery-1.10.1.js
            jquery-1.10.1.min.js
            modernizr-2.6.2-respond-1.1.0.min.js

    シンプルな構成ですね。

    とりあえずこれフォルダごとをWordPressのthemesフォルダ（ ～/wp-content/themes/ ）に入れちゃいまして進めます。

    フォルダ名はテーマに付けたい名前に変えておきましょう。※空白・日本語はダメです

    もちろんWordPressテーマでないためこのままではテーマとして認識しません。

    WordPressテーマに作り変えていく

    いよいよです、ここからはWodrdPress Codexに従って触っていきます。

    Theme Development « WordPress Codex

     

    まずは style.css を作成

    テーマを触ったことがある人なら見たことがあるかも、これがないと話になりません。

    テーマの情報（スタイルも）を記述するところ。

    Codexのサンプルより

    /*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:
License URI:

General comments (optional).
*/

    style.css という名前で新規ファイルを作りサンプルをコピペして適宜変えます。

    /*
Theme Name: テーマ名（日本語でも可）
Theme URI: テーマのURL
Description: テーマの説明
Author: 作成者
Author URI: 作成者URL
Version: バージョンナンバー
Tags: タグ

License: ライセンス形式
License URI: ライセンスURL

ここは好きに記述
*/

    ちなみにぼくはこう。

    /*
Theme Name: Hoho
Theme URI: http://hayashikejinan.com
Description: hoho theme for WordPress.
Author: hayashikejinan
Author URI: http://profiles.wordpress.org/hayashikejinan
Version: 0.1
Tags: orange, two-columns

License:
License URI:

好きに書いていいところ
*/

     

    index.php を作ってテーマとして認識させる

    style.css でテーマの記述が終わったので次は index.php を作ってテーマとして認識できるようにします。

    といっても、テンプレートに index.html があるのでリネームすればOKです。

    拡張子が見えないひとは見えるようにしておきましょう。（ついでに 404.html も 404.php にしておく

     

    リネームができたらWordPress管理画面より 外観 > テーマ へ。

    できてる！
    できてる！

    テーマを有効化して確認

    有効化してやります。

    おー
    おー

    サイトを表示してみます。

    まっちろ
    まっちろ

     

    cssが読み込まれず、管理バーも表示されません。

    ここからWordPress独自のテンプレートタグを使って組んでいきます。（ここまでをダウンロード

     

    つづくはず