blog ب wordpress و bootstrap 4 الجزء الأول
imadbelasri
Wordpress
WP
فهاد ال 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>