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. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法

    ぺんです。本サイト「あふぃぶ」で使っているワードプレステーマは…

  3. WP Responsive Menu

    WordPress

    WP Responsive Menu – スマホ対応のレスポンシブメニューを追加する、W…

    ぺんです。サイトを運営する上で、スマホ対応はとても重要です。…

  4. 沢山のメールボックス

    WordPress

    Redirection – リダイレクト設定が超絶簡単に行える、WordPressプラグ…

    ぺんです。ブログ記事に広告(ASPへのリンク)を貼っていると、…

  5. Font Awesomeの使い方

    WordPress

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

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

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

    WordPress

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

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

コメント

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

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




最近の記事

  1. ウイジェットエリア
  2. 日付の書式がNG
  3. エスケープ処理
  4. Jetpack
  5. WP Responsive Menu
  1. logo.squarespace.com

    ツール

    5分でサイトロゴが完成! とても便利なロゴデザイン作成ツール
  2. 洗練されたWebサイトで集客につなげる - 失敗市内WordPressテーマの選び方

    WordPress

    失敗しないWordPress(ワードプレス)テーマの選び方2 TDC 「MAG」…
  3. ウイジェットエリア

    WordPress

    WordPressテーマに、広告を表示するウィジェットエリアを追加する方法
  4. イラスト

    画像素材

    コンテンツをより魅力的にする、高品質な無料イラスト素材
  5. WP Responsive Menu

    WordPress

    WP Responsive Menu – スマホ対応のレスポンシブメ…
PAGE TOP