先日、WordPressのウィジェットにTwitterのタイムラインを埋め込んでみようとしたところ、保存ボタンがずっと回転し続け、保存が完了しないという状況になってしまいました。
WordPressにTwitterのタイムラインを追加するには
Twitterのコードを取得する
Twitterにログインし、画面右上にある自分のアイコン→設定とプライバシーを選択します。画面左側のメニュー一覧から「ウィジェット」→新規作成ボタン→プロフィールとすすみ、ご自身のURLを入力すればTwitterのタイムラインのコードが取得できます。
WordPressのウィジェットにコードを追加する
自身のWordPressの管理画面に入り、外観→ウィジェットをクリックします。今回はサイドバーにTwitterのタイムラインを表示したいと思ったので、サイドバーにテキストを追加し、タイトルには「Twitter」、内容に先ほど取得したTwitterのコードを貼り付け保存しました。
【現象】WordPressのウィジェットを保存したのに保存中の表示のままになってしまった
保存ボタンを押した後、保存ボタンのあった部分が回転したような表示になりました。普段ならすぐに保存ボタンの表示に戻るのに、回転している表示が全く消えません。
失敗したと思ったので、ページ自体を再読み込みかけて上記の操作を繰り返してみました。が、全く先ほどと同じ状況でウィジェットの保存ができません。
WordPressのウィジェットの種類を「テキスト」→「カスタムHTML」に変更してみる
ウィジェットの「テキスト」を選択したのがいけなかったのかと「カスタムHTML」をサイドバーに追加し、そちらにも上記と同じ操作でコードを貼り付けましたが、全く同じ状況でいつまで経っても保存が完了できませんでした。
WordPressのテーマ配布サイトで現象が報告されていないかを確認してみる
わたしが使用しているWordPressのテーマは「simplicity」だったので、もしかしたらこちらに同じような現象が起きていないかをサイト内検索で探してみました。
すると、広告用のウィジェット追加の質問でしたが、回答の中に「ロリポップ」という文字を発見したところで思い出しました。
ロリポップの場合は、WAF機能が原因という場合が多いです。
動作不良時のガイドラインの「アドセンスのコードをテキストウィジェットなどに貼り付けられない場合はサーバーの設定を確認」という部分を参照してみてください。（僕はロリポップを利用していないので詳しくはわかりません）引用元 パソコン用広告ウィジェットが保存・反映されない
【対処】レンタルサーバのWAF設定を無効にしてみる
ロリポップのWAF設定を無効にしてみる
早速、ロリポップの管理画面に入り、Webツール→WAF設定、該当するドメインを無効にしてみました。このWAF設定の有効/無効の切り替えには5～10分ほどかかると書かれていたので、10分ほどしてからWordPressのウィジェット追加をやり直してみました。
すると、あれだけ保存ボタンが回転していたのにさくっと保存できてしまいました。念のため、表示を確認したらちゃんとTwitterのタイムラインが表示されています。
表示が確認できたところで再度ロリポップの管理画面に入り、Webツール→WAF設定→該当するドメインを有効に戻し、10分ほど経過したところでサイトを確認したところ、ちゃんとTwitterのタイムラインは表示されていました。
レンタルサーバのWAF設定とは
WAFとは、以下の引用にもある通り、不正アクセスを防ぐ機能だとあります。
WAF（ウェブアプリケーションファイアウォール）は不正アクセスによるサイトの改ざんや情報漏洩を防ぐ機能です。
引用元 WAFの解除・設定/セキュリティ/マニュアル・レンタルサーバーならロリポップ！
だけどここで疑問が生じます。他のコードはウィジェットに追加できたし、保存もさくっとできていたのです。
WordPressのウィジェットの保存ボタンが回転し続けて保存できない、のまとめ
今回のWordPressのウィジェットの保存ボタンが回転し続けて保存できなかったのは、わたしが使用しているサーバのWAF設定が有効になっていたため、JavaScriptの入っているコードを保存することができなかったということが原因でした。
不正アクセスからデータを守るための機能であるWAF設定。こんな機能があることを初めて知りました。このWAF設定が有効になっていることで不正アクセスから守ってもらえているんですね。こんな機会がなければその存在を実感することがなかったかもしれないですね。ありがたい機能です。