blog ب wordpress و bootstrap 4 الجزء الرابع
imadbelasri
Wordpress
WP
فهاد الجزء الرابع والأخير من blog ب wordpress و bootstrap 4 غادي نشوفوا كيفاش نزيدو d'autres pages غادي نزيدو contact page لي غادي تكون فيها ل form de contact ولي غادي تمكن لمستخدم باش ي contacter le blog منبعد غادي نشوفوا كيفاش نزيدو واحد ل plugin سميتو contact form 7 باش نزيدو الفورم ديالنا.
نظرة سريعة بالفيديو
1- إضافة الملف page-about-us.php
فغادي نزيد fichier جديد سميه page-about-us.php هادي هي la page Quis sommes nous لي كنا زدنا من قبل وف wordpress كنحدد les pages ديالي بهاد الطريقة فمثلا زدت page سميتها about-us وبغيت منبعد نزيدها ف thème ديالي كنزيد قبل منها -page كنكتبها بهاد الطريقة page-about-us باش wordpress تلقائيا كيعرف بلي هادي هي la page لي بغيت فالكود ديالها بحال index.php حيت ف wordpress ل contenu ديال les pages كاملين كيخدو على شكل blog الكود ديال الملف هو :
<?php get_header();?>
<div class="container">
<?php if(have_posts()):?>
<?php while(have_posts()) : the_post()?>
<div class="post">
<h3 class="post-title"><?php the_title();?></h3>
<p class="post-body"><?php the_content();?></p>
</div>
<?php endwhile;?>
<?php else :?>
<?php echo wpautop('Aucun résultat trouvé');?>
<?php endif;?>
</div>
<?php get_footer();?>
2- إضافة الملف page-contact-us.php
منبعد غادي نزيد fichier جديد سميه page-contact-us.php فيها غادي تكون ل form contact لي غادي تمكن المستخدم باش ي contacter ل blog فباش نزيد لفورم غادي نزيد واحد ل plugin سميتو contact form 7 غادي تمشي ل Extensions منبعد ajouter منبعد ف recherche غادي تكتب contact form 7 منبعد غادي يطلع هو الأول هادا مولاه Takayuki Miyoshi منبعد installer ثم activer منبعد رجع ل extensions غادي تلقاه تزاد سير ل réglages هز ل code court فهو لي غادي نخدمو به هنا فل la page لي زدنا فكندير ل fonction do_shortcode لي كتمكن باش ن ajouter ل formulaire de contact ل la page ديالي فانا هنا درت ل code ديالي نتا دير ديالك الكود ديال الملف هو :
<?php get_header();?>
<div class="container">
<div class="row">
<div class="col-md-8 mb-4">
<h3 class="text-primary">Nous Contacter</h3>
<?php echo do_shortcode( '[contact-form-7 id="22" title="Formulaire de contact 1"]' ); ?>
</div>
<div class="col-md-4 sidebar">
<?php get_sidebar();?>
</div>
</div>
</div>
<?php get_footer();?>
3-تعديل الملف style.css
فأخر حاجة كندير تعديل على الملف style.css فكنزيد ل code css لي غادي يغير thème ديالنا الكود لي زدنا هو :
/*
Theme Name: Blog Theme
Author: Belasri Imad
Author URI: https://www.darija-coding.com
Description: Blog theme simple et rapide.
Version: 1.0
*/
body{
background-color: #c9c9c9;
}
.main-nav{
border-radius: 5px;
}
.post-image img{
width: 50%;
height: auto;
border-radius: 5px;
}
.main-nav{
padding: 1px;
}
.main-nav ul {
list-style: none;
margin: 8px 0;
}
.main-nav ul li{
display: inline-block;
margin-right: 20px;
padding: 10px;
}
.main-nav ul li:hover{
background-color: #006bdd;
border-radius: 5px;
}
.main-nav ul li a{
color: white;
font-size: 16px;
text-transform:uppercase;
font-weight: 500;
}
.main-nav ul li a{
text-decoration: none;
}
.post,
.sidebar{
background-color: aliceblue;
padding: 15px;
border-radius: 5px;
}
.sidebar{
height: 100%;
overflow: hidden;
}
.post-data{
font-size: 18px;
font-style: italic;
}
.post-title{
text-transform: uppercase;
font-size: 20px;
}
.comment-respond{
margin: 10px 0;
background-color: beige;
padding: 10px;
border-radius: 5px;
}
.comment-reply-title{
color: #006bdd;
}
label{
text-transform: uppercase;
}
label,textarea{
display: block;
}
textarea{
border-radius: 5px;
resize: none !important;
}
.submit,
#searchsubmit,
.wpcf7-submit
{
background-color: #006bdd;
color: white;
padding: 5px;
border: none;
cursor: pointer;
font-size: 18px;
}
ol{
list-style: none;
background-color: aliceblue;
padding: 10px;
border-radius: 5px;
}
#comments{
font-size: 16px;
text-transform:uppercase;
margin:20px 0;
}
.comment-meta{
margin: 5px 0;
}
.comment-meta a:hover{
text-decoration: none;
}
img.photo{
border-radius: 2px;
padding: 5px !important;
}
.sidebar-widgets h3{
color: #006bdd;
margin: 10px 0;
text-transform: uppercase;
font-size: 20px;
font-weight: 500;
}
.searchform{
margin: 20px 0;
}
.screen-reader-text{
display: none;
}
#s{
padding: 5px;
}
.sidebar-widgets ul{
list-style: none;
}
.sidebar-widgets ul li a{
font-size: 18px;
}
.sidebar-widgets ul li a:hover{
text-decoration: none;
}
.sidebar-widgets:after{
border: 3px solid #006bdd;
}
.wpcf7-form{
border: 1px solid #006bdd;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
}
footer p{
margin-top: 20px;
}