كيفية إضافة الصور بشكل صحيح في WordPress (خطوة بخطوة)

نشرت: 2023-08-03

هل تبحث عن الطريقة الصحيحة لإضافة الصور إلى موقع الويب أو المدونة الخاصة بك على WordPress؟

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

في هذه المقالة ، سنوضح لك كيفية إضافة الصور بشكل صحيح في WordPress.

Add images in WordPress properly

أهمية تحميل الصور بشكل صحيح في WordPress

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

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

نوصي بتسمية صورك بكلمات وصفية مفصولة بشرطة. على سبيل المثال ، يمكنك استخدام اسم الملف "bali-holiday-photo.jpg" لصورة في مدونة السفر الخاصة بك.

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

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

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

يمكن أن يؤدي ذلك إلى زيادة تصنيفات موقع الويب الخاص بك وتحسين إمكانية الوصول إلى موقع الويب الخاص بك للأشخاص ذوي الإعاقة.

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

  • كيفية إضافة الصور في محرر الكتلة (جوتنبرج)
  • كيفية إضافة الصور في المحرر الكلاسيكي
  • كيفية إضافة الصور في مكتبة الوسائط
  • كيفية تحسين صورة لـ WordPress SEO
  • المكافأة: السماح للمستخدمين بتحميل الصور في WordPress

كيفية إضافة الصور في محرر الكتلة (جوتنبرج)

يمكنك بسهولة إضافة الصور في محرر قوالب WordPress باستخدام كتلة الصورة.

أولاً ، تحتاج إلى فتح الصفحة / المنشور الحالي أو الجديد حيث تريد إضافة صورة.

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

Add image block to the post

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

من هنا ، يمكنك التبديل إلى علامة التبويب "تحميل الملفات" إذا كنت تريد تحميل صورة من جهاز الكمبيوتر الخاص بك.

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

Select image from the media library

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

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

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

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

Fill in image details

الآن بعد أن قمت بتحميل صورة ، يمكنك تخصيص حجمها وأبعادها وحدودها ونمطها من لوحة الكتلة الموجودة على اليمين.

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

Images settings in the block panel

أخيرًا ، انقر فوق الزر "تحديث" أو "نشر" لتخزين إعداداتك.

لقد قمت الآن بإضافة صورة بشكل صحيح في محرر Gutenberg.

كيفية إضافة الصور في المحرر الكلاسيكي

إذا كنت لا تزال تستخدم المحرر الكلاسيكي القديم في WordPress ، فيمكنك استخدام هذه الطريقة.

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

Click the add media button

بعد ذلك ، يمكنك التبديل إلى علامة التبويب "تحميل الملفات" لتحميل صورة من جهاز الكمبيوتر الخاص بك.

بدلاً من ذلك ، لإضافة صورة من مكتبة الوسائط ، ما عليك سوى التبديل إلى علامة التبويب "مكتبة الوسائط".

Upload image file in the classic editor

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

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

بعد ذلك ، انطلق وانقر على الزر "إدراج في النشر".

Configure attachment details in classic editor

الآن ، ستتم إضافة الصورة إلى منشور أو صفحة WordPress الخاصة بك.

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

Click the Pencil icon to edit an image

سيؤدي هذا إلى فتح موجه "تفاصيل الصورة" على شاشتك ، حيث يمكنك تغيير الحجم وإضافة سمات عنوان الصورة وفئات CSS والمحاذاة والمزيد.

بمجرد الانتهاء ، ما عليك سوى النقر فوق الزر "تحديث" لحفظ التغييرات التي أجريتها.

Edit image in the classic editor

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

كيفية إضافة الصور في مكتبة الوسائط

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

لإضافة صورة من مكتبة الوسائط ، يجب عليك زيارة الوسائط »إضافة صفحة جديدة من منطقة إدارة WordPress.

بمجرد وصولك إلى هناك ، انقر فوق الزر "تحديد الملفات" لتحميل صورة من جهاز الكمبيوتر الخاص بك. ثم انقر فوق الارتباط "تحرير" بجوار الصورة.

Add Image in the media library and click the Edit link

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

بمجرد القيام بذلك ، يمكنك أيضًا النقر فوق الزر "تعديل الصورة".

Click the Edit Image button

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

بمجرد أن تشعر بالرضا ، ما عليك سوى النقر فوق الزر "تحديث" لحفظ التغييرات.

basic editing features in WordPress

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

لقد نجحت الآن في إضافة صورة إلى مكتبة الوسائط.

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

بعد ذلك ، تحتاج إلى تحديد زر "مكتبة الوسائط".

Image block

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

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

الآن ، ما عليك سوى النقر فوق الزر "تحديد" لتحميل الصورة إلى محرر القوالب.

Add image from the media library

أخيرًا ، انقر فوق الزر "نشر" أو "تحديث" لتخزين إعداداتك.

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

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

هذا هو المكان الذي يأتي فيه All in One SEO for WordPress (AIOSEO).

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

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

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

عند التنشيط ، سيتعين عليك تكوين معالج الإعداد.

لمزيد من التفاصيل ، راجع دليلنا حول كيفية إعداد All in One SEO لـ WordPress بشكل صحيح.

AIOSEO setup wizard

بعد ذلك ، توجه إلى All in One SEO »صفحة مظهر البحث من الشريط الجانبي لمسؤول WordPress وانتقل إلى علامة التبويب" تحسين محركات البحث على الصور ".

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

Activating the Image SEO Module in AIOSEO

ستتمكن الآن من رؤية إعدادات Image SEO. هنا ، ستلاحظ علامات تبويب مختلفة للعنوان والنص البديل والتسمية التوضيحية والوصف واسم الملف.

تكوين عناوين الصور التلقائية

بمجرد التبديل إلى علامة التبويب "العنوان" في صفحة تحسين محركات البحث (Image SEO) ، يمكنك البدء بإنشاء تنسيق عنوان لصورك باستخدام العلامات الذكية.

ستقوم هذه العلامات الذكية تلقائيًا بإنشاء سمات عنوان لصورك. هذا ما سيراه الزائر عندما يحوم مؤشر الماوس فوق صورك.

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

Add smart tags to configure title SEO

بعد ذلك ، يمكنك أيضًا تمكين خيار Strip Punctuation إذا كنت تريد من AIOSEO إزالة بعض الأحرف تلقائيًا عند إنشاء عنوان صورة من اسم الملف.

على سبيل المثال ، إذا كنت تستخدم الشرطات عند حفظ ملف صورة مثل "an-example-image" ، فيمكنك اختيار الخيار "Dashes (-)" في قسم "Characters to Convert to Spaces".

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

Configure strip punctuation and casing options

بعد ذلك ، قم بالتمرير لأسفل إلى قسم "الغلاف".

من هنا ، يمكنك اختيار خيار غلاف لقبك. نوصي باختيار حالة الجملة أو حالة العنوان لجعل عناوينك أكثر قابلية للقراءة.

تكوين العلامات التلقائية البديلة

بعد تكوين إعدادات العنوان ، قم بالتبديل إلى علامة التبويب "Alt Tag" من الأعلى.

من هنا ، يمكنك استخدام العلامات الذكية بجوار خيار "Alt Tag Format" لإنشاء نص بديل تلقائيًا لجميع صورك.

بعد ذلك ، يمكنك أيضًا تمكين إعداد Strip Punctuation إذا كنت تريد تحويل أحرف مثل الشرطات (-) أو الشرطات السفلية (_) إلى مسافات.

SEO settings for alt tags

وبالمثل ، إذا كانت هناك أحرف مثل الأرقام أو علامات الجمع (+) التي لا تريد أن يقوم AIOSEO بتجريدها عند إنشاء النص البديل ، فيمكنك تحديد المربعات الخاصة بهذه الخيارات في قسم "الأحرف المراد استبعادها من التعرض للتجريد".

يمكنك أيضًا تحديد غلاف للنص البديل.

تكوين التعليقات التلقائية والأوصاف

لإنشاء تسميات توضيحية تلقائية لصورك ، قم بالتبديل إلى علامة التبويب "التسميات التوضيحية".

من هنا ، تأكد من تمكين خيار "إنشاء تسمية توضيحية عند التحميل". يمكنك بعد ذلك تحديد العلامات الذكية التي سيتم استخدامها لإنشاء تسميات توضيحية لصورك.

Enable Captions toggle and configure its smart tags

بعد ذلك ، يمكنك أيضًا استخدام ميزة Strip Punctuation لاستبعاد أو تضمين أحرف في التعليقات واختيار غلاف لها.

بمجرد الانتهاء ، تحتاج إلى التبديل إلى علامة التبويب "الوصف" من الأعلى.

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

Enable the Description toggle and configure its smart tags

بعد ذلك ، يمكنك أيضًا استخدام ميزة Strip Punctuation لتضمين / استبعاد الأحرف مثل الشرطات السفلية أو الفواصل العليا أو الأرقام في الوصف.

بعد ذلك ، ما عليك سوى تحديد غلاف لأوصاف الصور الخاصة بك.

Strip punctuation and casing settings

تكوين أسماء الملفات التلقائية

كما ذكرنا سابقًا ، نوصي بإعطاء ملفات الصور الخاصة بك أسماء ملفات متوافقة مع تحسين محركات البحث (SEO). يمكنك القيام بذلك قبل تحميل صورك ، أو يمكن لـ AIOSEO القيام بذلك نيابة عنك تلقائيًا.

بمجرد التبديل إلى علامة التبويب "اسم الملف" من الأعلى ، ستلاحظ أن AIOSEO قد قام بالفعل بتهيئة إعداد Strip Punctuation من أجلك.

ومع ذلك ، إذا كان هناك المزيد من الأحرف التي تريد من AIOSEO حذفها من أسماء ملفات الصور عند إنشاء عناوين أو نص بديل ، فيمكنك كتابة هذه الأحرف في مربع "Words to Strip".

AIOSEO settings for Filename

بعد ذلك ، يمكنك أيضًا تحديد غلاف لأسماء الملفات الخاصة بك.

بمجرد الانتهاء ، لا تنس النقر فوق الزر "حفظ التغييرات" لتخزين إعداداتك.

لقد نجحت الآن في تحسين صورك لـ SEO ، وسيقوم AIOSEO تلقائيًا بإنشاء عناوين ونص بديل وتعليقات توضيحية وأوصاف لجميع صورك.

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

المكافأة: السماح للمستخدمين بتحميل الصور في WordPress

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

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

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

عند التنشيط ، توجه إلى WPForms »إضافة شاشة جديدة من لوحة معلومات WordPress لتشغيل أداة إنشاء النماذج.

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

Select contact form template

سيؤدي هذا إلى تحميل قالب النموذج في منشئ النماذج ، حيث ستلاحظ معاينته على اليمين والحقول المتوفرة في العمود الأيسر.

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

Add file upload field

من هنا ، يمكنك تغيير تسمية ووصف الحقل وحتى تحديد الامتدادات المسموح بها.

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

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

Configure field settings

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

بمجرد الانتهاء ، ما عليك سوى النقر فوق الزر "حفظ" لتخزين إعداداتك.

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

من هنا ، تحتاج إلى إضافة كتلة WPForms إلى الصفحة / المنشور.

Locate and add the WPForms block

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

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

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

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على YouTube لدروس فيديو WordPress. يمكنك أيضًا أن تجدنا على Twitter و Facebook.