【テーマ作成 その⑦】からのつづきです。
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( '« 前へ' ) ?></div> + <div class="alignright"><?php next_posts_link( '次へ »', '' ) ?></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( '« 前へ' ) ?></div> + <div class="alignright"><?php next_posts_link( '次へ »', '' ) ?></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"> + © <?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"> + © <?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公式ディレクトリに登録するところまでいくつもりです。
では長々とやってきたテーマ作成はその⑧を以て終わりにしようと思います。
〆
連載お疲れ様でした！色々勉強になりました。 / 最後にちょっと修正を入れてテーマ制作終わりです。【テーマ作成 その⑧】 @hayashikejinanさんから