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

WorｄPressテーマカスタマイズ＆XML出力 2010/1/16 フリーランスシステムエンジニア上村崇

このプレゼンは後で公開しますので書き写す必要はありません

まずはじめに、 WordPressのテーマをカスタマイズする方法についてつぎに、 XMLファイルを出力する方法について

創始者Matt Mullenweg氏26歳

ブログツール比較日本全世界

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

テーマは無数にあります

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

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

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

WordPressディレクトリ構成

themes classic 初期状態でテーマは2つ

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

まず、普通の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><?phpecho $title ?></title> </head> <body> <?phpecho $contents ?> </body> </html>

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

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

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

header main contents sidebar footer

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

index.php <?phpget_header();?> <?phpif ( have_posts() ) : ?> <?phpwhile (have_posts()) : the_post(); ?> <?phpendwhile;?> <?phpelse :?> <?phpendif; ?> <?phpget_sidebar(); ?> <?phpget_footer();?>

index.php <?phpget_header();?> <?phpif ( have_posts() ) : ?> <?phpwhile (have_posts()) : the_post(); ?> <?phpendwhile;?> <?phpelse :?> <?phpendif; ?> <?phpget_sidebar(); ?> <?phpget_footer();?> WordPressループ (Main Contents)

index.php <?phpget_header();?> <?phpif ( have_posts() ) : ?> <?phpwhile (have_posts()) : the_post(); ?> <?phpendwhile;?> <?phpelse :?> <?phpendif; ?> <?phpget_sidebar(); ?> <?phpget_footer();?> header main contents sidebar footer

index.php <?phpget_header();?> <?phpif ( have_posts() ) : ?> <?phpwhile (have_posts()) : the_post(); ?> <?phpendwhile;?> <?phpelse :?> <?phpendif; ?> <?phpget_sidebar(); ?> <?phpget_footer();?> テンプレートタグ WordPress組込の関数

index.php header.php <?phpget_header();?> <?phpif ( have_posts() ) : ?> <?phpwhile (have_posts()) : the_post(); ?> <?phpendwhile;?> <?phpelse :?> <?phpendif; ?> <?phpget_sidebar(); ?> <?phpget_footer();?> sidebar.php footer.php

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

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" <?phplanguage_attributes(); ?>> <head> <meta http-equiv="Content-Type" content="<?phpbloginfo('html_type'); ?>; charset=<?phpbloginfo('charset'); ?>" /> <title> <?phpwp_title('«', true, 'right'); ?> <?phpbloginfo('name'); ?> </title> <link rel="stylesheet" href="<?phpbloginfo('stylesheet_url'); ?>" type="text/css” /> <style type="text/css”> #page { background: url("<?phpbloginfo('stylesheet_directory'); ?>/images/kubrickbg-ltr.jpg“) } </style> <?phpwp_head(); ?> </head> <body> <div id="page"> <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ?>/"><?phpbloginfo('name'); ?></a></h1> <div class="description"><?phpbloginfo('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" <?phplanguage_attributes(); ?>> <head> <meta http-equiv="Content-Type" content="<?phpbloginfo('html_type'); ?>; charset=<?phpbloginfo('charset'); ?>" /> <title> <?phpwp_title('«', true, 'right'); ?> <?phpbloginfo('name'); ?> </title> <link rel="stylesheet" href="<?phpbloginfo('stylesheet_url'); ?>" type="text/css” /> <style type="text/css”> #page { background: url("<?phpbloginfo('stylesheet_directory'); ?>/images/kubrickbg-ltr.jpg“) } </style> <?phpwp_head(); ?> </head> <body> <div id="page"> <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ?>/"><?phpbloginfo('name'); ?></a></h1> <div class="description"><?phpbloginfo('description'); ?></div> </div> </div> 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" <?phplanguage_attributes(); ?>> <head> <meta http-equiv="Content-Type" content="<?phpbloginfo('html_type'); ?>; charset=<?phpbloginfo('charset'); ?>" /> <title> <?phpwp_title('«', true, 'right'); ?> <?phpbloginfo('name'); ?> </title> <link rel="stylesheet" href="<?phpbloginfo('stylesheet_url'); ?>" type="text/css” /> <style type="text/css”> #page { background: url("<?phpbloginfo('stylesheet_directory'); ?>/images/kubrickbg-ltr.jpg“) } </style> <?phpwp_head(); ?> </head> <body> <div id="page"> <div id="header" role="banner"> <div id="headerimg"> <h1><a href="<?php echo get_option('home'); ?>/"><?phpbloginfo('name'); ?></a></h1> <div class="description"><?phpbloginfo('description'); ?></div> </div> </div> ドキュメントの場所は？

次に、WordPressループの説明

index.php WordPressループ (Main Contents) <?phpget_header();?> <?phpif ( have_posts() ) : ?> <?phpwhile (have_posts()) : the_post(); ?> <?phpendwhile;?> <?phpelse :?> <?phpendif; ?> <?phpget_sidebar(); ?> <?phpget_footer();?> header main contents sidebar footer

繰り返し記事タイトル日付本文カテゴリ、コメント

WordPressループ <?phpif (have_posts()) : ?> <?phpwhile (have_posts()) : the_post(); ?> <div <?phppost_class(); ?> id="post-<?phpthe_ID(); ?>"> <h2><a href="<?phpthe_permalink()?>“ ><?phpthe_title(); ?></a></h2> <small><?phpthe_time(__('F jS, Y', 'kubrick'))?></small> <div class="entry"> <?phpthe_content(__('Read the rest of this entry »', 'kubrick')); ?> </div> <p class="postmetadata"> <?phpprintf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?phpedit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?phpcomments_popup_link(__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?> </p> </div> <?phpendwhile; ?> <?phpelse : ?> <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> <?phpget_search_form(); ?> <?phpendif; ?>

<?phpif (have_posts()) : ?> <?phpwhile (have_posts()) : the_post(); ?> <div <?phppost_class(); ?> id="post-<?phpthe_ID(); ?>"> <h2><a href="<?phpthe_permalink()?>“ ><?phpthe_title(); ?></a></h2> <small><?phpthe_time(__('F jS, Y', 'kubrick'))?></small> <div class="entry"> <?phpthe_content(__('Read the rest of this entry »', 'kubrick')); ?> </div> <p class="postmetadata"> <?phpprintf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?phpedit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?phpcomments_popup_link(__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?> </p> </div> <?phpendwhile; ?> <?phpelse : ?> <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> <?phpget_search_form(); ?> <?phpendif; ?> 投稿があればtrue、なければfalse 投稿がある場合の処理投稿がない場合の処理

<?phpif (have_posts()) : ?> <?phpwhile (have_posts()) : the_post(); ?> <div <?phppost_class(); ?> id="post-<?phpthe_ID(); ?>"> <h2><a href="<?phpthe_permalink()?>“ ><?phpthe_title(); ?></a></h2> <small><?phpthe_time(__('F jS, Y', 'kubrick'))?></small> <div class="entry"> <?phpthe_content(__('Read the rest of this entry »', 'kubrick')); ?> </div> <p class="postmetadata"> <?phpprintf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?phpedit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?phpcomments_popup_link(__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?> </p> </div> <?phpendwhile; ?> <?phpelse : ?> <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> <?phpget_search_form(); ?> <?phpendif; ?> 投稿がある場合の処理

<?phpif (have_posts()) : ?> <?phpwhile (have_posts()) : the_post(); ?> <div <?phppost_class(); ?> id="post-<?phpthe_ID(); ?>"> <h2><a href="<?phpthe_permalink()?>“ ><?phpthe_title(); ?></a></h2> <small><?phpthe_time(__('F jS, Y', 'kubrick'))?></small> <div class="entry"> <?phpthe_content(__('Read the rest of this entry »', 'kubrick')); ?> </div> <p class="postmetadata"> <?phpprintf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?phpedit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?phpcomments_popup_link(__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?> </p> </div> <?phpendwhile; ?> <?phpelse : ?> <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> <?phpget_search_form(); ?> <?phpendif; ?> 投稿がある間Loopする投稿1つ分の準備投稿の数だけループ

<?phpif (have_posts()) : ?> <?phpwhile (have_posts()) : the_post(); ?> <div <?phppost_class(); ?> id="post-<?phpthe_ID(); ?>"> <h2><a href="<?phpthe_permalink()?>“ ><?phpthe_title(); ?></a></h2> <small><?phpthe_time(__('F jS, Y', 'kubrick'))?></small> <div class="entry"> <?phpthe_content(__('Read the rest of this entry »', 'kubrick')); ?> </div> <p class="postmetadata"> <?phpprintf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?phpedit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?phpcomments_popup_link(__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?> </p> </div> <?phpendwhile; ?> <?phpelse : ?> <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> <?phpget_search_form(); ?> <?phpendif; ?> タイトル本文全部理解しないといけないの？

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

default 他のファイルは？

← not foundページアーカイブページコメントページ ← 共通関数用 ← 画像一覧ページ default 言語関連ファイル ← リンクページ ← 特定の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> <?phpquery_posts("posts_per_page=5"); ?> <?phpif (have_posts()) : ?> <?phpwhile (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> <?phpthe_category_rss(); ?> <description><![CDATA[<?phpthe_content_rss(); ?>]]></description> </item> <?phpendwhile; ?> <?phpendif; ?> </root> <?xml version="1.0" encoding=“UTF-8” ?> タイトル時刻 <category> </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> <?phpquery_posts("posts_per_page=5"); ?> <?phpif (have_posts()) : ?> <?phpwhile (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> <?phpthe_category_rss(); ?> <description><![CDATA[<?phpthe_content_rss(); ?>]]></description> </item> <?phpendwhile; ?> <?phpendif; ?> </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> <?phpquery_posts("posts_per_page=5"); ?> <?phpif (have_posts()) : ?> <?phpwhile (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> <?phpthe_category_rss(); ?> <description><![CDATA[<?phpthe_content_rss(); ?>]]></description> </item> <?phpendwhile; ?> <?phpendif; ?> </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> <?phpquery_posts("posts_per_page=5"); ?> <?phpif (have_posts()) : ?> <?phpwhile (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> <?phpthe_category_rss(); ?> <description><![CDATA[<?phpthe_content_rss(); ?>]]></description> </item> <?phpendwhile; ?> <?phpendif; ?> </root>

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

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

①ページ > 新規追加 ②タイトルを入れる ③XmlForFlashを選択する

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (14)

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

Ähnlich wie 20100116 01 Word Pressテンプレートのカスタマイズ&Xml出力 (20)

Mehr von Takashi Uemura

Mehr von Takashi Uemura (20)

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