未分類
プレゼントフォームのテンプレート化報告ver 2016年11月6日
プレゼントフォームのテンプレート化報告ver
実践編。
このまま展開すれば問題なく使用できます。
カスタマイズは自己責任で。
まず使用したソースから。
カスタムフィールドテンプレートのソース例。
[koumoku] type = text size = 35 label = プレゼントタイトル [naiyou1] type = text size = 100 label = 内容１ [naiyou2] type = text size = 100 label = 内容２ [bcdh-y] type = select value = # 2016年 # 2017年 default = 2016年 label = 締切年 [bcdh-m] type = select value = # 1月 # 2月 # 3月 # 4月 # 5月 # 6月 #7月 # 8月 # 9月 # 10月 # 11月 # 12月 # default = 1月 label = 締切月 clearButton = true [bcdh-d] type = select value = # 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日 default = 1日 label = 締切日 clearButton = true [bcdh-time] type = select value = # 日中 # 23:59 # 18:00 default = 日中 label = 締切時間 clearButton = true [shimekirinoyoubi] type = select value = （月） #（火） # （水） # （木） # （金）# （土） # （日） default =（月） clearButton = true label =締切の曜日 [ouboshikaki] type = text size = 100 label = 応募資格 [oubohouhou] type = text size = 100 label = 応募方法 [oubohouhou-hagaki] type = text size = 100 label = 応募方法（ハガキの場合） [chuuijikou1] type = text size = 100 label = 注意事項１ [otoiawase] type = text size = 100 label = お問い合わせ先
次に、WORDPRESSの固定ページのテンプレ例。
二つあるので、その１から。
<?php
/*
Template Name: プレゼント応募カスタム
*/
?>
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
*
* @package ThinkUpThemes
*/
get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_post_thumbnail(); ?>
<table class="type02">
<?php if ( get_post_meta($post->ID,'koumoku',TRUE) ): ?>
<tr>
<th scope="row">【プレゼントタイトル】</th>
<td><?php echo post_custom("koumoku")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'naiyou1',TRUE) ): ?>
<tr>
<th scope="row">【内容】</th>
<td><?php echo post_custom("naiyou1")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'naiyou2',TRUE) ): ?>
<tr>
<th scope="row">【内容】</th>
<td><?php echo post_custom("naiyou2")?></td>
</tr>
<?php endif;?>
<tr>
<th scope="row">【応募締切】</th>
<td><?php echo post_custom("bcdh-y")?><?php echo post_custom("bcdh-m")?><?php echo post_custom("bcdh-d")?><?php echo post_custom("shimekirinoyoubi")?><?php echo post_custom("bcdh-time")?></td>
</tr>
<?php if ( get_post_meta($post->ID,'ouboshikaki',TRUE) ): ?>
<tr>
<th scope="row">【応募資格】</a></th>
<td><?php echo post_custom("ouboshikaki")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'oubohouhou',TRUE) ): ?>
<tr>
<th scope="row">【応募方法】</a></th>
<td><?php echo post_custom("oubohouhou")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'oubohouhou-hagaki',TRUE) ): ?>
<tr>
<th scope="row">【応募方法（ハガキの場合）】</a></th>
<td><?php echo post_custom("oubohouhou-hagaki")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'chuuijikou1',TRUE) ): ?>
<tr>
<th scope="row">【注意事項】</a></th>
<td><?php echo post_custom("chuuijikou1")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'otoiawase',TRUE) ): ?>
<tr>
<th scope="row">【お問い合わせ先】</th>
<td><?php echo post_custom("otoiawase")?></td>
</tr>
<?php endif;?>
</table>
<?php get_template_part( 'content', 'page' ); ?>
<?php thinkup_input_allowcomments(); ?>
<?php endwhile; ?>
<?php get_footer(); ?>
その２
<?php
/*
Template Name: プレゼント応募カスタム【２】
*/
?>
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
*
* @package ThinkUpThemes
*/
get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_post_thumbnail(); ?>
<table class="type02">
<?php if ( get_post_meta($post->ID,'koumoku',TRUE) ): ?>
<tr>
<th scope="row">【プレゼントタイトル】</th>
<td><?php echo post_custom("koumoku")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'naiyou1',TRUE) ): ?>
<tr>
<th scope="row">【内容】</th>
<td><?php echo post_custom("naiyou1")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'naiyou2',TRUE) ): ?>
<tr>
<th scope="row">【内容】</th>
<td><?php echo post_custom("naiyou2")?></td>
</tr>
<?php endif;?>
<tr>
<th scope="row">【応募締切】</th>
<td><?php echo post_custom("bcdh-y")?><?php echo post_custom("bcdh-m")?><?php echo post_custom("bcdh-d")?><?php echo post_custom("shimekirinoyoubi")?><?php echo post_custom("bcdh-time")?></td>
</tr>
<?php if ( get_post_meta($post->ID,'ouboshikaki',TRUE) ): ?>
<tr>
<th scope="row">【応募資格】</a></th>
<td><?php echo post_custom("ouboshikaki")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'oubohouhou',TRUE) ): ?>
<tr>
<th scope="row">【応募方法】</a></th>
<td><?php echo post_custom("oubohouhou")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'oubohouhou-hagaki',TRUE) ): ?>
<tr>
<th scope="row">【応募方法（ハガキの場合）】</a></th>
<td><?php echo post_custom("oubohouhou-hagaki")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'chuuijikou1',TRUE) ): ?>
<tr>
<th scope="row">【注意事項】</a></th>
<td><?php echo post_custom("chuuijikou1")?></td>
</tr>
<?php endif;?>
<?php if ( get_post_meta($post->ID,'otoiawase',TRUE) ): ?>
<tr>
<th scope="row">【お問い合わせ先】</th>
<td><?php echo post_custom("otoiawase")?></td>
</tr>
<?php endif;?>
</table>
<img src="https://www.catvmics.ne.jp/oubo/wp-content/uploads/2016/01/present-apply.jpg" alt="present-apply" width="726" height="60" class="aligncenter size-full wp-image-29" />
<div id="formWrap">
<h3>プレゼント応募フォーム</h3>
<p>下記フォームに必要事項を入力後、確認ボタンを押してください。</p>
<form method="post" action="http://www.catvmics.ne.jp/oubo/wp-content/themes/minamaze/present/mail-mics01.php">
<table class="formTable">
<tr>
<th>応募確認 チェックしてください。</th>
<td><input type="checkbox" name="応募確認" value="<?php echo post_custom("koumoku")?>" /> <?php echo post_custom("koumoku")?>
</td>
</tr>
<tr>
<th>お名前 ※必須</th>
<td><input size="20" type="text" name="お名前" /></td>
</tr>
<tr>
<th>フリガナ ※必須</th>
<td><input size="20" type="text" name="フリガナ" /></td>
</tr>
<tr>
<th>電話番号（半角） ※必須</th>
<td><input size="30" type="text" name="電話番号" /></td>
</tr>
<tr>
<th>Mail（半角） ※必須</th>
<td><input size="30" type="text" name="Email" /></td>
</tr>
<tr>
<th>郵便番号（半角）444- ※必須</th>
<td>444-<input size="4" type="text" name="郵便番号" /></td>
</tr>
<tr>
<th>ご住所 ※必須 愛知県岡崎市</th>
<td>愛知県岡崎市<input size="50" type="text" name="ご住所" /></td>
</tr>
<tr>
<th>建物名称（アパート・マンションなどの場合ご記入ください。）</th>
<td><input size="50" type="text" name="建物名称" /></td>
</tr>
<tr>
<tr>
<th>部屋番号</th>
<td><input size="10" type="text" name="部屋番号" />号室</td>
</tr>
<tr>
<th>性別</th>
<td><input type="radio" name="性別" value="男" /> 男
<input type="radio" name="性別" value="女" /> 女 </td>
</tr>
<tr>
<th>サイトを知ったきっかけ</th>
<td><input name="サイトを知ったきっかけ[]" type="checkbox" value="毎月の送付のケーブルガイド誌" /> 毎月の送付のケーブルガイド誌<br>
<input name="サイトを知ったきっかけ[]" type="checkbox" value="ミクスのホームページ" /> ミクスのホームページ<br>
<input name="サイトを知ったきっかけ[]" type="checkbox" value="ツイッター・ＦＡＣＥＢＯＯＫなどのＳＮＳ" /> ツイッター・ＦＡＣＥＢＯＯＫなどのＳＮＳ<br>
<input name="サイトを知ったきっかけ[]" type="checkbox" value="その他" /> その他</td>
</tr>
<tr>
<th>ご意見・ご感想など<br /></th>
<td><textarea name="ご意見・ご感想など" cols="50" rows="5"></textarea></td>
</tr>
</table>
<p>
<h2>≪個人情報の取扱いについて≫</h2><br>
※ご記載いただいた個人情報は当社が個人情報保護のために「個人情報保護方針」「個人情報保護に関する宣言」に基づき管理・保護を行います。<br>
<hr>
<a href="http://www.catvmics.ne.jp/company-info/privacy.html" target="_blank"><h3><b>【詳しくはこちらをご覧ください。（別のタグページで開きます）】</b></h3></a><br>
<hr>
※入力いただいた情報は抽選及びプレゼント発送のためのみに利用いたします。<br>
※ご確認の上、ご同意頂ける場合、下記の最初の確認項目の同意左側の四角をクリックしてチェックを入れてください。<br>
※誠に恐れ入りますが、この項目にご同意頂けない場合は本プレゼントへのご応募はいただけません。ご了承ください。<br>
※IPアドレスを記録しております。いたずらや嫌がらせ等はご遠慮ください</p>
<hr>
<table class="formTable">
<tr>
<th>個人情報保護について同意します チェックしてください。</th>
<td><input type="checkbox" name="個人情報保護同意" value="個人情報保護同意します" /> 個人情報保護同意します
</td>
</tr>
</table>
<hr>
<p align="center">
<input type="submit" value=" 確認 " /> <input type="reset" value="リセット" />
</p>
</form>
</div>
<?php get_template_part( 'content', 'page' ); ?>
<?php thinkup_input_allowcomments(); ?>
<?php endwhile; ?>
<?php get_footer(); ?>
ＣＳＳ例
/* ---------------------------------------------------------------------------------------
13. nakaguchi
--------------------------------------------------------------------------------------- */
table.type02 {
border-collapse: separate;
border-spacing: 0;
text-align: left;
line-height: 1.5;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table.type02 th {
width: 200px;
padding: 10px;
font-weight: bold;
vertical-align: top;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
background: #eee;
}
table.type02 td {
width: 350px;
padding: 10px;
vertical-align: top;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
thumcenter {
display: block;
margin-left: auto;
margin-right: auto;
}
imagecenter {
max-width: 50%;
background-color: #eee8aa;
margin: 0 auto;
}
mr50 {
display: block;
margin-left: auto;
margin-right: 50px;
}
#formWrap {
width:700px;
margin:0 auto;
color:#555;
line-height:120%;
font-size:90%;
text-align: left;
}
table.formTable{
width:100%;
margin:0 auto;
border-collapse:collapse;
text-align: left;
}
table.formTable td,table.formTable th{
border:1px solid #ccc;
padding:10px;
text-align: left;
}
table.formTable th{
width:30%;
font-weight:normal;
background:#efefef;
text-align:left;
}
で、入力例は動画。
プレゼント応募ページ作成手順 マニュアル動画
https://youtu.be/QENxnS7QuSY
1)カスタムフィールドテンプレート
汎用入力項目が出来ているので何もしない。
入力項目がふえるようだと、個々を作業して増やす。
汎用なら不要だとおもっている。
２）固定ページのテンプレート。
固定ページを、テンプレートで記載する。
テンプレートは プレゼント応募カスタム を選んでプレゼント内容を出力。
２つ作った理由は、納期の来ているページを作成したので、その時の専用が「その１」
汎用できるように作ったのが、「その２」
その２のページで、カスタムフィールドプレゼントタイトルを入力した文字列をそのままメール送信のタイトルに引っ張ってあるので、適当に入力されても、それがなんの応募フォームなのか悩むこともない。
３）固定ページの応募フォーム
応募フォームそのものは操作できない。
操作したのであれば、固定ページのテンプレートに埋めたので、そちらで触る。
そもそも、汎用で別々の担当者が入力する前提だと、触れない方が問題が 少ない。
出力も常に変更がない。
さらにカスタマイズが必要であれば、デザインごと変更していくことになるので、
それはプレゼント起案者、プレゼント入力者ではなく、サイト管理者、デザイナーの仕事になろうかと。
４）結果として、このあと、入力フォームそのものを、不要なボタンをなくしたり、変なことをする危険がないようにしたい、と思っているが・・・。
参考にしたのは下記にサイト。
でも結局自分で会社う感じになりますよねｗｗ
PHPについては、貰ってきてあまり弄っていません。
この先はこれをカスタマイズしたいと思っています。
アイキャッチ、デザイン、そのあたりもいじりたいし。
http://www.php-factory.net/demo/mail/MailForm01_02/contact.php