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

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

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

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

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

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

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

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

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

دعونا نبدأ!

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

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

• صورة
• معرض الصور المضمنة
• الوسائط والنصوص
• الغلاف

لنبدأ أولاً بكتلة صورة بسيطة.

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

سيؤدي هذا إلى تفعيل الأزرار الثلاثة داخل مربع الصورة الفارغة.

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

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

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

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

لمحاذاة صورتك، ستستخدم شريط الأدوات الذي يظهر أعلى الصورة.

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

• بدون
• عرض واسع
• عرض كامل
• محاذاة لليسار
• محاذاة للوسط
• محاذاة لليمين

يمكنك المضي قدمًا والنقر على زر “محاذاة للوسط” لتمركز صورتك في منشورك.

كيفية محاذاة الصورة بجوار النص بشكل مثالي

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

تضيف هذه الكتلة مساحة من عمودين – عمود للصور (الوسائط) وعمود أخر للمحتوى النصي.

حمل صورتك ببساطة بالنقر على زر “Upload”.

ثم أضف النص الذي ترغب بعرضه بجانبها.

إذا كنت بحاجة إلى وصف أطول، فاكتبه.

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

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

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

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

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

هنا، جربنا تصميم الأعمدة الأربعة:

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

في محرر المنشورات، انقر على المعرض. ثم انقر على أيقونة ‘Select parent block: المعرض’ لفتح لوحة التخصيص.

من هنا، تأكد من تفعيل خيار ‘Crop images to fit’.

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

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

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

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

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

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

لفتح خيار تخصيص كتلة المعرض، انقر على المعرض، ثم انقر مرة أخرى على أيقونة “Select parent block: المعرض”.

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

من هنا، ما عليك سوى اختيار تصميم من عمودين لكتلة المعرض لعرض الصورتين جنبًا إلى جنب.

يمكنك أيضًا تفعيل خيار ‘Crop images to fit’ لضمان أن تكون الصورتان بنفس الحجم ومحاذاة للوسط.

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

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

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

تتمتع كتلة صورة الغلاف بنفس خيارات محاذاة كتلة الصورة. يمكنك إضافة نص فوق الصورة واختيار لون تراكب من إعدادات الكتلة. والأفضل من ذلك، أنه يمكنك تفعيل خيار ‘Fixed Background’، الذي ينشئ تأثير خلفية اختلاف المنظر.

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

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

يسهل محرر الكتل هذه العملية أيضًا. يمكنك إضافة صور من مواقع التواصل الاجتماعي الشهيرة، بما في ذلك Facebook، وInstagram، وTwitter، وFlickr، وPinterest، وغيرها.

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

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

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

💡 احصل على موقع أحلامك – تم إنشاؤه بواسطة خبراء ووردبريس الحقيقيين

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

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

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

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

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

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

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

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