إنشاء قالب ووردبريس مخصص باستخدام HTML و TailwindCSS و jQuery
المقدمة
في هذا الدليل المتقدم، سنقوم بتطوير قالب ووردبريس مخصص باستخدام HTML، TailwindCSS، و jQuery. سيشمل القالب تصميمًا مستجيبًا وعرض المنشورات كبطاقات، مع قائمة علوية قابلة للتخصيص، شعار مخصص، وتحسينات على الفوتر. سنضيف أيضًا بعض التفاعلات باستخدام jQuery وتحسينات في الأداء.
الخطوة 1: إنشاء ملفات القالب الأساسية
للبدء، تأكد من إنشاء مجلد للقالب داخل مجلد wp-content/themes، يمكنك تسميته advanced-tailwind-theme. داخل هذا المجلد، ستحتاج إلى إنشاء الملفات التالية:
index.php: ملف القالب الرئيسي لعرض المنشورات والصفحات الرئيسية.style.css: لتخزين بيانات القالب والأنماط العامة.functions.php: لربط مكتبة TailwindCSS و jQuery، ولإعداد الدعم الخاص بالشعار والقوائم المخصصة.header.php: يحتوي على الشعار، اسم الموقع والقائمة العلوية.footer.php: يحتوي على قائمة الفوتر والمعلومات المخصصة.single.php: لعرض المنشورات الفردية.page.php: لعرض الصفحات الثابتة.screenshot.png: لقطة شاشة مخصصة للقالب تظهر في لوحة تحكم ووردبريس.
تأكد من إضافة معلومات القالب في ملف style.css مثل التالي:
/*
Theme Name: Advanced Tailwind Theme
Theme URI: http://yourwebsite.com
Author: Your Name
Author URI: http://yourwebsite.com
Description: A custom WordPress theme built with HTML, Tailwind CSS, and jQuery
Version: 1.0
*/الخطوة 2: إعداد TailwindCSS و jQuery
سنقوم الآن بربط مكتبة TailwindCSS و jQuery بشكل صحيح داخل ملف functions.php. سنضيف أيضًا دعمًا للشعار المخصص والقوائم العلوية والفوتر.
<?php
function advanced_theme_enqueue_scripts() {
// ربط TailwindCSS
wp_enqueue_style('tailwindcss', 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');
// ربط jQuery
wp_enqueue_script('jquery');
// إضافة style.css للقالب
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'advanced_theme_enqueue_scripts');
// إعداد الشعار المخصص والقوائم
function advanced_theme_setup() {
// دعم الشعار المخصص
add_theme_support('custom-logo');
// دعم القوائم المخصصة
register_nav_menus(array(
'primary' => __('Primary Menu', 'advanced-tailwind-theme'),
'footer' => __('Footer Menu', 'advanced-tailwind-theme'),
));
}
add_action('after_setup_theme', 'advanced_theme_setup');
?>
الخطوة 3: تصميم الهيدر (header.php)
في ملف header.php، سنقوم بإنشاء تصميم جميل باستخدام TailwindCSS يعرض الشعار المخصص، اسم الموقع، وقائمة علوية مرنة:
<!DOCTYPE html>
<html <?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(); ?>>
<header class="bg-gray-900 text-white py-4">
<div class="container mx-auto flex justify-between items-center">
<!-- عرض الشعار المخصص -->
<?php if (has_custom_logo()) : ?>
<div class="logo">
<?php the_custom_logo(); ?>
</div>
<?php endif; ?>
<!-- اسم الموقع -->
<div class="site-name">
<h1 class="text-3xl font-bold">
<a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a>
</h1>
</div>
<!-- القائمة العلوية -->
<nav class="top-menu">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'flex space-x-6 text-white',
'container' => false,
));
?>
</nav>
</div>
</header>
الخطوة 4: عرض المنشورات كبطاقات (index.php)
سنقوم الآن بتعديل index.php لعرض المنشورات على شكل بطاقات باستخدام TailwindCSS. هذا التصميم سيجعل عرض المنشورات جذابًا ومرتبًا على هيئة شبكة:
<?php get_header(); ?>
<main class="container mx-auto mt-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post-card bg-white rounded-lg shadow-lg overflow-hidden">
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail('medium', ['class' => 'w-full h-48 object-cover']); ?>
</div>
<?php endif; ?>
<div class="p-4">
<h2 class="post-title text-xl font-bold">
<a href="<?php the_permalink(); ?>" class="hover:text-blue-500"><?php the_title(); ?></a>
</h2>
<p class="post-excerpt mt-3 text-gray-600"><?php the_excerpt(); ?></p>
</div>
</div>
<?php endwhile; endif; ?>
</div>
</main>
<?php get_footer(); ?>
الخطوة 5: إنشاء الفوتر (footer.php)
الفوتر هو عنصر مهم في أي موقع ووردبريس. في ملف footer.php، سنضيف قائمة مخصصة للفوتر مع بعض المعلومات الأساسية حول الموقع.
<footer class="bg-gray-900 text-white py-6 mt-10">
<div class="container mx-auto text-center">
<p class="text-sm text-gray-400">© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. جميع الحقوق محفوظة.</p>
<!-- قائمة الفوتر -->
<nav class="footer-menu mt-4">
<?php
wp_nav_menu(array(
'theme_location' => 'footer',
'menu_class' => 'flex justify-center space-x-4',
'container' => false,
));
?>
</nav>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
الخطوة 6: إضافة تفاعلات باستخدام jQuery
يمكنك إضافة تحسينات تفاعلية باستخدام jQuery. على سبيل المثال، سنضيف تأثير hover على عناصر القائمة لتغيير لون الخلفية عند مرور الفأرة:
<script>
jQuery(document).ready(function($) {
$('.menu-item').hover(
function() {
$(this).addClass('bg-gray-700');
},
function() {
$(this).removeClass('bg-gray-700');
}
);
});
</script>
الخطوة 7: تحسين القالب للأداء
لضمان أداء جيد للقالب، يمكنك تحسين تحميل الموارد باستخدام wp_enqueue_script وwp_enqueue_style لتحميل ملفات JavaScript و CSS في التذييل لتسريع وقت تحميل الصفحة. قم بتعديل functions.php لتحميل هذه الملفات في التذييل:
function advanced_theme_enqueue_scripts() {
// تحميل TailwindCSS
wp_enqueue_style('tailwindcss', 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css', array(), null, 'all');
// تحميل jQuery
wp_enqueue_script('jquery', false, array(), null, true);
// تحميل ملفات CSS الخاصة بالقالب
wp_enqueue_style('style', get_stylesheet_uri(), array(), null, 'all');
}
add_action('wp_enqueue_scripts', 'advanced_theme_enqueue_scripts');
الخلاصة
لقد أنشأنا قالب ووردبريس مخصص باستخدام HTML، TailwindCSS و jQuery، مع دعم الشعار المخصص، القوائم القابلة للتخصيص، وعرض المنشورات كبطاقات. باستخدام هذه الخطوات المتقدمة، يمكنك تحسين القالب وتخصيصه بشكل أكبر ليكون مناسبًا لموقعك الخاص، مع تفاعلات إضافية وتحسينات في الأداء.
اترك تعليقاً