Wordpressで自分好みのテーマを作る

自分だけの
WordPress
テーマを作る

2011/1/8
フリーランスシステムエンジニア
上村崇 @uemera

軽く自己紹介

しがないフリーランスSE

軽く自己紹介


組込みエンジニア(カーナビ)

軽く自己紹介


組込みエンジニア(カーナビ)

副業で少しWeb

・去年、別の場所で発表しました。


・30分ほどのボリュームがあります。


・30分ほどのボリュームがあります。

・昼にビビンパを食べて舌をヤケドしま
した。

ブログツール比較

日本

全世界

CMS比較

日本

全世界

テーマは無数にあります

自分好みのテーマを作れれば素敵ですね!

もちろん
HTML
スタイルシート
の知識は必要ですが

WordPress
テンプレート
ディレクトリ構成 PHP テンプレートタグ

1
WordPressディレクトリ構成

テーマは2つ ※WordPress 2.x での話

themes

まず、普通のHTMLファイルは
こんなのです。

index.html
<html>
<head>
<title>文書のタイトル</title>
</head>
<body>
文書の本文
</body>
</html>

同じことをPHPでやると、
こうなります。

index.php
<?php
echo "<html>";
echo " <head>";
echo " <title>文書のタイトル</title>";
echo " </head>";
echo " <body>";
echo " 文書の本文";
echo " </body>";
echo "</html>";
?>

別の方法もあります。

index.php
<?php
$title = "文書のタイトル";
$contents = "文書の本文";
?>
<html>
<head>
<title><?php echo $title ?></title>
</head>
<body>
<?php echo $contents ?>
</body>
</html>

つまり、
PHPを書くときは<?php ?>
で囲む

3 テンプレートと
テンプレートタグ

ブロックに分けて考えてみます

header

main sidebar
contents

footer

コードで表すとこうなります→

index.php
<?php get_header(); ?>

<?php while (have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

index.php


<?php endwhile; ?>

<?php get_sidebar(); ?> WordPressループ
<?php get_footer(); ?> (Main Contents)
※WordPress3ではloop.php内にあり

index.php


<?php endwhile; ?>

header

main side
contents bar

footer

index.php


<?php endwhile; ?>

header

main Side
contents bar

footer

index.php


<?php endwhile; ?>



テンプレートタグ
WordPress組込の関数

index.php
<?php get_header(); ?> header.php

<?php endwhile; ?>

<?php get_sidebar(); ?> sidebar.php
footer.php

default

テンプレート

Headerについて詳しく見てみます。

header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginf
<title>
<?php wp_title('«', true, 'right'); ?>
<?php bloginfo('name'); ?>
</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css” />
<style type="text/css”>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-ltr.jpg“) }
</style>
<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>

header.php
<head>
<title>
</title>
</style>
<?php wp_head(); ?>
</head>
<body>
URL タイトル
<div id="page">
</div>
</div> サイトの説明

URL タイトル

サイトの説明

header.php
bloginfoの
<head>
マニュアルを見てみる bloginfo('html_type'); ?>; charset=<?php bloginf
<meta http-equiv="Content-Type" content="<?php
<title>
</title>
</style>
<?php wp_head(); ?>
</head>
<body>
<div id="page">
</div>
</div>

header.php
ドキュメントの場所は?
<head>
<title>
</title>
</style>
<?php wp_head(); ?>
</head>
<body>
<div id="page">
</div>
</div>

次に、WordPressループの説明

index.php(or loop.php)
<?php get_header(); ?> WordPressループ
(Main Contents)

<?php endwhile; ?>

header

main side
contents bar

footer

繰り返し

記事タイトル
日付

本文

カテゴリ、コメント

WordPressループ
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>“ ><?php the_title(); ?></a></h2>
<small><?php the_time(__('F jS, Y', 'kubrick')) ?></small>
<div class="entry">
<?php the_content(__('Read the rest of this entry »', 'kubrick')); ?>
</div>
<p class="postmetadata">
<?php printf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> |
<?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?>
<?php comments_popup_link (__('No Comments »', 'kubrick'),
__('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '',
__('Comments Closed', 'kubrick') ); ?>
</p>
</div>
<?php endwhile; ?>

WordPressループ
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
投稿がある間Loopする
<small><?php the_time(__('F jS, Y', 投稿1つ分の準備
'kubrick')) ?></small>
<div class="entry">
</div>

投稿の数だけループ
</p>
</div>
<?php endwhile; ?>

WordPressループ
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> タイトル
<small><?php the_time(__('F jS, Y', 'kubrick')) ?></small>
<div class="entry">
</div>
<p class="postmetadata"> 本文
</p>
</div>
<?php endwhile; ?>


全部理解
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> タイトル
the_time
しないと
<small><?php (__('F jS, Y', 'kubrick')) ?></small>
<div class="entry">
the_content
<?php (__('Read the rest of this entry »', 'kubrick')); ?>

いけないの？
</div>
本文
get_the_category_list
<?php printf(__('Posted in %s', 'kubrick'), (', ')); ?> |
</p>
</div>
<?php endwhile; ?>

・すべてのコードを理解する必要はない。
・イメージにあったテーマを見つけてきて、
それをカスタマイズすればよい。

default

他のファイルは？

← not foundページ
アーカイブページ
コメントページ

← 共通関数用

← 画像一覧ページ
default
言語関連ファイル
← リンクページ
← 特定の1ページ

← スクリーンショット
← 検索ページ
← 1投稿分の詳細ページ

← not foundページ
アーカイブページ
コメントページ

← 共通関数用

← 画像一覧ページ
あとは調べれればなんとかなる!
default
言語関連ファイル
← リンクページ
← 特定の1ページ

← スクリーンショット
← 検索ページ
← 1投稿分の詳細ページ

Wordpressで自分好みのテーマを作る

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (12)

Similar to Wordpressで自分好みのテーマを作る

Similar to Wordpressで自分好みのテーマを作る (20)

More from Takashi Uemura

More from Takashi Uemura (13)

Recently uploaded

Recently uploaded (15)

Wordpressで自分好みのテーマを作る