WordPress備忘録 画RSSのPC・スマホ用両方を設置と403ERROR
ふと、安曇野関連ブログの新着記事でも集めて、安曇野の情報サイトっぽくしてみようかなどと思い、RSSを取得するのに、とりあえずお手軽な外部サービスの「画RSS」を使ってみた。残念ながら広告が入るので、また気が向いたらGoogle Feed APIにでも変更するかもしれないけど・・・。(^^;
でも、まあ、「画RSS」はとにかくお手軽なのが、いいのだ。「画RSS」の登録と設定はとにかく簡単で、実際に登録して、中を見てもらえれば分かると思うので、その辺りは割愛させて頂きやす。(^^;
画RSSの設定が終わったら、生成したタグをただ貼りつけるだけなんすけど、画RSSのデザイン・レイアウト変更画面では、幅がピクセルでしか設定が出来ず、%での設定ができない。デザイン・レイアウトはPC用とスマホ用と2つ用意されていて、タグもそれぞれが生成される。
WordPressでは、PC用とスマホ用のページを別々に作っているわけではないので、画RSSで生成された、それぞれのタグをPCで見る時とスマホで見る時で切り替える必要があるのだ。たぶん、Javascriptとかで、うまいこと出来るんだろうけど、僕はJavascriptはさっぱり分からんので、強引にメディアクエリを使ってやってみたのだ。(^^;
ということで、以下のように画RSSを貼り付ける場所に、PC用のタグとスマホ用のタグをそれぞれdivタグで囲って、貼付けてみた。
<div id="rsspc"><h3>安曇野関係ブログの新着記事</h3>PC用ソースコード</div> <div id="rssmb"><h3>安曇野関係ブログの新着記事</h3>スマホ用ソースコード</div>
スタイルシートにメディアクエリを記述。
@media screen and (max-width: 900px){#rsspc{display:none;}}
@media screen and (min-width: 900px){#rssmb{display:none;}}
さっ、これでどうなるかと、とりあえずWordpressの編集画面でプレビューボタンを押してみると、オーマイガー！！下のような403エラーが・・・。これって、出てくると、「なんか、悪いことした？」と、ちょっと嫌～な気分になるのだ・・・。(笑)
画RSSは多くの人が使っているから、それが、悪さをしているってのは考えにくいので、ロリポップの403エラー関係の記事を探すと、ロリポップのQ&Aに以下のような記事がありやした。
Q:PHPやCGIでプログラムの編集をすると403エラーが表示されます。
結論から言うと、WAF（ウェブアプリケーションファイアウォール）ってやつが、邪魔をしているようです。
ということで、ロリポップのユーザー専用ページで、WEBツール⇒WAF設定から、有効⇒無効に設定してから、Wordpressのプレビューボタンを押してみると、うまいこと表示できていたので、公開ボタンを押して、PC、スマホそれぞれを確認すると、OKでした。(^^)
ここで、注意点は、WAF設定で、有効を無効にしても、設定が反映されるまでに、５～１０分かかるって事です。ちゃんと、その旨、WAF設定のページには書かれているんですが、僕は、それを読み落として、最初、無効に設定して、すぐWordpressのプレビューボタンを押して、「あかんやんけ！」となりましたから・・・。(笑)
