Wordpressのちょっと変わった使い方 ふたっぱ! 吉田建也 ~ jQuery や XMLを出力してみよう ~
Wordpressのちょっと変わった使い方
ふたっぱ! 吉田建也
~ jQuery や XMLを出力してみよう ~
自己紹介
・吉田 建也 (よしだ たつや)
・屋号『ふたっぱ!』 フリーランスのWEB屋さん
・HTML/JS/PHP/デザイン/FLASH とか
・業界暦2年半くらい
・難しいプログラム/デザインはできません
@tatzuya tatzuya83
自己紹介
その他2%
デザイン8%
FLASH10%
Wordpress30%
コーディング50%
お仕事こんな感じ
PC/スマホ/ガラケー用の制作やってます
本日の内容
◎Wordpress で動的XML - FLASHコンテンツを更新 -
◎Wordpress で動的jQuery - 静的HTMLを更新 -
require_once('WPのパス/wp-blog-header.php');
<?php
require_once('WPのパス/wp-blog-header.php');
?>
これ 頻繁に出てきます。
◎Wordpress で動的jQuery
- 静的HTMLを更新 -
◎Wordpress で動的jQuery - 静的HTMLを更新 -
会社概要 製品情報 求人情報.html .html .html
すでに静的HTMLで作られたサイトに...
ケース~こんな時に~
ホーム.html
会社概要 製品情報 求人情報.html .html .html Wordpress
ブログ
別のWordPressブログを追加制作して、トップページ(ホーム)にブログの新着記事表示してくれませんか?
記事1
記事2
新着記事表示
◎Wordpress で動的jQuery - 静的HTMLを更新 -
ケース~こんな時に~
ホーム.html
すでに静的HTMLで作られたサイトに...
静的サイトの方をWordpressに組み込むの面倒くさい・・・
◎Wordpress で動的jQuery - 静的HTMLを更新 -
そこで・・・こんな方法どうだろう?
◎Wordpress で動的jQuery - 静的HTMLを更新 -
会社概要 製品情報 求人情報.html .html .html
◎Wordpress で動的jQuery - 静的HTMLを更新 -
ホーム.html
Wordpressブログ
記事1
記事2
会社概要 製品情報 求人情報.html .html .html
◎Wordpress で動的jQuery - 静的HTMLを更新 -
ホーム.html
Wordpressブログ
記事1
記事2
新着記事出力
会社概要 製品情報 求人情報.html .html .html
◎Wordpress で動的jQuery - 静的HTMLを更新 -
ホーム.html
Wordpressブログ
記事1
記事2
読み込み・実行新着記事出力
会社概要 製品情報 求人情報.html .html .html
◎Wordpress で動的jQuery - 静的HTMLを更新 -
読み込み・実行ホーム
.html表示
Wordpressブログ
記事1
記事2
新着記事出力
会社概要 製品情報 求人情報.html .html .html
◎Wordpress で動的jQuery - 静的HTMLを更新 -
読み込み・実行ホーム
.html表示
Wordpressブログ
記事1
記事2サイトの構造を変える事無く新着記事表示できる!
新着記事出力
まず同様のサイトを確認
◎Wordpress で動的jQuery - 静的HTMLを更新 -
Wordpressで JS (jQuery) を出力する
◎Wordpress で動的jQuery - 静的HTMLを更新 -
◎Wordpress で動的jQuery - 静的HTMLを更新 -
サイトのディレクトリ構造
/index.html/company.html/product.html/recruit.html
/blog/・・・(Wordpressが入ってます)
/blog/・・・(Wordpressが入ってます)
/js/news.php
サイトのディレクトリ構造news.phpというファイルを静的サイト側に置きます。
(拡張子は.phpですがjsファイルとして扱います)
/index.html/company.html/product.html/recruit.html
◎Wordpress で動的jQuery - 静的HTMLを更新 -
◎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; ?>’);});
◎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>’);
});
このようなソースコードに変換されます
◎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>
◎Wordpress で動的jQuery - 静的HTMLを更新 -
DEMO
◎Wordpress で動的XML
- FLASHコンテンツを更新 -
◎Wordpress で動的XML - FLASHコンテンツを更新 -
FLASH(swfファイル)
FLASHコンテンツの更新について
×
◎Wordpress で動的XML - FLASHコンテンツを更新 -
FLASH(swfファイル)
FLASHコンテンツの更新について
更新
直接swfを編集するのは不可能
◎Wordpress で動的XML - FLASHコンテンツを更新 -
FLASH(swfファイル)
FLASHコンテンツの更新について
◎Wordpress で動的XML - FLASHコンテンツを更新 -
FLASH(swfファイル)
FLASHコンテンツの更新について
XMLを出力
◎Wordpress で動的XML - FLASHコンテンツを更新 -
FLASH(swfファイル)
FLASHコンテンツの更新について
読み込むXMLを出力
OK
◎Wordpress で動的XML - FLASHコンテンツを更新 -
FLASH(swfファイル)
FLASHコンテンツの更新について
XMLを出力
更新
読み込む
◎Wordpress で動的XML - FLASHコンテンツを更新 -
XMLってなに?
・Extensible Markup Languageの略
・文書やデータの意味や構造を記述するためのマークアップ言語の一つ。
◎Wordpress で動的XML - FLASHコンテンツを更新 -
XMLってなに?
記事1のタイトル
http://記事1のURL
記事2のタイトル
http://記事2のURL
例えば...
◎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
例えば...
WordpressでXMLを出力する
◎Wordpress で動的XML - FLASHコンテンツを更新 -
/blog/・・・(Wordpressが入ってます)
サイトのディレクトリ構造
/index.html/company.html/product.html/recruit.html
◎Wordpress で動的XML - FLASHコンテンツを更新 -
/blog/・・・(Wordpressが入ってます)
/xmldata/news.php
サイトのディレクトリ構造
news.phpというファイルを置きます。(拡張子は.phpですがxmlファイルとして扱います)
/index.html/company.html/product.html/recruit.html
◎Wordpress で動的XML - FLASHコンテンツを更新 -
/・・・(ルートにWordpressが入ってます)
/xmldata/news.php
サイトのディレクトリ構造
サイト全体がWordpressの場合、WPと同階層でOK
◎Wordpress で動的XML - FLASHコンテンツを更新 -
(備考)
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コンテンツを更新 -
<?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を実行すると...このようなソースコードに変換されます
FLASHでXMLを読み込む
◎Wordpress で動的XML - FLASHコンテンツを更新 -
◎Wordpress で動的XML - FLASHコンテンツを更新 -
FLASHでXMLを読み込む
準備 ・ステージ上にテキストエリアを作る。・プロパティの設定で「ダイナミックテキスト」に。・名前をつける(今回は「text1」、「text2」)
◎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を読み込む
読込処理
読込後の処理
DEMO
◎Wordpress で動的XML - FLASHコンテンツを更新 -
◎おまけ (応用)- ajaxで記事を読み込む-
先に完成DEMO
◎おまけ (応用)- ajaxで記事を読み込む-
/blog/・・・(Wordpressが入ってます)
/txtdata/news.php
サイトのディレクトリ構造
news.phpというファイルを置きます。(拡張子は.phpですがtxtファイルとして扱います)
/index.html/company.html/product.html/recruit.html
◎おまけ (応用)- ajaxで記事を読み込む-
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 などパラメータをつける)
<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 で実行した時
このようなソースコードに変換されます
表示する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で記事を読み込む-
DEMO
◎おまけ (応用)- ajaxで記事を読み込む-
◎まとめ
◎まとめ
・Wordpressで出力できるのはHTMLだけじゃない
・Javascriptファイル や XMLファイルも出力できる
・CSSファイルだって出力できる(何か面白い事できるかも)
◎まとめ
Wordpressで色んな可能性が広がる??
Wordpress× ○○
ご清聴ありがとうございました
ふたっぱ!吉田建也