blog ب wordpress و bootstrap 4 الجزء الثاني


فهاد الجزء الثاني من blog ب wordpress و bootstrap 4 غادي نكملو ل blog ديالنا غادي نزيدو ل option ديال إضافة الصور مع ل articles حيت ملي كنزيد thème خاص بيا هاد ل option مكتكونش activé منبعد غادي نزيدو ل menu ديالنا لي غادي تمكن من التنقل بين les pages منبعد غادي نعرض les articles لي عندي فل la base de données. 

نظرة سريعة بالفيديو

1- إضافة الملف functions.php

دائما ف dossier ديال ل projet ديالنا غادي نزيد ملف جديد نسميه functions.php فيه غادي يكونوا عندي les fonctions لي غادي نحتاج أول fonction هي blog_theme_setup لي غادي تمكن باش نزيد ل option ديال إضافة الصور مع ل article ولي كنزيدها بل fonction add_theme_support منبعد كن enregistrer ل menu بل fonction register_nav_menus لي كتاخد array فيها ل menu لي سميناها Main Menu ولي غادي نزيدوها منبعد الكود لي زدنا هو :

                                <?php 
//add featured image to our theme

function blog_theme_setup(){
    add_theme_support('post-thumbnails');
    //add menu 
    register_nav_menus(array(
        'primary' => 'Main Menu'
    ));
}
add_action('after_setup_theme','blog_theme_setup');
                            

2- إضافة القائمة ل thème wordpress

منبعد كنمشي ل admin panel كنمشي ل pages كنزيد 2 pages وحدة سميها Qui sommes-nous ووحدة Contact منبعد سير ل Apparence ثم Menus ثم créer un nouveau menu سميه Main Menu منبعد سير ل pages و cocher les pages كاملين وكليكي على ajouter au menu ثم كليكي على enregistrer menu  دبا زدنا ل menu فباش ن afficher ل menu ديالي غادي نرجع لل header.php غادي نزيد لكود لي كيمكن باش نعرض ل menu فعندي array args لي كتاخد ف theme_location primary لي هي ل menu ديالنا منبعد فل fonction wp_nav_menu كنعطيها ل args ودبا يلا رجعت درت actualiser لل page index غادي نلقى ل menu ديالي ت afficha الكود لي زدنا ف header.php هو :

                                <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <header>
                    <h1 class="mb-2"><?php echo bloginfo('title');?></h1>
                    <small class="mx-1 text-primary"><?php echo bloginfo('description');?></small>
                </header>
                <div class="main-nav mt-4 mb-4 bg-primary text-white">
                    <div class="container">
                        <?php $args = array(
                            'theme_location' => 'primary'
                        );?>
                        <?php
                            wp_nav_menu(args);
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
                            

3- الملف index.php

كنرجع للملف index.php كنمسح الكود لي كان عبارة عن test منبعد كنزيد الكود لي كيمكن باش ن afficher les articles كاملين أول حاجة كنسترجع ل header بل focntion get_header منبعد كنتحقق واش عندي des articles بل fonction have_posts فيلا كانوا كنخدم ب while باش كن afficher كلشي عندي ل fonction the_post_thumbnail لي كت afficher l'image ديال ل article عندي the_title كت afficher le titre عندي the_author كت afficher auteur عندي the_time كت afficher la date عندي the_excerpt كت afficher description ولكن محددين شحال من حرف فغادي نشوفوا كيفاش نححدو عدد les caractères لي بغينا منبعد ثم كاين the_permalink لي كت afficher le lien ديال ل article ويلا مكان حتى article كن afficher message بلي مكاين والو منبعد كن afficher sidebar لي غادي نزيدوها من بعد ثم كنسترجع ل footer بل fonction get_footer متنساش تزيد des articles سير ل articles منبعد ajouter وزيدهم الكود ديال الملف هو :

                                <?php get_header();?>
    <div class="container mb-4">
        <div class="row">
            <div class="col-md-8">
                <?php if(have_posts()):?>
                    <?php while(have_posts()) : the_post()?>
                        <div class="post">
                            <div class="post-image">
                                <?php the_post_thumbnail();?>
                            </div>
                            <div class="post-data p-1">
                                <p class="text-danger mt-2"> Par: <?php the_author();?> le: <?php the_time('F j,Y g:i a');?></p>
                            </div>
                            <h3 class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
                            <p class="post-body"><?php the_excerpt();?><a href="<?php the_permalink();?>">Plus...</a></p>
                        </div>
                        <hr>
                    <?php endwhile;?>
                <?php else :?>
                    <?php echo wpautop('Aucun résultat trouvé');?>
                <?php endif;?>
            </div>
            <div class="col-md-4 sidebar">
                <?php get_sidebar();?>
            </div>
        </div>
    </div>
<?php get_footer();?>
                            

4- تحديد عدد حروف description

فباش نحدد شحال من حرف يت afficha ف description غادي نمشي للملف functions.php غادي نزيد fonction جديدة سميها set_body_length منبعد فيها غادي ن retourner عدد الحروف لي حددت انا ف 100 منبعد كنزيد ل filter بل fonction add_filter لي كنحدد اشمن filter ولي هنا هو excerpt_length وكنعطيها ل fonction لي زدت ولي هي set_body_length الكود لي زدنا هو:

                                    //set body length

function set_body_length(){
    return 100;
}
add_filter('excerpt_length','set_body_length');
                                


بحث في الموقع


إشترك للتوصل بالجديد