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;
}