إعجاب

أجزاء قالب ووردبريس و أكواد php الرئيسية المكتوبة في كل قسم

 أجزاء قالب ووردبريس و أكواد php الرئيسية المكتوبة في كل قسم

أجزاء قالب ووردبريس و أكواد php الرئيسية المكتوبة في كل قسم , كنا قد ذكرنا في الدرس السابق , في ضمّ style.css الموجودة في ملف الثيم الخاص بنا الى function.php و بدء العمل بـ css .الجزء الخامس . وكذلك تعلمنا كيفية تنصيب وورد بريس على جهاز سطح المكتب و كذلك محرر الأكواد sublime text . وفي هذا الدرس سوف نتعلم ما هي الاكواد الاساسية التي يجب علينا اضافتها في ملفات الثيم وكيف سنتعامل مع هذه الأكواد مع شرح معناها ,

راجع الدرس السابق من هنا 

  • أجزاء قالب ووردبريس الاساسية هي :

• header.php • Stylesheet.css • index.php • page.php • function.php • single.php • search.php • archive.php • footer.php • sidebar.php

تعريف هذه الملفات

 •header.php : هو رأس الصفحة أو ترويسة الموقع , حيث يمكن ان نضع شعار الموقع , القائمة الاساسية للموقع وكذلك يمكن أن نضع اسم الموقع …الخ

Stylesheet.css : هي الملف المسؤول عن تنسيق الموقع ونستخدم بها فقط لغة css  ,.وستساعدنا على تجميل موقعنا الالكتروني بالتحكم بالالوان , الطول , العرض , حجم الخط الخ….

• index.php : هو مركز الموقع عند فتحه من قبل متصفح الزائر .

• function.php : الآمر الناهي في الموقع باعطاء وجلب وتنفيذ الأوامر

single.php : القالب الذي سنستخدمه لتصميم واظهار مقالاتنا في الموقع .

• page.php : القالب الذي سنستخدمه لتصميم واظهار صفحاتنا في الموقع .

sidebar.php  : الشريط الجانبي الذي يمكن أن نعرضه في مقالاتنا او صفحاتنا في الموقع

• search.php : القالب الذي سنستخدمه في انشاء صفحة البحث في موقعنا والنتائج كذلك

archive.php : المكمل والاساسي للقالب السابق , فهو صفحة ارشيف الموقع

footer.php : تذييل الموقع . وهي اسفل الصفحة دائماً .

انظر الصورة لشرح كل قسم ومكانه :

web page template design

أكواد php وطريقة كتابتها في كل أجزاء قالب ووردبريس :

  • والآن لنذهب الى الملف الأول وهو single.php في محرر الأكواد ولنكتب الكود التالي :
<?php get_header(); ?>

<?php get_footer();?>

وفي هذا الكود اعطينا خبراً لهذا النموذج بأن يحضر في رأس الصفحة ملف الرأس للموقع الالكتروني اي header.php و ايضا في اسفل الصفحة أن يحضر لنا التذييل أي footer.php

ونعيد هذه العملية أيضا بادخال الكود السابق في كل من الملفات التالية :

page.php • search.php • archive.php

  • الخطوة الثانية هي الذهاب الى ملف header.php  , وكتابة الكود التالي :
<!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

	<head>

		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" >

 
		<?php wp_head(); ?>

	</head>

	<body <?php body_class(); ?>>

		<?php
		wp_body_open();
		?>

معني الكود في السطر الأول , نحن نخبر هذا وورد بريس بأن هذا هو ملف رأس الصفحات , وفي السطر الثاني حتى الأخير هي عبارة عن تعريف للمتصفح بأن هنا ملف تعريفي بالموقع , أما بالنسبة كما تلاحظ للسطر الثالث و هنا لغة الثيم , تُستخدم سمة dir لتعيين الاتجاه الأساسي للنص للعرض. من الضروري تمكين HTML في النصوص من اليمين إلى اليسار مثل العربية والعبرية  او الانكليزية وانا اخترت في هذه السلسلة انشاء موقع عربي فقط . وهذا الكود يعتبر من اساسيات html5.

  • اما الآن الخطوة الثالثة وهي الذهاب الى ملف footer.php كتابة أكواد php التالية :
		<?php wp_footer(); ?>

	</body>
</html>

السطر الأول هو تعريف بأن هنا ملف التذييل , والثاني والثالث هو اغلاق العلامات التي بدأنا بها في ملف header , لماذا ذلك ؟ حسناً , هناك عدّة اراء ولكن الجواب المنطقي بأن اقسام الصفحة سوف تستدعى من footer.php عند فتح موقعك من قبل الزائرين في متصفحهم ولتجنب مشاكل عرض الموقع بعدم اظهاء الشكل الصحيح للصفحة , يجب تضمين اغلاق العلامات التي بدأنا بها في رأس الصفحة , في تذييل الصفحة , لا تشغل بالك , انها كذلك وحسب , للننتقل الى الخطوة التالية….

  • الخطوة التالية وهي بالنسبة لملف index.php .. سأخبرك بأننا لن نقوم بكتابة أي كود في هذا الملف وسوف نبقيه نظيفاً , لان استدعاء الموقع الالكتروني عن الزيارة سيكون بداية بجلب ملف index.php . وتجنباً للأخطاء التي لربما ستحدث سنعتمد في تصميمنا على ملفاتنا الاساسية , وهو الخيار الأفضل دائما .

الآن  بعد أن وضعنا كل كود في مكانه الصحيح , تبقى لدينا ان نبدأ العمل والتصميم .

الدرس القادم سوف نقوم بشرح كيف نقوم بتصميم header.php . لنحصل على تصميم جميل لرأس الصفحة باستخدام Bootstrap  … تابع الدرس من هنا

إعجاب

الزوار قدّ شاهدوا أيضاً المقالات التالية :

STUDYSHOOT ©