يوفر الووردبريس بشكل متزايد في السنوات الأخيرة مزايا وأدوات متقدمة تتيح لمالكي مواقع الويب إدارة وتصميم مواقعهم باحترافية عالية، ومن أبرز وأهم الأدوات التي أُدرجت Query Loop Block التي تمت إضافتها إلى الووردبريس في الإصدار 5.8 الذي تم إطلاقه في شهر يوليو من عام 2021.
سنوضح في هذه المقالة ما هي Query Loop Block، ونعرفكم على استخداماتها، ونشرح بشكل مفصل كيفية الاستفادة منها في موقع الووردبريس لبناء كتل بصرية تسحب المحتوى من المنشورات (أو غيرها) وتعرضه في المكان الذي تريده.
مفهوم Query Loop Block
Query Loop Block هي مكون أو كتلة موجودة في محرر الموقع الكامل (المحرر) تسمح لك ببناء صفحات ديناميكية في موقع الووردبريس الخاص بك، وهو يشبه إلى حد ما كتلة أحدث المنشورات (Latest Posts Block) التي تعرض أحدث المشاركات التي تم نشرها في الموقع، إلا أنه أكثر تقدمًا وفائدة وإمكانية للتخصيص.
ومحرر الموقع الكامل (محرر المكونات جوجتنبرج) هو طريقة جديدة لتحرير الموقع تتضمن مزايا عديدة تركز على استخدام الكتل لتحرير مختلف أقسام الموقع الإلكتروني، وليس فقط قسم المحتوى الذي يتمثل بمحتوى المقالات والصفحات، وبالتالي في هذا المحرر يمكنك أن تقوم بتعديل رأس الصفحة والشريط الجانبي وغيرها من الأقسام بطريقة شبيهة بتحرير المقالات والصفحات في محرر المكونات.
تسمح لك كتلة Query Loop بإضافة أقسام إلى صفحات موقعك، حيث تعرض هذه الأقسام مشاركات من موقعك بشكل متغير (تتغير المشاركات كلما أضفت جديدًا) تبعًا لخيارات تحددها أنت، منها خيار عرض المشاركات التي تنتمي إلى تصنيف معين دون غيرها. وهي لا تعمل فقط مع المقالات، بل أيضًا مع المنشورات المخصصة، ومع منتجات الووكومرس.
في عبارة (Query Loop Block) التي تعبر عن اسم الأداة، تشير كلمة Block إلى كتلة أو مكون، وتعني كلمة Loop بالعربية حلقة وهي تعبر عن تكرار تنفيذ عملية معينة، وتشير Query إلى استعلام، وتعبر هنا عن إمكانية عرض أقسام معينة من المعلومات المتوافرة وليس جميعها تبعًا لما تريد، ولذلك إذا كنت اللغة العربية في الووردبريس، فستلاحظ أن اسم هذا المكون هو (حلقة الاستعلام).
استخدامات Query Loop Block
يمكن استخدام Query Loop Block في العديد من التطبيقات، بما في ذلك إضافة أقسام تحوي منشورات إلى صفحات موجودة لديك مسبقًا أو إنشاء صفحات تعرض المنشورات أو المنتجات بشكل جميل ومخصص، ومن أبرز الأمثلة على ما يمكن بناؤه بواسطة Query Loop Block ما يلي:
- إنشاء قائمة أو شبكة مخصصة من العناصر التي تعرض مقالات المدونة أو الموقع.
- إنشاء قائمة أو شبكة مخصصة من العناصر التي تعرض مختلف صفحات الموقع.
- إبراز مقالة أو صفحة أو منتج عن طريق إظهاره بشكل واضح.
- إنشاء قائمة أو شبكة مخصصة من العناصر التي تعرض منتجات الووكومرس.
- إنشاء قائمة أو شبكة مخصصة تعرض المنشورات المخصصة.
- بناء صفحة رئيسية تتضمن آخر المشاركات وآخر المنتجات.
- إنشاء قائمة أو شبكة مخصصة بمقالات تتحدث عن موضوع معين.
- إنشاء قائمة أو شبكة مخصصة بمقالات تتبع لتصنيف معين.
وفي كل مما سبق يمكن تحديد عدد العناصر في كل صف في الشبكة، بالإضافة إلى الألوان في كل من الشبكة والقائمة، والعديد من الخصائص الأخرى، كما تتيح Query Loop Block إمكانية الانتقال إلى الصفحة التالية والسابقة لعرض المزيد من المنشورات والرجوع إلى المنشورات القديمة (يمكن تخصيص ذلك أو إلغاؤه أيضًا).
كيفية استخدام Query Loop Block في الووردبريس
لاستخدام Query Loop Block يجب أن تستخدم قالب ووردبريس يدعم محرر الموقع الكامل. سابقًا كان يجب أن تقوم بتنصيب إضافة ووردبريس حتى تتمكن من استخدام هذه الأداة، أما الآن فيمكنك استخدامها دون الحاجة إلى تنصيب أي إضافات.
سنستخدم في هذه المقالة قالب (Twenty Twenty-Three) لنشرح كيفية استخدام Query Loop Block، لكن يمكنك استخدام أي قالب تريده يدعم محرر الموقع الكامل.
أولًا: الدخول إلى محرر الموقع الكامل
بعد التأكد من تنشيط قالب ووردبريس يدعم محرر الموقع الكامل، عليك أن تنتقل إلى المحرر كي تتمكن من إضافة كتلة حلقة استعلام أو Query Loop Block. يمكن فعل ذلك عبر النقر على (المحرر) ضمن تبويب (المظهر) في لوحة تحكم الووردبريس.
قبل أن نبدأ بشرح كيفية إضافة كتلة Query Loop وتخصيصها، هناك بضعة أمور يجب معرفتها عن محرر الموقع الكامل، وهي:
- يسمح هذا المحرر بإضافة كتل (مكونات) إلى الموقع، وهناك عدد كبير من الكتل التي يمكن إضافتها، بما في ذلك القوائم والعناوين والصور والأزرار، والكتل الأكثر تقدمًا مثل قوائم الصفحات، والأيقونات الاجتماعية، وأحدث المقالات، وحلقة الاستعلام.
- تمتلك كل كتلة في المحرر مجموعة من الخصائص أو الخيارات التي تتحكم بكيفية ظهورها في الموقع، وتظهر بعض هذه الخيارات في شريط الأدوات أعلى المكون عند النقر عليه، بينما تظهر بقيتها ضمن نافذة على الجهة اليسرى تسمى (المكون) أو (خيارات المكون).
- في الشريط العلوي من صفحة المحرر توجد أيقونة على شكل 3 أسطر شبيهة بالدرج. تسمى هذه الأيقونة بـ (عرض كقائمة)، وعند النقر عليها يتم عرض جميع مكونات القالب (لا نقصد الثيم الكامل، إنما قالب الصفحة) قيد التحرير على شكل قائمة، حيث يمكن النقر على أي مكون وتعديل خصائصه.
ثانيًا: إضافة Query Loop Block إلى الموقع
أولًا من أجل استخدام كتلة حلقة الاستعلام، يجب أن نحدد أي قالب من قوالب السمة التي نقوم بتحريرها نريد أن نضيفه إليها، حيث يتيح محرر الموقع الكامل إمكانية تحرير كل قالب (Template) من قوالب سمة الووردبريس على حدة، والقالب (Template) هو عبارة عن تخطيط صفحة ويب ضمن السمة، فمثلًا تتضمن السمة قالب الصفحة الرئيسية، وكذلك قالب صفحة البحث، وقالب المقالة الفردية، وغيرها.
اختيار قالب لتحريره
لذلك اختر أولًا القالب الذي تريد تحريره لجعله القالب قيد التحرير في نافذة المحرر. يمكنك فعل ذلك من خلال النقر على أيقونة الووردبريس الموجودة في أعلى اليمين، ثم على القوالب، ثم اختيار القالب الذي تريد تحريره من القوالب التي تظهر أمامك. لاحظ أن هناك وصفًا لكل قالب يعبر عنه ويشير أين يتم عرضه واستخدامه.
ملحوظة: من القوالب التي قد تحتاج إلى تحريرها وإدراج حلقات استعلام فيها قالب (الرئيسية)، حيث يمكنك مثلًا أن تضيف المشاركات فيها بالتخطيط الذي تريده عن طريق إضافة Query Loop Block عامة لمجموعة من المنشورات، ثم يمكنك أن تضيف تحتها حلقات استعلام خاصة بكل تصنيف، كما يمكنك أيضًا أن تضيف فيها حلقات استعلام لعرض المنتجات أو غير ذلك.
إضافة مكون Query Loop
بعد تحديد القالب، ستعود إلى النافذة التي يمكنك من خلالها القيام بعمليات التحرير اعتمادًا على المكونات. لقد اخترنا هنا قالب الرئيسية لنقوم بتحريره، وقد أزلنا منه جميع المكونات وأبقينا فقط على الهيدر والفوتر، وذلك من أجل أن تظهر كتلة حلقة الاستعلام بوضوح أكبر.
الآن من أجل إضافة Query Loop Block إلى المحرر، عليك أن تنقر على زر إضافة مكون جديد (علامة +)، ثم تدخل في مربع البحث عبارة (حلقة استعلام)، ثم تنقر على المكون الذي يحمل هذه الاسم من أجل إضافته إلى المحرر.
ملحوظة: هناك طرق عديدة تظهر بها علامة + التي تتيح إمكانية إضافة مكونات إلى المحرر، فقط تظهر على شكل علامة كبيرة كما في الصورة السابقة، أو قد تظهر على شكل زر صغير أزرق، أو على شكل زر صغير أسود، وذلك اعتمادًا على مكان ظهورها.
ثالثًا: التعامل مع Query Loop Block وضبط خصائصه
بعد إضافة مكون أو كتلة حلقة الاستعلام، سيظهر لك زران، أحدهما هو (اختيار)، والآخر هو (بداية فارغة). يتيح الزر الأول عند النقر عليه اختيار نمط معين مسبقًا من الأنماط المعينة مسبقًا والتي قام مطور القالب بإضافتها، حيث تسهل هذه الأنماط وتسرع إضافة حلقة الاستعلام لأن خصائصها مضبوطة بشكل مسبق.
يتضمن قالب Twenty Twenty-Three العديد من الأنماط المعينة مسبقًا، وهي ملائمة للاستخدام في العديد من الحالات، لكن ليس من الضروري أن يتضمن أي قالب ووردبريس يدعم محرر الموقع الكامل أنماطًا معينة مسبقًا، ولهذا فإننا سننقر على زر (بداية فارغة) لبناء المكون تبعًا لما نريد.
بعد النقر على الزر، ستظهر لك مجموعة من التخطيطات التي عليك اختيار أحدها. تتعلق هذه التخطيطات بالمعلومات التي سيتم عرضها لكل عنصر في الحلقة، فمثلًا عندما تختار تخطيط (الصورة، العنوان، التاريخ)، سيتم إظهار صور وعناوين وتواريخ النشر الخاصة بالمقالات.
بعد اختيار التخطيط الذي تريده، سيتم مباشرة سحب معلومات المشاركات وعرضها أمامك في صفحة المحرر ضمن Query Loop Block. بداية سيكون شكل المكون قائمة، لكن يمكنك تحويله إلى شبكة من خلال النقر على أيقونة الشبكة في شريط الأدوات.
ستلاحظ أيضًا أنه تمت إضافة حلقة الاستعلام والعناصر الموجودة ضمنها في قسم (عرض كقائمة) ضمن المحرر.
يمكنك الآن أن تقوم بضبط مظهر العناصر التي تظهر في Query Loop Block تبعًا لما تريد من خلال تحديد العنصر المراد ضبطه، ثم تعديل الخصائص الموجودة في شريط الأدوات الخاص به، وفي قسم خيارات المكون الذي أشرنا إليه سابقًا والذي يظهر في الجانب الأيسر من الشاشة.
هناك خصائص كثيرة يمكنك تغييرها لكل من Query Loop Block والعناصر الموجودة فيه، ولذلك لن يكون بإمكاننا تغطيتها كلها هنا، لكننا سنسلط الضوء على أهمها من في الفقرات التالية.
أهم خصائص Query Loop Block
نوضح في القائمة التالية أبرز خصائص وخيارات Query Loop Block:
- التبديل بين الشبكة والقائمة: يمكن فعل ذلك من خلال النقر على الزر الموافق الموجود في شريط الأدوات.
- تحديد عدد العناصر التي ستظهر في الصفحة ومقدار الإزاحة وعدد الصفحات الإجمالي: يمكن فعل ذلك من خلال الخيارات التي تظهر عند النقر على أيقونة (إعدادات العرض) في شريط الأدوات. الجدير بالذكر أن:
- تحديد (الإزاحة) إلى رقم مختلف عن الصفر يؤدي إلى تجاهل أوائل العناصر في الحلقة بنفس المقدار الذي يتم تحديده.
- وأن تحديد (أقصى صفحة للعرض) إلى رقم مختلف عن الصفر يؤدي إلى تجاهل العناصر في الحلقة التي يفترض أن تظهر في الصفحات التي ترتيبها أعلى من القيمة المدخلة.
- فمثلًا إذا كانت الحلقة تتضمن 100 عنصر، وقمت بتحديد الإزاحة بـ 6، وأقصى صفحة للعرض بـ 10، وكان عدد العناصر التي تظهر في الصفحة هو 3، فستُعرض العناصر من 7 وحتى 36 فقط.
- تحديد عرض المكون: يمكن جعل العرض واسعًا أو غير واسع حسبما تريد من خلال أيقونة المحاذاة في شريط الأدوات، وفي حال استخدام حلقة الاستعلام لتصميم صفحة كاملة وليس جزئًا من صفحة، فإنه من المفضل استخدام العرض الواسع أو الكامل، إذ لن يترك ذلك أجزاء من الشاشة دون استخدام (هوامش).
- تحديد نوع المشاركات التي سيتم تضمينها في سلسلة الاستعلام: يتم فعل ذلك من خلال خيار (نوع المحتوى) الموجود في قسم خيارات المكون على الجانب الأيسر من الشاشة. يمكن تحديد نوع واحد من المحتوى، إذ يمكنك تحديد (مقالة) لعرض المقالات ضمن الحلقة، أو يمكنك تحديد (صفحة) لعرض الصفحات ضمن الحلقة، أو يمكن تحديد (المنتج) لعرض المنتجات ضمن الحلقة. كما يمكنك تحديد أنواع أخرى من المحتوى إذا كان موقعك يتضمن غيرها.
- تحديد عدد الأعمدة في الشبكة: إذا اخترت عرض عناصر حلقة الاستعلام على شكل شبكة، فيمكنك تحديد عدد أعمدة الشبكة من خلال خيار الأعمدة الموجود في قسم خيارات المكون.
- تحديد طريقة ترتيب المشاركات: يمكن من خلال خيار (الترتيب حسب) الموجود في قسم خيارات المكون تحديد طريقة ترتيب المشاركات التي سيتم عرضها في حلقة الاستعلام، حيث يمكن الترتيب حسب تاريخ النشر أو حسب الأبجدية (تصاعديًا أو تنازليًا).
- عوامل التصفية: توجد في قسم خيارات المكون، وتعد إحدى أكثر المزايا أهمية في مكون حلقة الاستعلام، حيث تتيح لك إمكانية تصفية المشاركات تبعًا للتصنيف أو الكاتب أو الكلمة المفتاحية، كما يمكنك الجمع بين عوامل التصفية الثلاث أو اثنين منها، فمثلًا يمكنك عرض المشاركات التي تعود إلى تصنيف معين وكاتب معين بنفس الوقت.
- الألوان: يمكنك من خلال إعدادات الألوان الموجودة في قسم خيارات المكون أن تقوم بضبط مختلف ألوان عناصر حلقة الاستعلام، وهي لون خلفية المكون، ولون النص الموجود فيه، ولون الروابط التي يتضمنها.
كذلك توجد العديد من الخصائص الأخرى التي يمتلكها Query Loop Block، ويمكن استكشافها بنفسك من خلال تجريب تغييرها وملاحظة ما سيطرأ من تعديلات على المكون في المحرر.
أهم خصائص العناصر الموجودة Query Loop Block
كذلك تمتلك جميع العناصر التي توجد في مكون حلقة الاستعلام مثل الصور والعناوين والمقتطفات وتواريخ المقالات وأرقام الصفحات وغيرها خصائص يمكن تعديلها لإخراج المشاركات بالشكل الذي تريده تمامًا.
وكما خيارات Query Loop Block، تظهر خيارات تلك العناصر ضمن شريط الأدوات وقسم خيارات المكون عند تحديدها، فمثلًا عندما تنقر على الصورة البارزة للمقالة، ستظهر خصائص تتيح إمكانية ضبط مظهر الصورة بشكل احترافي، حيث يمكن تحديد أبعادها، وإظهار إطار لها، وجعلها معتمة قليلًا، بالإضافة إلى العديد من الإعدادات الأخرى.
وعندما تنقر على التاريخ ستظهر العديد من الإعدادات التي يمكن من خلالها ضبط طريقة ظهور التاريخ ومظهره، والأمر نفسه بالنسبة للعنوان والعناصر الأخرى.
الجدير بالذكر أيضًا أنه يمكن إزالة أو إضافة المزيد من العناصر إلى Query Loop Block، ويشمل ذلك على سبيل المثال لا الحصر: مقتطف المقالة - الكاتب - التصنيف - الوسوم. ولإضافة أي من ذلك، عليك تحديد العنصر الذي تريد الإضافة تحته عبر النقر عليه، ثم يجب أن تنقر على زر إضافة مكون.
بعد ذلك عليك أن تختار المكون الذي تريد إضافته من تبويب مكونات وتنقر عليه ليتم إضافته مباشرة إلى حلقة الاستعلام في المكان الذي حددته.
بعد أن تقوم بالنقر على المكون ستلاحظ أنه تمت إضافته بشكل مباشر إلى Query Loop Block ضمن المحرر، ويمكن تعديله خصائصه كما المكونات الأخرى الموجودة.
كذلك لا بد أن نشير إلى تغيير خصائص عنصر واحد فقط من العناصر الموجودة في حلقة الاستعلام سيؤدي تلقائيًا إلى تغيير خصائص العناصر الأخرى المشابهة، فمثلًا إذا قمت بتغيير خصائص الصورة البارزة لمقالة من المقالات المعروضة في الحلقة، فسيتم تطبيق التغييرات تلقائيًا على باقي الصور البارزة الموجودة في الحلقة نفسها.
بعد أن تنتهي من ضبط إعدادات Query Loop Block وإعدادات العناصر الموجودة داخله، وتضيف إليها ما تريد، وتزيل منه ما لا تريد، يمكنك النقر على زر (حفظ) الموجود في أعلى يسار المحرر من أجل نشر التعديلات التي أجريتها على موقعك الإلكتروني.
تظهر الصورة التالية بعضًا من حلقات الاستعلام التي يمكن عملها بواسطة Query Loop Block. بالإضافة إلى ما يظهر فيها، هناك الكثير من التصميمات الأخرى التي يمكن عملها.
نصائح لاستخدام Query Loop Block بشكل احترافي
لا يتطلب استخدام Query Loop Block أي خبرة برمجية كما لاحظت خلال الشرح الذي قدمناه في الأعلى، وبالتالي يمكن لأي شخص لديه خبرة بسيطة بنظام الووردبريس أن يستخدمه لبناء تصميمات رائعة، لكن من أجل أن تستخدم هذه الميزة بشكل أكثر احترافية، احرص على اتباع النصائح التالية:
- استخدم حلقة الاستعلام لإبراز المشاركة الأخيرة المنشورة في مدونتك من خلال إنشاء حلقة استعلام تظهرها هي فقط بشكل واضح في صفحة المدونة الرئيسية. يمكنك كذلك أن تبرز المشاركتين اللتين تم نشرهما قبل المشاركة الأخيرة أكثر من المشاركات الأخرى من خلال حلقات الاستعلام.
- إذا كنت تستخدم Query Loop Block لعرض المقالات والمنتجات وغيرها من المشاركات، فلا تستخدم نفس التصميم لجميع تلك الحلقات، بل استخدم تصنيفًا لكل حلقات الاستعلام التي تعرض المقالات في الموقع، وتصميمًا آخر مختلفًا لكل حلقات الاستعلام التي تعرض المنتجات، إذ سيحسن ذلك من تجربة المستخدم ويحول دون تشتيت انتباهه.
- إذا استخدمت حلقتي استعلام في صفحة واحدة لعرض نفس نوع المشاركات، فاحرص على عدم تكرار نفس المشاركة أو المشاركات في كلتا الحلقتين عن طريق تحديد الإزاحة بالشكل الصحيح، فإذا كانت حلقة الاستعلام الأولى تعرض 6 منشورات، ضع في حقل الإزاحة الخاص بالحلقة الثانية الرقم 6 لكي لا تعرض المشاركات الظاهرة في الحلقة الأولى فيها.
وبهذا ننتهي من شرح Query Loop Block أو مكون حلقة الاستعلام وكيفية استخدامه في الووردبريس، ونود أن نشير في الختام إلى أن ما استعرضناه هنا من أمثلة يعد جزءًا فقط مما يمكن فعله بواسطة هذا المكون، إذ هناك الكثير من التصميمات والأفكار التي يمكن تطبيقها اعتمادًا عليه.