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

ぺんです。

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

 

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

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

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

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

<div class="side_widget clearfix google_search" id="google_search2-2">
  <h3 class="side_headline">記事検索</h3>
  <form action="https://www.google.com/cse" method="get" id="searchform" class="searchform">
    <div> <input id="s" type="text" value="" name="q" /> <input id="searchsubmit" type="submit" name="sa" value="検索" /> <input type="hidden" name="cx" value="#### Googleカスタム検索のID（省略）####" /> <input type="hidden" name="ie" value="UTF-8" /> </div>
  </form>
</div>

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

 

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

修正の前提条件

今回、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 です。

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

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

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

修正点は2点：

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

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

<?php // HTTPSに変更 2017.09.24 // // Start class widget // class google_search2 extends WP_Widget { // Constructor // function google_search2() { $widget_ops = array( 'classname' => 'google_search', 'description' => __('Displays Google Custom Search form.', 'tcd-w') ); // Widget Settings $control_ops = array( 'id_base' => 'google_search2' ); // Widget Control Settings parent::__construct( 'google_search2', __('Google Custom Search (tcd-w https ver)', 'tcd-w'), $widget_ops, $control_ops ); // Create the widget } // Extract Args // function widget($args, $instance) { extract( $args ); $title = apply_filters('widget_title', $instance['title']); $google_search_id = $instance['google_search_id']; // Before widget // echo $before_widget; // Title of widget // if ( $title ) { echo $before_title . $title . $after_title; } // Widget output // ?>
<form action="https://www.google.com/cse" method="get" id="searchform" class="searchform">
  <div> <input id="s" type="text" value="" name="q" /> <input id="searchsubmit" type="submit" name="sa" value="<?php _e('Search','tcd-w'); ?>" /> <input type="hidden" name="cx" value="<?php echo $google_search_id; ?>" /> <input type="hidden" name="ie" value="UTF-8" /> </div>
</form>
<?php // After widget // echo $after_widget; } // end function widget // Update Settings // function update($new_instance, $old_instance) { $instance['title'] = strip_tags($new_instance['title']); $instance['google_search_id'] = $new_instance['google_search_id']; return $instance; } // Widget Control Panel // function form($instance) { $defaults = array( 'title' => __('Search', 'tcd-w'), 'google_search_id' => ''); $instance = wp_parse_args( (array) $instance, $defaults ); ?>
<p style="margin-bottom:5px;">
  <?php _e('If you wan\'t to use google custom search for your wordpress, enter your google custom search ID.<br /><a href="https://www.google.com/cse/" target="_blank">Read more about Google custom search page.</a>', 'tcd-w'); ?></p>
<p> <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:', 'tcd-w'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>'" type="text" value="<?php echo $instance['title']; ?>" /> </p>
<p> <label for="<?php echo $this->get_field_id('google_search2'); ?>"><?php _e('Google custom search ID', 'tcd-w'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('google_search_id'); ?>" name="<?php echo $this->get_field_name('google_search_id'); ?>'" type="text" value="<?php echo $instance['google_search_id']; ?>" /> </p>
<?php } // end function form } // End class widget add_action('widgets_init', create_function('', 'return register_widget("google_search2");')); ?>

 

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

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

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

// Google検索の修正版 2017.09.24 
require_once ( dirname(__FILE__) . '/widget/google_search2.php' );

 

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

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

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

まとめ

いかがでしたか？

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

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