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: http://kachibito.net/
Description: かちびと.netのオリジナルテーマ
Version: 1.0
Author: シロ
Author URI: http://kachibito.net/
Tags: orange, black, simple, clean
*/

STEP.7

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

今回割愛したこと

付いてるサイトは多いけど、個人的に付けない事も多いので今回は割愛。 (一)アーカイブの表示タグ (二)function.php︵サイトによりけりなので︶ (三)最新記事の表示タグ (四)サイドバーに貼るカテゴリのリスト表示タグ (五)コメント部分全般 (六)検索フォームタグ (七)その他、サイトによってあったり無かったりな部分これらのタグはCODEXに書いてあります。以下はおまけ。テーマ化の後に行う事です。

カスタマイズ

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

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

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