كيف تحوِّل قالب HTML ساكِن إلى قالب ووردبريس متجاوب: ملفات index.php و single.php و page.php

إن تحويل قالب HTML ساكن إلى قالب ووردبريس متجاوب يعد من المهارات الأساسية التي ينبغي على مطوري الويب امتلاكها، خاصةً أولئك الذين يعملون على تخصيص واجهات المواقع وفقاً لمتطلبات العملاء. في الواقع، يتميز ووردبريس بمرونته العالية وإمكانية التحكم الكاملة بمحتوياته من خلال واجهته الخلفية، ما يجعله نظام إدارة محتوى (CMS) رائجًا في جميع أنحاء العالم.

هذا المقال يقدم شرحًا مفصلًا ودقيقًا لعملية تحويل قالب HTML ساكن إلى قالب ووردبريس متجاوب من خلال التركيز على ثلاثة ملفات رئيسية تلعب دورًا جوهريًا في بنية أي قالب ووردبريس: index.php, single.php, وpage.php. سيتم تناول كل مرحلة بشكل معمق مع إبراز أفضل الممارسات لضمان توافق القالب مع معايير التطوير الحديثة ومتطلبات تحسين محركات البحث (SEO) ومرونة التصميم (Responsive Design).

فهم بنية قوالب ووردبريس

قبل البدء في عملية التحويل، من الضروري فهم البنية العامة لقوالب ووردبريس. القالب في ووردبريس يتكون من مجموعة من الملفات البرمجية المكتوبة غالبًا بلغة PHP، وتتكامل مع نظام القوالب الخاص بووردبريس عبر مجموعة من الدوال المعروفة بـ Template Tags.

الملفات الأساسية لأي قالب ووردبريس هي:

المرحلة الأولى: تجهيز ملفات القالب

عند تحويل قالب HTML ساكن إلى قالب ووردبريس، يجب أولاً تفكيك ملف HTML إلى أجزاء قابلة لإعادة الاستخدام. لنفترض أن القالب الساكن يتكون من ملف index.html وملف style.css. نقوم بتقسيم المحتوى إلى الأجزاء التالية:

• رأس الصفحة (Header): من بداية الملف إلى نهاية الـ

  .

• محتوى الصفحة (Content): القسم الديناميكي الذي يعرض المقالات أو الصفحات.

• التذييل (Footer): من

إنشاء مجلد القالب

نقوم بإنشاء مجلد جديد داخل المسار التالي:

/wp-content/themes/mytheme/

ويتم نقل الملفات المقسمة إليه وفق التالي:

• style.css

• index.php

• header.php

• footer.php

• functions.php

• single.php

• page.php

• sidebar.php (اختياري حسب التصميم)

إعداد ملف style.css

الملف style.css يجب أن يحتوي في أعلاه على بيانات القالب بالشكل التالي:

css
CopyEdit
/*
Theme Name: My Custom Theme
Theme URI: https://example.com
Author: اسم المطور
Author URI: https://example.com
Description: قالب ووردبريس محول من HTML ساكن
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mycustomtheme
*/

المرحلة الثانية: تحويل ملف index.html إلى index.php

ملف index.php هو الملف الافتراضي الذي يستخدمه ووردبريس لعرض المحتوى عند غياب ملفات أكثر تحديداً مثل home.php أو archive.php.

دمج رأس وتذييل الصفحة

بدلاً من كتابة كود الرأس والتذييل داخل index.php، يجب استخدام الدوال get_header() وget_footer().

مثال:

php
CopyEdit
 get_header(); ?>

"content">
   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
 the_title(); ?>
    
class="post-content">
      php the_content(); ?>
    div>
  php endwhile; endif; ?>
div>

php get_footer(); ?>

استخدام حلقة ووردبريس (The Loop)

ووردبريس يستخدم ما يعرف بالـ “Loop” لعرض المقالات. وهو عنصر جوهري يجب إدراجه داخل ملف index.php لعرض قائمة المقالات في الصفحة الرئيسية.

المرحلة الثالثة: إنشاء ملف single.php

ملف single.php يستخدم لعرض المقالة المفردة عند الضغط على عنوانها من الصفحة الرئيسية أو من الأرشيف.

البنية الأساسية لملف single.php:

php
CopyEdit
 get_header(); ?>

"single-post">
   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
 the_title(); ?>
    
class="meta">تم النشر في php the_time('F j, Y'); ?> بواسطة php the_author(); ?>p>
    <div class="post-content">
      php the_content(); ?>
    div>
    <div class="post-tags">
      php the_tags(); ?>
    div>
    <div class="post-categories">
      php the_category(', '); ?>
    div>
  php endwhile; endif; ?>
div>

php get_footer(); ?>

إضافة دعم للتعليقات

يمكن استخدام دالة comments_template() لعرض التعليقات في أسفل المقال:

php
CopyEdit
 comments_template(); ?>

المرحلة الرابعة: إنشاء ملف page.php

ملف page.php مسؤول عن عرض الصفحات الثابتة في ووردبريس، مثل صفحة “عن الموقع” أو “سياسة الخصوصية”.

الكود الأساسي:

php
CopyEdit
 get_header(); ?>

"page-content">
   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
 the_title(); ?>
    
class="page-body">
      php the_content(); ?>
    div>
  php endwhile; endif; ?>
div>

php get_footer(); ?>

المرحلة الخامسة: جعل القالب متجاوبًا (Responsive)

لضمان أن القالب متجاوب مع جميع الأجهزة (الهواتف، التابلت، الشاشات الكبيرة)، يجب استخدام تقنيات التصميم المتجاوب مثل:

• استخدام وحدات القياس النسبية (em, %, vw/vh).

• استعمال Media Queries:

css
CopyEdit
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}

• اختبار القالب عبر أدوات مثل Chrome DevTools و Responsinator.

المرحلة السادسة: تفعيل الميزات المتقدمة عبر functions.php

الملف functions.php يُستخدم لتعريف الميزات التي يحتاجها القالب. على سبيل المثال:

php
CopyEdit

// دعم الصور البارزة
add_theme_support('post-thumbnails');

// دعم القائمة المخصصة
function register_my_menu() {
  register_nav_menu('header-menu',__( 'القائمة الرئيسية' ));
}
add_action( 'init', 'register_my_menu' );

// دعم تنسيقات HTML5
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'gallery' ) );
?>

ممارسات إضافية لتحسين الأداء وتجربة المستخدم

• التحسين لمحركات البحث (SEO): استخدام عناوين H1-H6 بطريقة منطقية، وتضمين البيانات المنظمة (Schema.org).

• تحسين السرعة: ضغط ملفات CSS وJavaScript، واستخدام Lazy Loading للصور.

• توافق المتصفحات: التأكد من أن القالب يعمل بكفاءة على جميع المتصفحات الشائعة.

• الأمان: تجنب دوال PHP الخطيرة، وفحص الإدخالات قبل طباعتها.

خلاصة الجدول الوظيفي لملفات القالب الأساسية

المصادر والمراجع

• WordPress Developer Handbook – Theme Development

• MDN Web Docs – Responsive Design