Post on 22-Nov-2014
description
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 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
WordPressループ(Main Contents)
<?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
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
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
footer
maincontents
header
sidebar
<?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
sidebarmaincontents
header
footer
<?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
テンプレートタグWordPress 組込の関数
<?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.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(); ?>><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
URL タイトル
サイトの説明
URL タイトル
サイトの説明
<!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(); ?>><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
ドキュメントの場所は？
wordpress codex 検 索
次に、 WordPress ループの説明
<?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 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 ループ
<?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; ?>
投稿がある場合の処理
投稿がない場合の処理
投稿があれば true 、なければ false
<?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; ?>
投稿がある場合の処理
<?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; ?>
投稿の数だけループ
投稿がある間 Loop する 投稿 1 つ分の準備
<?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; ?>
タイトル
本文
全部理解しないといけないの？
・すべてのコードを理解する必要はない。・イメージにあったテーマを見つけてきて、 それをカスタマイズすればよい。
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 if (have_posts()) : ?>
<?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
>カテゴリ
テンプレートタグで書くと？
<?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 if (have_posts()) : ?>
<?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>
続いてループ処理を挿入→
<?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 if (have_posts()) : ?>
<?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>
最新の 5 件を取得→
<?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 if (have_posts()) : ?>
<?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>
default
新規作成
Step2:ファイルを WordPress に登録します
① 外観 > 編集
② 作ったテンプレートファイルがエントリされていることを確認
① ページ > 新規追加
③XmlForFlash を選択する
② タイトルを入れる
保存すると URL が得られます。
完成！