20100116 01 Word Pressテンプレートのカスタマイズ&Xml出力

Wor ｄ Press テーマカスタマイズ＆XML 出力

2010/1/16フリーランスシステムエンジニア

上村崇

はじめに

このプレゼンは後で公開しますので

書き写す必要はありません

質問は随時、挙手で

それでは本題

まずはじめに、WordPress のテーマをカスタマイズする方法について

つぎに、XML ファイルを出力する

方法について

60 分このプレゼン・テーマのカスタマイズ・ XML 出力

15 分くらい質問、休憩60 分次のプレゼン

・カテゴリ内投稿一覧表示

15 分くらい質問

WordPress とは

ブログツールの一つ

PHP で作られています

MySQL を使っています

創始者Matt Mullenweg 氏

26 歳

日本

全世界

ブログツール比較

日本

全世界

CMS 比較

WordPress が2009 年のベスト CMS 賞を獲得

テーマについて

テーマは無数にあります

テーマをカスタマイズしましょう！

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

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

テンプレートタグ

WordPress ディレクトリ構成

themesclassic

初期状態でテーマは 2 つ

themes

default

とりあえずテーマファイルの置き場所だけ知っていればいいです

PHP の基本

まず、普通の 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 ?> で囲む

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

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

sidebar

footer

maincontents

header

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

<?php get_header(); ?>

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

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

index.php



<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>



index.php

WordPressループ(Main Contents)



<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>



index.php

sidebar

footer

maincontents

header



<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>



index.php

sidebar

footer

maincontents

header



<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>



index.php

footer

maincontents

header

sidebar



<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>



index.php

sidebarmaincontents

header

footer



<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>



index.php

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



<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>



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


header.php

URL タイトル

サイトの説明

URL タイトル

サイトの説明


header.php


header.php

ドキュメントの場所は？

wordpress codex 検索

次に、 WordPress ループの説明



<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>



index.php WordPressループ(Main Contents)

footer

header

sidebarmaincontents

繰り返し

記事タイトル日付

本文

カテゴリ、コメント

<?php if (have_posts()) : ?>

<?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; ?>

<?php else : ?> <h2 class="center"><?php _e('Not Found', 'kubrick'); ?></h2> <p class="center"><?php _e('Sorry, but you are looking for something that isn’t here.', 'kubrick'); ?></p> <?php get_search_form(); ?><?php endif; ?>

WordPress ループ





投稿がある場合の処理

投稿がない場合の処理

投稿があれば true 、なければ false





投稿がある場合の処理





投稿の数だけループ

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



<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; ?>


タイトル

本文

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

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

default

他のファイルは？

default

← not found ページ

アーカイブページ

コメントページ

← 共通関数用

← 画像一覧ページ

言語関連ファイル

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

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

← 1 投稿分の詳細ページ

テーマのカスタマイズ方法終わり

つぎに、XML ファイルを出力する

方法について

「 MT だったら XML の書き出しが比較的簡単に出来るんですが WP だとなかなか難しいみたいで、僕の希望としましては WP を使って XML の簡単な書き出し方法があればご教授頂きたいなと思います。 RSS や Flash に使うときに便利なので・・・。」

最新の投稿一覧

カテゴリー毎一覧

XML

最新の投稿一覧

カテゴリー毎一覧

XML

作る

仕様：最新の投稿 5 件を XML ファイルに出力します。・日付・タイトル・投稿内容・カテゴリ

最新の投稿を出す方法はindex.php を参考にできる

・・・

XML 出力イメージ

Step1:XML を出力するコードを作成します

<?php /*Template Name: XmlForFlash*/ ?><?php header('Content-Type: text/xml; charset='.get_option('blog_charset'), true); ?><?php echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.‘>’; ?><root> <?php query_posts("posts_per_page=5"); ?>


<?php while (have_posts()) : the_post(); ?> <item> <title><![CDATA[<?php echo the_title_rss(); ?>]]></title>

<pubdate><?php echo the_time('Y-m-d H:i:s’); ?></pubdate>

<?php the_category_rss(); ?>

<description><![CDATA[<?php the_content_rss(); ?>]]></description> </item> <?php endwhile; ?>

<?php endif; ?></root>

<?xml version="1.0" encoding=“UTF-8” ?>

タイトル時刻

本文内容

<categor

y>

</category

>カテゴリ

テンプレートタグで書くと？








続いてループ処理を挿入→








最新の 5 件を取得→








default

新規作成

Step2:ファイルを WordPress に登録します

① 外観 > 編集

② 作ったテンプレートファイルがエントリされていることを確認

① ページ > 新規追加

③XmlForFlash を選択する

② タイトルを入れる

保存すると URL が得られます。

完成！

Technology

20100116 01 Word Pressテンプレートのカスタマイズ&Xml出力