【改訂版】01.オリジナルテーマとは？ HTMLをWordPressテーマ化

WordPressのテーマを作るとはどういう事なのかを把握する

WordPressのテーマを作るということは、インデックスページや個別ページ（投稿、固定）、アーカイブページ（カテゴリー、タグ、月別等）をどう出力するか決めているテンプレートを作るという事。テンプレート等を全てまとめて「テーマ」と呼ぶ。

まず、テーマの元となる「HTMLとCSS」による静的ページを用意

イラストレーターもしくはPhotoShopを使い、デザインを作った後、HTMLとCSSによるスタティックページを用意する。
インデックスページや個別ページ、アーカイブページ毎にページのデザインを変えたい場合は、それぞれのページファイルを用意しておく必要がある。

WordPressのテーマにおいて、最低限必要なファイルは、下記の2つ

・index.php
・style.css

HTMLをWordPressテーマ化するという事は、HTMLタグを差し替えていく作業

・WordPressテンプレートタグ http://wpdocs.sourceforge.jp/テンプレートタグ
・WordPress条件分岐タグ http://wpdocs.sourceforge.jp/Conditional_Tags
・PHP
・HTML

上記を駆使して、HTMLタグを差し替えていく。

HTMLをWordPressテンプレートタグに書き換えた場合の具体例

metaタグ内のスタイルシートをWordPressテーマ化

<link rel="stylesheet" type="text/css" media="all" href ="style.css" />
↓
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />

サイトタイトルをWordPressテーマ化

<h1>○○のサイト</h1>
↓
<h1><?php bloginfo('name'); ?></h1>

WordPressの管理画面の「設定＞一般」の中の「サイトのタイトル」が表示される。

記事のタイトルと本文をWordPressテーマ化

<h2>今日の夕食</h2>
今日のご飯は美味しかった！
↓
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?><h2>
<?php the_content(); ?>
<?php endwhile; ?>

画像のHTMLをWordPressテーマ化

<img src="images/logo.jpg" />
↓
<img src="<?php bloginfo('template_directory'); ?>/images/logo.jpg" />

この記事が気に入ったら下のボタンをクリック