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

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

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

軽く自己紹介

しがないフリーランスSE

軽く自己紹介

軽く自己紹介

しがないフリーランスSE組込みエンジニア(カーナビ)

軽く自己紹介

しがないフリーランスSE組込みエンジニア(カーナビ)副業で少しWeb

このプレゼンは

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


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


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

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

それでは本題

WordPressとは

ブログツールの一つ

PHPで作られています

MySQLを使っています

日本

全世界

ブログツール比較

日本

全世界

CMS比較

テーマってどんなの?

テーマは無数にあります

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

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

必要な知識は3つ

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

テンプレートタグ

WordPressディレクトリ構成1

themes

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

WordPress3.xはテーマ1つ

PHPの基本

2

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

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

index.html

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

<?phpecho "<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>

index.php

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

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

3

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

sidebar

footer

maincontents

header

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

<?php get_header(); ?>

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

<?php endwhile; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

index.php



<?php endwhile; ?>



index.php

WordPressループ(Main Contents)※WordPress3ではloop.php内にあり



<?php endwhile; ?>



index.php

sidebar

footer

maincontents

header



<?php endwhile; ?>



index.php

footer

maincontents

header

Sidebar



<?php endwhile; ?>



index.php

sidebar

maincontents

header

footer



<?php endwhile; ?>



index.php

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



<?php endwhile; ?>



index.phpheader.php

sidebar.phpfooter.php

default

テンプレート

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

header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<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></h1> <div class="description"><?php bloginfo('description'); ?></div></div></div>

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>





header.php

URL タイトル

サイトの説明

URL タイトル

サイトの説明

header.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>





bloginfoのマニュアルを見てみる

header.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>





ドキュメントの場所は?

wordpress codex 検索

次に、WordPressループの説明



<?php endwhile; ?>



index.php(or loop.php)WordPressループ(Main Contents)

footer

header

sidebar

maincontents

繰り返し

記事タイトル日付

本文

カテゴリ、コメント

<?php while (have_posts()) : the_post(); ?> <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ループ







<?php endwhile; ?>

WordPressループ

投稿の数だけループ

投稿がある間Loopする投稿1つ分の準備







<?php endwhile; ?>

WordPressループ

タイトル

本文







<?php endwhile; ?>

タイトル

本文

全部理解しないといけないの？

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

default

他のファイルは？

default

← not foundページアーカイブページ

コメントページ

← 共通関数用

← 画像一覧ページ

言語関連ファイル

← リンクページ← 特定の1ページ

← スクリーンショット← 検索ページ

← 1投稿分の詳細ページ

default

← not foundページアーカイブページ

コメントページ

← 共通関数用

← 画像一覧ページ

言語関連ファイル

← リンクページ← 特定の1ページ

← スクリーンショット← 検索ページ

← 1投稿分の詳細ページ

あとは調べれればなんとかなる!

終わり

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

Technology

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