ツイッタータイムライン 表示されないよ~、対応ついでにショートコード

Java-scriptワードプレスショートコード

すぐに対応されると思いますが、、、

ツイッターパブリッシュのコードをコピペしたタイムライン、表示されないですね。

ツイッター上に少し情報が出始めてます。

 

2022/03/12早朝には修正されてました。コードを見たところ、下記とは違う感じでしたので、「https://platform.twitter.com/widgets.js」に戻したほうが良いと思われます。

 

タイムライン表示に必要なjs「https://platform.twitter.com/widgets.js」にミスがありエラーが出ている模様。

  1. スクリプトをダウンロード
  2. スクリプト中の「https://cdn.syndication.twimg.com」を「https://syndication.twimg.com」に変更(2カ所)
  3. サイトにアップロードして、「アップロードしたパス/widgets.js」を読み込ませるようタイムライン表示コードを変更

で表示されると思います。

 

「すぐ直せ!」「今直せ!」な場合はこれで。

 

2~3日前までは正常だったので、何かの必要があって更新したはず。

てことは「この問題が修正されたら元に戻したほうが良い」ってことよね、、、

ついでにショートコード

ツイッターパブリッシュだと、ヘッダーとか「by」を消すオプションが無いのでショートコード化。

function ttl( $atts ){
	extract( shortcode_atts( array(
		'url'	=> ''
	), $atts ) );
	$header = '';
	$theme = '';
	$url = '';
	if( !empty( $atts['url'] ) ){
		$url = $atts['url'];
	}
	if( !empty( $atts['width'] ) ){
		$width = ' data-width="' . $atts['width'] . '"';
	}else{
		$width = ' data-width="' . '300' . '"';
	}
	if( !empty( $atts['height'] ) ){
		$height = ' data-height="' . $atts['height'] . '"';
	}else{
		$height = ' data-height="' . '400' . '"';
	}
	if( !empty( $atts['theme'] ) && $atts['theme'] == 'dark' ){
		$theme = ' data-theme="dark"';
	}
	if( !empty( $atts['header'] ) && $atts['header'] === 'none' ){
		$header = ' data-chrome="noheader nofooter"';
	}
	if( !empty( $atts['by'] ) && $atts['by'] === 'none' ){
		$by = '';
	}else{
		$by = 'Tweets by ' . $url;
	}
/* ---------- 正規のjs
	$js = 'https://platform.twitter.com/widgets.js';
 ---------- */
	$js = get_bloginfo( 'stylesheet_directory' ) . '/js/widgets.js';
return '<a class="twitter-timeline" data-lang="ja"' . $header . $width . $height . $theme . ' href="' . $url . '">' . $by . '</a><script async src="' . $js . '" charset="utf-8"></script>';
}
add_shortcode( 'ttl', 'ttl' );

※jsのミスが修正されたら、「$js」を正規のものに変更。

出力

ttl url=”https://twitter.com/PICO_CRE” header=”none” by=”none” width=”300″ height=”400″

※[]の囲みをお忘れなく

 

デフォルト状態

サムネール表示

カテゴリーを限定、最大表示数を3、タグを表示

カテゴリーを絞ると、ループのタイトル、一覧へのリンクも追従します。

アコーディオン動作

アコーディオン動作となり、記事へはリンクしません。

FAQなどで使われることが多いので、「本文を全て表示」としてあります。

クイックインストールをした直後や、デモサイトをレストアした直後等、トップページ以外が全て404エラーでアクセスできないことがたまにあります。

ルートにあるべき「.hraccess」が存在しなかったり、存在していても記述が足りなかったりするとこの現象が起きます。

この場合「設定 ⇒ パーマリンク」と進み「変更を保存」することで大抵解決します。

※内容は変更してもしなくても構いません。

特定のページのみ404になる場合

固定ページと同じスラッグのフォルダが存在すると、

  • 古いHTMLファイルが表示されたり
  • 404エラーになったり

します。(WPのスラッグよりも優先されます)

削除、リネームなどで回避しましょう。

WAFが掛かっていると、ナビゲーション、テーマオプション、テンプレートファイル等、あちこちが書き換え不能になります。

特にGMO系列のサーバーは標準でONになっていますので注意です。


WAFが掛かっていたらセキュリティは万全か?

当然「NO」なので、切っても構わないでしょう。さくら、Xサーバーは標準でOFFです。

心配な場合は、変更が必要な時だけOFFにして、またONに戻すと良いでしょう。

データベースに保存された絶対パスは、レストアの際に自動で変換されます。

これには、本文、ナビゲーションメニュー、ウィジェットなどが含まれます。

メディアライブラリから登録した画像がリンク切れにならないのはこのためです。

 

一方、データベース保存ではないパスは一切変換されません。

これにはテンプレートファイルやCSSファイルが含まれます。

また、標準では存在しないデータも変換してくれないようですので、「テーマオプション > ログイン画面のCSS」等も要注意です。

 

こういった差異があるため、「どんな場合でもリンク切れを起こさない」マジックはありません。

ただし、公開サーバーに出来るだけ近い状態でデモを作ることで、リンク切れを最小限に抑えることは出来ます。

設置例

NG:ドメイン/デモ1/wp、ドメイン/デモ2/wp

CSSの画像パスなどは、絶対パスで書いても相対パスで書いても、すべて書き換える必要がある

無難:サブドメイン1/wp、サブドメイン2/wp

CSSの画像パスなどは、相対パスで書いておけば書き換え不要

※弊社が、お客様毎の個別サブドメインに設置していたのはこれが理由です。

※コーポレートの下にリクルートが来る場合なども、同じディレクトリ構成にしてデモを作ると後手間が少ないです。

よくある質問一覧

投稿タイプ「post」

グリッド表示&カルーセル動作、ループタイトルなし