لم يعد سراً أن المحتوى المرئي مثل الصور يلعب دوراً قوياً في توصيل المفاهيم والسرد. فغالباً ما يفشل المحتوى النصي وحده في جذب انتباه القراء. ولهذا السبب أصبح دمج الصور ذات الصلة في منشورات وصفحات المدونات أمراً إلزامياً.
يتيح لك WordPress إضافة الصور إلى موقعك بعدة طرق. إحدى الطرق الأكثر فعالية للقيام بذلك هي إضافة الصور في الأعمدة والصفوف. يتيح لك ذلك تقديم صورك بطريقة منظمة.
في منشور المدونة هذا، سنعرض لك طرقًا متعددة لعرض صور WordPress في الأعمدة والصفوف.
- الطريقة 1: استخدام كتلة العمود (الأفضل للتحكم اليدوي الكامل والتخطيطات المخصصة)
- الطريقة الثانية: استخدام كتلة المعرض (الأفضل لشبكات الصور البسيطة ذات التصميم البسيط)
- الطريقة 3: استخدام كتلة غاليري بيرغ (الأفضل للتخطيطات المتقدمة مع Lightbox والتخصيص)
- الطريقة 4: استخدام البرنامج الإضافي Tableberg (الأفضل لشبكات الصور المنظمة مثل التسعير أو الجداول أو جداول المنتجات)
إنشاء جداول جميلة
مع محرر الكتل
الطريقة 1: استخدام كتلة العمود
يحتوي WordPress على كتلة عمود افتراضية. يمكنك إضافة العديد من الكتل الأخرى بداخلها، بما في ذلك كتلة الصورة. إليك الدليل.
الخطوة 01: إضافة كتلة عمود جوتنبرج
البحث و أضف كتلة العمود بالضغط على أيقونة الجمع (+) الموجودة في المحرر.
حدد عدد أشكال الأعمدة التي تريد إضافتها إلى كتلة الأعمدة. في هذا البرنامج التعليمي، سنحدد شكل العمود 50/50.
الخطوة 02: إضافة كتلة الصورة إلى كتلة العمود
كما ذكرنا، يمكنك إنشاء كتل جوتنبرج أخرى داخل كتلة العمود. الآن، انقر على أيقونة الإضافة (+) داخل العمود. ابحث عن أضف كتلة الصورة إليها.
يمكنك الآن إضافة الصور من مكتبة الوسائط أو محرك الأقراص المحلي. افعل ذلك كما يحلو لك.
الخطوة 03: تصميم كتلة الصورة داخل كتلة العمود
يمكنك أن ترى أننا أضفنا صورة. يمكنك محاذاتها في المنتصف باستخدام خيار المحاذاة في شريط الأدوات. قم بتغيير حجم الصورة من خلال الضغط على أيقونة الدائرة المحيطة. وأخيرًا، يمكنك تصميمها بشكل أكبر باستخدام الخيارات الموجودة ضمن علامة التبويب "النمط".
وبنفس الطريقة، قم بإضافة صورة إلى العمود الآخر أيضًا.
الطريقة 2: استخدام كتلة المعرض
يحتوي WordPress على كتلة معرض افتراضية يمكنك من خلالها إضافة صور متعددة باستخدام نفس تخطيط الكتلة.
الخطوة 01: إضافة كتلة المعرض
مثل الطريقة المذكورة أعلاه، ابحث عن أضف كتلة المعرض إلى المحرر.
سوف يُسمح لك بتحميل الصور من محرك محلي أو ال مكتبة الوسائطفي هذا البرنامج التعليمي، سنقوم بتحميل الصور من مكتبة الوسائط.
الخطوة 02: تحديد الصور وتحميلها
حدد الصور تريد تحميلها إلى كتلة المعرض. يمكنك تحديد عدد الصور التي تريدها. بمجرد الانتهاء، انقر فوق زر إنشاء معرض جديد.
يمكنك إضافة تعليقات توضيحية لكل صورة إذا أردت ذلك. لا توجد مشكلة إذا لم تقم بإضافة أي شيء. اضغط على زر إدراج المعرض في نهايةالمطاف.
يمكنك أن ترى أنه تمت إضافة الصور إلى المعرض. بعد ذلك، يمكنك تخصيص كتلة الصورة باستخدام الخيارات من إعدادات و علامة التبويب "الأنماط" على الشريط الجانبي الأيمن.
آمل أن تتمكن من القيام بذلك بمفردك، لذلك لن أدخل في التفاصيل.
الطريقة 3: استخدام البرنامج المساعد Galleryberg Plugin
إذا كنت تبحث عن طريقة أكثر مرونة وصقلًا بصريًا لعرض الصور في أعمدة أو صفوف، فإن جاليري بيرج إضافة رائعة. إنه مكون إضافي لكتلة معرض غوتنبرغ الأصلي الذي يمنحك خيارات تخطيط متعددة - بما في ذلك البلاط، والبناء، والمبرر، والمربع - وكلها مدمجة في لايت بوكس الدعم.
الخطوة 1: تثبيت مُلحق Galleryberg Plugin
انتقل إلى لوحة تحكم ووردبريس الخاصة بك وانتقل إلى المكونات الإضافية > إضافة جديد. ثم ابحث عن "Galleryberg" وقم بتثبيت الإضافة وتفعيلها.
الخطوة 2: إضافة مكوِّن جاليري بيرج
افتح الصفحة أو المنشور الذي تريد عرض الصور فيه. ثم انقر على + والبحث عن زر "جاليري بيرج" كتلة. أضفها إلى الصفحة.
الخطوة 3: تحميل أو تحديد الصور
استخدم مكتبة الوسائط أو قم بتحميل صور جديدة. يمكنك إعادة ترتيب الصور عن طريق السحب والإفلات.
الخطوة 4: اختر تخطيطاً
من لوحة إعدادات المكوِّن، حدِّد التخطيط الذي تريده:
- البلاط: تخطيط الشبكة بمسافات متساوية (مثالي للصفوف والأعمدة)
- البناء: تخطيط مكدس على طراز بينتيريست
- مبرر: صفوف متناسقة بدقة متساوية في الارتفاع
- المربع: مربعات مثالية للعرض الشبكي الموحد
الخطوة 5: تمكين خيار Lightbox
في الشريط الجانبي لإعدادات المكوِّنات، قم بتبديل تمكين الصندوق الخفيف خيار.
ستُفتح صورك الآن في نافذة منبثقة مع انتقالات سلسة وتأثيرات تكبير/تصغير وتصفح الشرائح.
الخطوة 5: التخصيص والنشر
- قم بتعيين عدد الأعمدة (من 1 إلى 8)في الشريط الجانبي لإعدادات المكوِّنات، مرِّر لأسفل إلى لايت بوكس قسم.
- قم بتبديل تمكين الصندوق الخفيف خيار.
- ستُفتح صورك الآن في نافذة منبثقة مع انتقالات سلسة وتأثيرات تكبير/تصغير وتصفح الشرائح.
- اضبط المسافات والتسميات التوضيحية والحدود والمزيد
- تمكين العرض المبسط لمعاينات الصور التفاعلية
انقر نشر أو تحديث وسيظهر معرضك في صفوف وأعمدة نظيفة ومتجاوبة.
الطريقة 4: استخدام المكون الإضافي Tableberg
TableBerg هو مكون إضافي لبناء الجداول سهل الاستخدام. فهو يسمح لك بإضافة كتل مخصصة مختلفة إلى خلايا الجدول لإنشاء جداول متعددة الوظائف. في هذا القسم، سنوضح لك كيفية إضافة الصور في WordPress باستخدام Tableberg مكون إضافي.
الخطوة 01: تثبيت وتفعيل البرنامج الإضافي Tableberg
اذهب الى المكونات الإضافية > إضافة مكون إضافي جديد. يكتب Tableberg في مربع البحث. ثَبَّتَ و فعل بمجرد ظهور البرنامج المساعد أدناه.
الخطوة 02: أضف كتلة Tableberg إلى منشورك/صفحتك
يأتي البرنامج المساعد مع كتلة Gutenberg تسمى TableBerg. ابحث عن وأضف كتلة تابل بيرج إلى المحرر الخاص بك.
قم بتحديد رقم الصف والعمود للجدول. العملية مشابهة لكتلة الجدول الافتراضية. قم بذلك بنفسك.
الخطوة 03: البحث عن كتلة الصورة وإضافتها إلى الجدول
نأمل أن يكون جدولك جاهزًا. حدد الخلية التي تريد إضافة صورة إليها. بمجرد تحديد خلية، ستظهر لك أيقونة زائد (+) سوف تظهر.
انقر على أيقونة الإضافة (+)سوف تحصل على كتلة الصورة. اضغط على كتلة الصورة.
ستحصل على خيارات لتحميل الصور من محرك الأقراص المحلي أو مكتبة الوسائط. انقر فوق أي خيار تريده وقم بتحميل الصورة.
الخطوة 04: قم بتنسيق الصورة التي تم تحميلها
نأمل أن تكون صورتك قد تم تحميلها بالفعل إلى الجدول. انتقل إلى علامة التبويب "الأنماط" في الشريط الجانبي الأيمن. ستجد خيارات مثل Duotone وBorder وRadius لتنسيق كتلة الصورة الخاصة بك.
وبذلك، يمكنك تحميل الصور إلى جدول WordPress باستخدام البرنامج المساعد. استكشف كيفية إنشاء قسم أعضاء الفريق في ووردبريس باستخدام كتلة العمود.
ملاحظات ختامية!
للحفاظ على موقع ويب ناجح، تحتاج إلى تحميل المحتوى الخاص بك وتقديمه بطرق مختلفة. في بعض الأحيان، يتعين تقديم نفس المحتوى بطرق مختلفة في منشورات وصفحات مختلفة. وينطبق الأمر نفسه على كتلة الصورة أيضًا.
نأمل أنه بعد قراءة هذا البرنامج التعليمي، ستتمكن من إضافة كتلة صورتك بطرق مختلفة في WordPress وإضفاء تنوعات على المحتوى.
