【投稿画面】Twitterからつぶやきを取得して一覧を挿入するポップアップ:【96日目】WordPress1日1プラグイン

ようこそのお運びで、厚く御礼申し上げます。
今回も、前回までの応用です。Twitter APIを利用して、つぶやきを検索して、投稿画面に挿入するプラグインを作ってみます。

投稿画面に、Twitterからつぶやきを取得して一覧を挿入するプラグインをつくる。

Twitterからツイートを検索して、挿入したいツイートを投稿画面に挿入するプラグインを作成します。

Twitterに関してはスケジュール処理での作成は過去に作りましたので、そちらも参考にごらんください。

今回の仕様について

  • ツイートを挿入するボタンを作成する。
  • ポップアップウィンドウ(wp_iframe)を表示する
  • 検索フォームよりTwitterからツイートを検索する
    ※Twitter APIを仕様
  • 検索結果の一覧をAjaxで取得する(自動読み込み)
  • 選択したツイートを投稿画面に挿入する

画面フローについて

画面フローについて、まずは動画をご覧ください。

それでは、説明します。
まず、「ついーと」ボタンをクリックして「ツイート取得」ウィンドウを表示します。

140912-0001

「検索フォーム」に検索ワードを入れて「検索する」をクリックします。140912-0006

Ajaxでツイート一覧を表示します。140912-0005

 

投稿画面に挿入するツイートを選択します(チェックする)。140912-0004

ツイートを選択したら「選択したツイートを挿入する」をクリックします。140912-0007

投稿画面に選択したツイートが挿入されます。140912-0008

プラグインファイルを作成していきます。

wp-contents>plugins」ディレクトリに「paka3_get_tweet」ディレクトリを作成し、「paka3_get_tweet.php」を作成します。
140912-0009

「icon.png」と「loadimg.gif」も準備します。ちなみに、今回はこんな画像を用意しました。
icon loadimg

 

コードのダウンロードはこちらから

ダウンロードしたい方、コード全体を確認したい方は、先にこちらからどうぞ(gitHub)。

※注意:Twitter APIキーが別途必要になります。

今回も、今までの復習。

ここまでくると復習が多いのですが、関連記事へのリンクとともに説明をしていきます。
おこなっている事は、大枠こんなところです

  • 投稿画面でのポップアップ(wp_iframe)
  • Twitterからのツイート取得(Twitter API)
  • Ajaxでの検索結果の取得

ボタンの設置→ポップアップウィンドウ→エディタ挿入

まずは前回の記事を参考に読んでみましょう。

今回も、こちらのコードをカスタマイズして作成しています。

 

Twitter APIについてのおさらい

何度か書いて言いますがおさらいです。
WordPressからTwitterにつぶやくには「Twitter API」を使う必要があります。
デベロッパーの登録等が必要になりますので、まだの方は一度参照してください。


今回もTwitter APIのOAuth認証はTwitterOuthを使います。

Twitter × WordPressに関連する記事

WordPress × Twitterに関する記事は以下の通りです。

Ajaxによる一覧の取得

Ajaxについて基本的な部分を知りたい場合は、こちらの記事を参照してください。

コードについて

今回は、コードが乱雑化するのでココには表示しません。
コード全体を確認したい方は、先にこちらからどうぞ(gitHub)。

一部APIキーの追加箇所は「Paka3_get_tweet.php」の以下の部分です。

gitHubからダウンロードして、APIキーを入力しプラグインを有効化してみてくださいね。

今回のまとめ

Twitterからの取得は以前作っていたので簡単でしたが、どのようにデータを整形するか?どのようなスタイルで挿入するか?などは、まだまだ改善の余地はあると思います。これでTwitterのまとめサイト等は簡単に作れそうですね。
それでは、お後がよろしいようで。

 

wordpress1日1プラグイン

2 thoughts on “【投稿画面】Twitterからつぶやきを取得して一覧を挿入するポップアップ:【96日目】WordPress1日1プラグイン

  1. タンタン より:

    メッチャいいの見つけたーと思って、早速やってみたんですけど、
    画像が表示されないです。それと文章が崩れてしまいます。
    検索はちゃんとするのですが表示がうまくならないです。
    素人なのでわかりません、使いたかったんですがー。

    1. shojiendo より:

      ご連絡ありがとうございます。
      個人的な仕様でしたので、WPのアップデート対応や機能追加などはGitHub更新していませんでした。
      今手元にあるものを、githubにpushしています。
      https://github.com/snoise/paka3_get_tweet

      APIのキーを入れてから、プラグインを有効化してみてください。
      ページの仕様と若干変わっていますが、使えると思います。
      変更点
      ・バグ修正
      ・ツイート選択ポップアップの画面構成(2カラムになっています)
      ・ドラッグアンドドロップで順番入れ替え
      ・h2タグの挿入など

      なお、個人仕様のためバージョンアップやバグ対応などは今のところ未定です。
      よろしくおねがいします。

      あと、見た目などが崩れる場合はスタイルシートの問題なので
      「paka3_tweet_json_to_view.php」内のpost_css()のスタイルシートを調整していくとよいと思います。

コメントを残す

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