الاستعدادات وإعداد البيئة.
لبدء مشروع تطوير تصميم قوالب ووردبريس (WordPress themes)، من الضروري أولاً تهيئة بيئة عمل مناسبة. وهذا يشمل ليس فقط خادم التطوير المحلي، ولكن أيضاً إنشاء هيكل مجلدات المشروع بشكل واضح، بالإضافة إلى استخدام أدوات تطوير حديثة.
هناك العديد من الخيارات لإعداد بيئة التطوير المحلية. يمكنك استخدام حزم برمجية متكاملة مثل XAMPP أو MAMP أو Local by Flywheel، والتي تسمح بتثبيت خدمات Apache وMySQL وPHP بسرعة على جهاز الكمبيوتر الخاص بك. إذا كنت ترغب في تجربة أقرب إلى بيئة الإنتاج، فيمكنك النظر في استخدام حاويات Docker. بالإضافة إلى ذلك، يبدأ تطوير معظم المواقع الإلكترونية الحديثة باستخدام محرر كود أساسي مثل VS Code، مع تثبيت الإضافات الضرورية لتحسين كفاءة الكتابة البرمجية.
هيكل دليل المواضيع القياسي والواضح هو أساس قابلية صيانة المشروع. في ووردبريس (WordPress)،…wp-content/themesداخل المجلد، قم بإنشاء مجلد باسم موضوعك، على سبيل المثال:my-modern-themeداخل هذا المجلد، يجب عليك إنشاء ملفين أساسيين:style.cssوindex.phpمن بينها،style.cssليس فقط ملفات الأنماط (style sheets)، بل تحمل أيضًا معلومات الوصف (metadata) الخاصة بالموضوع (theme). أما الملفات والمجلدات الأخرى، مثل تلك المستخدمة لتخزين سكريبتات JavaScript، فهي تؤدي وظائف مختلفة ض/jsالمخزن المخصص لأجزاء القوالب/template-partsمكان تخزين قوالب الصفحات/page-templatesيمكن إنشاء هذه الأشياء تدريجياً أثناء عملية التطوير.
القراءة الموصى بها الدليل النهائي لـ Tailwind CSS: من الأساسيات إلى الإرشادات المفيدة للمستخدمين المتقدمين.。
معلومات رأس قائمة أنماط الموضوع (Theme Style Table Header Information)
الموضوعيstyle.cssيجب أن يحتوي رأس الملف على تعليق بتنسيق معين، يُستخدم لإعلام نظام ووردبريس (WordPress) بموضوعك. هذه المعلومات ضرورية للغاية، حيث تحدد اسم الموضوع ومؤلفه ووصفه وإصداره، وغيرها من التفاصيل.
/*
Theme Name: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的现代、响应式WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-modern-theme
*/من بينهاText Domainيُستخدم هذا النص لأغراض التدويل، وسيكون بمثابة مجال النصوص الذي سيتم استخدامه في وظائف الترجمة اللاحقة. بعد تحديد هذه المعلومات بشكل صحيح، سيظهر موضوعك في قائمة “المظاهر” -> “المواضيع” داخل واجهة وورد
إدخال ملفات الدوال الأساسية
على الرغم من أنindex.phpوstyle.cssما يكفي لتمكين التعرف على موضوع ما، ولكن يجب أن يتضمن الموضوع الكامل من الناحية الوظيفية…functions.phpملف: هذا الملف ليس مخصصًا لعرض المحتوى مباشرةً، بل يعمل كـ “محرك وظيفي” للمواضيع (theme functions)، حيث يُستخدم لإضافة دعم المواضيع، وقوائم التسجيل، والشرائط الجانبية، بالإضافة إلى إدخال الأنم
قم بإنشاء الملفات في المجلد الرئيسي للموضوع (المجلد الذي يحتوي على جميع ملفات الموضوع).functions.phpالملفات: في المرحلة الأولية، يمكننا إضافة بعض الميزات الأساسية إليها. يمكنك القيام بذلك عن طريق…add_theme_support()تُستخدم الدوال لتحديد الميزات المدعومة من الموضوع، مثل ملفات الصور المصغرة للمقالات (Featured Image)، الشعارات المخصصة (Custom Logo)، وعلامات HTML5، وغيرها.
إنشاء ملف قالب أساسي
يستخدم WordPress نظام مستويات القوالب (template hierarchy) لتحديد كيفية عرض أنواع مختلفة من المحتوى. فهم وإنشاء هذه الملفات القالبية الأساسية هو المفتاح لتحويل تصميمك إلى موقع إلكتروني ديناميكي.
القراءة الموصى بها تحليل شامل لبناء المواقع الإلكترونية الحديثة: دليل ممارسي كامل من التخطيط إلى الإطلاق.。
أبسط ملف قالب هوindex.phpإنه القالب النهائي للعودة إلى الحالة الأصلية لجميع الصفحات. ولكن، من أجل التحكم بشكل أدق، يجب أن نقوم بإنشاء قوالب أكثر تحديدًا. على سبيل المثال، قالب خاص بعرض قائمة مقالات المدونة.home.phpأوindex.phpيُستخدم لعرض مقال واحد فقط.single.phpيُستخدم لعرض الصفحات الثابتة.page.phpوكذلك تلك المستخدمة لعرض تصنيفات المقالات، العلامات، وغيرها من صفحات الأرشيف.archive.phpبالإضافة إلى ذلك،header.phpوfooter.phpيُستخدم لفصل كود الجزء العلوي (الرأس) وكود الجزء السفلي (القاعدة) من الموقع الإلكتروني، وذلك عن طريق…get_header()وget_footer()تتم استدعاء الدوال في جميع القوالب، مما يسمح بإعادة استخدام الكود.
إنشاء قالب للرأس (Header Template)
header.phpعادةً ما تحتوي الملفات على وثائق HTML.<head>الهياكل الموجودة في بداية الصفحات، مثل شعار الموقع وقائمة التنقل الرئيسية… خطوة مهمة جدًا في عملية تصميم الموقع هي تحديد هذه العناصر بدقة وتنسيقها بشكل جيد، لضمان تجربة مستخدم مري<head>يتم استدعاء الدالة main() في السطر 10.wp_head()"الخطاف" (Hook) هو المكان الذي يقوم فيه نواة ووردبريس (WordPress Core) والإضافات (Plugins) والقوالب (Themes) نفسها بإخراج الكود CSS الضروري وكود JavaScript والبيانات الوصفية (Metadata).
<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
</head>
<body no numeric noise key 1005>
<header id="masthead" class="site-header">
<div class="site-branding">
<div class="site-title"><a href="/ar/</?php echo esc_url( home_url( '/' ) ); ?>"></a></div>
</div>
<nav id="site-navigation" class="main-navigation">
'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</header>تنفيذ دورة تكرارية للمقالات
دورة تكرار المقالات (Article Loop) هي الآلية الأساسية لعرض المحتوى الديناميكي في ووردبريس (WordPress).index.php、single.phpفي قوالب الانتظار (waiting templates)، نستخدم…if ( have_posts() ) : while ( have_posts() ) : the_post();لنقم بتصفح كل المقالات وعرضها.
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 为每篇文章加载对应的模板部件或内容模板
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
// 分页导航
the_posts_navigation();
else :
// 没有找到内容时的模板
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>
</div>get_template_part()الدوال (Functions) تمثل ممارسة ممتازة؛ فهي تشجعك على فصل هيكل HTML الذي يعرض محتوى المقالات عن باقي أجزاء الكود.template-parts/content.phpفي ملفات الأجزاء من هذا النوع، يجب جعل ملف القالب الرئيسي أكثر بساطة ووضوحًا.
تحقيق التصميم والأسلوب التكيفي (المتجاوب)
يجب أن تكون التصاميم ذات الطابع الحديث متجاوبة، بحيث توفر تجربة تصفح ممتازة على مختلف أحجام الشاشات، سواء كانت هواتف محمولة أو أجهزة كمبيوتر مكتبية. يتم تحقيق ذلك بشكل أساسي من خلال استخدام استعلامات وسائط CSS (CSS Media Queries)، ونموذج الصناديق المرنة (Flexbox)، وتخطيط الشبكات (CSS Grid
أولاً، في…functions.phpاستخدمه بشكل صحيح في النص.wp_enqueue_style()تقوم الدالة بإضافة قائمة أنماطك الرئيسية إلى الطابور (queue). تأكد من تعيين الأنماط التي تعتمد على الأنماط الخاصة بـ WordPress عند استدعاء الدالة.dashicons。
القراءة الموصى بها دليل نهائي لـ Tailwind CSS: من المبتدئين إلى الإتقان في تطوير الويب الحديث。
function my_modern_theme_scripts() {
// 引入主题主要样式表
wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义脚本（如果有）
wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );استراتيجية CSS الموجهة نحو الأجهزة المحمولة (Mobile-First CSS Strategy)
يتم كتابة أكواد CSS باستخدام استراتيجية “الأولوية للأجهزة المحمولة” (Mobile First). وهذا يعني أنه يتم أولاً كتابة الأنماط الأساسية للأجهزة ذات الشاشات الصغيرة (مثل الهواتف المحمولة)، ثم يتم استخدام استعلامات الوسائط (Media Queries) لإضافة أنماط متقدمة وتعديلات في التخطي
/* 基础样式 - 针对移动设备 */
.site-header {
padding: 1rem;
display: flex;
flex-direction: column;
}
.main-navigation ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
}
/* 针对平板及以上设备 */
@media (min-width: 768px) {
.site-header {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.main-navigation ul {
flex-direction: row;
gap: 2rem;
}
}
/* 针对大桌面设备 */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
margin: 0 auto;
}
}معالجة الصور التي تتكيف مع الشاشات المختلفة (الصور المستجيبة للعرض)
يوفر ووردبريس دعمًا قويًا للصور المتكيفة مع أحجام الشاشات المختلفة.the_post_thumbnail()قم بتنفيذ الدالة وأرسل المعاملات المناسبة للأبعاد، وسيقوم ووردبريس تلقائيًا بعرض النتيجة مع المعلومات المطلوبة.srcsetوsizesالخاصية (Attribute)
هذه العلامات (التصنيفات) تسمح لمتصفح الويب باختيار ملف الصورة الأنسب بناءً على حجم شاشة الجهاز، مما يساعد على تحسين أداء تحميل الصفحة.
<?php if ( has_post_thumbnail() ) : ?>
<figure class="post-thumbnail">
<?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
</figure>
<?php endif; ?>إضافة ميزة التخصيص وإمكانية اختيار المواضيع
بعد أن يتم تشكيل موضوع أساسي، يمكن إضافة مختلف الميزات باستخدام واجهة برمجة التطبيقات (API) الخاصة بـ WordPress لتحسين قابليته للاستخدام ومستوى احترافيته. وتشمل هذه الميزات القوائم المخصصة، مناطق الأدوات (الشرائط الجانبية)، بالإضافة إلى إمكانيات التخصيص الإضافية من خلال أداة التخصيص
قائمة التنقل للتسجيل
فيfunctions.phpاستخدمه فيregister_nav_menus()يتم استخدام دالة لتحديد المواقع التي يدعمها موضوعك لوضع القوائم (المناطق المختلفة في الواجهة). بعد ذلك، يمكن للمستخدمين تخصيص القوائم لهذه المواقع من خلال الذهاب إلى قسم “المظهر” -> “
function my_modern_theme_setup() {
// 注册一个主菜单
register_nav_menus( array(
'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
) );
// 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );إنشاء منطقة للأدوات الصغيرة
تسمح منطقة الأدوات الصغيرة (الشريط الجانبي) للمستخدمين بتخصيص أجزاء الصفحة عن طريق سحب الأدوات المختلفة إلى المواقع المرغوبة.register_sidebar()يتم تسجيل الدوال (functions) لاستخدامها لاحقًا في التطبيق. عادةً ما يتم إنشاء عدة مناطق للأدوات (toolkits)، مثل المناطق الموجودة في الشريط الجانبي الرئيسي أو منطقة الأدوات في أسفل الصفحة.
function my_theme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Sidebar', 'my-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_modern_theme_widgets_init' );بعد التسجيل، في ملفات القوالب (مثل…)sidebar.phpيتم استخدامه في (المكان المحدد).dynamic_sidebar( 'sidebar-1' )يمكن عرض تلك المنطقة بمجرد استدعاء الدالة المناسبة.
API لمحركات التخصيص المتكاملة
يسمح معدل تخصيص ووردبريس (WordPress Customizer) للمستخدمين بتعديل خيارات القالب (theme options) أثناء المشاهدة المباشرة (in real time). يمكنك إضافة إعدادات بسيطة من خلال واجهة برمجة التطبيقات (API) الخاصة بالمعدل، مثل اختيار الألوان أو تحميل الشعار (Logo$wp_customize->add_setting()و$wp_customize->add_control()الطريقة.
function my_modern_theme_customize_register( $wp_customize ) {
// 添加一个站点标题颜色的设置
$wp_customize->add_setting( 'header_textcolor', array(
'default' => '#000000',
'sanitize_callback' => 'sanitize_hex_color',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
'label' => __( 'Header Text Color', 'my-modern-theme' ),
'section' => 'colors',
) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );ثم…header.phpفي الوسط، يمكن القيام بذلك من خلال…get_theme_mod( 'header_textcolor' )قم باسترجاع هذه القيمة وتطبيقها باستخدام أساليب مثل الأنماط المدمجة (inline styles).
الملخصات
تطوير موضوع ووردبريس حديث ومتجاوب من الصفر يعتبر مشروعًا هندسيًا منهجيًا يتطلب من المطورين ليس فقط معرفة واسعة بلغة PHP وواجهات برمجة التطبيقات الأساسية لووردبريس (WordPress Core APIs)، بل أيضًا إتقان لغات HTML5 وCSS3 (وبشكل خاص أدوات مثل Flexbox وGrid واستعلامات الوسائط – Media Queries) بالإضافة إلى لغة JavaScript. يتم تنفيذ العملية وفقًا لمبادئ الوحدات (modularity) وسهولة الصيانة (maintainability): يبدأ الأمر بإنشاء البيئة المناسبة وتحديد معلومات الموضوع، ثم يتم بناء ملفات PHP التي تتبع هيكل القوالب (templates) تدريجيًا، مع تنفيذ دورة عرض المقالات الأساسية (article display loop). بعد ذلك، يتم ضمان أداء ممتاز للموقع على جميع الأجهزة من خلال استراتيجية تصميم CSS تركز على الأجهزة المحمولة أولاً (mobile-first design) وتقنيات الصور المتجاوبة (responsive images). وأخيرًا، يتم استخدام واجهات برمجة التطبيقات القوية المتاحة في ووردبريس لإضافة قوائم التنقل (navigation menus) ومناطق الأدوات (toolkits) ودعم أدوات التخصيص (customizers)، مما يمنح المستخدمين القدرة على التخصيص بشكل مرن. باتباع هذه الخطوات، ستتمكن من إنشاء موضوع ووردبريس محترف وفعال وسهل الصيانة.
الأسئلة الشائعة الأسئلة المتداولة
ما هي التقنيات الأساسية التي يجب إتقانها لتطوير مواقع ووردبريس (WordPress)؟
لتطوير قالب ووردبريس (WordPress theme) كامل، من الضروري إتقان مجموعة من التقنيات الأساسية. أولاً، لغة PHP، حيث أن ووردبريس مكتوب بلغة PHP، وجميع ملفات القوالب والمنطق الوظيفي يعتمد عليها. ثانياً، لغات HTML5 وCSS3، والتي تُستخدم لبناء هيكل الصفحات وتصميمها، وخاصة أن التصميم الاستجابي (responsive design) يعتمد بشكل كبير على استعلامات وسائط CSS (CSS media queries) ونماذج التخطيط الحديثة مثل Flexbox وGrid. كما أن امتلاك معرفة أساسية بلغة JavaScript مهم جداً لتنفيذ الوظائف التفاعلية. أخيراً، يجب أن تفهم بعمق المفاهيم الأساسية لووردبريس مثل هيكل القوالب (template hierarchy)، ودورات المقالات (article loops)، والأدوات المساعدة مثل الهوكات (Hooks) والمرشحات (Filters).
ما هو الدور الذي يلعبه ملف `style.css` فيما يتعلق بـ "Text Domain"؟
Text Domainهذا هو المعرف الرئيسي لتدويل وتحليل المواضيع (internationalization and localization). وظيفته هي إنشاء مساحة اسم فريدة لجميع السلاسل النصية القابلة للترجمة في موضوعك. في الكود، عندما تستخدم أشياء مثل…__('Hello World', 'my-modern-theme')أو_e('Read More', 'my-modern-theme')في مثل هذه الدوال للترجمة، الوسيط الثاني هو مجال النصوص. هذا يضمن أن أداة الترجمة (مثل Poedit) قادرة على التعرف بشكل صحيح على السلاسل النصية المتعلقة بموضوعك واستخراجها، وبالتالي إنتاج الترجم.poو.moقم بترجمة الملفات بحيث يمكن ترجمة محتواها بسهولة إلى أي لغة أخرى.
كيف يمكن جعل الموضوع يدعم ميزة صور ملخص المقالات؟
لجعل الموضوع يدعم ملفات ملخص المقال (المعروفة أيضًا باسم الصور البارزة)، يجب عليك…functions.phpأضف إلى الملف البيانات المتعلقة بدعم المواضيع المطلوبة. استخدم الطريقة المناسبة لتنفيذ ذلك.add_theme_support()الدالة، وتمرير البيانات إليها.'post-thumbnails'المعلمات: يمكنك تفعيلها على جميع أنواع المقالات، أو يمكنك تحديد أن تكون متاحة فقط في أنواع معينة من المقالات (مثل…).postوpageيتم تفعيلها على الصفحة المحددة.
function my_theme_setup() {
add_theme_support( 'post-thumbnails' );
// 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
// 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );بعد إضافة هذا الدعم، سيظهر مربع البيانات “الصورة المميزة” على صفحة تحرير المقالات، حيث يمكن للمستخدمين تحميل الصور أو اختيارها. يتم استخدام هذا المربع في القوالب (templates) لتنسيق عرض الصور بشكل منhas_post_thumbnail()تحقق مما إذا كانت هناك صور مصغرة (thumbnails) متوفرة، واستخدمها إذا كان الأمر ممكنًا.the_post_thumbnail()دالة لعرضه.
لماذا يُنصح باستخدام دالة `get_template_part`؟
get_template_part()الدوال (Functions) هي واحدة من أفضل الممارسات في تطوير مواقع ووردبريس (WordPress) لتحقيق إعادة استخدام الكود والتعامل معه بشكل معياري (Modularization). تُستخدم بشكل أساسي لفصل أجزاء الكود المتكررة، مثل هياكل HTML المستخدمة لعرض محتويات المقالات، إلى ملفات منفصلة. هناك عدة مزايا واضحة لهذا الأسلوب: أولاً، يحسن من قابلية قراءة الكود وسهولة صيانته، خاصة في الملفات الرئيسية للقوالب (Main Template Filesindex.phpأصبح النظام أكثر بساطة بشكل كبير؛ والشيء الثاني هو تحسين المرونة، حيث يمكنك تحميل ملفات الأجزاء المختلفة بناءً على ظروف مختلفة (مثل نوع المقالة)، على سبيل المثال…get_template_part( 'template-parts/content', 'page' )سيتم تحميل المحتوى بشكل أولوي.content-page.phpوأخيرًا، فإن هذا النظام يسهل تعديل المواضيع الفرعية (الـ subtopics)؛ حيث يكفي للموضوع الفرعي توفير ملف بنفس الاسم لتغيير طريقة عرض الموضوع الرئيسي (الـ parent topic).
ما التالي، ما التالي؟
القراءة الموسعة والمعرفة العملية
فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.
- دليل شامل لعملية بناء المواقع الإلكترونية: من التخطيط إلى الإطلاق النهائي، مع مكدس التقنيات الكامل وأفضل الممارسات
- دليل شامل لبناء المواقع الإلكترونية: المكدس التقني الكامل من الصفر حتى الإطلاق، بالإضافة إلى تطبيقات عملية لتحسين محركات البحث (SEO)
- حل شامل لبناء المواقع الإلكترونية: دليل تنفيذي كامل من البداية حتى الإطلاق
- تحليل عميق لعملية بناء المواقع الإلكترونية: من الصفر إلى إنشاء موقع شركة عالي الأداء
- من الصفر إلى الواحد: العملية الكاملة لبناء المواقع الإلكترونية وتحليل التقنيات الأساسية
العربية