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. WordPress

    おすすめ無料ワードプレステーマ 2017年8月

    Theme HORSEこちらのサイトでは、ハイクオリティーな無料ワ…

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

    WordPress

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

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

  3. WordPress

    OGPタグ設定-2017年最新版:FacebookとTwitterに記事を自動投稿する方法

    ぺんです。ブログ記事を投稿した際に、FacebookとTwit…

  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. MagCast ワードプレステーマ

    WordPress

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

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

    ツール

    5分でサイトロゴが完成! とても便利なロゴデザイン作成ツール
  4. Font Awesomeの使い方

    WordPress

    Font Awesome CDN – 追加された新しいフォント(Ve…
  5. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

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