blog ب wordpress و bootstrap 4 الجزء الأول


فهاد ال projet لأول ب wordpress غادي نشوفوا كيفاش نقادو blog خاص بنا فهنا غادي نتعلموا كيفاش  نقادو thème ديالنا ومنبعد ن activer le théme ونخدم به فل blog غادي يكون بسيط كنزيدو des articles منبعد كيمكنا نشوفهم نزيدو تعليقات وهادشي كامل غادي نخدموه بالكود. 

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

1- إضافة thème ف wordpress

منبعد مشفتي فالفيديو كيفاش ت installer wordpress ومنبعد ما زدنا la base de données فدبا غادي نزيدو thème ديالنا أول حاجة سير ل dossier wp-content/themes منبعد ف themes زيد dossier جديد سميه blog-theme فيه زيد ملف جديد سميه style.css فهاد الملف غادي نزيد لمعلومات الخاصة ب thème ديالي فغادي نعطي الإسم لي هو Theme Name منبعد ل Author يعني لي صاوبو وعندي ايضا الرابط ديال مول thème و description و version الكود لي غادي تزيد هو :

                                /*
Theme Name: Blog Theme
Author: Belasri Imad
Author URI: https://www.darija-coding.com
Description: Blog theme simple et rapide.
Version: 1.0
*/
                            

2- كيفاش ن activer thème ف wordpress

فدبا منبعد مزدنا thème خصو يت activa قبل غادي تشوف شي صورة كيف ما كانت أو تاخد لي غادي نزيدو ف source code وتسميها screenshoot غادي تكون هي التصويرة ديال thème ديالنا منبعد غادي تمشي ل wp-admin كيف شفنا فالفيديو منبعد ل apparence ثم thèmes تما غادي تلقاه تزاد كليكي على ل bouton activer فغادي يت activa دبا يلى رجعتي لل blog فمغادي يعطيك والو فغادي تزيد ملف جديد تسميه index.php فيه هو الصفحة الرئيسية ديالنا غادي نزيد فيها غير الكود باش ن tester بلي thème خدام منبعد متزيدو دير actualiser la page الكود لي تزيد هو :

                                <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Blog Theme</title>
    </head>
    <body>
        Blog Theme by DCoding
    </body>
    </html>
                            

3- إضافة الملف header.php

دائما ف dossier blog-theme زيد ملف جديد سميه header.php فيه غادي يكونوا روابط css ديالنا فأولا عندي ل fonction language_attributes لي هي ديال wordpress وكتمكن من تحديد اللغة ديال ل blog ديالنا وهي نفس اللغة باش ت installa wordpress منبعد كنحدد type de caractères لي بل fonction bloginfo كنحددوا منبعد بنفس ل fonction كنحدد العنوان ديال ل blog لي هو name منبعد عندي ل fonction wp_head لي كتزيد des styles css ديال wordpress  وكاين روابط css كيفا قلنا لي مع bootstrap 4 وايضا مع ل fichier style.css لي غادي نزيدو فيه css ديالنا منبعد ولي كنزيدو بل fonction get_stylesheet_uri الكود لي زدنا هو :

                                <!DOCTYPE html>
<html <?php echo language_attributes();?>>
<head>
    <meta charset=<?php echo bloginfo('charset');?>>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <?php wp_head();?>
    <title> <?php echo bloginfo('name');?></title>
</head>
                            

4- إضافة الملف footer.php

دائما ف dossier blog-theme زيد ملف جديد سميه footer.php فيه غادي يكونوا روابط javascript الكود لي زدنا هو :

                                    <footer>
            <p class="text-center">DCoding ©<?php echo date('Y');?></p>
        </footer>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>
                                


بحث في الموقع


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