مرحبا صديقي، هل تعلم أن استخدام الصور بصيغة WebP يمكن أن يقلل من حجم صفحتك الإجمالي بنسبة تتراوح بين 50% إلى 60%؟ هذا التحسن الكبير ينعكس مباشرة على سرعة تحميل موقعك وتجربة المستخدم.
في كثير من الأحيان، نلجأ إلى استخدام إضافات (Plugins) مدفوعة أو معقدة لتحسين الصور، أو نقوم بتحويل الصور يدوياً عبر مواقع خارجية قبل رفعها، مما يستهلك الكثير من الوقت.
في هذا الدليل السريع، سنتعلم طريقة ذكية وبسيطة لتحويل جميع صورك (JPG, PNG, GIF) إلى صيغة WebP تلقائياً بمجرد رفعها إلى مكتبة الوسائط في ووردبريس، وذلك باستخدام كود برمجي بسيط (Code Snippet) ودون الحاجة لإضافات ضخمة.
في كثير من الأحيان، نلجأ إلى استخدام إضافات (Plugins) مدفوعة أو معقدة لتحسين الصور، أو نقوم بتحويل الصور يدوياً عبر مواقع خارجية قبل رفعها، مما يستهلك الكثير من الوقت.
في هذا الدليل السريع، سنتعلم طريقة ذكية وبسيطة لتحويل جميع صورك (JPG, PNG, GIF) إلى صيغة WebP تلقائياً بمجرد رفعها إلى مكتبة الوسائط في ووردبريس، وذلك باستخدام كود برمجي بسيط (Code Snippet) ودون الحاجة لإضافات ضخمة.
لماذا يجب عليك استخدام صيغة WebP؟
قبل أن نبدأ في الشرح العملي، دعنا نوضح الفائدة بالأرقام بناءً على التجربة:
- الحجم: صورة بصيغة JPG حجمها 150 كيلوبايت، عند تحويلها إلى WebP يصبح حجمها حوالي 111 كيلوبايت (توفير كبير في المساحة).
- السرعة: حجم أقل يعني سرعة تحميل أعلى للصفحة.
- الأتمتة: لن تحتاج لتحويل الصور يدوياً بعد اليوم.
المتطلبات الأساسية
لتطبيق هذه الطريقة، سنحتاج إلى أداة لإدارة الأكواد البرمجية في موقعك بشكل آمن.
لتطبيق هذه الطريقة، سنحتاج إلى أداة لإدارة الأكواد البرمجية في موقعك بشكل آمن.
- موقع يعمل بنظام ووردبريس.
- إضافة لإدارة الأكواد مثل WPCode أو Code Snippets (مجانية).
خطوات العمل:
الخطوة الأولى: تثبيت أداة إدارة الأكواد
لكي لا نعدل في ملفات القالب مباشرة (وهو أمر غير آمن للمبتدئين)، سنستخدم إضافة لإدارة الكود:
الخطوة الأولى: تثبيت أداة إدارة الأكواد
لكي لا نعدل في ملفات القالب مباشرة (وهو أمر غير آمن للمبتدئين)، سنستخدم إضافة لإدارة الكود:
- اذهب إلى لوحة تحكم ووردبريس.
- انتقل إلى إضافات (Plugins) > أضف جديداً (Add New).
- ابحث عن إضافة باسم: WPCode (أو Code Snippets).
- قم بتثبيت الإضافة وتفعيلها.
الخطوة الثانية: إضافة كود التحويل
الآن سنقوم بإضافة الكود المسؤول عن تحويل الصور:
الآن سنقوم بإضافة الكود المسؤول عن تحويل الصور:
- بعد تفعيل الإضافة، ستجد خياراً جديداً في القائمة الجانبية باسم Code Snippets.
- اضغط على Add Snippet.
- اختر خيار "Add Your Custom Code (New Snippet)".
- قم بتسمية الكود اسماً واضحاً، مثلاً: WebP Conversion.
- هام جداً: من خيار نوع الكود (Code Type)، اختر PHP Snippet.
الخطوة الثالثة: لصق الكود البرمجي
في مربع الكود، ستقوم بوضع الكود البرمجي الذي يقوم بالمهمة:
تنبيه: تأكد دائماً من نسخ الكود الصحيح والموثوق من المصادر المعتمدة.
الخطوة الرابعة: التفعيل والحفظ
في مربع الكود، ستقوم بوضع الكود البرمجي الذي يقوم بالمهمة:
PHP:
/**
* Convert Uploaded Images to WebP Format
*
* This snippet automatically converts JPEG, PNG, and GIF images
* to WebP format during the upload process.
*/
add_filter('wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp');
function wpturbo_handle_upload_convert_to_webp($upload) {
if (in_array($upload['type'], ['image/jpeg', 'image/png', 'image/gif'])) {
$file_path = $upload['file'];
if (extension_loaded('imagick') || extension_loaded('gd')) {
$image_editor = wp_get_image_editor($file_path);
if (!is_wp_error($image_editor)) {
$file_info = pathinfo($file_path);
$dirname = $file_info['dirname'];
$filename = $file_info['filename'];
$def_filename = wp_unique_filename($dirname, $filename . '.webp');
$new_file_path = $dirname . '/' . $def_filename;
$saved_image = $image_editor->save($new_file_path, 'image/webp');
if (!is_wp_error($saved_image) && file_exists($saved_image['path'])) {
// Update the upload data to use the WebP image
$upload['file'] = $saved_image['path'];
$upload['url'] = str_replace(basename($upload['url']), basename($saved_image['path']), $upload['url']);
$upload['type'] = 'image/webp';
// Optionally delete the original file
@unlink($file_path);
}
}
}
}
return $upload;
}تنبيه: تأكد دائماً من نسخ الكود الصحيح والموثوق من المصادر المعتمدة.
الخطوة الرابعة: التفعيل والحفظ
- بعد لصق الكود، تأكد من تحويل حالة الكود من "غير مفعل" (Inactive) إلى "مفعل" (Active).
- اضغط على زر Save Snippet.
كيفية التأكد من نجاح العملية
الآن، دعنا نختبر ما قمنا به:
الآن، دعنا نختبر ما قمنا به:
- اذهب إلى الوسائط (Media) > أضف جديداً (Add New).
- قم باختيار صورة من جهازك بصيغة JPG أو PNG.
- بعد رفع الصورة، اضغط على زر تحرير (Edit) للصورة.
- انظر إلى "نوع الملف" (File Type) و"اسم الملف".
النتيجة: ستجد أن الامتداد أصبح .webp وأن حجم الملف قد انخفض بشكل ملحوظ مقارنة بالملف الأصلي على جهازك.
باستخدام هذه الطريقة، أنت لا توفر مساحة الاستضافة فقط، بل تقدم لزوار موقعك تجربة تصفح أسرع بكثير. هذه الطريقة تغنيك عن استخدام إضافات ضغط الصور التي قد تثقل كاهل الموقع بخيارات لا تحتاجها، وتوفر حلاً بسيطاً ومباشراً لأصحاب المواقع الذين يبحثون عن الكفاءة.
جربها وشاركني النتائج في التعليقات.
دمتم بود وسنة سعيدة للجميع.
مودتي
باستخدام هذه الطريقة، أنت لا توفر مساحة الاستضافة فقط، بل تقدم لزوار موقعك تجربة تصفح أسرع بكثير. هذه الطريقة تغنيك عن استخدام إضافات ضغط الصور التي قد تثقل كاهل الموقع بخيارات لا تحتاجها، وتوفر حلاً بسيطاً ومباشراً لأصحاب المواقع الذين يبحثون عن الكفاءة.
جربها وشاركني النتائج في التعليقات.
دمتم بود وسنة سعيدة للجميع.
مودتي
