Menu/Prof
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。

TwitterをSWELL(WordPress)に表示させる方法

X
     この記事はプロモーションを含みます
contents

SWELLのサイドバー部分にTwitterを表示させる他

SWELLでTwitterのTL表示が真っ白になって見えない問題は
SWELL ver2.6.8.3 で解消しています。
SWELLフォーラムに不具合報告が上がって速攻修正されました。
相変わらずフットワーク軽くてさすがSWELLですねw

BLOGを徘徊しているとBLOGの一部分にTwitterに自分のTLを表示させているページって

ちょいちょいみかけますよね

あとツイート一個だけを表示したりとか。

SWELLに限らず他テーマでもほぼ同じなので参考にしてください。

管理人

今日の記事はワードプレスでTwitterを表示させる方法を簡単にまとめてみました。

2種類の表示方法

ワードプレスのブロック機能を使わずに自由なサイズで表示したい場合はこちら

単記事のみ表示する方法と 複数のTLを表示する方法があります。

  1. 自分のTLを一定数表示する方法
  2. 単記事のみ表示する方法

自分のTLを一定数表示する一般的な方法

STEP

Twitter Publishにアクセスする(TLをずらずらと表示)

笑顔な助手

Twitter Publish このサイトにいって埋め込むコードを自動生成させますのでページを開きます。

STEP

表示させるTwitterのURLを入れる

笑顔な助手

次に自分のツイッターアカウントのホームのURLを入れます。(プロフィールが表示されているページ)以下はここのマスターの場合

ツイッターURL
STEP

表示オプションを指定

笑顔な助手

埋め込まれたタイムラインを選択します

埋め込まれたTLを選択
STEP

カスタマイズオプションを設定

悲しい助手

そのままではやたら縦に長いTLが表示されてしまうコードが出力されているので変更

STEP

サイズの設定

ふーんな助手

縦横のお好みのサイズを指定。何も書いてませんけど多分単位はpixel

管理人

画像の数値は自分のサイトに合わせて変更して下さい。

笑顔な助手

数値入力したら アップデートを押して完成!

STEP

ページがカスタム前の選択画面に自動的に戻る

管理人

ページ戻ったら以下の部分を押して忘れずにコピーしておく。

管理人

以上でここでの作業は終わり。

STEP

こんな感じで表示できます。

高さ450px 幅300px で作ってみました。

この方法なら自在に表示領域を変えられるのであえてこちらでやる方も

いらっしゃいますね。

ブロックエディターからカスタムHTMLを指定してコピペしたコードを

そのまま貼り付けるだけです。簡単ですね!

カスタムHTML画面

例:この方法でSWELL(ワードプレス)への設定方法

笑顔な助手

コピーしてきたコードをペタリと貼るだけですがBLOGのサイドバーに表示させるなら貼る場所はここ

  1. WordPressのメニューから 外観 -> ウィジェットを選択
  2. 左列に並んでいるウィジェットのひな型から空欄の「カスタムHTML」を選んで共通サイドバーに持ってくる
  3. 共通サイドバーの任意の位置セットしたら中を開いて先ほどコピーしてきたコードを貼り付けて
    保存して完了を押す。
  4. 終了!

単記事のみ表示する方法

STEP

Twitter Publishにアクセスする(TLをずらずらと表示)

笑顔な助手

Twitter Publish このサイトにいって埋め込むコードを自動生成させますのでページを開きます。

STEP

表示させるTwitterのURLを入れる

ブラウザなどで表示したいツイートを表示してURLをコピペする

笑顔な助手

次に表示したいTwitterの投稿のURLをここに入れます

ツイッターURL
STEP

単ツイート用のHTMLを取得する

上記のURL入力ページから → を押すと以下の画面になるので そのままHTMLをコピー。

カスタムHTMLなどを使用して コピーしたHTMLを貼り付ければ終わり。

もっとも簡単にワードプレスでツイート埋め込み実現する方法

ワードプレスの場合ツイッターの埋め込みを使うのが1番楽です。

それを使用してツイートのURLを貼るだけで上記を実現できます。

上で説明したTLの表示でも同じです。

どちらの方法でも結果は同じです。

以下はSWELLのブロック機能で単記事とTLを表示してます。

単ツイート貼り付け(ツイートURLを入力)

TL埋め込み(プロフィールURLを入力)

笑顔な助手

どうです?上手くいきましたか?

管理人

サイドバー以外でも好きな場所に貼り付けて応用できるよ

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在 ほぼ自由人。

contents