تصميم ثيمات ووردبريس من الصفر هو سؤال شائع ويحتاج الكثير من الناس إلى التعلم ومعرفة من أين يبدأون ، لذلك سنقدم لك هنا بعض النصائح …
بداية لنشرح الية عمل موقع ووردبريس !
يعمل ووردبريس على لغة البرمجة الاساسية والتي هي PHP , بالاضافة الى اللغات التالية أيضاً Html- Css – Js- JQuery , وبناءاً عليه لكي تكون قادر على التعامل مع تطوير القوالب والاضافات في ووردبريس , يجب المعرفة الاساسية في لغات البرمجة السابقة.
لا أحد يعلم كل شيء, ولكن من الجيد أن نبدأ بتعلم الأمر شيئاً فشئاً, الامر معقد نعم ويحتاج الى التركيز الكامل ولكن سنحاول بمافيه الكفاية تبسيط الامور حتى تستطيع بالنهاية قادراً على بدء مشروعك الخاص
انشاء الملفات الاساسية الداخلة في بناء قالب ووردبريس
كل قالب ووردبريس , يجب أن يحتوي على العديد من الملفات الاساسية حتى تضمن عمل القالب ضمن موقع ووردبريس بشكل متكامل , وهذه الملفات الاساسية هي بالقائمة التالية :
header.php حيث توجد قائمة التنقل الرئيسية , هو رأس الصفحة أو ترويسة الموقع , حيث يمكن ان نضع شعار الموقع , القائمة الاساسية للموقع وكذلك يمكن أن نضع اسم الموقع …الخ
style.css حيث يقع التصميم الرئيسي لموقع الويب , و هو الملف المسؤول عن تنسيق الموقع ونستخدم بها فقط لغة css ,.وستساعدنا على تجميل موقعنا الالكتروني بالتحكم بالالوان , الطول , العرض , حجم الخط الخ….
index.php هو مركز الموقع عند فتحه من قبل متصفح الزائر .
page.php القالب الذي سنستخدمه لتصميم واظهار صفحاتنا في الموقع .
functions.php : الآمر الناهي في الموقع باعطاء وجلب وتنفيذ الأوامر
single.php القالب الذي سنستخدمه لتصميم واظهار مقالاتنا في الموقع .
search.php أين تقع نتائج البحث
archive.php المكمل والاساسي للقالب السابق , فهو صفحة ارشيف الموقع
footer.php تذييل الموقع . وهي اسفل الصفحة دائماً .
sidebar.php الشريط الجانبي الذي يمكن أن نعرضه في مقالاتنا او صفحاتنا في الموقع
انقر على كل اسم ملف وسوف يأخذك إلى قسم الشرح الرئيسي في wordpress.org
theme.js : وبداخله سنقوم بكتابة أكواد الجافا سكريبت و JQuery التي نحتاجها
1- الخطوة الأولى في تصميم ثيمات ووردبريس – انشاء الملفات –
قبل البدء بانشاء الملفات , راجع كيفية تنصيب ووردبريس على سيرفر محلي في جهازك اللابتوب أو المكتبي , وكذلك بعد تنصيب ووردبريس , تحتاج الى تنصيب برنامج محرر الاكواد الذي يسمى Sublime text من موقعه الرسمي.
اذهب الى سطح المكتب , قم بانشاء مجلد جديد , قم باعطاءه الاسم الذي تريد أن تعطيه لقالب موقعك لاحقاً .
في هذا المجلد قم باضافة ملف نصي جديد من خلال محرر النصوص في الويندوز مثلا , اترك الملف فارغاً وقم بحفظه داخل المجلد باسم style.css , ومن ثم قم بانشاء ملف اخر اعطه المسمى functions.php و احفظه فارغاً في المجلد السابق , كرر هذه العملية لكل مسمى ملف من القائمة السابقة.
2- الخطوة الثانية في تصميم ثيمات ووردبريس – تعريف ملف style.css
قم بفتح المجلد السابق كاملاً ضمن محرر الأكواد Sublime text ثم قم بفتح ملف functions.php والصق الكود التالي :
<?php
function wpmrj3_resources()
{
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'wpmrj3_resources');
في الكود السابق , قمنا باخبار ووردبريس بأن يقوم بقراءة ملف الستايل style.css , حتى يظهر التعديل الذي سنقوم به لاحقاً على أجزاء الموقع
3- الخطوة الثالثة في تصميم ثيمات ووردبريس -وضع الكود المناسب في ملف header.php
في هذا الملف , لن نستخدم فقط php , وانما أيضاً HTML أول ما سنقوم به , هو تعريف الملف على أنه الملف المسؤول عن ترويسة الصفحات ( الهيدر , ولهذا سنكتب الكود التالي .
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
- في السطر الثاني , قمنا باخبار الملف أن يقوم بسحب لغة الموقع سواء العربية أو غيرها من اللغات
- في السطر الرابع , هو خيار الميتا الذي يتيح لنا أن يكون تصميم الموقع متناسب مع أجهزة الجوال
- في السطر الخامس , هو ما تراه من كتابة في نافذة المتصفح
- في السطر السادس هو ربط الموقع مع ما يسمى إدخالات FOAF الدلالية للحصول على بيانات وصفية للموقع , سوف نتكلم عن هذا لاحقاً.
- في السطر السابع سوف نتجاهله أيضاً لانه له علاقة مع ربط موقعك الالكتروني , مع موقع الكتروني آخر. هو غير مهم لنا في هذه المرحلة.
- السطر الثامن افتتاح علامة PHP لقراءة ملف HEADER
- السطر الأخير هو علامة إغلاق Head ( ملاحظة : قبل هذه العلامة , توضع أكواد الميتا , أكواد تعريف جوجل اناليتكس , وكود اعلانات جوجل أدسنس )
الان بعد الانتهاء من تعرف header , يجب أن نقوم بتعريف أجزاء الصفحة ضمن الهيدر و يتضمن الكود التالي الذي يلصق مباشرة تحت الكود السابق في ملف header
<body <?php body_class(); ?>>
<?php
wp_body_open();
?>
كما لاحظنا سابقاً , أن ملف header يتألف من ثلاث علامات html , الاولى هي html ولم نقم باغلاقها في نفس الملف , وعلامة head التي قمنا باغلاقها بالفعل بنفس الملف , وعلامة body في الكود الاخير التي أيضاً لم نقم باغلاقها في نفس الملف. ستعرف أكثر بالانتقال الى الخطوة التالية لماذا لم نغلق هذه العلامات في ملف الهيدر
ملف footer هو الذي يعرض لنا تذييل الصفحات , تخيل معي لو أن لديك ورقة , تريد أن ترسم فيها ثلاث أجزاء , جزء 1 في الاعلى ( header ) , جزء أوسط هو المحتوى وجزء سفلي هو التذييل ( footer) وهذا بالضبط ما سنتحدث عنه ..
عادة عند بناء بيت جديد , نقوم ببناء الأعضدة بين الطوب من الاسفل الى الأعلى , لا يمكن أن يكتمل البيت بدون اغلاقه بالسقف من الاعلى , ولكن في قالب ووردبريس , يحدث العكس , يجب أغلاق علامات html التي تحدثنا عنها سابقاً ولم نقم باغلاقها في الاسفل أي في التذييل
وبناءاً عليه يوضع الكود التالي في ملف footer.php
<?php wp_footer(); ?> </body> </html>
الأول هو فتح علامة php لكي نعرّف هذا الملف على أنه التذييل للصفحات , ثم قمنا باغلاق علامات html اسفله مباشرة .
الآن وبعد أن قمنا بتعريف ملفات الترويسة والتذييل , يجب أن ننتقل الى مرحلة اظهار محتوى هذان الملفان في اجزاء القالب , مثل نموذج الصفحة , نموذج المقال , نموذج الارشيف و نموذج البحث
كل ماعليك فعله هو لصق الكود التالي في كل صفحة من الصفحات التالية في مجلد الثيم :
index.php • page.php • single.php • search.php • archive.php •
<?php get_header(); ?> <?php get_footer();?>
- السطر الأول هو لاظهار الهيدر في الصفحة
- السطر الثاني لاظهار التذييل في الصفحة
لاحقاً كل الأكواد التي سنقوم بكتابتها في هذه الملفات , ستكون بين هذان السطران فقط
6- الخطوة السادسة في انشاء قالب ووردبريس – تعريف ملف theme.js
من الافضل أن تقوم بانشاء مجلد جديد ضمن مجلد الثيم , وقم باعطاءه المسمى asst , بداخل هذا المجلد الجديد قم بانشاء ملف واعطه الاسم theme.js حتى تبقى منظم العمل بشكل كامل وجيد ..
الان في ملف functions.php يمكننا كتابة الكود التالي , حتى يتم تعريف ملف الجافا سكريبت
function load_site_js( )
{
wp_enqueue_script('jquery');
wp_register_script('wpmrj3', get_template_directory_uri() . '/asst/wpmrj3.js', 'jquery',false, true);
wp_enqueue_script('wpmrj3');
wp_enqueue_script('jquery');
}
add_action ('wp_enqueue_scripts','load_site_js');
7- الخطوة السابعة في انشاء قالب ووردبريس – اظهار المحتوى في الصفحات والمقالات
بعد أن قمنا باظهار الهيدر والفوتر في القسم السابق , من الجيد الآن أن نقوم باظهار المحتوى الذي نقوم بكتابته أو بانشاءه في الصفحات والمقالات.
هناك في ووردبريس خاصية تسمى تكرار الحقلة أو الحلقة أو The Loop فما هو ؟
التكرار الحلقي هو كود PHP يستخدمه ووردبريس لعرض المنشورات , العنوان , المحتوى . باستخدام الحلقة ، يعالج ووردبريس كل منشور ليتم عرضه على الصفحة الحالية ضمن آلية ديناميكية ، وينسقه وفقًا لمطابقته مع المعايير المحددة داخل علامات الحلقة . ستتم معالجة أي كود HTML أو PHP في الحلقة في كل منشور أو محتوى صفحة .
كود هذه الحلقة لاظهار المحتوى سيكون كالتالي :
<?php the_title();?>
<?php if(have_posts() ): while(have_posts() ): the_post(); ?>
<?php the_content();?>
<?php endwhile; else : endif;?>
في السطر الأول هو أمر اظهار عنوان المقال أو الصفحة | كما تشاهد في ترويسة هذا المقال هناك عنوان والذي هو | تصميم ثيمات ووردبريس من الصفر – تعلم البرمجة – الدرس الأول |
أما عن السطر الثاني والثالث / أي وكأنك تحاكيه , وتقول له , اذا كان هناك منشورات واثناء احتواء الموقع على هذه المنشورات , قم من فضلك بعرض المحتوى لهذه المنشورات أو الصحفات , وفي السطر الاخير سنغلق علامات if و while.
سأكتفي في هذا الدرس الى هنا وكما لاحظنا أننا الآن قمنا بانجاز شيء رائع جداً ومثمر في انشاء قالب ووردبريس . الأمر ليس صعباً كما يقولون ,فقط ماعليك القيام به هو التدريب على ما قمنا بفعله وبكتابته من أكواد , واعادة كتابتها مراراً حتى تتمكن من التعرف عليها في الدروس القادمة.