ワードプレスでツイッターを埋め込む方法!便利な検索方法も!

最近では、Twitterやインスタの投稿が埋め込まれた記事が増えてきましたよね。
今回は、ワードプレスの記事内にTwitterを埋め込む方法、そして、便利なTwitterの検索方法も紹介します!
目次
ワードプレスの記事にTwitterを埋め込む方法
Twitterを埋め込む方法は2つあります。
- URLをコピペする(簡単)
- 埋め込みコードを取得する(カスタマイズできる)
です。
それぞれ解説していきますね!
TwitterのURLをコピペする
こちらはワードプレス限定の方法になりますが、簡単にTwitterを埋め込むことができます。
埋め込みたいTwitterの右上にある「∨」をクリックし、メニューを表示します。
表示されたメニューの「ツイートへのリンクをコピー」をクリックします。
すると、「リンクがコピーされました」と表示され、ツイートへのリンクがコピーされます。
そのリンクを記事投稿画面に貼り付けます。
「ビジュアル」モードでも「テキスト」モードでもどちらでもOKです。
プレビューを表示すると以下のようにTwitterが埋め込まれているはずです。
埋め込みコードを取得する
これはワードプレスだけでなく、一般的に使える方法です。
そして、埋め込みコードを使うと、埋め込むTwitterの大きさなどカスタマイズできます。
同じように埋め込みたいTwitterの右上にある「∨」をクリックし、メニューを表示します。
表示されたメニューの「ツイートをサイトに埋め込む」をクリックします。
すると以下のように埋め込みコードが表示されるので、それをコピーします。
コピーしたコードを記事投稿画面の「テキスト」モードのエディタに貼り付けます。
プレビューを表示すると、以下のようにTwitterが埋め込まれているはずです。
埋め込みコードにする利点は、先ほどもちらっと言いましたが、カスタマイズ出来ることです。
例えば、表示する大きさ。
最初の行の
1 |
<blockquote class="twitter-tweet" data-lang="ja"> |
に、
1 |
width="150px" height="150px" |
を書き加え
1 |
<blockquote class="twitter-tweet" data-lang="ja" <span style="color: #ff0000;">width="150px" height="150px"</span>> |
とすると、以下のように指定した大きさでTwitterが表示されます。
また、背景色を変更したい場合は
1 |
data-theme="dark" |
を加えると、以下のように背景が黒くなります。
使えるコードをまとめてみますね。
幅
width=”XXXpx”
※「XXX」には表示したい大きさの数字を入れます。
高さ
height=”XXXpx”
※「XXX」には表示したい大きさの数字を入れます。
水平方向の配置を指定
align=”XXX”
※「XXX」には「left」「center」「right」のいずれかを指定します。
リンクの色
data-link-color=”色コード”
※色コードは「#ffffff」などのコードです。
背景色
data-theme=”dark”
※デフォルトは白です。上記は黒の背景色を指定する場合です。
Twitterでの便利な検索方法
Twitterは投稿を楽しむだけでなく、情報収集するのにも有効なツールです。
その時に役立つのが検索機能!
検索機能の使い方を紹介しますね!
検索文字を入力して検索
右上にある検索窓に検索したい文字を入力し、[虫眼鏡]マークをクリックします。
すると、入力した文字を含む投稿が表示されます。
そして、Twitterの便利なところは「複数単語の検索が可能」なところ!
インターネットブラウザで検索する時のように、文字と文字の間にスペースを入れて検索すると、両方の単語を含む投稿が表示されます。
沢山の投稿の中から、目当ての投稿を探すのに絞り込みができるのでめちゃめちゃ便利ですよ。
タグを使って検索
最近は「ググる」ではなく「タグる」という言葉が使われるそうですね。
「タグる」とは「タグ」を使って検索することです。
Twitterの投稿をみていると「#田園都市線」のように、「#」がついた文字が表示されているのを見かけることがあると思います。
これがタグです。
検索窓に「#田園都市線」のようにタグを入力すると、入力したタグが付けられている投稿が表示されます。
これもかなり便利です。
リンクURL付き投稿を除外して検索
Twitterを検索すると、リンク付きURL付きがついたスパム的な投稿がズラッと並んで本来知りたい内容が見つからない!ということがあると思います。
そのような場合に、検索文字の後に「-filter:links」を加えるとリンクを含んだ投稿が除外されます。
逆にリンク付きの投稿を検索したい場合は「filter:links」と入力します。
「-」があるかないかですね。
他にも色々検索オプションはありますが、とりあえずこれだけ覚えておけば通常は事足りると思います。
まとめ
ワードプレスでTwitterを埋め込む方法と便利な検索方法を紹介しました。
他にも便利な機能が登場したらまた紹介しますね。