1. /
  2. WordPress

WordPress

「このページは承認されていないソースからのスクリプトを読み込もうとしています」の対処法

数が少ないので気づいてなかったのですが、chromeさんでサイトを見ると、URL欄の右端にちっさく赤い✕印が！

chromeさんに怒られた

これです（右端、ブックマークのお隣にひっそりと出ます）↑

なんだろうと、クリックしてみると、「安全でないコンテンツがブロックされました」「このページは承認されていないソースからのスクリプトを読み込もうとしています」とのこと。

安全でないコンテンツがブロックされました。

えっ、なにそれ。

特にあやしいスクリプトは使ってないはずなのですが、出ています。調べてみたところよくあるのが、サイトをSSL化したにも関わらず、SSL化されてないものがサイトに混在してるときにされる警告らしいです。

ちなみに、一応強行突破して読み込むこともできますが、

保護されてません

SSL非対応になったことがどどーんと表示されます。

調べ方

幸い、chromeさんの「その他のツール」＞「デベロッパーツール」で場所を調べられるようになってますので、「デベロッパーツール」の「Console」を見てみると、該当箇所が赤字でハイライトされて出てきます。

どうやらうちのサイトですと、

  • WordPressの機能でSSL化されてないhttpのサイトを呼び出してる場合
  • 昔に貼ったamazonアソシエイトへのリンクがSSLに対応してない場合

こういうところで発生してました。

対処法

ということで対処。WordPressでの呼び出し機能は使わないしかないですね。おとなしくURLを貼り直します。

amazonアソシエイトのほうは、新しくコードを作り直せば、対応したものが生成されますので、それに貼り直せばOKでした。

まとめなようなもの

気軽にSSL化したものの、地味なところで問題が起こったりするもんなんのですね。AdSenseなどでも古いコードを使ってると同じことが起こるようですのでご注意を。

 

goo blogのRSSフィードをWordPressで読み込む方法

goo blogのRSSフィードをWordpressで読み込もうとしてもエラーが出てしまい読み込めません。どうやらgoo blogがWordpressからのRSSフィード直接読み込みを拒否してるようです(RSS1.0,RSS2.0どちらも)。

私はgoo以外には見たことがないのですが、調べてみたところ、他にもたまーに外部からの直接読み込みを拒否してるブログが有るようです。

仕方ないので、Google FeedBurner経由で読み込むことにしました。Googleのサービスですので、Googleにログインして以下の場所で

http://feedburner.google.com

デフォルトだと英語ですので、設定してない場合は、右上の「Languages」で「日本語」にします。

トップ画面に自動で戻りますので、

 

GoogleのFeedBurnerトップ画面日本語

 

この画面のフォームに読み込みたいRSSフィードをコピー＆ペーストして、「次へ」を2回押すと

 

FeedBurnerの登録完了画面

こんな感じで登録されますので、ここで表示されたアドレスをWordpressで読み込ませると無事表示させることができました。

（画像のアドレスは適当にモザイクかけてます）

「BackWPup」が「Maximum execution time of 30 seconds exceeded」でエラー終了する時の対処法

WordPressのデータベースなどのバックアッププラグイン「BackWPup」。便利なのですが、最近突然エラーがでるようになりました。

Maximum execution time of 30 seconds exceeded backwpup

「Maximum execution time of 30 seconds exceeded」というエラーが出ています。

ジョブはエラー終了しました。エラーを解決する必要があります。

最後にも、こう表示されてエラー終了扱いになっています。

ただ、1，2度、最初のエラーが出た後も、その後正常に動作して、バックアップ自体は取れてるようです。……しかし、「エラーを解決する必要」がありますのメッセージが出ます。気になるので、対処。

単純に「BackWPup」プラグインを一度「削除」して、インストールしなおして、再設定したら直りました。

他にも、クラウドなどにバックアップしてて容量が多すぎてタイムアウトした場合も、同じエラーが出るようです。

WordPressのRSSフィードが延々更新されないときの対処法

WodPressでRSSフィードを読み込んでるときに、RSSが更新されてるはずなのに、なぜかずっと古いままの表示になってることがあります。

なんででしょう？……あ、キャッシュかな？

ということで、WordPressは独自にキャッシュを持ってるはずなので、そこの設定をいじってやりました。

/wp-includes/feed.php

680行目（WordPress 4.6.1）　693行目あたり。バージョン変わると場所変わります。

$feed->set_cache_duration( apply_filters( 'wp_feed_cache_transient_lifetime', 12 * HOUR_IN_SECONDS, $url ) );

これを

 
$feed->set_cache_duration( apply_filters( 'wp_feed_cache_transient_lifetime', 600, $url ) );

こう変更したら、ちゃんと更新されるようになりました。

RSSフィードのキャッシュの保持時間を短くしました。単位は秒。あんまり短くするとサーバー負荷がかかるみたいですので、適度な設定に。

ただ、WordPressのバージョンをアップデートしたら、元の設定に戻ってしまったようなので、もしかしたらアップデートごとに再修正しないといけないかもしれません。

ソースコードを綺麗に表示するプラグイン『SyntaxHighlighter Evolved』

このWordpress用プラグイン『SyntaxHighlighter Evolved』は、例えば、前に書いた記事『WordPress記事からPHPファイルを呼び出す方法』でのソースコードを……


function shortcode_phpinc( $atts ) {
    extract(
        shortcode_atts(
            array(
                'file' => 'default'
            ),
            $atts
        )
    );

    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
}
add_shortcode('phpinc', 'shortcode_phpinc');

このように表示してくれるプラグインです。

例ではPHPですが、様々な言語に対応しております。代表的な例を挙げると……

  • C++
  • C#
  • CSS
  • Delphi
  • HTML
  • Java
  • JavaScript
  • Perl
  • PHP
  • text
  • Ruby
  • SQL
  • Visual Basic
  • XML

このあたりに対応しています（実際はもっと多いです）。

ブラウザ上でコピー＆ペーストもできるようになりますので、コードの紹介や例を書く場合にとても便利です。

また、コードだけでなく、単純にテキストを改行しないで表示したい場合にも使うことができます。

実際の使い方も簡単で、ショートコードを使ってコードをタグのように囲むだけで、使い勝手も良いプラグインです。

「ページTOPへ」戻るボタンを生成するプラグイン「Ultimate Back To Top Button」

WordPressのテーマによっては最初から類似の機能があるものがありますが、右下か左下に「上に戻る」ボタンを生成するプラグインをご紹介。

この手のプラグインは多数有るので、いくつか試したのですが、今回紹介する「Ultimate Back To Top Button」がシンプルかつ設定もしやすいように思います。

設定画面、設定項目は以下

イメージ3313

デフォルトでは表示部分が「↑」になってますが、そこを「ページTOPへ」に変えています。他はほとんどデフォルトの設定です。

設定項目にあるように色などを変えられます。

 

この機能は必ずしも無くても困らないように思いますが、あると便利なので、私のWordpressサイトでは付けるようにしています。

PageSpeed Insights で「修正が必要」なときの対処法

Google Developersに『PageSpeed Insights』という便利なツール（サイト）があります。

https://developers.google.com/speed/pagespeed/insights/

調べたいウェブサイトのURLを入力すると、読み込み時間を短くするための多くの問題点を検証してくれます。

特にモバイルでの閲覧の場合、読み込み時間が長いとサイトを見てくれないということが多くなると言われています。そんなわけで、サイト運営をする場合に、サイトの読み込み時間も重要な要素となります。その対策に便利なツールです。

 

『PageSpeed Insights』を使うと以下のような結果が表示されます。「修正が必要」な箇所の表示だけでなく、100点満点で評価までしてくれます。

 

イメージ2938

ただ、評価してくれるのは良いのですが、その対処法は素人には少々難しいものが多いので、今回はその中でも簡単な対処法をいくつかご紹介いたします。

 

【圧縮を有効にする】

圧縮を有効にする

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。
次のリソースの圧縮を有効にすると、転送サイズを 217 KB（68%）削減できます。

このようなメッセージが出ている場合は、.htaccessに以下のような書き込みをします。

AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

これで様々なファイルのdeflateによる「圧縮が有効」になり、転送サイズが減ることによって、サイトの表示が速くなります。

 

【ブラウザのキャッシュを活用する】

ブラウザのキャッシュを活用する

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。

このようなメッセージが出てる場合の対策はプラグインでするのが一般的だったようなのですが、どうも問題のあるプラグインがあるようですね。（最悪WordPressのファイルを壊してしまうことがあるようです）

ですので、キャッシュ系のプラグインを使う方法はそれぞれのプラグインが何をしているかを細かく検証できる方以外にはあまりお奨めできません（良いプラグインもあるはずなので詳しい方はそちらでも可能なはずです）。

ちなみにGoogleで検索するといろいろなキャッシュ系プラグインをお奨めしてるサイトがかかるのですが、更新日や内容が古いものが多いように思いますのでご注意ください。

また、一言に「キャッシュ系」プラグインと言ってますが、方法は多種多様でなかなかに複雑です。プラグインを導入する場合は内容をよく確認してからの方が良さそうです。

そこで、こちらもプラグインを使わず、.htaccessに自分で何をどの期間キャッシュするかを書き込むことで対処することにします。

ExpiresActive On
ExpiresByType image/png "access plus 10 days"

例えばPNGファイルのキャッシュをするだけの場合は以上で十分です。

ExpiresActive On
ExpiresByType image/png "access plus 10 days"
ExpiresByType image/gif "access plus 10 days" 
ExpiresByType image/jpg "access plus 10 days" ExpiresByType image/jpeg "access plus 10 days"

さらに他の画像ファイルや

ExpiresByType application/x-javascript "access plus 5 days"
ExpiresByType text/css "access plus 1 days"

ついでにCSSなんかもキャッシュしたい場合はこのように追加します。

ただ、例ではCSSファイルのキャッシュ時間を1日に設定していますが、サイト構成を頻繁に変更する場合はこれは入れない方がいいかもしれませんので、このあたりはお好みで。

 

【スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する】

スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する
このページには、ブロッキング スクリプト リソース が 4 あり、ブロッキング CSS リソースが 5 あります。これが原因で、ページのレンダリングに遅延が発生しています。
このページでスクロールせずに見えるコンテンツを、以下のリソースによる読み込みを待たずにレンダリングできませんでした。ブロッキング リソースを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。
レンダリングブロック JavaScript を削除してください:

このメッセージに関しては、私もすべてには対策しきれなかったのですが、「Asynchronous Javascript」と「WP Deferred Javascripts」という２つのプラグインでいくらかは減らすことができます。

「Asynchronous Javascript」「WP Deferred Javascripts」ともにデフォルトの設定で問題ないようです。これでJavascriptの問題は多くが解決されるはずです。

追記：「Asynchronous Javascript」を使うとプラグイン「SyntaxHighlighter Evolved」や「Fancybox」の機能が使えなくなると問題が発生しました。これはもうどちらを取るかですね。

 

以下は検証中注意：

CSSに関しては、「Async JS and CSS」というプラグインがあるのですが、この「Async JS and CSS」はどうも扱いが難しいようで、設定必須のようです。

「Async JS and CSS」については、以下を参照してください（外部リンク）

http://affiliate-dream.net/javascriptcss-%E3%82%92%E6%8E%92%E9%99%A4%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B/　(レンダリングブロック JavaScript/CSS を排除してみる)

ただ、うちのテーマ「Twentyfourteen」ではダッシュボード系の表示に問題が起こってしまいましたので現在検証中です。テーマや改造具合との相性問題があるようです。