نحوه ایجاد یک نمایش شبکه ای از تصاویر کوچک پست در قالب های وردپرس

هنگام ایجاد طرح های سایت وردپرس ، آیا تاکنون تمایل به ایجاد یک نمایش شبکه ای از پست ها داشته اید؟ چیدمان شبکه برای سایتهای رسانه محور مانند گالری وردپرس یا سایت دیگری از نوع ویترین عالی کار می کند. چارچوب های تم مانند Genesis از قبل دارای سیستم Grid Loop از پیش ساخته شده است. با این حال ، اگر می خواهید یک صفحه نمایش شبکه را در قالب وردپرس سفارشی خود انجام دهید ، ما اینجا هستیم تا به شما کمک کنیم. در این مقاله ، ما به شما نحوه ایجاد نمایشگر حلقه شبکه ارسال ریز عکسها در قالب وردپرس خود.

توجه: شما باید شناخت کاملی از CSS و نحوه عملکرد حلقه وردپرس داشته باشید.

قبل از شروع ، بیایید نگاهی بیندازیم به آنچه می خواهیم انجام دهیم:

Grid Post Display

در صورت مشاهده ، ارسال های این صفحه در یک شبکه نمایش داده می شوند. در پست های سمت چپ یک مرز وجود دارد ، اما در سمت راست این مرز وجود ندارد. با یک حلقه ارسال عادی ، همه پست ها از یک سبک استفاده می کنند ، بنابراین شما در هر دو پست یک مرز درست خواهید داشت که به نظر عجیب می رسد. همچنین توجه داشته باشید که فاصله ها بسیار متقارن هستند. که با انجام حلقه عادی انجام چنین کاری مجدداً امکان پذیر نیست. اکنون که می توانید آنچه را که می خواهیم به انجام برسانیم مشاهده کنید ، بیایید نگاهی به چگونگی تحقق آن بیندازیم.

اولین کاری که باید انجام دهید این است که مطمئن شوید موضوع شما دارای تصاویر کوچک ارسال WordPress روشن است. همچنین باید به این فکر کنید که چطور می خواهید تصاویر وردپرس خود را تغییر اندازه دهید زیرا به آن نیاز خواهید داشت.

به محض اینکه تصاویر کوچک و اندازه را نصب کردید ، می توانیم این کار را شروع کنیم. بیایید درخواستهای حلقه خود را تنظیم کنیم:


به نظر می رسد کد بالا کاملاً رو به جلو است زیرا ما نظرات داخلی داده ایم. یک موردی که احتمالاً باید ویرایش کنید متغیر posts_per_page متناسب با نیاز شما است. در صورت تمایل می توانید پارامترهای جستجوی دیگر را نیز اضافه کنید. اکنون که حلقه را شروع کردیم ، بیایید ببینیم که چگونه می خواهیم پست های داخل آن را نمایش دهیم.





ما کد را با بررسی اینکه شمارنده 1 است نشان می دهد که به این معنی است که شبکه سمت چپ خود را نشان می دهیم. ما به سادگی وارد می شویم و یک div را با یک کلاس css سفارشی “griditemleft” شروع می کنیم. داخل آن تصویر کوچک پست و عنوان پست را اضافه کردیم. شما می توانید عناصر حلقه را (مانند گزیده ها ، تاریخ ها ، اطلاعات نویسنده ، تعداد نظرات و غیره) اضافه یا کم کنید. توجه: در تصاویر کوچک خود ، ما اندازه تصویر اضافی . احتمالاً باید اندازه-اندازه را با اندازه خود که ایجاد کرده اید جایگزین کنید.

بعد از اولین شبکه ، یک چیز دیگر اضافه کردیم که به نظر می رسد آیا شمارنده $ با عددی که در $ $ شبکه های ما مشخص شده مطابقت دارد (که باید به این دلیل باشد که در پست دوم خواهیم بود). اگر شمارنده مطابقت داشته باشد ، می توانیم گرید مناسب خود را نشان دهیم که با یک کلاس css سفارشی “griditemright” شروع می شود. توجه کنید که بعد از بستن div griditemright ، یک کلاس واضح اضافه می کنیم. این مورد را هنگامی که به قسمت CSS رسیدیم توضیح خواهیم داد.

بعد از اینکه حلقه با این کار انجام شد ، شمارنده را روی 0 تنظیم می کنیم ، بنابراین می تواند در ردیف بعدی دوباره شروع شود.

به سادگی می توانیم حلقه ای را که با افزودن این کد شروع کردیم خاتمه دهیم:


کد بالا اساساً شمارنده را ادامه می دهد تا زمانی که به حد تعیین شده در متغیر query_post ما برسد. دلیل اینکه ما کد ناوبری پست را در بالا اضافه نکردیم این است که افراد زیادی از پلاگین یا روش نمایش متفاوتی برای این امر استفاده می کنند. بنابراین ما این کار را برای شما باز می گذاریم تا خودتان تصمیم بگیرید.

بنابراین کد حلقه نهایی ما به این شکل خواهد بود:


اکنون که کد PHP را آماده کردیم ، بیایید ببینیم که چگونه می خواهیم آن را سبک کنیم.

خروجی پیش فرض ما به این شکل است:

ارسال تصویر

عنوان پست h2>

ارسال تصویر

عنوان پست h2>

در اینجا کلاسهایی وجود دارد که باید آنها را اصلاح کنید:

#gridcontainer {margin: 20px 0؛ عرض: 100٪ }
#gridcontainer h2 a {color: # 77787a؛ اندازه قلم: 13px؛}
#gridcontainer .griditemleft {float: left؛ عرض: 278 پیکسل؛ حاشیه: 0 40px 40px 0؛}
#gridcontainer .griditemright {float: left؛ عرض: 278px؛}
#gridcontainer .postimage {margin: 0 0 10px 0؛}

امیدواریم که این آموزش شما را به سمت درست ایجاد یک نمایشگر حلقه شبکه برای پست های وردپرس هدایت کند.

منبع:
https://www.wpbeginner.com/wp-themes/how-to-create-a-grid-display-of-post-thumbnails-in-wordpress-themes/.

دیدگاهتان را بنویسید