إنشاء موضوع معرض WordPress في ثلاث خطوات سهلة

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

وفقًا للبحث ، يغادر 38٪ من الزوار موقع الويب إذا كان غير جذاب لهم. في قالب WordPress ، يمكنك ترتيب الصور في صفوف وأعمدة. سيحظى الزوار بتجربة تصفح أفضل عند استخدام هذه الصفحة لأنها أقل ازدحامًا من المتصفحات الأخرى. هدفنا في هذا البرنامج التعليمي هو أن نوضح لك كيفية إنشاء معرض في WordPress. يمكن إضافة معرض WordPress إلى مدونة باستخدام محرر Gutenberg Block. على الرغم من أن هذه الطريقة تفتقر إلى العديد من الميزات ، إلا أنه يمكن استخدامها لتحقيق مظهر أكثر احترافية إذا كنت ترغب في ذلك. تعد المكونات الإضافية لمعرض WordPress مثل Envira Gallery و Modula من بين أكثر الإضافات شيوعًا.

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

كيفية إنشاء معرض صور ديناميكي في ووردبريس

بعد قيامك بإعداد مصدر البيانات ، يمكنك إنشاء معرض ديناميكي جديد باستخدام FooGallery PRO (خبير أو تجارة). للقيام بذلك ، انتقل إلى قائمة "إضافة معرض". يمكنك إضافة وسائط من مصدر آخر بالنقر فوق ارتباط إضافة وسائط. سيتم الآن تحديد مصدر البيانات الذي ستستخدمه لإنشاء المعرض الخاص بك.

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

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

كيفية عمل معرض متنقل في WordPress

هناك عدة طرق مختلفة يمكنك من خلالها إنشاء معرض بالتمرير في WordPress. إحدى الطرق هي استخدام مكون إضافي مثل Jetpack أو معرض NextGEN. ستتيح لك هذه المكونات الإضافية إنشاء معرض للصور يمكن التمرير عبره.
هناك طريقة أخرى لإنشاء معرض التمرير وهي استخدام سمة WordPress التي تتضمن هذه الوظيفة. ستسمح لك بعض السمات بإنشاء معرض للصور وعرضها في منطقة قابلة للتمرير على موقع الويب الخاص بك.
إذا كنت ترغب في إنشاء معرض متنقل دون استخدام مكون إضافي أو سمة ، فيمكنك استخدام بعض التعليمات البرمجية لإنشاء واحد. هناك عدة طرق مختلفة للقيام بذلك ، ولكن إحدى الطرق هي استخدام المكون الإضافي jQuery Cycle. سيسمح لك هذا المكون الإضافي بإنشاء معرض للصور يمكن التمرير عبره.
بمجرد تثبيت المكون الإضافي ، يمكنك استخدام الرمز القصير [الدورة] لإدراج المعرض في منشور أو صفحة WordPress الخاصة بك.

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

بعبارة أخرى ، نحن ننشئ ترميزًا ثابتًا للكتلة الخاصة بنا في عرض الواجهة الأمامية. أضفنا أيضًا سمة data-direction = "right" إلى علامة الشكل الرئيسية ، والتي تحمل بشكل أساسي اتجاه الحركة الحالي (لا يمكن تصحيح الاتجاه في الوقت الحالي). بهذه الطريقة ، سأقسم كل خيار تكوين إلى ثلاثة أقسام. سنستخدم مكون WordPress-builtToggleControl لخيار التكوين هذا. سننشئ أيضًا لوحة جديدة لإيواء عناصر التحكم العامة لدينا ، بالإضافة إلى لوحة جديدة. لنقم بإنشاء فئة ديناميكية باستخدام هذه السمة المعينة في الواجهة الأمامية.

تلميحات عرض الشرائح

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

WordPress إنشاء البرنامج المساعد للمعرض

هناك عدد من الطرق المختلفة لإنشاء مكوِّن إضافي لمعرض ووردبريس. إحدى الطرق الشائعة هي استخدام المكون الإضافي NextGEN Gallery. يتيح لك هذا المكون الإضافي إنشاء معرض للصور داخل موقع WordPress الخاص بك. إضافة شعبية أخرى هي WP-SimpleViewer plugin. يتيح لك هذا المكون الإضافي إنشاء معرض بسيط للصور داخل موقع WordPress الخاص بك.

في هذا البرنامج التعليمي ، سنرشدك إلى كيفية إنشاء مكون إضافي لمعرض الصور لبرنامج WordPress. إنه معرض بسيط وجذاب مع تنقل مصغر يتم إنشاؤه تلقائيًا عندما تقوم بتحميل الصور إلى منشور أو صفحة. إنه يعمل بشكل جيد بدون أي إعدادات خاصة أو خيارات تكوين أو أطواق للقفز من خلالها. الهدف الأساسي للمعرض الفوري هو جعل تحميل الصور إلى منشور أو صفحة WordPress بسيطًا قدر الإمكان من أجل إنشاء معرض للصور. سنستخدم HTML و CSS و PHP وقليلًا من JavaScript لتحقيق هدفنا. سيتم استخدام PHP في القسم التالي لإنشاء أكبر عدد ممكن من الصور المصغرة. يتم استخدام Get_posts في مقتطف الشفرة أعلاه لاسترداد الصور التي تلبي معاييرنا بناءً على $ args.

يمكن تخزين النتائج في متغير يسمى مرفقات $. يعرض هذا الرمز أول صورة كبيرة في قسم الصور الرئيسي في المعرض ، والذي يمثل العناصر الهيكلية الرئيسية للمعرض. ستأخذك الخطوات التالية خلال عملية تحديد مجموعة من المعلمات للوظيفة WP_get_attachment_image. تقوم بإرجاع الحجم الكامل للصورة عن طريق الاستيلاء على المرفق الحالي (صورتنا الحالية). بالإضافة إلى ذلك ، يتم تطبيق السمات التي تتوافق مع الوسائط المحددة في المصفوفة $ default_attr. في الخطوة 2 ، يتم عرض قائمة التنقل. تحتوي قائمة # ig-thumbs التي قمنا بتضمينها في الجزء العلوي من هذه الكتلة على عدد من المؤشرات لمساعدتك في معرفة كيفية التنقل في الكود.

لقد كتبنا الكود أعلاه كجزء من حزمة Step 2.4 ، والتي ستسترجع قائمة مرفقات الصور من منشور أو صفحة WordPress السابقة وإنشاء معرض بناءً على الترميز الذي استخدمناه. الخطوة التالية هي إضافة رمز قصير إلى منشورات أو صفحات WordPress الخاصة بنا. هنا في Wptuts ، لدينا العديد من المقالات الممتازة المتعمقة حول الرموز القصيرة ، بما في ذلك بعض المقالات الممتازة. تم بناء معرض Instagram الفوري على أساس السحر. لتحقيق المستوى الأساسي من التفاعل الذي يتطلبه jQuery ، يجب أن تكون الوظيفة مبنية على jQuery. نتيجة لذلك ، سوف نستخدم وظيفة WordPress WP_enqueue_script في WordPress لإدراج البرامج النصية في WordPress. يضمن وجود البرامج النصية في الأماكن الصحيحة وفي الوقت الصحيح أن WordPress لا يواجه أي تعارضات.

عندما نضغط على صورة مصغرة ، نريد أن تحدث بعض الأشياء. في وظيفة jQuery الخاصة بنا ، نستبدل الصورة المصغرة بصورة كبيرة تتوافق مع الصورة المصغرة التي تم النقر فوقها. يتيح لك نظام تسمية ملفات WordPress إجراء تبديل الصور. سينشئ WordPress عددًا من الأحجام المختلفة لصورة تسمى my-image.jpg عند تحميلها. أبعاد الحجم الآخر للصورة هي ما نحتاج إلى معرفته قبل أن نتمكن من تغيير أبعاد الصورة المصغرة. على سبيل المثال ، إذا أردنا استبدال my-image-150 × 150.jpg لصورة متوسطة الحجم 600 × 300 ، فسنستخدم الدالة jQuery. السطر التالي هو $ ('# ig-thumbs li img') وسيبدأ في المقام الأول.

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

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