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

スポンサーリンク

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

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

WPテーマ化手順リスト

STEP.1

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

  1. <?php get_header(); ?>
  2. <?php get_footer(); ?>
  3. <?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(); ?>

上から

  1. タイトル名の取得
  2. 文字コード指定
  3. css
  4. RSSとAtomとかが3つ
  5. pingbackのURL
  6. ファビコン
  7. プラグインのJSとかcssとかいろいろ表示させるタグ

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

jsなどを使用する場合は

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

のようにtemplate_directoryを使う。

STEP.3

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

  1. ループ ※記事を表示する部分です。
  2. <?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; ?>
    
  3. 日付 ※ループ内に記述
  4. <?php the_date_xml(); ?>
  5. 記事タイトル+単体記事へのリンク ※ループ内に記述
  6. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  7. メニュー(Pageへのリンク)
  8. <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サーバーにアップして動作テスト、必要に応じて微調整

今回割愛したこと

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

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

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

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

カスタマイズ

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

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

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

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

URL :
TRB :

Comments & Trackbacks (19)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services