Merhaba arkadaşlar, bugün wordpress eklenti kullanmadan iletişim sayfası yapacağız normal şartlarda bir çok eklenti mevcut bunların başında Contact  Form 7, Contact Details vs. gibi bir sürü eklenti mevcut fakat bu eklentiler kaynak kodlarınız arasına gerekli gereksiz bir çok css,js vs eklediği için site hızınızda belli oranlar da düşüş yaşayabilirsiniz. Bunu minimuma indirgemek için bu işlem tam size göre, işlemleri size adım adım anlatacağım. Kolaylıklar Dilerim.

1.Aşama

Kodun herhangi bir alanına eposta adresinizi eklemeyeceksiniz.

Wp-Admin > Ayarlar > Genel > E-Posta karşısında tazan  adresi otomatik belirleyecektir.

2.Aşama

Aşağıda ki kodları iletisim-sayfa.php olarak tema içerisine kaydedin.

<?php
/*
Template Name: Iletisim Sayfasi
*/
if($_POST&#91;sent&#93;){
$error = "";
if(!trim($_POST&#91;your_name&#93;)){
$error .= "<p>Lütfen Adınızı Yazınız</p>";
}
if(!filter_var(trim($_POST[your_email]),FILTER_VALIDATE_EMAIL)){
$error .= "<p>Geçerli E-Posta Adresi Giriniz.</p>";
}
if(!trim($_POST[your_message])){
$error .= "<p>Lütfen Mesaj Yazınız</p>";
}
if(!trim($_POST[your_subject])){
$error .= "<p>Lütfen Konuyu Yazınız</p>";
}
if(!$error){
$email = wp_mail(get_option("admin_email"),trim($_POST[your_name])." sana bir mesaj gönderdi, ".get_option("blogname"),stripslashes(trim($_POST[your_message])),"From: ".trim($_POST[your_name])." <".trim($_POST&#91;your_email&#93;).">\r\nReply-To:".trim($_POST[your_email]));
}
}
?>
<?php get_header(); ?>
<div id="harita"></div>
<div class="iletisim-baslik"><strong>Bize Yazin</strong></div>
<div class="iletisim">
<div id="contactform" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div>
<?php if($email){ ?>
<p><strong><center>Mesajiniz Gönderildi. Tesekkürler <?php echo trim($_POST&#91;your_name&#93;); ?> Bey/Hanım. En Kısa Sürede Sizinle İrtibata Geçilecektir.</center></strong></p>
<?php } else { if($error) { ?>
<p><strong>Mesajiniz Gönderilemedi. Lütfen Tekrar Deneyin.</strong><p>
<?php echo $error; ?>
<?php } else { the_content(); } ?>
<form action="<?php the_permalink(); ?>" id="contact_me" method="post">
<input type="hidden" name="sent" id="sent" value="1" />
<div id="form">
<div id="input-field"><input type="text" name="your_name" id="input" value="<?php echo $_POST&#91;your_name&#93;;?>" placeholder="Ä°sim:" /><input type="text" name="your_email" id="input" value="<?php echo $_POST&#91;your_email&#93;;?>" placeholder="Eposta:" />
<input type="text" name="your_subject" id="input" value="<?php echo $_POST&#91;your_subject&#93;;?>" placeholder="Konu:"  /><textarea name="your_message" id="mesaj" placeholder="Mesajiniz.." ><?php echo stripslashes($_POST&#91;your_message&#93;); ?></textarea></div>
<div id="input-field"><input type="submit" name="send"  class="submit-button" value="Gönder" /></div>
</div>
</form>
<?php } ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

3.Aşama

Css Ayarları

/* İletişim Sayfası */
#form #input-field #input {
height:28px;
width: 138px;
padding: 3px;
padding-left:15px;
margin-top: 2px;
margin-right: 13px;
margin-bottom: 16px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: none;
/* add submit button a rounded corner */
-o-border-radius: 5px;  /*for opera*/
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* add input box a inset shadow  */
-moz-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Mozilla*/
-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Chrome and Safari*/
box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
}
#form #input-field #mesaj {
height:100px;
width: 657px;
padding: 3px;
padding-top:10px;
padding-left:15px;
margin-top: 2px;
margin-right: 13px;
margin-bottom: 16px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: none;
/* add submit button a rounded corner */
-o-border-radius: 5px;  /*for opera*/
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* add input box a inset shadow  */
-moz-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Mozilla*/
-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Chrome and Safari*/
box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
}
input.submit-button {
float: right;
border: 1px solid #298CBA;
font-weight: bold;
color: white;
margin-right:30px;
background: #21759B;
text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
padding: 3px 10px;
cursor: pointer;
/* add submit button a rounded corner */
-o-border-radius: 5em;  /*for opera*/
-khtml-border-radius: 5em;
-webkit-border-radius: 5em;
border-radius: 5em;
/* add background gradient effet */
/*for Chrome and Safari*/
background: -webkit-gradient(linear, left top, left bottom, from(#298CBA), to(#217096));
/*for Mozilla*/
background: -moz-linear-gradient(top,  #298CBA,  #217096);
/*for IE*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#298CBA', endColorstr='#217096');
}
input.submit-button:hover { background:#0f3b54}

4.Aşama

Wp-Admin >  Sayfalar >  Yeni Ekle giriyoruz.
Sayfa Şablonunu Seçip > Yayınla diyoruz.
Bu Adımda sorun yaşarsanız, WordPress Sayfa Şablonu Oluşturma adlı konuyu ziyaret edebilirsiniz.

Örnek Kodlama İndir

Metin Saraç 0 82 13 Nisan 2014
0 beğeni - 0 Yorum