كيفية تحسين وتحسين الصور لـ WordPress

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

لمجرد أنه من السهل تحميل الصور على موقعك ، فهذا لا يعني أنه يجب عليك القيام بذلك دون أي تحضير. في الواقع ، يمكن للصور غير المحسّنة أن تؤذي موقعك بعدة طرق ؛ من التأثير على الطريقة التي يفكر بها الزوار عنك إلى سرعة موقعك على الويب وتصنيفات تحسين محركات البحث. إذا لم تفكر في ذلك بعد ، فنحن هنا لنوضح لك عدة طرق لتحسين الصور في WordPress.

كيفية تحسين الصور لـ WordPress بحيث تقوم بتسريع موقعك وتحسين مُحسّنات محرّكات البحث

لماذا يجب عليك تحسين الصور لـ WordPress؟ إذا بذلت جهدًا ، فيمكنك توقع ما يلي:

• موقع أسرع
• تحسين محركات البحث
• نسخ احتياطية أصغر
• استخدام أقل لعرض النطاق الترددي
• مستخدمين أكثر سعادة

يجب أن تعلم أيضًا أن هناك مراحل مختلفة يمكنك من خلالها تحسين الصور. يمكنك الاهتمام بالصور حتى قبل تحميلها على مدونة أو يمكنك القيام بذلك بعد التحميل.

بسرعة اختبار الصور على موقعك

قبل أن تبدأ العمل على التحسين ، يمكنك التحقق بسرعة من موقعك لمعرفة السرعة والأداء. باستخدام أي من الأدوات من القائمة ، ستتعرف بسرعة على شكل الصور الموجودة على موقعك.

نود استخدام GTmetrix الذي سيعرض لك حتى الصور الدقيقة التي تسبب تحميل موقعك بشكل أبطأ.

تحسين الصور للووردبريس قبل التحميل

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

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

تغيير حجم الصور

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

تغيير حجم الصور سريع وسهل. هناك العديد من الأدوات المجانية مثل Microsoft Paint التي ستساعدك في ذلك. يمكنك أيضًا العثور على أدوات مجانية عبر الإنترنت لتغيير حجم الصور مثل Easy Resize.

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

غيّر الجودة

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

أيضًا ، إذا اخترت حفظ صورة بتنسيق JPEG ، فسيطلب منك Photoshop اختيار مستوى الجودة. في هذه الحالة ، سيؤدي خفض الجودة من 12 إلى 8 فقط إلى تقليل حجم الصورة بشكل كبير ، بينما لن يكون الاختلاف في الجودة كبيرًا.

إذا كنت لا تزال لا تستخدم أي برنامج لتغيير جودة صورك ، يمكنك تجربة أداة Tiny PNG المجانية عبر الإنترنت. ما عليك سوى تحميل صورة ومعرفة الفرق الذي يمكن أن تحدثه.

اختر التنسيق الصحيح

حتى بعد التغييرات في الحجم والجودة ، يجب أن تفكر في تغيير التنسيق. بالنسبة للمبتدئين ، فقط عن طريق تحديد التنسيق الصحيح ، يمكنك خلع بضعة كيلوبايت من الصورة ، إن لم يكن أكثر.

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

في كثير من الحالات ، لن تحدث إعادة صياغة الصور اختلافات كبيرة في الجودة ، بينما يمكنك توقع اختلاف في الحجم. في المرة القادمة قبل تحميل صور PNG ، أعطها لقطة وحاول حفظها بتنسيق JPEG لترى الفرق. للحصول على شرح أكثر تفصيلاً ، يرجى التحقق من الفرق بين PNG و JPEG و GIF و SVG.

اعتني بأسماء الملفات

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

نقترح عليك تسمية الصور دون استخدام مسافات. لا تنس تضمين الكلمات الرئيسية إذا كنت تريد ترتيب الصفحة والصورة. على سبيل المثال ، إذا كنت تحمّل صورة فيراري كاليفورنيا ، فيجب أن يكون اسم الملف "ferrari-california.jpg." إذا كنت تستخدم مكونًا إضافيًا لتحسين محركات البحث لـ WordPress ، فأنت تعلم بالفعل أنه يتحقق من علامات بديل للكلمات الرئيسية. نعم ، من المهم حقًا أن يكون لديك اسم صورة مناسب.

تحسين الصور لـ WordPress بعد الرفع

بعد تجهيز الصور على جهاز الكمبيوتر الخاص بك ، يمكنك متابعة التحميل. نأمل أن تكون صورك بالحجم والجودة المناسبين. لقد تأكدت من صحة التنسيق واسم الملف. بعد التحميل ، سيطلب منك WordPress معلومات إضافية. لا تخطي المعلومات الوصفية ؛ املأ التفاصيل حول صورك بحيث يمكنك تنظيمها بسهولة والاستعداد لكبار المسئولين الاقتصاديين.

العنوان والوصف والنص البديل والتعليق

أثناء الاهتمام بالجوانب الفنية ، يجب ألا تنسى تحسين محركات البحث. أضف دائمًا العنوان والوصف إلى الوسائط الخاصة بك. سيساعدك هذا في إدارة وسائط WordPress ، وسيعمل أيضًا على تحسين مُحسّنات محرّكات البحث. أيضًا ، لا تنسَ علامة alt التي سيتم عرضها للزوار الذين لا يمكنهم رؤية صورتك بشكل صحيح. لن يكون هذا مفيدًا للمستخدمين فحسب ، بل سيساعدك أيضًا في تحسين محركات البحث. سيتم تصنيف صفحتك بشكل أفضل ، وسيتمكن المستخدمون من العثور على صورك الجديدة بشكل أسهل.

على الرغم من أنك لن تحتاج إلى تسميات توضيحية طوال الوقت ، تأكد من إضافة تسميات توضيحية للصور التي تحتاج إلى توضيحات إضافية (على سبيل المثال ، لقطات الشاشة).

تحرير الصور باستخدام WordPress

إذا أدركت أن الصورة لا تزال بحاجة إلى مزيد من التحرير ، فيجب أن تعلم أن WordPress يسمح لك بالقيام بذلك حتى بعد تحميل الملف. قم بتغيير التدوير والقص وقياس الصور التي قمت بتحميلها بالفعل. يمكنك حتى تحرير صورة مصغرة فقط أو جميع الأحجام الأخرى. يعد محرر WordPress الأصلي بسيطًا جدًا ، ولكن يمكنك توفيره من وقت لآخر.

إعادة إنشاء جميع الصور المصغرة

ستساعدك معظم التقنيات السابقة في ملفات الصور الجديدة التي لا تزال على وشك تحميلها. ولكن ماذا لو كان لديك مئات إن لم يكن الآلاف من الملفات التي تم تحميلها بالفعل إلى موقع WordPress الخاص بك؟ لا تقلق لا يزال بإمكانك تحسين تلك الصور وتغيير أحجامها.

للحصول على حل سريع ، قد تكون مهتمًا بالمكوِّن الإضافي Regenerate Thumbnails المجاني الذي يستخدمه أكثر من مليون مستخدم. إذا كنت تريد مزيدًا من التحكم في الصور ، فيجب عليك التحقق من بعض أفضل مكونات WordPress الإضافية لتحسين الصورة والتي سنعرضها لك في السطور التالية من هذه المقالة.

استخدم ملحقات WordPress

بالطبع ، هناك العشرات من مكونات WordPress الإضافية التي يمكن أن تساعدك في تحسين الصور على موقعك. قم بالتمرير لأسفل لرؤية أفضل ملحقات WordPress لتحسين الصور.

تحميل الصور الكسولة عند الضرورة

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

Lazy load هي تقنية تقوم بتحميل الصور فقط عندما يحتاجها المستخدمون (قم بالتمرير إليها). على سبيل المثال ، إذا قمت بتحميل عشرين صورة عالية الجودة في مقال واحد ، فسيؤدي ذلك إلى إبطاء موقعك بشكل كبير. ولكن إذا قمت بتحميل الصور كسولًا ، فستكون المقالة سريعة جدًا ولن يتم تحميل الصور إلا عند الحاجة - في الوقت الحالي عندما يصل إليها المستخدم.

لديك صور متجاوبة

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

تحسين الصور لوسائل التواصل الاجتماعي

إذا كنت تريد التأكد من أن صورك تبدو جيدة على وسائل التواصل الاجتماعي ، فسيتعين عليك اتخاذ خطوة إضافية وتحسين العلامات الوصفية وترميز المخطط.

إذا كنت تستخدم مكونًا إضافيًا لتحسين محركات البحث مثل Yoast ، فلا تنس التحقق من الإعدادات. على سبيل المثال ، سيتيح لك Yoast إعداد بعض الأشياء المتعلقة بوسائل التواصل الاجتماعي. لذلك ، انتقل إلى SEO -> Social وأدخل المعلومات على Facebook و Twitter و Google+ و Pinterest.

إذا كنت تريد المزيد ، وتريد تحسين الصور لمواقع التواصل الاجتماعي الإضافية ، تحقق من WPSSO - العلامات الوصفية الدقيقة + ترميز المخطط لتحسين المشاركة الاجتماعية والمكوِّن الإضافي لتحسين محركات البحث.

قم بتغيير طريقة WordPress لضغط صور JPEG

إذا كنت تقوم بتحميل مجموعة من صور JPEG على موقع WordPress الخاص بك ، فربما لاحظت أنها تفقد جودتها الأصلية. إذا كنت قد تساءلت عما إذا كان WordPress هو المسؤول ، فستحصل الآن على إجابتك - نعم ، إنها كذلك!

بمجرد تحميل صورة بتنسيق JPEG ، يقوم WordPress تلقائيًا بتغيير الضغط ويقرر أنك تريد أن تفقد الصورة جودتها. لكي تكون أكثر تحديدًا ، يستخدم WP ضغط 90٪ على ملفات JPGE الخاصة بك. هذا رائع إذا كانت صورك موجودة فقط لاستخدامها كصور مصغرة للنشر أو لعرضها في منشور ، ولكن إذا كنت تقوم بتحميل صورك ، فأنت تريد أن تكون بأفضل صورة ممكنة ، أليس كذلك؟

لحسن الحظ ، ستحتاج فقط إلى سطر واحد من التعليمات البرمجية لتغيير هذا.

وقف ضغط صور JPEG:

إذا كنت لا تريد ضغط صور JPEG الخاصة بك ، فما عليك سوى نسخ الكود التالي ولصقه في ملف function.php الخاص بك:

 add_filter ('jpeg_quality'، function ($ arg) {return 100؛})؛

لا تنس حفظ التغييرات وأنت على استعداد لتحميل صور جديدة.

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

ضغط صور JPEG أكثر:

كلما انخفض الرقم ، سيتم ضغط المزيد من الصور. على سبيل المثال ، لضغط ملفات JPEG هذه أكثر ، ستحتاج إلى هذا الرمز:

 add_filter ('jpeg_quality'، function ($ arg) {return 80؛})؛

لا تنسى مستوى الضغط الافتراضي هو 90.

أكثر ملحقات تحسين الصور شيوعًا في WordPress

في بداية هذه المقالة ، تحدثنا عن كيفية تحسين الصور لـ WordPress بحيث تقوم بتسريع موقعك وتحسين مُحسّنات محرّكات البحث. كما ترى ، هناك عدة طرق مختلفة يمكنك استخدامها. من المهم الاهتمام بالصور حتى قبل تحميلها على مدونتك. ولكن عندما تكون الصور موجودة بالفعل على الموقع ، فقد يصبح من المستحيل إعادة تعديل كل صورة على حدة ثم تحميلها مرة أخرى.

لا تقلق لا أحد يتوقع منك أن تفعل ذلك في المقام الأول. ابق معنا في الدقائق التالية لأننا على وشك أن نعرض لك أكثر ملحقات تحسين الصور شيوعًا في WordPress.

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

ستساعدك المكونات الإضافية التالية في ضغط الصور على أي موقع WordPress لديك. سوف يجعلون الموقع يتم تحميله بشكل أسرع ويساعدونك في النهاية على تحسين مُحسّنات محرّكات البحث.

البرنامج المساعد WP Smush

السعر: مجاني

مع أكثر من 700000 تثبيت نشط ، يجب أن يكون WP Smush أحد أفضل المكونات الإضافية لتحسين الصور لـ WordPress. يمكنه تحسين الصور بسرعة باستخدام تقنيات ضغط مختلفة. إن الشيء العظيم في ضغط الصور باستخدام WP Smush هو أن الصور لن تفقد جودتها. لا تصدقنا؟ اختبر البرنامج المساعد.

عندما تحدثنا عن إعداد الصور لـ WordPress ، ذكرنا أن تغيير الحجم جزء مهم من عملية التحسين. باستخدام هذا البرنامج المساعد ، لن تقلق بشأن ذلك لأن WP Smush يتيح لك تعيين الأبعاد القصوى. بعد القيام بذلك ، سيتم تصغير جميع الصور الكبيرة تلقائيًا قبل إضافتها إلى المكتبة.

يمكن أن يعمل هذا المكون الإضافي الرائع مع ملفات JPEG و GIF و PNG. إنه يعمل مع جميع الدلائل الخاصة بك ، ويهتم تلقائيًا بالمرفقات ، بل ويعمل على مواقع متعددة. يمكنك العمل يدويًا على كل صورة أو تحرير خمسين منها بشكل مجمّع. إذا كنت تريد نتائج أفضل والمزيد من الخيارات ، تحقق من WP Smush PRO.

البرنامج المساعد EWWW Image Optimizer

السعر: مجاني

خلف الاسم المضحك ، هناك واحدة من أكثر المكونات الإضافية لتحسين الصور شيوعًا في WordPress. تمامًا مثل الصورة المذكورة سابقًا ، يمكن لـ EWWW Image Optimizer ضغط صورك دون التأثير على جودتها. عندما تفكر في أن المكون الإضافي يمكنه تسريع موقعك في ثوانٍ ، فستكون بالفعل في طريقك لتنزيله. بمجرد القيام بذلك ، ستتمكن من تحسين الصور بشكل مجمّع ، وستحصل المعارض مثل GRAND FlaGallery و NextCellent و NextGEN على صفحاتها الخاصة بالتحسين الجماعي.

سيتم تحسين جميع الصور التي تستخدم فئة WP_Image_Editor في WordPress تلقائيًا ، بينما يمكنك عمل السحر يدويًا على جميع الصور الأخرى. نحب أن تحصل على تحديد المجلدات التي تريد تحسينها. لمزيد من التفاصيل حول هذا ، وعن المكونات الإضافية التي تستخدم الفصل ، يرجى فتح صفحة EWWW Image Optimizer الرسمية في مستودع WordPress.

ضغط البرنامج المساعد لصور JPEG و PNG

السعر: مجاني

إذا كان الباندا الصغير اللطيف الذي يحمل شعار WordPress لا يجعلك ترغب في معرفة المزيد عن هذا البرنامج المساعد ، فنحن لا نعرف ما الذي سيحدث. وإذا بدت الباندا مألوفة ، فهذا لأنها هي نفسها التي تساعدك على ضغط الصور على موقع TinyPNG. نعم ، يبدو أن الحيوان أكثر تنوعًا مما كنا نظن في الأصل. لكن دعنا نركز على المكون الإضافي.

إذا ذهبت مع هذا البرنامج المساعد ، فسيقوم Panda تلقائيًا بتحسين صورك. في كل مرة تقوم فيها بتحميل ملف جديد ، سيتولى المكون الإضافي المهمة ويقوم بعمله. ومع ذلك ، يمكنك تحسين الصور الفردية أو القيام بذلك بشكل مجمّع بمجرد الانتقال إلى مكتبة الوسائط.

يدعم ضغط صور JPEG و PNG ملفات PNG المتحركة ، ويعمل بشكل مثالي على مواقع متعددة ، وهو متوافق مع WooComerce ولن يواجه مشاكل مع WP Offload S3.

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

لا توجد حدود لحجم الملف ، يمكنك تعيين أداة لوحة القيادة ، بل إنها تعمل مع تطبيق WordPress للجوال. نظرًا لكل ذلك ، تحتوي صور Compress JPEG & PNG على أكثر من 100،000 عملية تثبيت نشطة وتستحق مكانًا في قائمة أفضل المكونات الإضافية لتحسين الصور لبرنامج WordPress.

البرنامج المساعد Imsanity

السعر: مجاني

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

يمكن لـ Imsanity قياس الصور تلقائيًا ، ويسمح لك بتعيين الأبعاد القصوى ، كما أنه يتميز بخيار تغيير الحجم بالجملة. هذا مهم إذا كان لديك بالفعل مئات الصور على مدونتك التي تحتاج إلى تحسين.

يعد هذا المكون الإضافي المجاني خيارًا رائعًا إذا كنت لا ترغب في مواجهة إعدادات المكون الإضافي كثيرًا. كل ما يتطلبه الأمر هو تثبيت Imsanity وتنشيطه ، وتعيين بعض الخيارات ، ويمكنك نسيانها ؛ ستدير طريقها الخاص نحو تحسين الصورة.

لقد أحببنا الخيار الذي يسمح لك بتحويل صور BMP إلى JPG. فقط في حالة وجود الكثير من ملفات BMP التي قمت بتحميلها عن طريق الخطأ منذ بعض الوقت ، فسيكون هذا منقذًا.

البرنامج المساعد ShortPixel Image Optimizer

السعر: مجاني

مع أكثر من 30000 تثبيت نشط ، لا تزال ShortPixel Image واحدة من أكثر المكونات الإضافية لتحسين الصور شيوعًا في WordPress. المكوّن الإضافي مليء بالميزات ، وسيكون ضروريًا للمواقع التي تحتوي على الكثير من الصور لتحسينها.

لن يقوم برنامج ShortPixel Image Optimizer بتحسين مستندات JPG و PNG و GIF و PDF لك فحسب ، بل سيسمح لك أيضًا بتحويل أي صورة بتنسيق JPEG أو PNG أو GIF إلى WebP . يعمل المكون الإضافي جيدًا مع المكونات الإضافية الأخرى للمعرض ، ولا يهتم إذا كان موقعك يستخدم HTTP أو HTTPS. سيسمح لك بإزالة بيانات EXIF ​​من الصور (شيء سيحب المصورون امتلاكه).

يتعرف المكون الإضافي على الصور التي تم تحسينها بالفعل ، لذا سيتخطىها عند الحاجة. يمكنك السماح بالتحسين التلقائي أو عدم السماح به ، والقيام بالكثير والكثير باستخدام هذا المكون الإضافي الرائع. تحقق من الصفحة الرسمية على المستودع لرؤية جميع الميزات.

Optimus - مُحسِّن صور WordPress

السعر: مجاني

تمامًا مثل المكون الإضافي المذكور سابقًا ، سيعمل Optimus على تحسين صورك لـ WordPress ، وسيقوم بذلك دون التأثير على جودة صورك. يمكنك السماح للمكون الإضافي بالعمل تلقائيًا ، أو يمكنك إيقاف تشغيل الخيار وتحسين الصور فقط عند الحاجة.

يعمل Optimus على مواقع متعددة ، وليس غريباً على مواقع التجارة الإلكترونية في WordPress ، وهو مُحسَّن بالكامل لتطبيقات WordPress Mobile Apps و Windows Live Writer. سيؤدي ذلك إلى تسريع موقعك دون الحاجة إلى لمس سطر من التعليمات البرمجية. يقدم المكون الإضافي أكثر من ذلك بكثير ، ولكن سيتعين عليك الاشتراك في الإصدار المتميز. لمعرفة المزيد ، يرجى الانتقال إلى الصفحة الرسمية في مستودع ملحقات WordPress.

أضف التحميل البطيء لمقاطع الفيديو والصور الخاصة بك في WordPress

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

إذا كنت تعرف طريقك إلى PHP ، فهناك مقال رائع حول إضافة التحميل البطيء للصور والتمرير اللانهائي الذي كتبه زملاؤنا على السمات الأنيقة.

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

تحميل كسول لمقاطع الفيديو

السعر: مجاني

إذا كان لديك الكثير من مقاطع فيديو Youtube و Vimeo ، فيجب أن تفكر في تثبيت هذا المكون الإضافي. بمجرد إعداده ، سيضع المكون الإضافي صورة على الفيديو الخاص بك وبسبب ذلك ، سيتم تحميل موقع الويب الخاص بك بشكل أسرع. بمجرد أن يقوم الزائر بالتمرير إلى مقطع فيديو ، سيتم عرض هذه الصورة مع زر "تشغيل" فوقه. بعد نقرة ، سيبدأ تحميل الفيديو وتشغيله. يمكن الاطلاع على عرض توضيحي بسيط على موقع المطور.

الفسفور الابيض يوتيوب لايت

السعر: مجاني

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

a3 تحميل كسول

السعر: مجاني

هذا واحد مخصص لموقع الجوال الخاص بك. إذا كان لديك الكثير من الصور و / أو مقاطع الفيديو التي تريد عرضها للزائرين على الأجهزة المحمولة ، فيجب عليك إلقاء نظرة على a3 Lazy Load. سيسمح لك بإضافة تحميل كسول إلى الصور ومقاطع الفيديو الخاصة بك وسيسمح لك المكون الإضافي باختيار تأثيرات الانتقال التي ستظهر للمستخدمين أثناء التمرير عبر المحتوى الذي يتم تحميله.

في منطقة الإدارة ، يمكنك بسهولة تشغيل وإيقاف تشغيل المحتوى الذي تريد تحميله ببطء. بالنسبة لأولئك الذين تم تشغيلهم ، سيتم تحميل المحتوى فقط في الوقت الذي يقوم فيه الزائر بالتمرير إلى هذا الجزء من المحتوى.
هناك عرض توضيحي معروض جيدًا يضم 1000 صورة - يتم تحميل كل منها بمجرد التمرير إليها. نظرًا لأن هذا البرنامج المساعد يقوم بتحميل مقاطع الفيديو كسولًا أيضًا ، فهناك عرض فيديو توضيحي يمكنك رؤيته بالنقر فوق الارتباط أعلاه.

تحميل BJ كسول

السعر: مجاني

إذا لم تكن بحاجة إلى دعم لمقاطع الفيديو وتريد فقط تحميل صورك ببطء ، فيجب عليك التحقق من هذا المكون الإضافي لـ WP. بمجرد التثبيت والإعداد ، سيتم استبدال الصور والصور المصغرة وصور Gravatar وحتى إطارات iframe بعنصر نائب. على غرار المكون الإضافي المذكور سابقًا ، سيتم تحميل المحتوى بمجرد وصول المستخدم إليه.

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

عرض الصور قبل وبعد بطريقة جذابة

نحن على يقين من أنك رأيت بالفعل العديد من الأمثلة على الصور قبل / بعد. لا أعرف عنك ، ولكن أول ما يدور في ذهننا عندما نرى عبارة "قبل وبعد" هو برنامج تدريب اللياقة حيث يُظهر الأشخاص أجسادهم قبل وبعد برنامج التمرين.

إذا فكرت في الأمر ، فإن معظم مواقع الويب تستخدم أسلوبًا بسيطًا لعرض الاختلافات - فهي تلتقط كلتا الصورتين وتضعهما بجوار الأخرى أو حتى فوق الأخرى. إذا كنت تريد نفس النتيجة ، فلن تقرأ هذه المقالة لأنك تعرف بالفعل كيفية القيام بذلك.

ماذا لو قلنا لك أن هناك طريقة مذهلة بصريًا لحل هذه المشكلة قبل / بعد وهي في متناول يدك؟ حسنًا ، هناك وبعد الإعداد ، ستثني على المطورين لأن النتيجة النهائية رائعة حقًا.

عشرون وعشرون

السعر: مجاني

Twenty Twenty هو اسم هذا المكون الإضافي الرائع الذي يمكنك تنزيله مجانًا في مستودع المكونات الإضافية لـ WordPress.

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

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

1. أنشئ منشورًا جديدًا أو افتح المنشور الحالي
2. أدخل صورتين في المنشور. إذا كنت تعمل في محرر مرئي ، يجب أن ترى الصورة واحدة فوق الأخرى. إذا كنت تعمل في محرر نصوص ، يجب أن ترى رمزًا مشابهًا لهذا:

 <a href="image1.jpg"> <img src =
"http://www.loactionoftheimage.com" العرض = "700" 
الارتفاع = "200" /> </a>

<a href="image2.jpg"> <img src =
"http://www.loactionoftheimage.com" العرض = "700" 
الارتفاع = "200" /> </a>

3. أدخل علامة [twentytwenty] قبل الصورة الأولى
4. بعد الثانية أدخل [/ twentytwenty]

يجب أن ينتهي بك الأمر بشيء مثل هذا في محرر النصوص الخاص بك:

5. تأكد من أن صورك بنفس الحجم لتحقيق أفضل النتائج
6. قم بمعاينة منشورك أو نشره واستمتع بصورك المذهلة قبل وبعد الصور

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

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

نأمل ألا تكون هناك حاجة لإقناعك بالعناية بالصور الموجودة على موقعك. حتى إذا كنت لا تستخدم الصور في المقالات (وهو ما يجب عليك فعله) ، فأنت تستخدم الصور المميزة ، أليس كذلك؟ هناك العديد من المكونات الإضافية للمعرض التي يمكن أن تساعدك في إدارة الصور على موقع WordPress الخاص بك ، ويمكن أن يكون لديك سمات متعلقة بالتصوير ، وربط Instagram بموقع WordPress الخاص بك ، والقيام بالكثير. ولكن ماذا لو أردت إنشاء المزيد من المحتوى التفاعلي؟

بالنسبة للمبتدئين ، قد تكون مهتمًا بإضافة تأثير الصورة قبل وبعد الذي سيحبه المستخدمون. لا تنسَ الواقع الافتراضي في WordPress والذي أصبح أكثر شيوعًا بعد أن قدم Automattic الواقع الافتراضي إلى WordPress.com. لا يزال هناك شيء مفقود. هل من الممكن عمل صور تفاعلية بأجزاء قابلة للنقر؟ نعم ، هذا ممكن ، ونحن على وشك أن نظهر لك كم هو أمر ممتع وسهل.

لفت الانتباه

السعر: مجاني

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

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

سمات

قبل الوصول إلى مثال يوضح لك مدى قوة هذا المكون الإضافي البسيط ، دعنا نرى ما يمكن توقعه من Draw Attention:

• رسم - بعد تحميل صورة ، ستحصل على فرصة لرسم أشكال عليها. حدد أي جزء من صورتك سيصبح قابلاً للتحديد / النقر
• الألوان - قم بتخصيص الألوان بحيث يمكنك جعل النقاط الفعالة تتناسب مع تصميم موقعك
• تمييز عند التمرير - إظهار جزء آخر من الصورة إذا كان المستخدم يحوم فوق الجزء المحدد
• إظهار مزيد من المعلومات - لعرض مزيد من المعلومات حول الجزء المحدد من الصورة
• انتقل إلى URL - أعد توجيه المستخدمين إلى أي عنوان URL إذا نقروا على التحديد

مثال - خريطة تفاعلية لهاواي

سنستخدم المثال من الموقع التجريبي لنوضح لك ما يمكنك فعله بالضبط باستخدام Draw Attention. لذا ، دعنا نرى كيف تبدو خريطة هاواي التفاعلية عند إنشائها باستخدام المكون الإضافي.

أول شيء عليك القيام به هو العثور على صورة لجزر هاواي. بعد الانتقال إلى Draw Attention -> Edit Image ، يجب تحميل الصورة إلى المنطقة الموجودة على الشريط الجانبي الأيمن. بمجرد تحميل الصورة ، يمكن أن تبدأ المتعة.

هنا يمكنك اختيار ألوان للإبرازات (اللون ، الحدود ، التعتيم ، إلخ) ، نمط "مربع معلومات أكثر" (الصورة ، العنوان ، لون النص ، إلخ). إذا كنت لا ترغب في تحديد كل لون للصورة يدويًا ، يمكنك اختيار نظام ألوان سريعًا من الشريط الجانبي الأيمن.

يحدث الجزء الأكثر سحراً في شاشة إعدادات مناطق النقاط الفعالة . هنا سوف تحصل على صورتك محملة بالحجم الكامل. كل ما عليك فعله الآن هو البدء في الرسم وإنشاء نقطة ساخنة جديدة. يمكنك إضافة أي عدد تريده من النقاط مما يعني أنه يمكنك إنشاء تحديدات شاملة كما تريد. يمكنك إنشاء أكبر عدد ممكن من النقاط الفعالة ، ويمكن أن يكون لكل منها إعداداته الخاصة.

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

يجب عليك تكرار العملية لكل جزيرة تريد أن تكون تفاعليًا. بمجرد أن تكون نقاط الاتصال الخاصة بك جاهزة ، ما عليك سوى نسخ الرمز القصير من الجانب الأيمن. قم بلصق الرمز القصير في منشور أو صفحة أو عنصر واجهة مستخدم أو في أي مكان تريد إظهار خريطتك التفاعلية الجديدة ، وبذلك تكون قد انتهيت! إذا كنت ترغب في إعادة توجيه المستخدمين إلى أي صفحة أخرى بمجرد النقر فوق التحديدات ، فأنت تحتاج فقط إلى تحديد عنوان URL بدلاً من الوصف. سهل على هذا النحو!

نسخة للمحترفين

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

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

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

كيفية إعادة إنشاء أحجام صور إضافية

من السهل نسبيًا تسجيل أحجام صور جديدة في قالب WordPress الخاص بك. بعد إخبار نظامك بحجم صورك وتسميتها وتحديد كيفية قصها ، يمكنك توزيع الصور في أي مكان تريده. لكن ماذا عن الصور القديمة؟

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

إعادة إنشاء الصور المصغرة:

السعر: مجاني

1. انتقل إلى الإضافات-> إضافة جديد
2. ابحث عن "إعادة إنشاء الصور المصغرة"
3. قم بتثبيت البرنامج المساعد وتنشيطه
4. انتقل إلى Tools-> Regen.Thumbnails

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

إذا كنت ترغب في رؤية الصور التي سيتم تغيير حجمها ، أو إذا كنت تريد تغيير حجم بعض الصور فقط ، فانتقل إلى مكتبة الوسائط الخاصة بك حيث ستجد خيارًا جديدًا ضمن "الإجراءات المجمعة" وواحد بجانب كل صورة في صالة عرض.

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

هذا كل شيء. استمتع بالصور المصغرة الجديدة أو تحقق من البرنامج المساعد Simple Image Sizes الذي يمكنه فعل الشيء نفسه.

قم بإزالة سمات العرض والارتفاع للصورة باستخدام jQuery

عند إضافة صور إلى منشور WordPress ، يضيف النظام تلقائيًا سمات الطول والعرض للصورة. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
}) ؛
}) ؛
</script>

3. احفظ التغييرات

وانت انتهيت! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. افتح ملف jobs.php الخاص بك
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. احفظ التغييرات
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. افتح function.php
2. انسخ والصق الكود التالي:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. احفظ التغييرات

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

استنتاج

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.