WordPress SSLでも使えるポップアップのシンプルな問い合わせページ

Posted on Update by admin

main_sslmail
問い合わせフォームは通常、投稿ページか固定ページに設置しますが、SSLでも使えるポップアップ風のシンプルな問い合わせページの設置方法をご紹介します。

通常、投稿ページ内にある問い合わせフォームをSSLにする場合はその投稿ページ自体をSSLで表示しなくてはならなくなります。しかし サイトやコンテンツによっては他で読み込まれているファイルが https でない読み込まれ方をしててブラウザ側で警告が出たりするので細かい修正が必要になったりします。
そこで「シンプルな問い合わせページ」を使う事で通常ページのヘッダー・フッター等を省くことができますので作業はだいぶん楽になると思います。

使い方しだいではで若干コードを変更する必要があるでしょうが まず以下の方法を試してみてください。

　

問い合わせページの設置方法

①以下のコードを入れた「 my-contact.php 」ファイルを新規に作成します。
( ファイルの文字コードは UTF-8N にしてください。)

<?php
/**
 * my-contact.php.
 * Use Contact Form 7 plugin to SSL MODE.
 *
 * Front to the WordPress application. This file doesn't do anything, but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 * License: GPLv2 or later
 */


/**
 * Tells WordPress to load the WordPress theme and output it.
 *
 * @var bool
 */
define('WP_USE_THEMES', false);


/** 
 * Loads the WordPress Environment and Template 
 */
require_once '../../../wp-blog-header.php';

status_header( 200 );

?><!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>問合せ</title>
<meta name="robots" content="noindex,follow" />
<link rel="stylesheet" id="contact-form-7-css"  href="../contact-form-7/includes/css/styles.css" type="text/css" media="all" />
<script type='text/javascript' src='../../../wp-includes/js/jquery/jquery.js'></script>
</head>

<body>
<div id="ssl_contact">
	<h2>問い合わせ</h2>
	<?php if ( have_posts() )  the_post(); ?>
	<?php echo do_shortcode( '［contact-form-7 id="XX" title="コンタクトフォーム 1"]' ); ?>
</div>

<script type="text/javascript" src="../contact-form-7/includes/js/jquery.form.min.js"></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"..\/contact-form-7\/images\/ajax-loader.gif","sending":"\u9001\u4fe1\u4e2d ..."};
/* ]]> */
</script>
<script type="text/javascript" src="../contact-form-7/includes/js/scripts.js"></script>

</body>
</html>

　
②管理画面->お問い合わせ->コンタクトフォーム で、問い合わせ用のショートコードを取得します。
ssl_form_02

③上記コードのここ↓の部分を取得したショートコードに書き換えます。
<?php echo do_shortcode( ‘［contact-form-7 id=”XX” title=”コンタクトフォーム 1″]‘ ); ?>
*ここでは画面の都合上、[(半角)　は ［(全角) で表示しています。

④wp-content/plugins/my-plugin へ FTPでアップロードします。

⑤この状態で単独で表示(動作)するか確認します。
例 ( WordPressを wpフォルダーへ インストールしたとして )
http://ドメイン/wp/wp-content/plugins/my-plugin/my-contact.php

⑥ポップアップ用のスクリプトを使えるようにします。
以下のコードを my-plugin.php、 またはテーマの functions.php に張り付けてください。

/**
 *
 * thickboxを使えるようにする
 *
 * License: GPLv2 or later
 */
function nendebcom_active_thickbox(){
	if( ! wp_is_mobile() ){
		if ( function_exists( 'add_thickbox' ) ){
			add_thickbox();
		}
	}
}
add_action( 'init', 'nendebcom_active_thickbox' );

　

⑦これで、記事内に ⑤ でテストしたURLを「お問い合わせ」リンクとして張り付けてください。

<a href="http://ドメイン/wp/wp-content/plugins/my-plugin/my-contact.php?TB_iframe=true&width=600&height=550" class="thickbox">お問い合わせ</a>

　
リンクをクリックしたイメージ
　
*URLの最後に引数 TB_iframe=true&width=600&height=550 と class=”thickbox” を 追加してください。
*width=600 と height=550 は現物合わせで調整してください。
*ドメインのSSLを取得している場合で SSL にしたい場合は http://ドメイン/～ を https://ドメイン/～ にしてください。
*共用ドメインを使いたい場合はサーバー会社が用意したSSL用ドメインとそのドメインのルートからのフォルダ構成のURLでお試しください (お勧めはいたしません)。

　

ポイント

my-contact.php 内のソースでは、ファイルへのリンクを全て「相対アドレス」にするのがミソです。
ここでは my-contact.php を /wp-content/plugins/my-plugin/ に設置していますが テーマフォルダ等、他の場所に設置する場合や デザイン用の別のCSSや画像を設置する場合は「相対アドレス」をあわせてください。
body～/body間のHTML構成はデザイン・レイアウト等で自由に変更してみてください。

　
　

スポンサードリンク



　
　

「Contact Form 7」のアクションフィルターも使えます。

例えば、

題名

という所に自動で記事のタイトルを入れたい場合は、以下のアクションフィルターを my-plugin に設置してください。
または my-contact.php の require_once ‘../../../wp-blog-header.php’; の下に 設置してください。
*my-pluginは全体、my-contact.php に設置すると my-contact.phpを使う時だけ有効になります。

/**
 *
 * Contact Form 7 フォームにデーター追加
 *
 * License: GPLv2 or later
 * @param  array $tag
 * @return array $tag
 */
function nendebcom_wpcf7_form_tag_filter( $tag ){
	global $post;

	if ( ! is_array( $tag ) ){
		return $tag;
	}

	if( isset( $post->ID ) ){
		$name = $tag['name'];
		if($name == 'your-subject'){
			$tag_val = get_the_title( $post->ID );
			$tag['values'] = (array)$tag_val;
		}
	}
	return $tag;
}
add_filter( 'wpcf7_form_tag', 'nendebcom_wpcf7_form_tag_filter', 11 );

　

重要

このアクションフィルターを使う場合は、my-contact.php に 記事ID が必要になります。また記事ID無しでは使わないでください(最新の投稿の情報が入ってしまいます)。

記事IDを入れる場合は URLを my-contact.php?p=100 (記事IDが100の場合) のような記述にしてください。

<a href="http://ドメイン/wp/wp-content/plugins/my-plugin/my-contact.php?p=100&TB_iframe=true&width=600&height=550" class="thickbox">お問い合わせ</a>

　

パーマリンクが「数字ベース」の場合は my-contact.php/100 になります。

<a href="http://ドメイン/wp/wp-content/plugins/my-plugin/my-contact.php/100?TB_iframe=true&width=600&height=550" class="thickbox">お問い合わせ</a>

　
　

参考

Contact Form 7
http://contactform7.com/ja/

WordPress Codex Javascript Reference/ThickBox
https://codex.wordpress.org/Javascript_Reference/ThickBox

さくらのレンタルサーバ 共有SSL
http://www.sakura.ne.jp/function/common-ssl.html

SSL利用時の注意点
https://help.sakura.ad.jp/app/answers/detail/a_id/2325




スポンサードリンク