ニュースアプリ、NewsPicks。愛用してます。
Wordpressのテーマ作りながら運用してるこのサイトにNewsPicksを連携させて個人キュレーション機能をつくってみることにしました。このサイトのNewsってメニューのやつです。完成したのがこちらです。
手順としては
1. NewsPicksをTwitterと連携。
2. TwitterとWordpressをZaiperで連携。
3. ZaiperによってWordpressに自動投稿。
4. WordPressのアクショントリガーを使って自動投稿のタイミングでタイトルとかトップ画像とか設定。
って感じです。(Zaiperってのはサービスとサービスを連携させるサービスです。IFTTTみたいなやつ。)
以下詳しく説明してきます。手順4がみそです。
NewsPicksのTwitterボタンを押すだけです。
ZaiperはIFTTTよりも高機能なハブサービスです。IFTTTにもwordpress連携機能はあるんですが、カスタム投稿指定ができませんでした。
一方Zaiperはカスタム投稿タイプを指定して投稿できるなどいろいろ設定できます。
「Twitterに投稿されたらwordpressに投稿」って設定するだけです。キュレーションに関係ないのが入らないように専用のTwitterをアカウントを作るか、Zaiper側でフィルタリングかけてもいいかもしれません。
これはZaiperが勝手にやってくれます。
ここからが本番です。wordpressにはアクショントリガーといって、あるアクションに対して関数を呼び出すことができる機能が用意されています。
今回は「記事の投稿」に対して関数を呼び出し
1. ツイートから記事のURLを取り出す
2. そのURLから記事のタイトルを取得して、wordpressの投稿のタイトルに設定
3. URLを「<a href=”hogehoge”>記事を読む</a>」の形に置き換える
4. アイキャッチ画像の設定
を自動でやってくれるようにします。
今回使うアクショントリガーは「publish_***」です。***というカスタム投稿タイプが投稿、編集された時に任意の関数を呼び出します。
NewsPicksがTwitter連携機能でツイートした内容は
助かります。 / フリー素材を配布しているサイトを一覧でまとめたサイト「AllTheFreeStock」
http://npx.me/suj4/zkXr #NewsPicks
です。
自分のコメント / 記事のタイトル リンク #NewsPicks
という形式みたいです。これをfunction.phpファイルのphpとsql文でwordpressに適した形にしていきます。
1. ツイートから記事のURLを取り出す
手順2,3,4にはツイート内容から取得したURLが必要です。
|
1 2 3 4 5 6 7 |
//投稿の中のurlを抜き出す関数 function getUrlFromPost($content){ preg_match_all('(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)', $content, $result); foreach ($result[0] as $key => $value) { return $value; } } |
正規表現でURLを抜き出しています。$contentはツイート内容の文字列を受け取っています。渡す側に関しては後述します。
2. URLから記事のタイトルを取得して、wordpressの投稿のタイトルに設定
|
1 2 3 4 5 6 7 8 9 10 |
//urlからタイトルを抜き出す関数 function getPageTitle( $url ) { $html = file_get_contents($url); $html = mb_convert_encoding($html, mb_internal_encoding(), "auto" ); if ( preg_match( "/<title>(.*?)<\/title>/i", $html, $matches) ) { return $matches[1]; } else { return false; } } |
手順1で取得したURLにアクセスしてタイトルを取ってきます。
3. URLを「<a href=”hogehoge”>記事を読む</a>」の形に置き換える
|
1 |
$link = '<a href="'.$url.'" target="_blank" class="read">記事を読む</a>'; |
手順1で取得したURLをクリッカブルなボタンに変更します。
4. アイキャッチ画像の設定
|
1 2 3 4 5 6 7 8 |
//urlからアイキャッチ画像を抜き出す関数 function getPageImage( $url ) { $html = file_get_contents($url); $html = mb_convert_encoding($html, mb_internal_encoding(), "auto" ); preg_match_all('(meta property="og:image" content=".*")', $html, $image_tag); preg_match_all('(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)', $image_tag[0][0], $image); return $image[0][0]; } |
手順1で取得したURLにアクセスしてアイキャッチ画像のSRCを取ってきます。
5. 上記の関数を呼び出す関数を作る
最後に、1から4の関数を呼び出す関数を作り、それをアクショントリガーで呼び出します（ややこしい）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function modifyPost($id){ global $wpdb; $post = $wpdb->get_results("SELECT post_title, post_content, post_thumbnail FROM wp_posts WHERE id = $id"); $content = $post[0]->post_content; $url = getUrlFromPost($content); $new_title = getPageTitle($url); $new_title = str_replace ("NewsPicks - ", "" , $new_title); $link = '<a href="'.$url.'" target="_blank" class="read">記事を読む</a>'; $image = getPageImage($url); // update $wpdb->query("UPDATE wp_posts SET post_title = '$new_title' WHERE id = $id "); $wpdb->query("UPDATE wp_posts SET post_content = REPLACE (post_content, '$url' , '$link') "); $wpdb->query("UPDATE wp_posts SET post_thumbnail = '$image' WHERE id = $id "); // 不要な部分の削除 $post = $wpdb->get_results("SELECT post_content FROM wp_posts WHERE id = $id"); $content = $post[0]->post_content; $new_content = explode( ' / ', $content); $tmp = explode( '<a', $new_content[1]); $new_content[0] .= '<a'.$tmp[1]; $new_content = str_replace("#NewsPicks", "" , $new_content[0]); $wpdb->query("UPDATE wp_posts SET post_content = '$new_content' WHERE id = $id "); } add_action( 'publish_news', 'modifyPost' ); |
最後の行のアクショントリガーによってZaiperがツイート内容をそのままワードプレスの投稿として公開した瞬間に関数modifyPostが呼び出されます。*私はカスタム投稿タイプ「news」としています。
4行目まででZaiperが投稿した内容をデータベースから取得し変数に格納します。
5行目でURLを取得(手順1)。
6行目でタイトルを取得(手順2)。
7行目ではタイトルに必ずついてくる「NewsPicks – 」という文字列を削除しています。
8行目でURLにaタグを付与(手順3)
9行目で画像を取得(手順4)
12〜14行でデータベースを上書きしています。
17,18行で置き換えた内容を取得しなおして余計な内容を削除しています。
なお、この関数は自分で投稿タイプnewsを更新したりしても呼び出されます。その際に余計な処理をしないように実際はif文などを書き加えているため、もう少し長くなりました。
また modifyPost に出てくる post_thumbnail という項目はデータベースにはないので wp_posts テーブルに自分で作ってください。
以上です。
投稿タイプ毎の表示数設定も必要な方はこちら。