WordPressのテーマ作成は、仕組みを把握できれば意外と単純です。
まずは一からテーマを作成するにあたり、簡単なテーマの仕組みから少しずつ順を追ってわかりやすく説明していきたいと思います。
Contents
最小のファイル構成
テーマに最小限必要なファイル構成は「index.php」と「style.css」の2つです。
まずは以下の2つのファイルを「example_theme」という名前のフォルダ内に作成して、テーマディレクトリ（/wp-content/themes）に設置して有効化してみてください。
▼index.php (/wp-content/themes/example_theme/index.php)
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サイトタイトル</title> </head> <body> <h1>サイトタイトル</h1> <p>ダミーテキストです。ここには説明文が入ります。</p> </body> </head> |
▼style.css (/wp-content/themes/example_theme/style.css)
|
1 2 3 |
/* Theme Name: Example Theme */ |
有効化してブラウザでプレビューすると下図のようになります。
「style.css」のヘッダは最低限「Theme Name」だけで使用できますが、他にも下記の様に色々な情報を設定する項目が用意されています。
/*
Theme Name: テーマの名前
Description: テーマの説明
Version: 1.0 などバージョンを任意に設定
Author: テーマ作成者の名前
Author URI: テーマ作成者のサイトURL
*/
各項目の詳細については WordPress Codex をご参照ください。
（参考）WordPress Codex テーマの作成 > テーマスタイルシート
テンプレートタグの基本
テンプレートタグは、WordPressのデータを取り出して表示するためのPHPコードです。
下記のように <?php bloginfo(‘name’); ?> <?php bloginfo(‘description’); ?> とテンプレートタグを index.php の任意の場所に埋め込むことで、「設定」→「一般設定」で設定した「サイトのタイトル」「キャッチフレーズ（サイト説明文）」を表示できます。
▼index.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title><?php bloginfo('name'); ?></title> </head> <body> <h1><?php bloginfo('name'); ?></h1> <p><?php bloginfo('description'); ?></p> </body> </head> |
プレビューすると下図のようになります。
テンプレートタグ bloginfo(‘name’)
一般設定で設定したサイトのタイトルを表示します。
テンプレートタグ bloginfo(‘description’)
一般設定で設定したキャッチフレーズを表示します。
公式マニュアル
記事を表示する
記事を表示するには基本、次のようなループを使います。
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
…
<?php endwhile; ?>
<?php endif; ?>
ループ内には「記事タイトル」「記事本文」のテンプレートタグ<?php the_title(); ?><?php the_content(); ?>をそれぞれを追加します。
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; ?>
<?php endif; ?>
index.phpに追加すると次のようになります。
▼index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title><?php bloginfo('name'); ?></title> </head> <body> <h1><?php bloginfo('name'); ?></h1> <p><?php bloginfo('description'); ?></p> <?php if(have_posts()): ?> <?php while(have_posts()): the_post(); ?> <h2><?php the_title(); ?></h2> <div><?php the_content(); ?></div> <?php endwhile; ?> <?php endif; ?> </body> </head> |
ループ if(have_posts()): while(have_posts()): the_post(); ~
…~ endwhile; endif;
記事を出力する際の基本のループです。
if(have_posts())でループできる記事の有無を確認、
while(have_posts())で取得した記事数の回数ループを行い
the_post()で次の記事へループを進めます。
公式マニュアル
テンプレートタグ the_title()
ループ内で記事タイトルを表示します。
公式マニュアル
テンプレートタグ the_content()
ループ内で記事本文を表示します。
公式マニュアル
以上のような要領でテンプレートタグ等のWordPressの関数を用いながら、次の手順ではあらかじめ設計したデザインに従ってコーディングを進めていきます。
【次の手順→】 サブページのテンプレート作成
【←前の手順】 最初に設定するプラグイン
おすすめ記事
PR
