إضافة Lightbox إلى موقع WordPress: الدليل النهائي للمبتدئين

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

ما هو Lightbox وكيفية إضافته؟

Lightbox عبارة عن معرض صور مشروط يعرض صورتك ومقاطع الفيديو الخاصة بك عن طريق إنشاء نافذة منبثقة بملء الشاشة وإخفاء بقية الصفحة . فمثلا:

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

عادة ، هناك 3 طرق للحصول على Lightbox لموقع WordPress على الويب:

• إضافة الكود القصير
• تثبيت البرنامج المساعد
• استخدام مظهر يدعم العرض المبسط.

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

عرض Lightbox إذا كان الموضوع الخاص بك يدعمه

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

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

هنا هو دليل للقيام بذلك.

أولاً ، انتقل إلى محرر المشاركات ، ثم انقر فوق المعرض.

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

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

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

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

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

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

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

إضافة Lightbox باستخدام البرنامج المساعد

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

بالنسبة للمكونات الإضافية المعقدة ، هناك الكثير من الخيارات المعقدة لتخصيص العرض المبسط بدرجة كبيرة مثل حجم الصورة ولون الحدود وأنماط العرض المبسط ، ... على سبيل المثال ، يتوفر في Respive Lightbox & Gallery و FooBox Image Lightbox المزيد من أدوات التخصيص. لكن يصعب استخدامه إذا كنت مبتدئًا. إلى جانب ذلك ، فإن النتيجة لا تختلف كثيرًا عن المكون الإضافي البسيط. لهذا السبب نفضل استخدام مكون إضافي بسيط مثل Simple Lightbox .

هذا البرنامج المساعد سهل الاستخدام ، ويحظى بشعبية كبيرة مع أكثر من 200000 تثبيت نشط ، وتم تصنيفه بـ 160 من فئة الخمس نجوم. علاوة على ذلك ، فإن تصميم Lightbox جيد.

الخطوة 1: تثبيت البرنامج الإضافي Simple Lightbox وتفعيله

في لوحة التحكم الرئيسية> البرنامج المساعد> إضافة جديد ، ما عليك سوى كتابة "Simple lightbox" والنقر فوق تثبيت المكون الإضافي ، ثم تنشيطه .

الخطوة 2: إعداد المكون الإضافي Simple Lightbox

في المكون الإضافي> المكونات الإضافية المثبتة ، انقر فوق إعداد في علامة التبويب Simple Lightbox .

علامة تبويب التنشيط لإعداد Lightbox البسيط

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

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

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

علامة التبويب تجميع لإعداد Lightbox البسيط

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

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

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

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

علامة تبويب واجهة المستخدم لإعداد Lightbox البسيط

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

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

أسلوب غامق

أسلوب خفيف

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

تمكين الرسوم المتحركة: حدد لتمكين تأثير التحميل.

قم بإلغاء التحديد لتعطيل التأثير ، مما يجعل التنقل أسرع.

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

مدة الشريحة: إذا قمت بتشغيل قسم عرض الشرائح التلقائي أعلاه ، يمكنك اختيار مدة الشريحة هنا.

تكرار العناصر: هل تريد تكرار العناصر بعد جولة واحدة من الشريحة؟ إذا كانت الإجابة بنعم ، انقر فوق هذا المربع.

عتامة التراكب (0-1): يمكنك تعديل عتامة تراكب الخلفية. كلما كانت درجة التعتيم أقل ، كلما كان عرض المنشور في الخلف أكثر وضوحًا. على سبيل المثال ، قمنا بتعيين العتامة على 0،1 بحيث يمكن رؤية الخلفية بوضوح حقيقي.

تمكين العنوان الافتراضي: يمكنك اختيار عرض عنوان الصورة بالنقر فوق هذا المربع. هنا كيف يظهر العنوان.

علامة تبويب التسمية لـ Lightbox البسيط

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

عند الانتهاء من جميع إعدادات المكون الإضافي Simple Lightbox ، انقر فوق حفظ التغييرات مباشرة ضمن علامة التبويب Label .

الخطوة 3: ربط الصور / المعرض بملف الوسائط لعرض Lightbox

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

ما عليك سوى اتباع الدليل الذي ذكرناه في جزء "Display Lightbox If Your Theme Support It". كما ترى ، قلنا أنه يجب عليك بالتأكيد معرفة كيفية القيام بذلك إذا كنت تريد استخدام المكون الإضافي Simple Lightbox.

الكلمات الأخيرة

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

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