HTMLをWPテーマ化する時の手順リスト

一般的なHTMLファイルをWordPressの
テーマにする時の手順と、使用するタグ
をリスト化、というか自分用チートシート。
いつも子ページが時間掛かるので、単純
な構成のHTMLなら、テーマ化くらいは
サクサク終わらせたいですね。

唯一の方法では無く、ベーシックな方法です。僕も一度作成してから必要に応じて別のタグを使います。

WPテーマ化手順リスト

STEP.1

HTMLをindex.php、header.php、footer.php、sidebar.php等に分割。分割に関しては以前の記事をご参照下さい。
以下のインクルードタグをindex.php、search.php、archive.phpに追加。

<?php get_header(); ?>

<?php get_footer(); ?>

<?php get_sidebar(); ?>

STEP.2

header.phpのmetaやtitleを以下のWP用のタグに変更、追加。

<title><?php wp_title(); ?><?php bloginfo('name'); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="Shortcut Icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" type="image/x-icon" />
<?php wp_head(); ?>

上から

タイトル名の取得

文字コード指定

css

RSSとAtomとかが3つ

pingbackのURL

ファビコン

プラグインのJSとかcssとかいろいろ表示させるタグ

上記に合わせてHTMLソースをWP用のタグに変更。

jsなどを使用する場合は

<script src="<?php bloginfo('template_directory'); ?>/js/abc.js" type="text/javascript"></script>

のようにtemplate_directoryを使う。

STEP.3

index.phpに必要なタグを追加、変更

ループ　※記事を表示する部分です。

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="post">
       <?php the_content('続きを読む'); ?>
    </div>
    <?php endwhile; ?>
<?php else : ?>
    <h2>Not Found</h2>
    <p>記事はありません</p>
<?php endif; ?>

日付　※ループ内に記述

<?php the_date_xml(); ?>

記事タイトル+単体記事へのリンク　※ループ内に記述

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>

メニュー（Pageへのリンク）

<ul class="navi">
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>

STEP.4

search.php、archive.php、single.php、page.phpを作成。
index.phpをほぼコピー。それぞれの役割りに応じてタグの変更、追加（例えばコメントとかページングとか）。CODEX参照。

STEP.5

footer.phpに必要なタグを追加

© <?php echo date('Y'); ?> <?php bloginfo('name'); ?> All rights reserved.
<?php wp_footer(); ?>

STEP.6

cssの最上部にテーマ概要を追記。以下は追記例。

/*
Theme Name: kachibito
Theme URI: /
Description: かちびと.netのオリジナルテーマ
Version: 1.0
Author: シロ
Author URI: /
Tags: orange, black, simple, clean
*/

STEP.7

ローカルサーバーで確認→Webサーバーにアップして動作テスト、必要に応じて微調整

今回割愛したこと

付いてるサイトは多いけど、個人的に付けない事も多いので今回は割愛。

アーカイブの表示タグ
function.php（サイトによりけりなので）
最新記事の表示タグ
サイドバーに貼るカテゴリのリスト表示タグ
コメント部分全般
検索フォームタグ
その他、サイトによってあったり無かったりな部分

これらのタグはCODEXに書いてあります。

以下はおまけ。テーマ化の後に行う事です。

カスタマイズ

カスタマイズの方法が書いてある記事とかのまとめ。

WordPressカスタマイズのアーカイブ / 当ブログで書いたカスタマイズやその紹介
プラグインを使わずWordPressに6の機能をつける
やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個
WordPressのキラーハック10選
プラグインを使用しないでWordPressをより便利する10のチップス
WordPressをちょちょいと使いやすくする15のスニペット

そのほか覚えておくと便利な情報

WordPressでWebサイトを構築するまでの手順リスト / 手前味噌
日本語版 WordPress チートシート / 便利ですよ
「初めてのオリジナルWordPressテーマ作成」に役立つ記事3つ / とりあえずこの3記事見ればテーマ作れる
WPテーマギャラリー / 手前味噌。作るときのインスピレーションにどうぞ。
WordPressのテーマ　フリー配布まとめ / テーマ配布サイトの紹介