5 نصائح لإنشاء سمة ووردبريس جاهزة لشبكية العين

يكون موضوع WordPress جاهزًا لشبكية العين إذا كان يأخذ في الاعتبار كثافة البكسل العالية لشاشات عرض شبكية العين ويقدم صورًا ذات حجم مناسب لهذه الشاشات. هناك بعض الأشياء التي يجب مراعاتها عند تجهيز شبكية العين لموضوع WordPress: 1. استخدم صورًا عالية الدقة. تتمتع شاشات Retina بكثافة بكسل تبلغ ضعفين أو 3 أضعاف كثافة الشاشة القياسية ، لذلك يجب أن تكون صورك أكبر مرتين أو ثلاث مرات لتبدو حادة على هذه الأجهزة. 2. استخدم تصميمًا سريع الاستجابة. سيضمن التصميم سريع الاستجابة أن المظهر الخاص بك يبدو جيدًا على جميع الأجهزة ، بما في ذلك شاشات شبكية العين. 3. استخدم مكونًا إضافيًا مثل WP Retina 2x. سيقوم هذا المكون الإضافي تلقائيًا بإنشاء إصدارات عالية الدقة من صورك وخدمتها لأجهزة شبكية العين . 4. تحسين الصور الخاصة بك. تأكد من تحسين صورك لتسريع أوقات التحميل. 5. استخدم مكونًا إضافيًا للتخزين المؤقت. سيساعد المكوِّن الإضافي للتخزين المؤقت في تسريع تحميل صفحاتك على جميع الأجهزة ، بما في ذلك شاشات شبكية العين. باتباع هذه النصائح ، يمكنك التأكد من أن قالب WordPress الخاص بك جاهز لشبكية العين.

نظرًا لأن دعم شبكية العين سيكون متاحًا لموضوعات WordPress الخاصة بنا في الأسابيع المقبلة ، فقد أردت مشاركة كيفية إنشائها معك. سيؤدي تجديد المظهر الخاص بك إلى مضاعفة حجم أجهزة Retina (بنفس الأبعاد) عن طريق عرض الصور ضعف الحجم (ولكن بنفس الأبعاد). لعرض صورة 100 × 200 ، يجب أن يقوم المتصفح بضغطها حتى 100 × 400. لا يمكن استبدال صور خلفية CSS و Sprite بـ Retina.js لأنها لا تستخدم علامات HTML. يجب تحديث الرموز والأزرار حتى يبدو موقع الويب الخاص بك هشًا وسريع الاستجابة على شاشة شبكية العين. تعد وثائق Font Awesome ممتازة ، وهي واحدة من أقوى مكتبات رموز الخطوط. يتم تثبيت غالبية رموز الخطوط ببساطة عن طريق تحميل الملفات وإضافة إعلان @ Font-face.

يمكنك أيضًا إضافة رموز خطوط رائعة مثل شعار Facebook إلى هذا القالب ، وهو قابل للتحجيم والتخصيص. إن أبسط طريقة لإنشاء أيقونة مفضلة جاهزة لشبكية العين هي استخدام نص جافا بسيط. ما عليك سوى إنشاء مستند Photoshop بحجم 32 × 32 وإضافة صورتك وحفظها بتنسيق png24 (بشفافية) باستخدام Photoshop.

كيف أجعل الصورة جاهزة لشبكية العين؟

من أجل إنشاء صورة شبكية بالفعل ، ستحتاج إلى إنشاء نسخة من الصورة تبلغ ضعف حجم الصورة الأصلية. يمكن القيام بذلك في أي برنامج لتحرير الصور ، مثل Photoshop. بمجرد إنشاء النسخة الأكبر من الصورة ، ستحتاج إلى حفظها كملف منفصل. عندما تقوم بتحميل الصورة إلى موقع الويب الخاص بك ، ستحتاج إلى استخدام الكود لإخبار المتصفح بتحميل النسخة الأكبر من الصورة.

يمكن تمكين FooGallery في علامة تبويب الصور لعرض صور جاهزة لشبكية العين. عند تحديد أحجام Retina والنقر فوق Apply Defaults على كافة المعارض ، سيتم إنشاء الصور الجاهزة للعرض بتنسيق Retina لجميع المعارض الموجودة. إذا قمت بإضافة معرض جديد ، فسيقوم تلقائيًا بإنشاء صور بحجم شبكية العين. عندما يتم عرض صورة FooGallery على شاشة عادية أو شاشة Retina ، يتم تحسين HTML للصورة تلقائيًا لعرضها بحجم 300 * 300 بكسل. إذا قمت بتمكين أحجام صور Retina لمعارضك ، فتأكد من أن أي صور ستعرضها في FooGallery كبيرة بما يكفي لعرضها على جهاز Retina. على سبيل المثال ، إذا كنت تريد عرض صورة 600600 بوضوح على أجهزة شبكية العين ثنائية الأبعاد ، فستحتاج إلى تحميل صور المعرض بدقة 12001،200. عند تمكين إعدادات شبكية العين 2x و 3x ، ستتمكن من إنشاء ثلاثة إصدارات من إبهامك.

جعل موقع الويب الخاص بك جاهزًا لشبكية العين

عند عرض موقع ويب جاهز لشبكية العين ، يتم عرض الصورة بدقة أعلى مما هي عليه في شاشة عرض قياسية على جهاز عالي الدقة. تسمح هذه الدقة العالية بعرض أكثر تفصيلاً للصورة ، مما يسهل فهمها ورؤيتها.
إذا كنت تنوي استخدام برنامج جاهز لشبكية العين لموقعك على الويب ، فمن المستحسن استخدام Scalable Vector Graphics (SVG) قدر الإمكان. يعتمد تنسيق الرسوم هذا على XML ويحتوي على صور عالية الجودة. لعرض صور SVG ، يمكن الوصول إلى ملفات XML أو الهواتف المحمولة التي تعرض هذه الملفات عبر متصفحات الإنترنت.
يوصى باستخدام صورة جاهزة لشبكية العين قبل استخدامها. يمكنك تحقيق ذلك باستخدام صورة 1920 × 1920 بكسل ، وهو ما يُعرف بـ "2x". نظرًا لأن الصورة ستبقى على موقع الويب بعرض 640 بكسل ، فإنك تزيد من كثافة البكسل باستخدام صورة ضعف الحجم.
إذا كنت تستخدم صورة غير جاهزة لشبكية العين ، فقم بتحسينها للعرض على شبكية العين. يمكن تحقيق ذلك باستخدام صورة بدقة 4x ، تُعرف أيضًا باسم "دقة 4x". على الرغم من حجم الرسم الذي يبلغ 1024 بكسل ، إلا أنه سيظل يظهر على موقعك لأنه أكبر بأربعة أضعاف.

ما هو موضوع ووردبريس الشبكي الجاهز؟

قالب WordPress الجاهز لشبكية العين هو سمة تم تصميمها للعمل مع الأجهزة التي تحتوي على شاشة شبكية عالية الدقة . هذا يعني أن المظهر سيبدو حادًا وواضحًا على أجهزة مثل iPhone و iPad. أصبحت السمات الجاهزة لشبكية العين أكثر شيوعًا مع تزايد عدد الأشخاص الذين يستخدمون أجهزة شبكية العين.

يرجى العثور على القائمة أدناه إذا كنت تبحث عن ثيمات WordPress سريعة الاستجابة أو جاهزة للشبكية. هذه السمات ، بشكل عام ، سهلة الاستخدام وتبدو جيدة على سطح المكتب والأجهزة اللوحية والهواتف الذكية ، ولا تتطلب الكثير من الجهد من جانبك. يمكنك استخدام أي منشئ صفحات تريد إنشاء أي تخطيط تريده معهم. يأتي Inovado ، وهو موضوع WordPress جاهز لشبكية العين ، مع عدد كبير من خيارات التخصيص القوية. موضوع WordPress ممتاز آخر هو Superhero ، وهو مصمم لرجال الأعمال والشركات الناشئة. سمة WordPress هذه جاهزة ومتجاوبة لشبكية العين ، بفضل نظام الشبكة النظيفة. يمكن استخدام Wiz ، وهو موضوع متعدد الاستخدامات ، من قبل الشركات من جميع الأحجام والشركات الناشئة والمؤسسات الصغيرة.

أداة تخصيص السمات تجعل من السهل إعداد وتخصيص Pin Maker - Responsive WordPress Blog Theme . يحتوي موضوع WordPress هذا على محتوى HTML5 / CSS3 ويستند إلى Twitter Bootstrap. إنه جاهز لشبكية العين ومتوافق مع المستعرضات ومستجيب تمامًا. يمكن استخدام The Prothoma - Business WordPress Theme من قبل مجموعة متنوعة من الشركات ، بما في ذلك الوكالات والشركات الرقمية. Pin Auto Spa عبارة عن سمة WordPress تفصيلية تلقائيًا. يعد موضوع WordPress الجاهز لشبكية العين مثاليًا لشركات غسيل السيارات وإصلاح السيارات وورش الميكانيكا ، فضلاً عن خدمات السيارات. يعتبر Legatus خيارًا مثاليًا للمدونات والمجلات عبر الإنترنت والصحف عبر الإنترنت والمنشورات الأخرى لأنه يوفر تصميمًا سريع الاستجابة.

تمكين صور شبكية العين لموقع واضح

انقر فوق علامة التبويب "المظهر" بعد تثبيت المكون الإضافي في لوحة إدارة WordPress. يوجد خيار " Retina Images " في قسم "WP Retina 2x" من الصفحة. لتمكين صور شبكية العين ، انتقل إلى الزر "تمكين".

كيف أضيف صورة شبكية العين إلى ووردبريس؟

تعد إضافة صورة شبكية إلى WordPress عملية من خطوتين: أولاً ، تحتاج إلى إضافة صورة عالية الدقة إلى مكتبة الوسائط الخاصة بك ، وبعد ذلك تحتاج إلى إضافة سطر من التعليمات البرمجية إلى ملف function.php الخاص بالسمة. لإضافة صورة عالية الدقة إلى مكتبة الوسائط الخاصة بك ، ما عليك سوى تحميل نسخة من صورتك تبلغ ضعف حجم صورتك العادية. على سبيل المثال ، إذا كانت صورتك العادية 400 × 300 بكسل ، فيجب أن تكون صورة شبكية العين 800 × 600 بكسل. بمجرد حصولك على صورة شبكية العين الخاصة بك في مكتبة الوسائط الخاصة بك ، ستحتاج إلى إضافة سطر من التعليمات البرمجية إلى ملف function.php الخاص بالقالب. سيخبر سطر الكود هذا WordPress بخدمة صورة الشبكية لأجهزة شبكية العين: add_filter ('wp_get_attachment_image_src'، 'retina_support_src')؛ الوظيفة retina_support_src ($ image) {$ image [0] = str_replace ('.jpg'، '@ 2x.jpg'، $ image [0])؛ إرجاع صورة $؛ } مع وضع هذا الرمز ، سيعرض WordPress تلقائيًا صورة شبكية العين على أي جهاز شبكية يزور موقعك.

ووردبريس صور شبكية العين

بافتراض أنك تريد نصائح حول كيفية إنشاء صور شبكية لـ WordPress: عند إنشاء صور لموقع WordPress الخاص بك ، تأكد من إنشاء إصدارات أكبر بمرتين من صورك القياسية. على سبيل المثال ، إذا كانت صورتك القياسية بعرض 400 بكسل ، فقم بإنشاء صورة شبكية بعرض 800 بكسل. قم بتسمية صورك وفقًا لما هي عليه ، ثم قم بإلحاق "@ 2x" باسم ملف صورة شبكية العين. لذلك ، إذا كانت صورتك القياسية تحمل اسم "logo.jpg" ، فسيتم تسمية صورة شبكية العين "[email protected]". تأكد من ضغط صور شبكية العين حتى لا تبطئ موقع الويب الخاص بك. هذا هو! باتباع هذه النصائح البسيطة ، يمكنك التأكد من أن صورك تبدو رائعة على جميع الأجهزة ، بما في ذلك أجهزة شبكية العين.

إذا لم تقم بتنفيذ صور Retina ، فسيكون موقع الويب الخاص بك أبطأ لجميع المستخدمين. مساحة البكسل هي نفسها الموجودة في الصورة القياسية ، مما ينتج عنه صور أكثر وضوحًا وإشراقًا. عندما يعرض جهاز حديث غير تابع لشركة Apple الصورة @ 2x ، فإنه يتعامل معها كصورة أكبر. يتم إنشاء صور Retina باستخدام WP Retina 2X ، وهو منشئ صور Retina الأكثر استخدامًا لمواقع WordPress. توفر الخدمة أيضًا صورًا منتظمة للمستخدمين الذين لا يملكون شاشات Retina. كيف تعرف ما إذا كانت الصورة متاحة على شاشة مخصصة إذا لم يكن لديك جهاز Apple لاختبارها؟ يمكن أن تساعدك أدوات تطوير Chrome في القيام بذلك.

رسومات موجهة قابلة للتطوير - أفضل طريقة لإنشاء صور شبكية لموقع الويب الخاص بك.

صورة شبكية WordPress هي صورة عالية الدقة يمكن رؤيتها على شاشة 4K أو كمبيوتر محمول يعمل بنظام Windows 10 أو كمبيوتر لوحي. يمكنك بسهولة إنشاء صورة شبكية لموقع الويب الخاص بك باستخدام Scalable Vector Graphics (SVG) كلما أمكن ذلك. عندما يتعلق الأمر بتحسين الصور لشاشات شبكية العين ، يمكنك تكبيرها باستخدام صورة عرض 1920 × 130 بكسل تم تحسينها.