【WordPress】Digicution Simple Twitter FeedでシンプルなTwitterウィジェットを付ける

【WordPress】Digicution Simple Twitter FeedでシンプルなTwitterウィジェットを付ける

Twitterのウィジェットでシンプルで使いやすい(弄りやすい)ものを探そうとGoogleで検索しても、Twitter公式のだったり追加方法だったりのサイトばかりであまりプラグインの情報が出てこない。
まぁいいやとプラグインの追加から検索窓に「Twitter」と打ち込んだら出てきたのがこのDigicution Simple Twitter Feedだった。
tweetsample
適当にググっても日本語解説記事も出てこないし、よく分からんが良さそうなので試しに入れてみるかと入れてみた。
入れるだけでまぁまぁ形になってるしCSSをいじれない人用の簡単な調整UIもついていたが、CSSを触れる人はこれでどうぞ!と親切にもCSSテンプレートも用意されていたのでやってみたのがこれ。(Tweet内容はスルーしてください)
サイトの外観に合うように弄れるので、CSSを触れる人ならばかなり自分好みにカスタマイズ出来そうで良い感じ。これはお勧めできるプラグインだ!(他にも似たようなプラグインはあるかも知れないけど)
まだ弄るつもりではあるが、記憶が新鮮なうちにタイプしておこうと思ってポスト。


インストールと下準備

プラグインのインストールについては語るつもりもないので各自インストール。
だが、このプラグインはTwitterのAPIを使用するのでAccess Tokenやらなんやらを取得しないと動かせない。
まずTwitterのデベロッパー向けサイトにアクセスして画面右上のSign inよりログイン。いつものTwitterアカウントで入れます。
digicution_ss1右上のアイコンにカーソルを合わせると出てくるメニューよりMy applicationsへ入ります。
My applicationsでは画面右上に”Create a new application”というボタンがあるのでGO。
digicution_ss2こういう画面が出てきます。

  1. Name 名前を好きなように入れてください。私はbe4nd-blog-widgetとかそんな感じにしました。
  2. Description 説明文。どうせ自分しか使わないので適当でいいですが10文字以上入力しないと通りません。
  3. Website 自分のブログのURLとか。
  4. Callbak URL 空白のままでOK。

各部入力して、利用規約を読んでチェックを入れて画像キャプチャ認証を通して”Create your Twitter application”を押しましょう。

入力が正しければこのようにアプリケーション情報の画面に移ります。
digicution_ss3ページをスクロールしていくと”Consumer key”や”Access token”が表示されているので、Wordpressのダッシュボードのサイドバーに追加された”Simple Twitter”を選択しコピペしていきます。
ボタンを押して認証が通れば晴れてウィジェットの使用が開始できます。
digicution_ss4General settingにて各種必要な表示をオン・オフしたり表示数を調整してウィジェットに突っ込んで動作確認してください。
私が設定しているのは

  • Display Profile Images
  • Display Re-Tweets
  • Link Hashtags
  • Link @usernames
  • Dsiplay Tweet Date

をYESに、それ以外は全てNOです。

カスタマイズ

digicution_ss5Automatic stylingでは各部のmargin,paddingやフォントサイズ、アイコンサイズなんかを簡単に調整することができます。

が、ここはやはり拘ってManual stylingからCSSテンプレートをコピーして弄るのが楽しいでしょう。
殆どのクラス付けがすでにされているので、Firebug等の開発者向けツールでどういう感じに付けられているかざっと見れば簡単に編集ができると思います。

Twitterのアイコンの角を丸くしたりマージンとったり

img.dt-twitter-avatar {
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
	width: 32px;
	height: 32px;
	border-radius: 20%;
	opacity: 0.85;
}

Tweet本文の回りこみを調整したり

div.dt-twitter-tweetbody {
	margin-bottom: 10px;
	font-size: 12px;
	overflow: hidden;
}

私の場合はこういう簡単なトコしか弄ってません。
しかしTweet同士を区切るborderを入れたかったのですが、全然できず困ったのでincludesフォルダ下にあるdt-display.phpを編集。
634行目からのWrite Out Tweet部分を

			//Write Out Tweet
			echo '<span class="dt-twitter-tweet">'.$req_tweet.'</span>';

			//Write Out Tweet
			echo '<div class="dt-twitter-tweet">'.$req_tweet.'</div>';

Spanからdivに変えました。ブロック要素なのにどういう意図でここをSpanにしてあったのか分からない…これでCSSに戻って

/* Tweet Wrapper */
div.dt-twitter-tweet {
	margin-bottom: 10px;
	border-bottom: 1px solid #E5E5E5;
}

と書いてサイドバーに有るようにちゃんとボーダーが表示されました。
まだこれからちょっとずつ調整していきたいと思います。