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

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

يحل محرر قوالب ووردبريس الجديد (Gutenberg) هذه المشكلة عن طريق تسهيل إضافة ومحاذاة الصور في ووردبريس.

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

إضافة ومحاذاة الصور بشكل صحيح في ووردبريس

محاذاة الصورة في محرر ووردبريس

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

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

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

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

إضافة ومحاذاة الصور في ووردبريس

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

صورة

صورة مضمنة

صالة عرض

الوسائط والنصوص

غطاء، يغطي

لنبدأ أولاً بجزء بسيط من الصورة.

انقر فوق الزر “إضافة كتلة جديدة” أو اكتب / صورة في محرر المنشور لإدراج كتلة صورة.

إضافة قالب صورة جديد في محرر منشورات ووردبريس

سترى ثلاثة أزرار داخل كتلة الصورة الفارغة.

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

بعد ذلك ، انقر فوق الزر “تحميل” ثم حدد الصورة التي تريد تحميلها من جهاز الكمبيوتر الخاص بك.

بمجرد تحديد الصورة ، سيقوم ووردبريس بتحميلها إلى مكتبة الوسائط الخاصة بك وإدراجها في كتلة الصورة.

خيارات الصور في محرر منشور ووردبريس

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

أزرار محاذاة الصورة في محرر منشور ووردبريس

تمنحك كتلة الصورة خيارات محاذاة الصورة التالية كأزرار في شريط الأدوات.

محاذاة إلى اليسار

مركز المحاذاة

محاذاة اليمين

عرض واسع

العرض الكامل

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

مركز محاذاة صورة في ووردبريس

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

عمل صورة كاملة العرض في ووردبريس

كيفية محاذاة الصورة تمامًا بجانب النص

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

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

الوسائط وكتلة النص في محرر منشور ووردبريس

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

إعدادات كتلة الصور والنص

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

سيتم ضبط محاذاة الصورة تلقائيًا على ارتفاع النص في العمود التالي.

يتم ضبط حجم الصورة للمحاذاة رأسياً

كيفية محاذاة صور المعرض في ووردبريس

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

تأتي كتلة المعرض مع خيارات محاذاة مماثلة في شريط الأدوات.

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

محاذاة صور المعرض في محرر منشور ووردبريس

ميزة المعرض الافتراضية في ووردبريس جيدة جدًا. ومع ذلك ، إذا كنت تضيف بانتظام معارض صور إلى منشورات وصفحات ووردبريس الخاصة بك ، ففكر في استخدام مكون إضافي لمعرض الصور مثل Envira Gallery .

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

كيفية إضافة صورتين جنبًا إلى جنب في ووردبريس

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

اعرض صورتين جنبًا إلى جنب في منشورات وصفحات ووردبريس

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

المزيد من الطرق لإضافة ومحاذاة الصور في ووردبريس

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

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

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

إضافة صورة غلاف في منشور ووردبريس

لمعرفة المزيد حول استخدام صور الغلاف ، راجع مقالتنا حول الفرق بين الصور المميزة وصورة الغلاف في ووردبريس .

لقد تحدثنا حتى الآن عن إضافة الصور مباشرة إلى منشوراتك وصفحاتك. ماذا عن الصور من مواقع الطرف الثالث؟

محرر الكتلة يجعل هذا الأمر سهلاً أيضًا. يأتي مع كتل مضمنة لمواقع المشاركة الاجتماعية الشهيرة بما في ذلك Instagram و Flickr و Imgur و Photobucket والمزيد.

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

إضافة صور Instagram في منشورات وصفحات ووردبريس

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

Instagram مضمن في ووردبريس

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

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

خدمات مميزة لآجلك

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

اشترك معنا لمزيد من المعرفة

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