البرمجة

تحويل قالب HTML إلى ووردبريس

اخر تحديث 08/06/2025
18 1 دقيقة قراءة
جدول المحتوى

كيف تحوِّل قالب HTML ساكِن إلى قالب ووردبريس متجاوب: تخصيص الموقع

يُعدُّ تحويل قالب HTML ساكن إلى قالب ووردبريس خطوة استراتيجية مهمة لكل من المطورين وأصحاب المواقع الذين يسعون إلى الجمع بين حرية التصميم التي يوفرها HTML ومرونة نظام إدارة المحتوى الذي يقدمه ووردبريس. لا يقتصر الأمر على مجرد نسخ الشيفرة، بل يتطلب فهماً دقيقاً لهيكلية ووردبريس، ودراية بكيفية تقسيم الملفات، واستعمال التوابع والدوال الديناميكية، مع الحفاظ على الأداء، الاستجابة، وتجربة المستخدم.

في هذا المقال، سيتم تقديم شرح مفصل ومتسلسل لتحويل قالب HTML ثابت إلى قالب ووردبريس كامل، قابل للتخصيص، متجاوب مع جميع الأجهزة، ومتوافق مع أفضل ممارسات تحسين محركات البحث (SEO).

مواضيع ذات صلة

المرحلة الأولى: الفهم الأساسي للقالب الساكن

قبل الشروع في التحويل، من الضروري فحص قالب HTML الساكن بدقة. يجب على المطور تحليل العناصر التالية:

  • بنية الشيفرة: هل هي منظمة داخل أقسام رئيسية (header, content, footer)؟

  • الملفات المرتبطة: CSS، JavaScript، الصور، الخطوط.

  • الإضافات أو المكتبات المستخدمة: مثل Bootstrap، jQuery، Font Awesome.

  • أكواد HTML التكرارية: هل هناك عناصر مثل القائمة الجانبية أو الشريط العلوي يتم تكرارها في أكثر من صفحة؟

هذا التحليل سيسهّل عملية التقسيم لاحقًا وسيساعد في توزيع الشيفرة ضمن ملفات ووردبريس المخصصة لكل وظيفة.

المرحلة الثانية: إعداد بيئة العمل

لتحويل قالب HTML إلى ووردبريس، ينبغي تجهيز بيئة تطوير محلية تتضمن:

  • خادم محلي: مثل XAMPP، MAMP أو Local by Flywheel.

  • قاعدة بيانات MySQL: لإنشاء قاعدة بيانات جديدة للموقع.

  • ملفات ووردبريس الأصلية: تحميل آخر إصدار من موقع wordpress.org.

بعد التثبيت المحلي، يمكن إنشاء مجلد جديد داخل مجلد wp-content/themes ليحمل اسم القالب الجديد.

المرحلة الثالثة: تقسيم قالب HTML إلى ملفات قالب ووردبريس

ووردبريس يعتمد على نظام قوالب ديناميكي، ويجب تقسيم القالب الساكن إلى الملفات التالية:

الملف الوظيفة
header.php يحتوي على وسم وبداية الصفحة حتى بداية القسم الرئيسي
footer.php يحتوي على نهاية الصفحة والـ

index.php الصفحة الرئيسية التي تشمل الهيكل العام للمحتوى
style.css ملف التنسيق الرئيسي ويتضمن بيانات القالب
functions.php يحتوي على الوظائف المخصصة وتسجيل القالب والوظائف الإضافية
sidebar.php (اختياري) يحتوي على الشريط الجانبي
page.php, single.php, archive.php قوالب صفحات مخصصة

مثال على تقسيم قالب HTML:

في قالب HTML الساكن:

html
html>
<html>
  <head>
    <title>موقعيtitle>
    <link rel="stylesheet" href="style.css" />
  head>
  <body>
    <header>...header>
    <main>...main>
    <footer>...footer>
  body>
html>

في قالب ووردبريس:

  • header.php:

php

 language_attributes(); ?>>

  "">
  "viewport" content="width=device-width, initial-scale=1">
  </span><span><span class="hljs-meta"><?php</span></span><span> </span><span><span class="hljs-title function_ invoke__">bloginfo</span></span><span>(</span><span><span class="hljs-string">'name'</span></span><span>); </span><span><span class="hljs-meta">?></span></span><span>
   wp_head(); ?>

 body_class(); ?>>
  
...

  • footer.php:

php
  
...

   wp_footer(); ?>

  • index.php:

php
 get_header(); ?>


  
  if (have_posts()):
    while (have_posts()): the_post();
      the_content();
    endwhile;
  endif;
  ?>


 get_footer(); ?>

المرحلة الرابعة: إضافة ملف style.css بوصف القالب

يجب إضافة معلومات تعريف القالب في أعلى ملف style.css على الشكل التالي:

css
/*
Theme Name: My Custom Theme
Theme URI: http://example.com
Author: Your Name
Author URI: http://example.com
Description: قالب ووردبريس مخصص محول من HTML
Version: 1.0
*/

بعد ذلك يمكن نقل أكواد CSS الموجودة في قالب HTML إلى هذا الملف أو ربطها من ملفات خارجية داخل header.php باستخدام دالة wp_enqueue_style.

المرحلة الخامسة: تفعيل القالب من لوحة التحكم

بعد الانتهاء من التقسيم وإدخال بيانات القالب، يمكن الدخول إلى لوحة تحكم ووردبريس → المظهر → القوالب، وتفعيل القالب الجديد.

المرحلة السادسة: تحويل العناصر الثابتة إلى ديناميكية

العناوين والمحتوى

في ووردبريس، لا يتم كتابة المحتوى مباشرة داخل الملفات. يجب استعمال الدوال التالية:

  • the_title() لعرض عنوان المقال أو الصفحة

  • the_content() لعرض المحتوى الأساسي

  • the_post_thumbnail() لعرض صورة مميزة

القوائم

في HTML:

html
<nav>
  <ul>
    <li><a href="index.html">الرئيسيةa>li>
    <li><a href="about.html">من نحنa>li>
  ul>
nav>

في ووردبريس:

php

wp_nav_menu(array(
  'theme_location' => 'main-menu',
  'container' => 'nav',
  'menu_class' => 'main-nav'
));
?>

مع تسجيل القائمة في functions.php:

php
function register_my_menus() {
  register_nav_menus(array(
    'main-menu' => 'القائمة الرئيسية',
  ));
}
add_action('init', 'register_my_menus');

المرحلة السابعة: تخصيص الواجهة باستخدام ويدجت وCustomizer

لجعل القالب قابلاً للتخصيص من لوحة تحكم ووردبريس، يجب دعم الودجات وcustomizer.

دعم الودجات:

في functions.php:

php
function theme_widgets_init() {
  register_sidebar(array(
    'name' => 'الشريط الجانبي',
    'id' => 'sidebar-1',
    'before_widget' => '
',
    'after_widget' => '
',
    'before_title' => '
',
    'after_title' => '
',
  ));
}
add_action('widgets_init', 'theme_widgets_init');

وفي sidebar.php:

php
 if (is_active_sidebar('sidebar-1')) : ?>
   dynamic_sidebar('sidebar-1'); ?>
 endif; ?>

المرحلة الثامنة: جعل القالب متجاوبًا مع جميع الأجهزة

إذا لم يكن القالب الأصلي يستخدم إطار عمل مثل Bootstrap، يمكن تحويله يدوياً ليكون متجاوبًا، عبر:

  • استعمال وحدات نسبية مثل % وvw بدلاً من px

  • استخدام @media queries

  • التأكد من أن الصور والفيديوهات تستجيب لحجم الشاشة باستخدام:

css
img, video {
  max-width: 100%;
  height: auto;
}

المرحلة التاسعة: تحسين القالب لمحركات البحث (SEO)

تحسين محركات البحث لا يتعلق فقط بالمحتوى، بل أيضاً بالهيكل البرمجي للقالب. يمكن تنفيذ الممارسات التالية:

  • استخدام الوسوم الدلالية مثل

    ,

    ,

    ,

  • تضمين العناوين في وسوم

    ،

    , … بشكل منطقي

  • استخدام دوال ووردبريس مثل bloginfo('description') لعرض وصف الموقع

  • دعم الروابط الدائمة عبر إعدادات ووردبريس

  • تضمين البيانات المنظمة Schema.org إذا لزم الأمر

المرحلة العاشرة: دعم الترجمة وتعدد اللغات

لجعل القالب يدعم الترجمة، يجب استعمال الدوال __() و_e() بدلاً من النصوص الثابتة.

مثال:

php
 _e('مرحبًا بكم في موقعي', 'mytheme'); ?>

مع ملف ترجمة .pot وتهيئة مجلد languages.

المرحلة الحادية عشر: الحماية وتحسين الأداء

  • استخدام دوال الأمان: مثل esc_html() وesc_url() عند عرض المدخلات.

  • تفعيل التخزين المؤقت (caching): باستخدام إضافات مثل W3 Total Cache.

  • تقليل الطلبات الخارجية: دمج ملفات CSS وJavaScript.

  • التحقق من الجاهزية مع الإضافات الشائعة.

خاتمة بنيوية

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

المراجع:

  1. Developer Resources | WordPress.org

  2. Smashing Magazine – How To Convert HTML Template Into WordPress Theme

اخر تحديث 08/06/2025
18 1 دقيقة قراءة