حلقههای پرسوجو و داده پویا (Query loops and dynamic data)
به صفحه اصلی برگشتیم. بیایید یک بخش «آخرین پستها» زیر hero اضافه کنیم.
قبل از شروع: نمونهپستها
این بخش به حداقل سه پست منتشرشده نیاز دارد تا حلقه کوئری چیزی برای نمایش داشته باشد. اگر این مرحله را رد کنید، حتی اگر همه چیز را در Bricks درست انجام داده باشید، شبکه خالی یا شکسته به نظر میرسد.
ابتدا ۳ پست آزمایشی بسازید:
- در پیشخوان وردپرس به Posts > Add New بروید
- به هر پست یک عنوان و یک گزیده کوتاه بدهید (از فیلد Excerpt در نوار کنار استفاده کنید یا چند خط محتوا اضافه کنید تا وردپرس خودکار گزیده بسازد)
- برای هر پست یک تصویر شاخص (Featured Image) تنظیم کنید
- روی Publish کلیک کنید و این مراحل را تکرار کنید تا حداقل ۳ پست منتشرشده داشته باشید
همین پستها را بعداً در مقاله قالب پست وبلاگ نیز استفاده خواهید کرد.
قبل از کلیک کردن، به دو مفهوم اصلی نیاز داریم: حلقههای کوئری و دادههای پویا.
حلقه کوئری چیست؟
در وردپرس، یک «کوئری» فقط یک سوال است، مثل:
- «۳ پست آخر را به من بده»
- «همه پستهای این دسته را بده»
یک حلقه کوئری جواب آن سوال (لیست پستها) را میگیرد و یک طرحبندی را برای هر آیتم تکرار میکند.
شما یک کارت (تصویر، عنوان، گزیده، دکمه) طراحی میکنید. حلقه از بین پستها میگذرد و یک کارت برای هر پست خروجی میدهد. قوانین کوئری را تغییر دهید و همان طرحبندی، پستهای متفاوت نمایش میدهد.
دادههای پویا چیستند؟
تا به حال، وقتی یک عنصر Heading یا Text اضافه میکردید، محتوا را دستی تایپ میکردید. این محتوای ایستا است.
با دادههای پویا، به جای آن عناصر را به فیلدهای وردپرس متصل میکنید:
- Heading، عنوان پست را میکشد
- Image، تصویر شاخص را میکشد
- Text، گزیده پست را میکشد
در یک حلقه، هر کارت مقادیر فیلد پست فعلی آن لیست را نشان میدهد.
این را بهصورت گزینههایی مثل {post_title} یا {featured_image} در Bricks میبینید — نگهدارندههای بصری برای فیلدهای واقعی وردپرس.
محتوا را آماده کنید
حداقل ۳ پست منتشرشده با تصویر شاخص داشته باشید (به بخش «قبل از شروع» بالا مراجعه کنید). بررسی سریع: Posts > All Posts — باید سه یا بیشتر پست با وضعیت Published ببینید.
بخش را بسازید
- یک Section جدید اضافه کنید
- داخل Container یک Heading («آخرین پستها») اضافه کنید
- زیر Heading یک عنصر Block اضافه کنید
Grid را تنظیم کنید
میخواهیم یک شبکه ۳ ستونه برای پستها بسازیم.
قبلاً در این سری از Flexbox برای طرحبندی یکبُعدی (متن چپ، تصویر راست) استفاده کردیم. CSS Grid سیستم چیدمان دیگری است که برای طرحبندی دوبُعدی عالی است — جایی که هم ردیفها و هم ستونها مهم هستند، مثل شبکهای از کارتها.
وقتی یک Block را برای استفاده از Grid تنظیم میکنید، به مرورگر میگویید فرزندان را روی یک شبکه قرار دهد.
- کنترل Grid Template Columns تعداد ستونها و عرض آنها را تعریف میکند
1fr 1fr 1frیعنی «سه ستون مساوی» که هر کدام یک کسر از عرض موجود میگیرد- کنترل Gap فاصله بین ستونها و ردیفها را تنظیم میکند
وقتی کارتهای بیشتری اضافه کنید، Grid آنها را بهطور خودکار در این ستونها جا میدهد و در صورت نیاز ردیف جدید میسازد.
- Block را انتخاب کنید
- Display:
Grid - Grid Template Columns:
1fr 1fr 1fr(سه ستون مساوی) - Gap:
24
کارت (آیتم حلقه) را بسازید
داخل Grid Block، یک Block دیگر اضافه کنید (این کارت تکرارشونده ما میشود).
داخل این Block کارت اضافه کنید: 1. Image (تصویر شاخص) 2. Heading (عنوان پست، H3) 3. Basic Text (گزیده پست) 4. Text Link («ادامه مطلب»)
حلقه Query را فعال کنید
- Block کارت (داخلی) را انتخاب کنید
- تاگل Use Query Loop را روشن کنید
- Query Settings:
- Post type: Posts
- Posts per page: 3
اکنون باید ۳ کارت پست را ببینید!
دادههای پویا را وصل کنید
- Image: روی آیکون داده پویا کلیک کنید ←
Featured Imageرا انتخاب کنید
- Heading: روی آیکون داده پویا کلیک کنید ←
Post Titleرا انتخاب کنید. Link to ←Post URL
- Basic Text: روی آیکون داده پویا کلیک کنید ←
Post Excerptرا انتخاب کنید - Text Link: Link to ←
Post URL
بررسی واکنشگرا
- به Mobile Landscape بروید
- Grid Block را انتخاب کنید
- Grid Template Columns را به
1frتغییر دهید (کارتها عمودی روی هم قرار میگیرند)
تمام شد! یک شبکه پست پویا دارید.
مسیر بعدی: قالب پست وبلاگ (Blog post template)