ぺんです。 Google Chromeを使っていると、突然このような表示が出るようになりました！ 
そうです、これはGoogle Chromeのアップデートにより、サイト内のページリンクの中にHTTPSではなく、HTTPが混ざっていると表示される警告メッセージなのです。
さっそく、このブログのHTMLコードを観てみると・・
<HTMLコードの確認方法>
Internet Explorerの場合：右クリック －＞「ソースの表示」を選択
Chromeの場合：右クリック －＞「ページのソースを表示」を選択
どうやらこのブログの右上に表示している、「記事検索」のウイジェットが怪しそうです。
これが、「記事検索」のウイジェット部分のHTMLコードなのですが、formの送信先がhttpsではなく、httpになっています！！
1 2 3 4 5 6 7 8 9 10 11 | <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の警告を表示されないようにする方法をご紹介します。
こちらが、このブログでも利用しているWordPress テーマ「MAG」です。
↓ ↓
修正の前提条件
今回、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点：
- ウイジェット名称をgoogle_search2とする
- Formの送信先URLをhttpからhttpsに変更する
下記が修正後のソースファイルです。
9行目は、CSSのクラス指定のため、あえて変更せずにgoogle_searchとしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <?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に以下を追加します。
1 2 | // 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の他のテーマでも同様に適用できると思われます。
簡単ですので、お試しください！
こちらが、このブログでも利用しているWordPress テーマ「MAG」です。
↓ ↓
この記事へのコメントはありません。