نحن نعيش في عالم عالي الوضوح. ونظرًا لأن معظمنا يقضي أكثر من ثماني ساعات يوميًا في البحث عن أنواع مختلفة من الشاشات ، جودة الصور والشخصيات الموجودة في هذه الشاشات مهمة جدًا.
على الرغم من أنها كانت متاحة فقط لبضع سنوات ، إلا أن شاشات Retina هي طريق المستقبل. تجعل كثافة البكسل العالية في شاشات Retina الصور واضحة ونقية. ومن لا يحب الصور الجميلة الواضحة؟
أبريندير à إنشاء موقع على شبكة الإنترنت متوافق مع شاشات Retina هو أحد الأصول المهمة لأي مطور ويب. لسوء الحظ ، لا يوجد حل مثالي ومثالي لجعل موقع الويب الخاص بك سهل الاستخدام مع شاشات Retina-Ready.
لذلك ، بينما ننتظر أن يجد شخص ما الحل الأكثر اكتمالا ، نظرنا في بعض أفضل الخيارات الممكنة لتجهيز موقع الويب الخاص بك. بهذه الطريقة ، لن تضل الطريق عندما يحين الوقت الذي ستظهر فيه شبكية العين في جميع الأجهزة بشكل أو بآخر.
ولكن قبل أن تبدأ ، خذ الوقت الكافي لإلقاء نظرة على كيفية تثبيت وورد موضوع, كم عدد الإضافات التي يجب أن تثبيت على وورد.
ثم هيا بنا إلى العمل!
إنشاء ملفات صور متعددة
هيا لنبدأ مع الأساسيات. أسهل طريقة للحصول على دعم Retina Mode لموقعك على الويب هي إنشاء اختلافات صور متعددة بدقة مختلفة. هذا يعني أنه لكل نوع من أنواع الدقة (أي 1x) تحتاج إلى إنشاء نسخة عالية الدقة من ذلك المقطع (أي 2x).
بشكل أساسي ، يمكنك إنشاء إصدارات متعددة من نفس الملف واستخدام مكون إضافي مثل WP Retina 2x أو برنامج نصي مثل retina.js لإنشاء إصدارات "@ 2x" تلقائيًا من كل حجم صورة أو البحث عن "@ 2x" الصور وعرض الحجم المطابق لكل جهاز.
صحيح أن إنشاء إصدارات متعددة من نفس الصورة يمكن أن يستغرق وقتًا طويلاً. لسوء الحظ ، لا توجد طريقة سريعة تنشئ لك هذه الصور تلقائيًا. ومع ذلك، هناك العديد من مكونات Photoshop الإضافية التي تسمح لك بإصلاح صورك بسرعة.
الإضافات مثل " ريتينيز إيت وهي سلسلة من إجراءات Photoshop التي تتيح لك تحسين تصميماتك بسهولة لشاشات Retina. إذا كنت تستخدم إصدارًا أقدم من Photoshop (pre-CC) ، فيمكنك استخدام شيء مثل " أربعة الذي يقوم بشكل أساسي بكل ما تفعله أداة Photoshop Generator الحالية ، ولكن للإصدارات الأقدم من Photoshop.
رسومات ناقلات قابلة للتطوير (سفغ)
أسهل طريقة للمضي قدمًا في وضع Retina هي استخدام Scalable Vector Graphics (SVG) على موقع الويب الخاص بك. SVG هو تنسيق صورة متجه مستند إلى XML. كما يوحي الاسم ، فإن صورة SVG قابلة للتحجيم ، مما يعني أنه يمكن تمديد الصور إلى أقصى حد (أو أقل) حسب الحاجة ، بينما تظل واضحة ونقية. يمكن أن تكون طريقة سريعة وسهلة لتنفيذ وضع Retina دون بذل الكثير من الجهد.
اقرأ أيضا: كيفية توفير صور WebP بدلاً من PNG و JPG التقليدية
ومع ذلك ، هناك جانبان سلبيان لاستخدام SVG على WordPress. الأول هو أنه نظرًا لأنه تنسيق متجه ، فإن SVG غير مناسب لجميع الصور. لذا يمكنك استخدام SVG للشعارات والرموز ، ولكن ليس لملفات مثل الصور (وهو أمر مؤلم قليلاً إذا كنت ترغب في استخدام صور عالية الدقة لموقع الويب الخاص بك). ولكن إذا كنت تريد استخدام الرموز البسيطة أو الرسوم المتحركة أو الرسوم التوضيحية ، فمن المؤكد أن ملفات SVG يمكن أن تكون خيارًا لموقع متوافق مع شبكية العين.
الجانب السلبي الثاني لاستخدام SVG على WordPress هو أنه ليس تنسيقًا متوافقًا رسميًا مع WordPress بسبب مخاوف أمنية. نظرًا لأن ملف SVG هو في الأساس ملف XML ، فإن هذا يفتحه على جميع نقاط الضعف المعروفة المرتبطة بتنسيق ملف XML، مثل التحليل القسري ، وهجمات الكيانات الخارجية لـ XML (XEE) ، وهجمات XML Denial of Service Attack (XDoS) ، وما إلى ذلك.
ومع ذلك ، هناك طريقة لتمكين دعم SVG لموقع الويب الخاص بك والتي ستجعل ملفات SVG آمنة.
كيفية تمكين SVG بأمان على وورد
SVG آمن هو مكون إضافي يسمح لك بتمكين دعم ملف SVG بشكل آمن على موقع الويب الخاص بك. يضمن هذا المكون الإضافي أن ملفات SVG الخاصة بك قد تم تطهيرها لمنع أي ثغرات أمنية محتملة في XML تؤثر على موقع الويب الخاص بك.
ابتعد عن المكونات الإضافية التي تسمح لنوع MIME بالسماح بالتحميل من SVG إلى مكتبة وسائط WordPress لأنها خطيرة وقد تكون ضارة لموقعك على الويب. لذلك ، إذا كنت تميل حقًا إلى استخدام تنسيق SVG على WordPress ، فتأكد من القيام بذلك بأمان وعدم تنزيل أول مكون إضافي لـ SVG تراه.
دفع المزيد من التحويلات إلى مدونتك من خلال قراءة موقعنا أنواع المحتوى 15 التي تولد المزيد من الزوار إلى بلوق الخاص بك
بعض الإضافات لدمج التوافق الشبكية على وورد
هناك العديد من البرامج النصية والمكونات الإضافية للتوافق مع Retina التي يمكن أن تجعل حياتك أسهل بكثير عند محاولة إعداد موقع ويب متوافق مع Retina Mode. ومع ذلك ، كما ذكرنا سابقًا ، فإن معظم المكونات الإضافية والبرامج النصية المتاحة ، تستبدل صورك بصور عالية الدقة فقط لشاشات العرض عالية الدقة. إنها لا تمتد مثل SVG: ما زلت بحاجة إلى إنشاء صور متعددة بدقة مختلفة.
1 - شبكية العين
retina.js هي واحدة من أكثر البرامج النصية استخدامًا لتقديم صور عالية الدقة. هذا نص برمجي مفتوح المصدر يجعل من السهل تقديم صور عالية الدقة للأجهزة المزودة بشاشات Retina.
يتحقق البرنامج النصي من كل صورة على الصفحة لمعرفة ما إذا كانت هناك نسخة عالية الدقة من تلك الصورة على الخادم. في حالة وجود متغير عالي الدقة ، يقوم البرنامج النصي بتبديل الدقة القياسية بالصورة عالية الدقة. هذه إحدى أكثر الطرق شيوعًا لعرض الصور لشاشات Retina على موقع الويب الخاص بك.
انظر أيضا: GIF أو Emojis أو Memes: فكرة جيدة لمواقع WordPress؟
2 - كثيف
على غرار retina.js ، كثيف هو مكون إضافي لـ jQuery يوفر طريقة سهلة لعرض الصور بتنسيق نسبة البكسل. يستدعي البرنامج النصي الأسلوب $ .fn.dense () للتهيئة ، والذي يستهدف علامات "img" التي ستعمل كصور متوافقة مع وضع Retina حسب الحاجة.
لذلك ، فإنه يحل محل جميع الصور مع نسخة عالية الدقة منها ، تماما مثل البرنامج النصي retina.js.
3 - WP Retina 2x
يمكن تشبيه هذا الأخير بمولد صور شبكية سحري.
وب الشبكية شنومكس هو مكون إضافي يقوم بإنشاء ملفات الصور المطلوبة بواسطة أجهزة High-DPI ويعرضها للزائرين وفقًا لذلك. على عكس النصين السابقين ، فإنه يولد صورًا بدقة مختلفة من صورة أولية. لذلك إذا لم تكن سعيدًا جدًا بإنشاء صور مختلفة يدويًا بدقة مختلفة ، فهذا الخيار مناسب لك.
هذا كل شيء لهذا البرنامج التعليمي ، آمل أن يسمح لك بتحويل صورك إلى صورة Retina Ready.
اكتشف أيضًا بعض الإضافات المتميزة لبرنامج WordPress
يمكنك استخدام ملفات أخرى الإضافات وورد لإضفاء مظهر عصري ولتحسين التعامل مع مدونتك أو موقعك على الويب.
نحن نقدم لك هنا بعض الإضافات WordPress المتميزة التي سوف تساعدك على القيام بذلك.
1. قائمة مؤلف وورد بريس
كما يوحي الاسم ، فإن البرنامج المساعد يتوهم وورد قائمة المؤلفين يعرض قائمة المؤلفين لموقع الويب الخاص بك في عنصر واجهة مستخدم. لديه واجهة مستخدم بسيطة تسمح عرض معلومات أي مؤلف في الشريط الجانبي. كل ما عليك فعله هو سحب عنصر واجهة المستخدم إلى الشريط الجانبي وسيقوم البرنامج المساعد بالعمل.
من بين ميزاته الرئيسية: إمكانية لعرض مؤلفي المدونة بطريقة ممتعة لجذب زوار جدد ، والقدرة على عرض قائمة المؤلفين في الشريط الجانبي أو على الصفحة ، والقدرة على بدء المنافسة بين مؤلفي مدونتك ، وتخطيط استجابة ، ودعم الرموز المختصرة وأكثر من ذلك بكثير.
تحميل | عرض | استضافة المواقع
2. جدول المحتويات السهل
Ce وورد البرنامج المساعد يسمح لك سهل الاستخدام بإدراج جدول محتويات في منشوراتك وصفحاتك وأنواع المنشورات المخصصة. لها العديد من الميزات أهمها:
الإدارة التلقائية لجدول المحتويات ، ودعم العلامة ، دعم البرنامج المساعد رانكين ماث ، التوافق مع العديد من برامج تحرير الصفحات مثل Gutenberg ، Divi, Elementor, WPBakery Page Builder وغيرها ، إمكانية اختيار صفحات منشوراتك التي ترغب في عرضها ، الإدراج التلقائي لجدول المحتويات في صفحات معينة ، وغيرها الكثير.
هذا هو وورد البرنامج المساعد برنامج مجاني يحتوي على كل ما تحتاجه لعرض جدول المحتويات الخاص بك ، لذلك لا تتردد في اختياره باعتباره خيارك الأول.
تحميل | عرض | استضافة المواقع
3. ووكومرس المتقدم السائبة تحرير
هل تقوم بتحرير كتالوج المنتج الخاص بك بانتظام؟ سواء كان لديك 100 منتج أو 10.000 ، هذا وورد البرنامج المساعد قسط في رأيي المتواضع "يجب أن يكون": (هذه هي الكلمة الأولى التي تتبادر إلى الذهن).
لبضعة دولارات فقط ، البرنامج المساعد WooCommerce المتقدمة بالجملة تحرير سوف تجعل الحياة أسهل ويوفر لك الوقت الوحشي. لا يوجد أي تردد إنها قنبلة.
تحميل | عرض | استضافة المواقع
الموارد الموصى بها
تعرف على الموارد الأخرى الموصى بها لمساعدتك في بناء وإدارة موقع الويب الخاص بك.
- مصادر حركة المرور 5 تعلمون
- دراسة حالة: تسويق المحتوى، وكيفية التعلم من الأخطاء
- لماذا يحتاج المستقلون إلى جدول يومي
- جوانب 7 من شأنها أن تساعد في خلق لكم نجاح بلوق
وفي الختام
هنا ! هذا كل شيء في هذا البرنامج التعليمي ، وآمل أن يسمح لك بإنشاء صور Retina-Ready لموقع الويب الخاص بك. لا تتردد في شارك مع أصدقائك على الشبكات الاجتماعية المفضلة لديك.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك لإنشاء مواقع الإنترنت ، من خلال استشارة دليلنا على إنشاء مدونة وورد.
إذا كانت لديك اقتراحات أو ملاحظات ، فاتركها في قسمنا تعليقات.
...
