人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【jQueryのプラグインをWordPressに実装】
下記の記事で紹介されている手順を誰でも実装できるよう、日本語で解説して下さい。
http://wpengineer.com/contactable-contaktform-easy-with-wordpress/

よろしくお願い致します。

●質問者: Nanojune
●カテゴリ:インターネット ウェブ制作
✍キーワード:jQuery wordpress プラグイン 日本語
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●60ポイント ベストアンサー

・準備

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で新規追加したページを表示してみてください。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ