WordBench Osaka Num09 2012/09/22

Wordpressのちょっと変わった使い方
∼ jQuery や XMLを出力してみよう ∼

ふたっぱ！吉田建也

自己紹介
@tatzuya tatzuya83

・吉田建也（よしだたつや）

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

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

・業界暦２年半くらい

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

自己紹介
お仕事
こんな感じデザイン
8% その他
FLASH 2%
10%

コーディング
50%
Wordpress
30%

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

本日の内容

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

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

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

<?php

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

?>

これ頻繁に出てきます。

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


ケース∼こんな時に∼

ホーム
.html

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

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


ケース∼こんな時に∼

ホーム新着記事表示
.html

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

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

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


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


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


ホーム
.html


記事１

記事２


ホーム新着記事
.html
出力


記事１

記事２


読み込み・実行
.html
出力


記事１

記事２


.html
表示出力


記事１

記事２


.html
表示出力


記事１

サイトの構造を変える事無く記事２

新着記事表示できる！


まず同様のサイトを確認


Wordpressで JS (jQuery) を出力する


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

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

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


news.phpというファイルを静的サイト側に置きます。
（拡張子は.phpですがjsファイルとして扱います）

/index.html
/company.html
/product.html
/recruit.html
/js/news.php



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

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

//新着記事を５つ読み込んで、変数$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; ?>’);
});


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

//jQuery部分（HTMLに表示する処理）
$(function(){
$('#newsList').html(‘<p><a href="http://sample.jp?p=1">タイトル１</a></p>・・・
略・・・<p><a href="http://sample.jp?p=5">タイトル５</a></p>’);
});


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>


DEMO

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


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

FLASH
（swfファイル）



更新

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



XMLを出力

FLASH



読み込む
XMLを出力

FLASH



読み込む
XMLを出力

更新

FLASH
OK


XMLってなに？

・Extensible Markup Languageの略

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


XMLってなに？
例えば...
記事１のタイトル

http://記事１のURL

記事２のタイトル

http://記事２のURL


XMLってなに？
例えば...
<?xml version="1.0" encoding="UTF-8"?>
<root>
記事１のタイトル
<post>
<title>記事１のタイトル</title>
http://記事１のURL
<link> http://記事１のURL </link>
</post>
記事２のタイトル <post>
<title>記事２のタイトル</title>
http://記事２のURL
<link> http://記事２のURL </link>
</post>
</root>

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


WordpressでXMLを出力する



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




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

/index.html
/company.html
/product.html
/recruit.html
/xmldata/news.php



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

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

/xmldata/news.php


<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<root>

<?php

//新着記事を５つ読み込む
query_posts('showposts=5');
?>

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

<?php
endwhile;endif;
?>

</root>


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


FLASHでXMLを読み込む



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


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の中に１記事目タイトル表示
処理
text2.text = myXML.post[1].title; //テキストエリアtext2の中に２記事目タイトル表示

}

（※相対の場合はページのURLからの相対）


DEMO

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

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

先に完成DEMO



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

/index.html
/company.html
/product.html
/recruit.html
/txtdata/news.php



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

<?php

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

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

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

<?php
endwhile;endif;
?>



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

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

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

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


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


DEMO

◎まとめ

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

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

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

◎まとめ

Wordpress× ○○

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

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

ふたっぱ！吉田建也

WordBench Osaka Num09 2012/09/22

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to WordBench Osaka Num09 2012/09/22

Similar to WordBench Osaka Num09 2012/09/22 (20)

WordBench Osaka Num09 2012/09/22