55
Wordpressのちょっと変わった使い方 ふたっぱ! 吉田建也 jQuery XMLを出力してみよう

WordBench Osaka Num09 2012/09/22

  • Upload
    -

  • View
    1.628

  • Download
    0

Embed Size (px)

DESCRIPTION

ワードベンチ大阪第9回目のふたっぱ!の資料

Citation preview

Page 1: WordBench Osaka Num09 2012/09/22

Wordpressのちょっと変わった使い方

ふたっぱ! 吉田建也

~ jQuery や XMLを出力してみよう ~

Page 2: WordBench Osaka Num09 2012/09/22

自己紹介

・吉田 建也  (よしだ たつや)

・屋号『ふたっぱ!』 フリーランスのWEB屋さん

・HTML/JS/PHP/デザイン/FLASH とか

・業界暦2年半くらい

・難しいプログラム/デザインはできません

@tatzuya tatzuya83

Page 3: WordBench Osaka Num09 2012/09/22

自己紹介

その他2%

デザイン8%

FLASH10%

Wordpress30%

コーディング50%

お仕事こんな感じ

PC/スマホ/ガラケー用の制作やってます

Page 4: WordBench Osaka Num09 2012/09/22

本日の内容

◎Wordpress で動的XML - FLASHコンテンツを更新 -

◎Wordpress で動的jQuery - 静的HTMLを更新 -

Page 5: WordBench Osaka Num09 2012/09/22

require_once('WPのパス/wp-blog-header.php');

Page 6: WordBench Osaka Num09 2012/09/22

<?php

require_once('WPのパス/wp-blog-header.php');

?>

これ 頻繁に出てきます。

Page 7: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的jQuery

- 静的HTMLを更新 -

Page 8: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的jQuery - 静的HTMLを更新 -

会社概要 製品情報 求人情報.html .html .html

すでに静的HTMLで作られたサイトに...

ケース~こんな時に~

ホーム.html

Page 9: WordBench Osaka Num09 2012/09/22

会社概要 製品情報 求人情報.html .html .html Wordpress

ブログ

別のWordPressブログを追加制作して、トップページ(ホーム)にブログの新着記事表示してくれませんか?

記事1

記事2

新着記事表示

◎Wordpress で動的jQuery - 静的HTMLを更新 -

ケース~こんな時に~

ホーム.html

すでに静的HTMLで作られたサイトに...

Page 10: WordBench Osaka Num09 2012/09/22

静的サイトの方をWordpressに組み込むの面倒くさい・・・

◎Wordpress で動的jQuery - 静的HTMLを更新 -

Page 11: WordBench Osaka Num09 2012/09/22

そこで・・・こんな方法どうだろう?

◎Wordpress で動的jQuery - 静的HTMLを更新 -

Page 12: WordBench Osaka Num09 2012/09/22

会社概要 製品情報 求人情報.html .html .html

◎Wordpress で動的jQuery - 静的HTMLを更新 -

ホーム.html

Wordpressブログ

記事1

記事2

Page 13: WordBench Osaka Num09 2012/09/22

会社概要 製品情報 求人情報.html .html .html

◎Wordpress で動的jQuery - 静的HTMLを更新 -

ホーム.html

Wordpressブログ

記事1

記事2

新着記事出力

Page 14: WordBench Osaka Num09 2012/09/22

会社概要 製品情報 求人情報.html .html .html

◎Wordpress で動的jQuery - 静的HTMLを更新 -

ホーム.html

Wordpressブログ

記事1

記事2

読み込み・実行新着記事出力

Page 15: WordBench Osaka Num09 2012/09/22

会社概要 製品情報 求人情報.html .html .html

◎Wordpress で動的jQuery - 静的HTMLを更新 -

読み込み・実行ホーム

.html表示

Wordpressブログ

記事1

記事2

新着記事出力

Page 16: WordBench Osaka Num09 2012/09/22

会社概要 製品情報 求人情報.html .html .html

◎Wordpress で動的jQuery - 静的HTMLを更新 -

読み込み・実行ホーム

.html表示

Wordpressブログ

記事1

記事2サイトの構造を変える事無く新着記事表示できる!

新着記事出力

Page 17: WordBench Osaka Num09 2012/09/22

まず同様のサイトを確認

◎Wordpress で動的jQuery - 静的HTMLを更新 -

Page 18: WordBench Osaka Num09 2012/09/22

Wordpressで JS (jQuery) を出力する

◎Wordpress で動的jQuery - 静的HTMLを更新 -

Page 19: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的jQuery - 静的HTMLを更新 -

サイトのディレクトリ構造

/index.html/company.html/product.html/recruit.html

/blog/・・・(Wordpressが入ってます)

Page 20: WordBench Osaka Num09 2012/09/22

/blog/・・・(Wordpressが入ってます)

/js/news.php

サイトのディレクトリ構造news.phpというファイルを静的サイト側に置きます。

(拡張子は.phpですがjsファイルとして扱います)

/index.html/company.html/product.html/recruit.html

◎Wordpress で動的jQuery - 静的HTMLを更新 -

Page 21: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的jQuery - 静的HTMLを更新 -

news.php内のソースコード<?php

//Wordpressのタグが使えるようにするrequire_once('../blog/wp-blog-header.php');

//新着記事を5つ読み込んで、変数$newslist_tagsに追加していくquery_posts('showposts=5');if(have_posts()):while(have_posts()): the_post();

$newslist_tags .= '<p><a href="’ . get_permalink() . '">’ . get_the_title() . ’</a></p>’;

endwhile;endif;

?>

//jQuery部分 (HTMLに表示する処理)$(function(){

$('#newsList').html(‘<?php echo $newslist_tags; ?>’);});

Page 22: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的jQuery - 静的HTMLを更新 -

news.phpを実行すると...

//jQuery部分 (HTMLに表示する処理)$(function(){

$('#newsList').html(‘<p><a href="http://sample.jp?p=1">タイトル1</a></p>・・・略・・・<p><a href="http://sample.jp?p=5">タイトル5</a></p>’);

});

このようなソースコードに変換されます

Page 23: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的jQuery - 静的HTMLを更新 -

index.html(トップページ)内のソースコード

<html><head><title>○○コーポレーション</title><script type="text/javascript" src="./js/jquery.js"></script><script type="text/javascript" src="./js/news.php"></script></head><body>・・<div id="newsList"></div>・・</body></html>

Page 24: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的jQuery - 静的HTMLを更新 -

DEMO

Page 25: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML

- FLASHコンテンツを更新 -

Page 26: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML - FLASHコンテンツを更新 -

FLASH(swfファイル)

FLASHコンテンツの更新について

Page 27: WordBench Osaka Num09 2012/09/22

×

◎Wordpress で動的XML - FLASHコンテンツを更新 -

FLASH(swfファイル)

FLASHコンテンツの更新について

更新

直接swfを編集するのは不可能

Page 28: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML - FLASHコンテンツを更新 -

FLASH(swfファイル)

FLASHコンテンツの更新について

Page 29: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML - FLASHコンテンツを更新 -

FLASH(swfファイル)

FLASHコンテンツの更新について

XMLを出力

Page 30: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML - FLASHコンテンツを更新 -

FLASH(swfファイル)

FLASHコンテンツの更新について

読み込むXMLを出力

Page 31: WordBench Osaka Num09 2012/09/22

OK

◎Wordpress で動的XML - FLASHコンテンツを更新 -

FLASH(swfファイル)

FLASHコンテンツの更新について

XMLを出力

更新

読み込む

Page 32: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML - FLASHコンテンツを更新 -

XMLってなに?

・Extensible Markup Languageの略

・文書やデータの意味や構造を記述するためのマークアップ言語の一つ。

Page 33: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML - FLASHコンテンツを更新 -

XMLってなに?

記事1のタイトル

http://記事1のURL

記事2のタイトル

http://記事2のURL

例えば...

Page 34: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML - FLASHコンテンツを更新 -

XMLってなに?

<?xml version="1.0" encoding="UTF-8"?><root> <post> <title>記事1のタイトル</title>

<link> http://記事1のURL </link>

</post> <post> <title>記事2のタイトル</title>

<link> http://記事2のURL </link>

</post></root>

マークアップ(タグ付け)する事によって構造がわかりやすくなる=プログラム(FLASH Action Script, Javascript, PHPなどなど)で情報を扱いやすくなる(「2つ目の記事のURLを表示させたい」など)

記事1のタイトル

http://記事1のURL

記事2のタイトル

http://記事2のURL

例えば...

Page 35: WordBench Osaka Num09 2012/09/22

WordpressでXMLを出力する

◎Wordpress で動的XML - FLASHコンテンツを更新 -

Page 36: WordBench Osaka Num09 2012/09/22

/blog/・・・(Wordpressが入ってます)

サイトのディレクトリ構造

/index.html/company.html/product.html/recruit.html

◎Wordpress で動的XML - FLASHコンテンツを更新 -

Page 37: WordBench Osaka Num09 2012/09/22

/blog/・・・(Wordpressが入ってます)

/xmldata/news.php

サイトのディレクトリ構造

news.phpというファイルを置きます。(拡張子は.phpですがxmlファイルとして扱います)

/index.html/company.html/product.html/recruit.html

◎Wordpress で動的XML - FLASHコンテンツを更新 -

Page 38: WordBench Osaka Num09 2012/09/22

/・・・(ルートにWordpressが入ってます)

/xmldata/news.php

サイトのディレクトリ構造

サイト全体がWordpressの場合、WPと同階層でOK

◎Wordpress で動的XML - FLASHコンテンツを更新 -

(備考)

Page 39: WordBench Osaka Num09 2012/09/22

news.php内のソースコード<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?><root>

<?php//Wordpressのタグが使えるようにするrequire_once('../blog/wp-blog-header.php');

//新着記事を5つ読み込むquery_posts('showposts=5');if(have_posts()):while(have_posts()): the_post();?>

<post> <title><?php the_title(); ?></title> <link><?php the_permalink(); ?></link> </post>

<?phpendwhile;endif;?>

</root>

◎Wordpress で動的XML - FLASHコンテンツを更新 -

Page 40: WordBench Osaka Num09 2012/09/22

<?xml version="1.0" encoding="UTF-8"?><root> <post> <title>タイトル1</title> <link>http://sample.jp?p=1</link> </post>・・略・・ <post> <title>タイトル5</title> <link>http://sample.jp?p=5</link> </post></root>

◎Wordpress で動的XML - FLASHコンテンツを更新 -

news.phpを実行すると...このようなソースコードに変換されます

Page 41: WordBench Osaka Num09 2012/09/22

FLASHでXMLを読み込む

◎Wordpress で動的XML - FLASHコンテンツを更新 -

Page 42: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML - FLASHコンテンツを更新 -

FLASHでXMLを読み込む

準備 ・ステージ上にテキストエリアを作る。・プロパティの設定で「ダイナミックテキスト」に。・名前をつける(今回は「text1」、「text2」)

Page 43: WordBench Osaka Num09 2012/09/22

◎Wordpress で動的XML - FLASHコンテンツを更新 -

var myXML:XML;var xmlLoader:URLLoader = new URLLoader();var urlReq:URLRequest = new URLRequest("http://~~~~~~~/news.php"); //ここにXMLのパス(※)

xmlLoader.addEventListener(Event.COMPLETE,doComplete);xmlLoader.load(urlReq);

function doComplete(event:Event):void { myXML=new XML(xmlLoader.data); text1.text = myXML.post[0].title; //テキストエリアtext1の中に1記事目タイトル表示 text2.text = myXML.post[1].title; //テキストエリアtext2の中に2記事目タイトル表示

}

FLASHタイムラインの1フレーム目にスクリプトを記述

(※相対の場合はページのURLからの相対)

FLASHでXMLを読み込む

読込処理

読込後の処理

Page 44: WordBench Osaka Num09 2012/09/22

DEMO

◎Wordpress で動的XML - FLASHコンテンツを更新 -

Page 45: WordBench Osaka Num09 2012/09/22

◎おまけ (応用)- ajaxで記事を読み込む-

Page 46: WordBench Osaka Num09 2012/09/22

先に完成DEMO

◎おまけ (応用)- ajaxで記事を読み込む-

Page 47: WordBench Osaka Num09 2012/09/22

/blog/・・・(Wordpressが入ってます)

/txtdata/news.php

サイトのディレクトリ構造

news.phpというファイルを置きます。(拡張子は.phpですがtxtファイルとして扱います)

/index.html/company.html/product.html/recruit.html

◎おまけ (応用)- ajaxで記事を読み込む-

Page 48: WordBench Osaka Num09 2012/09/22

news.php内のソースコード

<?php//Wordpressのタグが使えるようにするrequire_once('../blog/wp-blog-header.php');

//URLのpostnumパラメータを取得$postnum = (int) $_GET['postnum'];

//新着記事を1つ読み込む(ただし$postnumの数分は飛ばす)query_posts('showposts=1&offset=' . $postnum );if(have_posts()):while(have_posts()): the_post();?>

<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p> <?phpendwhile;endif;?>

◎おまけ (応用)- ajaxで記事を読み込む-

(※実行する際、URLを news.php?postnum=4 などパラメータをつける)

Page 49: WordBench Osaka Num09 2012/09/22

<p><a href="http://sample.jp?p=1">タイトル1</a></p>

◎おまけ (応用)- ajaxで記事を読み込む-

news.phpを実行すると...

URLが news.php?postnum=0 で実行した時

<p><a href="http://sample.jp?p=5">タイトル5</a></p>

URLが news.php?postnum=4 で実行した時

このようなソースコードに変換されます

Page 50: WordBench Osaka Num09 2012/09/22

表示するHTML側のソースコード<script type="text/javascript" src="./js/jquery.js"></script><script type="text/javascript">//最初のカウントは0var count=0;

//ボタンをクリックされた時の処理function loadPost(){ $.ajax({

//以下のURLを読み込む url:"./txtdata/news.php?postnum=" + count, //データのタイプはHTML dataType : "html", //読込成功したらそのデータを#loadedContentのタグの中に追加 success : function(data){ $('#loadedContent').append(data); }

}); count++;}</script>

<div id="loadedContent"></div> <a href="#" onclick="loadPost();return false;">もういっちょ</a>

◎おまけ (応用)- ajaxで記事を読み込む-

Page 51: WordBench Osaka Num09 2012/09/22

DEMO

◎おまけ (応用)- ajaxで記事を読み込む-

Page 52: WordBench Osaka Num09 2012/09/22

◎まとめ

Page 53: WordBench Osaka Num09 2012/09/22

◎まとめ

・Wordpressで出力できるのはHTMLだけじゃない

・Javascriptファイル や XMLファイルも出力できる

・CSSファイルだって出力できる(何か面白い事できるかも)

Page 54: WordBench Osaka Num09 2012/09/22

◎まとめ

Wordpressで色んな可能性が広がる??

Wordpress× ○○

Page 55: WordBench Osaka Num09 2012/09/22

ご清聴ありがとうございました

ふたっぱ!吉田建也