【WordPress】 WordPressをフィードアンテナ化するまとめ(その4)

前回データベースへの取り込みまでをまとめましたので、今回はそのデータを取り出して一覧表にする処理をまとめていきます。

スポンサーリンク

今回の課題

データベースから取り出して一覧にするまでの処理をみていきましょう。

20141204_feedantenna_01b

仕組み

データを取り込んだ投稿の本文をもう一度見てみましょう。

20141225_feedantenna_02

このように必要な情報を一行でまとめました。
順番に記事URL、記事タイトル、サイトURL、サイトタイトル、投稿時間です。
これを再度分解して加工をします。

簡単に仕組みをまとめるとこんな感じ。

20141225_feedantenna_03

テンプレートとは特定ページのデザインを変えるために使うものですが、今回はこの機能を利用します。
まず固定ページで独自に作ったテンプレートを呼び出します。
呼び出したテンプレートには記事一覧を出力するためのコードが記載されているということです。

テンプレート作成

テンプレートとしてpage-home.phpを作成します。
内容は以下のとおり。

<?php
/*
Template Name:page-home
*/
?>

<?php
	get_header();	//ヘッダー
?>

<?php
	$paged = (get_query_var('page')) ? get_query_var('page') : 1;	//現在のページ番号を取得

	$myposts = get_posts(	//以下の条件で記事を配列として取得
		Array(  
			'paged' => $paged,	//ページ番号
			'cat' => '38',	//カテゴリーのid(tag_id)
			'post_type' => 'post',	//投稿
			'orderby' => 'date',	//順番は日付で
			'order' => 'DESC',	//降順に並べる
			'posts_per_page' => 100,	//1ページの記事数
			'post_status' => 'publish',	//対象は「公開済み」
		)
	);

	foreach($myposts as $post) : setup_postdata($post);	//記事を一件づつ$postに設定する
		listhome($post);	//functionss.phpのlisthome関数を呼び出す
	endforeach;

	wp_reset_postdata();	//get_post()を使ったのでリセット
?>

<?php
	get_footer();	//フッター
?>

始めの5行でWordPressにpage-homeという名前のテンプレートとして認識されます。

ここでは条件を指定して記事を取得し、記事一つごとにこれから作成するlisthomeという関数を呼び出しています。

その条件の中のカテゴリーid(tag_id)はcrawl.phpで指定したWordPressのカテゴリーの番号のことです。
犬アンテナと猫アンテナのように複数のジャンルを共存させるとき、このidを変えることで記事の振り分けができるということです。
それ以外にも
・並べる順番を逆にする
・特定サイトだけ出力する/出力しない
などはここで指定する条件を変えていけばよいということです。

このphpファイルは子テーマ内にアップロードしておきます。

functions.phpに関数「listhome」追加

次にfunctions.phpに関数「listhome」を追加します。
この関数は一行にまとめた情報を分離し、htmlとして生成して出力するという処理を行います。

ソースはこちら。

function listhome($postdata){
	$p_content = $postdata -> post_content;	//情報を一行にまとめた記事本文を取得
	$arr_content = explode("-::-",$p_content);		//取得した記事本文を分割して配列に入れる
	$list = Array(		//配列のキーを振り直す
		'link' => $arr_content[0],		//記事URL
		'title' => $arr_content[1],	//記事サイトル
		'sitelink' => $arr_content[2],	//サイトURL
		'sitetitle' => $arr_content[3],	//サイトタイトル
		'date' => $arr_content[4],		//記事投稿時間
	);

	$pt_date=strtotime($list[date]);	//文字列をタイムスタンプに変更

	//一行分のhtmlを生成
	$disp_html = "<div class=\"ant-time\">" .date("G:i", $pt_date). "</div>";
	$disp_html .= "<div class=\"ant-content-title\"><a href=\"$list[link]\" title=\"$list[title]\" target=\"_blank\">$list[title]</a></div>";
	$disp_html .= "<div class=\"ant-site-link\"><a href=\"$list[sitelink]\" target=\"_blank\">$list[sitetitle]</a></div>";

	echo $disp_html;	//一行分を出力
}

※WordPressの仕様上、円マーク「¥」がバックスラッシュ「\」になっていますが機能としては同じです。
おそらく日本語環境のテキストエディタにコピーすると「¥」に戻るはずです。

これを子テーマのfunctions.phpに追加します。

固定ページにテンプレート登録

続いて、固定ページにテンプレートを設定します。

任意の名前で固定ページを作成し、右側のページ属性のテンプレートから先ほどpage-home.phpで指定したテンプレート名を選択します。

20141225_feedantenna_04

そしてそのまま「公開」です。
すなわち固定ページの本文は何も書いていない白紙ということです。

固定ページをトップページに設定

最後にこの固定ページをサイトのトップに指定します。

ダッシュボードの「設定」-「表示設定」で固定ページをフロントページに指定します。

20141225_feedantenna_05

完成

あとはcssを少しいじるとこんな感じになります。

20141225_feedantenna_06

これでアンテナの基本構造は出来ました。
後は自分好みにカスタムしてください。

ただし最低限やらなくてはいけないことがいくつかあります。

・投稿ページからのリダイレクト

現状文字列が並んだだけの投稿ページも閲覧できてしまいます。
これを404ページなどにリダイレクトする必要があります。

・投稿ページのフィードを停止

ベースがWordPressのためデータを記事として取り込んだ際にフィードを吐き出してしまいます。
フィードの配信を停止してください。

・2ページ目以降を出力する仕組みとページナビの追加

このままのソースでは1ページしか表示されません。
プラグインと組み合わせるなどして2ページ目を表示させる仕組みが必要です。

その他パッと思いつく範囲では、以下の機能を加えることで一般的なアンテナサイトと同等になります。

・見やすいように背景色を一行毎のストライプに
・投稿時間しか表示していないので日付が変わるタイミングで日付欄を挿入
・クリックカウンターの追加
・ユーザーが非表示サイトを設定できる仕組み
・cookieによるユーザー設定の保持

さらに自分で構築したために独自機能の追加で他サイトと差別化することも可能です。
というか、そこを生かさないと自作するメリットはないでしょう。

是非いろいろ試してみてください。

基本的なWordPressアンテナサイトの作り方はここまでです。

次回は個人的に苦労をしたcookieについてまとめて終わりにしたいと思います。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA