WordPress

TDC MAGのGoogleカスタム検索ウイジェットをHTTPS化する方法



ぺんです。 Google Chromeを使っていると、突然このような表示が出るようになりました! このサイトへの接続は完全には保護されていません そうです、これはGoogle Chromeのアップデートにより、サイト内のページリンクの中にHTTPSではなく、HTTPが混ざっていると表示される警告メッセージなのです。

 

さっそく、このブログのHTMLコードを観てみると・・

<HTMLコードの確認方法>
Internet Explorerの場合:右クリック ->「ソースの表示」を選択
Chromeの場合:右クリック ->「ページのソースを表示」を選択

どうやらこのブログの右上に表示している、「記事検索」のウイジェットが怪しそうです。

記事検索ウイジェット

これが、「記事検索」のウイジェット部分のHTMLコードなのですが、formの送信先がhttpsではなく、httpになっています!!

どうやら、これが今回Chromeブラウザ上で「このサイトへの接続は完全に保護されていません」と表示されてしまった原因の様です。

 

今回は、このブログで使用している、TDCのWordpressテーマ「MAG」に付属する「Googleカスタム検索(tdcバージョン)」を修正して、Chromeブラウザ上でHTTPSの警告を表示されないようにする方法をご紹介します。

こちらが、このブログでも利用しているWordPress テーマ「MAG」です。
↓ ↓WordPressテーマ「MAG(TCD036)」



修正の前提条件

今回、Chromeブラウザ上でHTTPSの警告メッセージが出ている原因は、MAGに付属の「Googleカスタム検索(tdcバージョン)」というウイジェットであることが判りました。

一番簡単な解決方法は、「Googleカスタム検索(tdcバージョン)」ウイジェットのソースコードを修正して、httpとかかれている部分をhttpsに変更すればOKなのですが、このサイトでは、Wordpressテーマ「MAG」がアップデートしても影響を受けないように、子テーマを利用しています。

そのため今回は、ウイジェットのソースコードをコピーして、子テーマフォルダー配下にあらたなウイジェットとして配置することにします。こうすれば、MAGがアップデートしても、今回の変更が消される心配はありません。

1.ウイジェットのソースファイルを子テーマ配下にコピーする

MAGに付属の「Googleカスタム検索(tdcバージョン)」ウイジェットのソースファイルの場所は、/wp-content/themes/mag_tcd036/widget フォルダにある google_search.php です。

「Googleカスタム検索(tdcバージョン)」ウイジェットのソースコード

このファイルを、子テーマの /wp-content/themes/MAG-child/widget フォルダに、google_search2.phpとして保存しました。ちなみに、このブログで利用している子テーマの名称は、ヒネりも何にも無く「MAG-child」と命名していますw。

子テーマにコピーしたウイジェット google_search2.php

2.ウイジェットの修正箇所を特定する

次は、このウイジェットの修正です。

修正点は2点:

  1. ウイジェット名称をgoogle_search2とする
  2. Formの送信先URLをhttpからhttpsに変更する

下記が修正後のソースファイルです。
9行目は、CSSのクラス指定のため、あえて変更せずにgoogle_searchとしています。

 

子テーマから、google_search2 ウイジェットを登録する

このgoogle_search2ウイジェットを、子テーマから登録します。

子テーマのfunction.phpに以下を追加します。

 

これにより、あらたなウイジェットが利用可能となります。

追加された google_search2ウイジェット

あとは、従来の「Googleカスタム検索(tdcバージョン)」をはずして、新たに修正した「Google Custom Search(tdc-w https ver)」を表示するように設定すればOKです。

無事、ChromeのHTTPSの警告も消えてくれました!

保護された接続

まとめ

いかがでしたか?

Google Chromeブラウザによる、HTTPSの警告メッセージの原因は、TDCのWordpressテーマ「MAG」に付属する「Googleカスタム検索(tdcバージョン)」に起因することから、このウイジットを修正して、子テーマから登録する手順をご紹介しました。

今回の方法は、TDCの他のテーマでも同様に適用できると思われます。
簡単ですので、お試しください!

 

 

こちらが、このブログでも利用しているWordPress テーマ「MAG」です。
↓ ↓WordPressテーマ「MAG(TCD036)」



関連記事

  1. Jetpack

    WordPress

    JetpackのPhoton(CDN)機能をONにすると、楽天のサムネイルサイズがおかしくなる

    ぺんです。商品紹介のリンクを貼るときに、サムネイルのサイズを指…

  2. 日付の書式がNG

    WordPress

    WordPressの親テーマのウイジットを子テーマで書き換える方法

    ぺんです。今回は、ワードプレスの親テーマのウイジットを子テーマで書き…

  3. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法

    ぺんです。以前ご紹介した、ニュースメディア風のワードプレステー…

  4. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ver.4.7.0)のW…

    ぺんです。立ち上げ途中のサイトで、Font Awesomeのアイコ…

  5. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方

    ぺんです。前回、このブログをエックスサーバー上で運営することは…

  6. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方2 TDC 「MAG」を選んだ3つの理由

    ぺんです。前回のエントリーからずいぶんと間が空いてしまいました…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Twitterアカウントの登録方法
  2. マイクロソフトアカウントの登録方法
  3. 初心者向けWordPressサイトのバックアップ、リストア手順の解説
  4. WordPressのローカル環境を簡単に構築する方法
  5. ウイジェットエリア
  1. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方2 TDC 「MAG」…
  2. MagCast ワードプレステーマ

    WordPress

    MagCast ワードプレステーマのカスタマイズ方法
  3. Server

    アフィリエイト環境に無料ブログサイトは使えるのか?
  4. Server

    レンタルサーバーを選ぶ際の3つのポイント
  5. ツール

    Compressor.io (圧倒的に使いやすいオンライン画像圧縮ツール)
PAGE TOP