WEB制作

2014-12-16(Tue)

Atsuko

ピンタレストを表示するショートコード(WordPress)

ピンタレストを知らない方はこちらを⇒http://jp.pinterest.com/

通常、WEBサイトや、ブログ等にピンタレストのボードを表示する場合は

こちら⇒https://business.pinterest.com/ja/widget-builder#do_embed_board
のサイトでコードを生成しますが・・・

なぜか、たまに表示されなくなります。

原因はよくわかりません(^^;)

そこで、別の方法で出来ないか調べたら

ボードのURIに「.rss」を付けるとRSSが取得できるらしい。

ん?これ使えば上のコード使わずに表示出来るんじゃあないか?
と思って、作成してみました。

以下↓がコードになります。

curlを使ってRSSデータを取得

function curl_get_contents( $url, $timeout = 60 ){
	$ch = curl_init();
	curl_setopt( $ch, CURLOPT_URL, $url );
	curl_setopt( $ch, CURLOPT_HEADER, false );
	curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
	curl_setopt( $ch, CURLOPT_TIMEOUT, $timeout );
	$results = curl_exec( $ch );
	curl_close( $ch );
	return $results;
}

WordPressのショートコード作成

function pinterest_img($atts){
	extract(shortcode_atts(array(
        	'url' => ''
	), $atts));
	$pindata = "";
	$pindata =  '<div id="container"><div id="image_box" style="position: relative"><ul>'; //この辺は自分のサイトに合わせて・・・
	
	$data = curl_get_contents(substr($url, 0, -1).'.rss'); //RSSデータを取得
	$xml = simplexml_load_string($data); //RSSを配列へ変換
	$result = $xml->channel->item;
	
	foreach ( $result as $id ) {
		preg_match_all("/<img(.+?)>/", $id->description, $matches);
		$imgname = str_replace("192x", "736x", $matches[1][0]);
		$pindata .= '<li><a href="'.$id->link.'"><img '.$imgname.' alt="'.strip_tags($id->description).'" width="300px" /></a></li>';
	}
	
	$pindata .=  '</ul></div><a class="PIN_1406340640290_embed_grid_ft" href="'.$url.'"><span class="PIN_1406340640290_embed_grid_ft_logo"></span><span>で見る</span></a></div>';

	return $pindata;
}
add_shortcode('pinboard', 'pinterest_img');

軽くコードの解説のようなものをいたしますと

まず、「CURL」を使い、RSS情報を取得します。(これはCURLじゃなくてもphpの関数「file_get_contents」を使っても同じ、ただCURLのほうが軽い)

次に「simplexml_load_string」という関数を使い、RSSのデータを配列に変換しています。

あとは、ループ処理で、配列のデータを表示していきます。

画像は「preg_match_all」でURIを抜き出します。

RSSで表示されている画像は192pxと小さいので、大きい画像を表示したい場合は、画像のURIの「192x」という部分を「736x」に置換します。

次にピンタレスト特有のグリッドレイアウトのほうは・・・

jqueryを使用します。「wookmark」や「masonry」などを使って、グリッドレイアウトを実現します。

Bookmark Images   Wookmark

あとはショートコードで

投稿画面に[pinboard url='ボードのURI']と入力するだけです。

端折りまくりな解説ですが・・・

説明苦手なんです(–;)お許しください。

では、これにて(^^)/~


このブログを書いた人

Atsuko

実はJavascriptとか会社入るまでやったことなかったことは内緒です。
酉年生まれのせいか、話を聞いても三歩あるけば忘れます。

最近書いた記事

関連する記事