【jQueryのプラグインをWordPressに実装】

・準備

Contactableプラグインのダウンロード

http://theodin.co.uk/blog/ajax/contactable-jquery-plugin.html

1.まず「contact-page.php」をthemesフォルダ内の使用しているテーマフォルダ内に作成します。

※ソースに変更はありません。

<?php
/**
 * Template Name: Contact Page
 *
 * @package WordPress
 * @subpackage Default_Theme
 */
 
wp_enqueue_script( 'jquery.contactable', get_bloginfo('template_directory') . '/contactable/jquery.contactable.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'jquery.validate', get_bloginfo('template_directory') . '/contactable/jquery.validate.pack.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'my_contactable', get_bloginfo('template_directory') . '/contactable/my_contactable.js', array('jquery') , 3.1, true );
wp_enqueue_style( 'contactable', get_bloginfo('template_directory') . '/contactable/contactable.css' );
 
get_header(); ?>
 
    <div id="content" class="narrowcolumn" role="main">
 
        <div class="post" id="post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>
 
            <div class="entry">
                <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
 
                <div id="mycontactform"> </div>
 
            </div>
        </div>
 
    </div>
 
<?php get_sidebar(); ?> 
<?php get_footer(); ?>

2.themesフォルダ内の使用しているテーマフォルダ内に「contactable」フォルダをコピーします。

※「images」フォルダとその中のファイル、「jquery.contactable.js」「jquery.validate.pack.js」「contactable.css」があれば良いです。

3.「contactable」フォルダ内に「my_contactable.js」を作成します。

(※ファイル名に注意してください。「my.contactable.js」ではありません。)

jQuery(document).ready( function($){
    $('#mycontactform').contactable({
        name: 'Name',
        email: 'E-Mail',
        message : 'Message',
        recipient: 'example@domain.com',
        subject: 'Contact Form',
        recievedMsg : 'Thanks for your message.'
    });
});

※recipientの行は削除して、「mail.php」であて先を指定した方が良いと思います。

※上記の「name」「email」「message」で、フォームの表示項目を変更できます。（※そのままでは変更が反映されませんので、「jquery.contactable.js」の34行目を以下のように変更します。）

			$(this).html('<div id="contactable"></div><form id="contactForm" method="" action=""><div id="loading"></div><div id="callback"></div><div class="holder"><p><label for="name">' + defaults.name + ' <span class="red"> * </span></label><br /><input id="name" class="contact" name="name" /></p><p><label for="email">' + defaults.email + ' <span class="red"> * </span></label><br /><input id="email" class="contact" name="email" /></p><p><label for="comment">' + defaults.message + ' <span class="red"> * </span></label><br /><textarea id="comment" name="comment" class="comment" rows="4" cols="30" ></textarea></p><p><input class="submit" type="submit" value="Send"/></p><p class="disclaimer">'+defaults.disclaimer+'</p></div></form>');

※「subject」は、送信されるメールの件名です。

※「recievedMsg」は、メール送信後に表示するメッセージです。

※「disclaimer」（プラグイン配布元参照）はフォーム下部に表示するメッセージです。

4.WordPressにログインして、ページを新規追加します。(※属性欄「テンプレート」で「Contact Page」を選択してください。)

※ページタイトルは好きな名前で大丈夫です。

5.「mail.php」をWordPressのルートフォルダにコピーします。

そのままでは日本語が文字化けするため、mail関数の替わりにmb_send_mail関数を使用します。

<?php
mb_language("japanese");
mb_internal_encoding("UTF-8");

	//declare our assets 
	$to = 'your-mail@example.com';
	$name = stripcslashes($_POST['name']);
	$emailAddr = stripcslashes($_POST['email']);
	$comment = stripcslashes($_POST['comment']);
	$subject = stripcslashes($_POST['subject']);	
	$contactMessage = "Message: $comment \r\n From: $name \r\n Reply to: $emailAddr";
	$headers = "From: ".mb_encode_mimeheader($name,"ISO-2022-JP", 'B', "\n", strlen('From: '))." <".$emailAddr.">";

	//validate the email address on the server side
	if(eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $emailAddr) ) {
		//if successful lets send the message
		mb_send_mail($to, $subject, $contactMessage, $headers);
		echo('success'); //return success callback
	} else {
		echo('An invalid email address was entered'); //email was not valid
	}
?>

※「mail.php」の文字コードはUTF-8で保存してください。

※フォームの項目名で日本語を使用する場合は、「my_contactable.js」もUTF-8で保存する必要があります。

以上で作業完了です。

WordPressで新規追加したページを表示してみてください。