update README

This commit is contained in:
diyaa 2026-03-23 17:04:23 +01:00
parent b7c0d49d63
commit b05739b916

373
README.md
View File

@ -1,362 +1,87 @@
# Velora Player # Velora Player
إضافة ووردبريس توفّر مشغّل صوت حديث مع دعم: إضافة ووردبريس تضيف مشغّل صوت أنيق يمكن إدراجه داخل المحرر أو عبر `shortcode`.
- بلوك ## ماذا تفعل الإضافة؟
- Gutenberg
- shortcode
- ثيمات جاهزة
- لوحة إعدادات
- تتبّع بسيط لعدد مرات التشغيل
## نظرة سريعة - تعرض ملف صوتي واحد أو `playlist`
- تعمل داخل Gutenberg كبلوك
- تعمل أيضًا عبر `shortcode`
- تدعم صورة غلاف وعنوان للمسار
- تحتوي على ثيمات جاهزة
- تسجّل عدد مرات التشغيل بشكل بسيط
هذه الإضافة تبني مشغّل صوت مخصص يمكن استخدامه داخل محرر ووردبريس أو عبر ## طريقة الاستخدام
`shortcode`
في الصفحات والمقالات.
المشغّل يدعم صورة غلاف، عنوان للمسار الصوتي، شريط تقدّم، زر تشغيل وإيقاف، وثيمات عرض مختلفة.
كما تحتوي الإضافة على نظام تحليلات بسيط يحسب عدد مرات التشغيل لكل ملف صوتي.
## الميزات الرئيسية ### 1. من محرر ووردبريس
- بلوك مخصص داخل محرر ووردبريس باسم - افتح الصفحة أو المقالة
`Velora Player` - أضف بلوك `Velora Player`
- دعم العرض الديناميكي من السيرفر - اختر الملف الصوتي
- دعم الإدراج باستخدام - أضف العنوان وصورة الغلاف إذا رغبت
`[audio_player]` - اختر الثيم أو اترك الإعداد الافتراضي
- ثلاث ثيمات جاهزة: - انشر الصفحة
`modern-dark`
،
`glassmorphism`
،
`podcast-style`
- إعدادات عامة للتحكم في الألوان، الحواف، والثيم الافتراضي
- صفحة تحليلات داخل لوحة التحكم
- واجهة
`REST API`
لتسجيل التشغيلات
## كيف تعمل الإضافة ### 2. باستخدام shortcode
### 1. ملف التشغيل الرئيسي استخدم:
الملف:
`modern-audio-player.php`
وظيفته:
- تعريف معلومات الإضافة
- تعريف الثوابت الأساسية
- تحميل الكلاسات
- تنفيذ
`activation hook`
لإنشاء الإعدادات الافتراضية وجدول التحليلات
- تشغيل الكلاس الرئيسي
### 2. الكلاس الرئيسي
الملف:
`includes/class-plugin.php`
وظيفته:
- تهيئة الخدمات الأساسية:
- الإعدادات
- لوحة التحكم
- الـ shortcode
- REST API
- تحميل الترجمة
- تسجيل البلوك من خلال
`block.json`
- استخدام
`render_callback`
لعرض المشغّل من السيرفر
### 3. الإعدادات
الملف:
`includes/class-settings.php`
يحتوي على:
- القيم الافتراضية للإضافة
- قراءة الإعدادات من قاعدة البيانات
- تنظيف القيم قبل الحفظ
الإعدادات المتوفرة:
- الثيم الافتراضي
- الثيمات المفعّلة
- لون التمييز
- لون الخلفية
- لون النص
- درجة استدارة الحواف
- إظهار صورة الغلاف أو إخفاؤها
### 4. لوحة التحكم
الملف:
`admin/class-admin.php`
يوفّر صفحتين داخل لوحة تحكم ووردبريس:
- صفحة إعدادات
- صفحة تحليلات
ومن خلال صفحة الإعدادات يمكن التحكم في المظهر العام لكل المشغلات، بينما تعرض صفحة التحليلات عدد المسارات المسجّلة وإجمالي التشغيلات وأشهر الملفات الصوتية.
### 5. العرض
الملف:
`includes/class-renderer.php`
هذا الملف هو المسؤول عن بناء
HTML
الخاص بالمشغّل.
أهم ما يفعله:
- يجهّز الخصائص القادمة من البلوك أو الـ shortcode
- يطبّق الثيم الافتراضي إذا لزم الأمر
- يبني متغيرات
CSS
اعتمادًا على إعدادات الإضافة
- يضيف بيانات التحليلات داخل
`data-* attributes`
- يعرض نسخة معاينة داخل المحرر إذا لم يتم اختيار ملف صوتي بعد
- يحمّل ملفات الواجهة الأمامية عند العرض الديناميكي أو عند استخدام الـ shortcode
### 6. الـ shortcode
الملف:
`includes/class-shortcode.php`
يسجّل
`[audio_player]`
الخصائص المدعومة:
- `src`
- `title`
- `image`
- `theme`
مثال:
```text ```text
[audio_player src="https://example.com/audio.mp3" title="Episode 1" image="https://example.com/cover.jpg" theme="glassmorphism"] [audio_player src="https://example.com/audio.mp3" title="Episode 1" image="https://example.com/cover.jpg" theme="glassmorphism"]
``` ```
إذا لم يتم تمرير ### 3. استخدام Playlist داخل shortcode
`theme`
فسيتم استخدام الثيم الافتراضي من إعدادات الإضافة.
### 7. التحليلات يمكن تمرير `playlist` كسطور، وكل سطر بهذا الشكل:
الملف:
`includes/class-analytics.php`
وظيفته:
- إنشاء جدول خاص في قاعدة البيانات عند تفعيل الإضافة
- إنشاء
`hash`
ثابت لكل رابط صوتي
- تسجيل كل تشغيل في قاعدة البيانات
- إرجاع ملخص عام
- إرجاع أكثر الملفات تشغيلًا
اسم الجدول يكون بصيغة:
```text ```text
{wp_prefix}map_analytics العنوان|رابط الصوت|رابط الصورة
``` ```
كل سجل يحتوي على معلومات مثل: مثال:
- رابط الملف الصوتي
- عنوانه
- عدد مرات التشغيل
- آخر وقت تشغيل
### 8. واجهة REST API
الملف:
`includes/class-rest-api.php`
تسجّل المسار التالي:
```text ```text
/wp-json/map/v1/track-play [audio_player playlist="Episode 1|https://example.com/ep1.mp3|https://example.com/ep1.jpg
Episode 2|https://example.com/ep2.mp3|https://example.com/ep2.jpg" theme="podcast-style"]
``` ```
الطلب من نوع: إذا تم استخدام `playlist` فسيتم تشغيل المسارات من داخل نفس المشغّل.
`POST` ## الخيارات المتاحة في shortcode
ويستقبل: - `src` رابط الملف الصوتي
- `title` عنوان المسار
- `src` - `image` صورة الغلاف
- `title` - `playlist` قائمة تشغيل
- `hash` - `theme` الثيم
- `nonce`
قبل تسجيل التشغيل يتم التحقق من:
- وجود القيم المطلوبة
- صحة
`hash`
- صحة
`nonce`
### 9. جافاسكربت الواجهة
الملف:
`assets/js/player.js`
هذا الملف يدير سلوك المشغّل على الواجهة، مثل:
- تشغيل وإيقاف الصوت
- تحديث الوقت الحالي والمدة
- تحديث شريط التقدم
- الانتقال داخل الملف الصوتي
- إرسال أول تشغيل فقط إلى
`REST API`
لكل نسخة من المشغّل داخل الصفحة
### 10. بلوك المحرر
الملف:
`assets/js/block-editor.js`
هذا الملف يسجل البلوك داخل المحرر ويضيف:
- اختيار ملف صوتي من المكتبة
- إدخال عنوان المسار
- اختيار صورة غلاف
- تفعيل أو تعطيل الثيم العام
- اختيار ثيم مخصص
- معاينة مباشرة باستخدام
`ServerSideRender`
### 11. التنسيق
الملف:
`assets/css/player.css`
يحتوي على تنسيقات المشغّل، والثيمات المختلفة، والاستجابة للشاشات الصغيرة.
## طريقة الاستخدام
### استخدام البلوك
من داخل محرر ووردبريس:
1. أضف بلوك
`Velora Player`
2. اختر الملف الصوتي
3. أضف العنوان وصورة الغلاف
4. حدّد هل تريد استخدام الثيم العام أو ثيم مخصص
### استخدام shortcode
مثال بسيط:
```text
[audio_player src="https://example.com/audio.mp3" title="My Track"]
```
مثال كامل:
```text
[audio_player src="https://example.com/audio.mp3" title="Podcast Episode" image="https://example.com/image.jpg" theme="podcast-style"]
```
## الثيمات المتوفرة ## الثيمات المتوفرة
### modern-dark - `modern-dark`
- `glassmorphism`
- `podcast-style`
ثيم داكن عالي التباين مناسب للتصميمات الحديثة. ## الإعدادات
### glassmorphism من لوحة التحكم:
ثيم شفاف بتأثير زجاجي وخلفية ضبابية. `Velora Player > Design Settings`
### podcast-style يمكنك تعديل:
ثيم أقرب لعرض حلقات البودكاست والمحتوى التحريري. - الثيم الافتراضي
- الألوان
- الحواف والمسافات
- إظهار صورة الغلاف
## تدفق العمل داخل الإضافة ## التحليلات
بشكل مبسط، التسلسل كالتالي: من لوحة التحكم:
1. يتم تحميل الإضافة من الملف الرئيسي. `Velora Player > Analytics`
2. يتم تسجيل البلوك والـ shortcode وصفحات الإدارة.
3. عند إدراج المشغّل، يتم تمرير الخصائص إلى
`Renderer`
4. يتم إنشاء
HTML
وبيانات التتبع.
5. في الواجهة، يتولى
`player.js`
تشغيل الصوت وتحديث الواجهة.
6. عند أول تشغيل، يتم إرسال طلب إلى
`REST API`
7. تقوم طبقة التحليلات بتحديث قاعدة البيانات.
## بنية الملفات ستجد:
```text - إجمالي التشغيلات
modern-audio-player/ - أكثر الملفات تشغيلًا
├── modern-audio-player.php - ملخصًا بسيطًا لاستخدام المشغّل
├── uninstall.php
├── README.md
├── admin/
│ └── class-admin.php
├── includes/
│ ├── class-plugin.php
│ ├── class-settings.php
│ ├── class-renderer.php
│ ├── class-shortcode.php
│ ├── class-rest-api.php
│ └── class-analytics.php
├── blocks/
│ └── block.json
└── assets/
├── css/
│ ├── player.css
│ └── editor.css
└── js/
├── player.js
├── block-editor.js
├── player.asset.php
└── block-editor.asset.php
```
## ملاحظات مهمة
- الإضافة تعتمد على العرض الديناميكي، لذلك دالة
`save`
داخل البلوك ترجع
`null`
- ملفات الواجهة يتم تحميلها عبر
`block.json`
وميتاداتا الأصول
- عند استخدام الـ shortcode يتم تحميل ملفات الواجهة أيضًا من خلال
`Renderer::enqueue_block_assets()`
## إزالة الإضافة
يوجد ملف:
`uninstall.php`
ويمكن استخدامه لاحقًا لتنظيف بيانات الإضافة عند الحذف النهائي إذا أردت توسيع سلوك الإزالة.
## ملخص
هذه الإضافة مناسبة عندما تحتاج إلى:
- مشغّل صوت مخصص بدل المشغّل الافتراضي
- دعم للمحرر الحديث
- تخصيص مظهر عام على مستوى الموقع
- تتبّع بسيط لمرات التشغيل بدون نظام تحليلات معقّد