استفاده از jQuery Masonry برای نمایش دادن پست ها شبیه پینترست

استفاده از jQuery Masonry برای نمایش دادن پست ها شبیه پینترست

با گنجاندن jQuery Masonry در هسته ی WordPress 3.5 هرگز نمی توان به سادگی طرز نمایش دادن “آخرین پست ها” را عوض کرد.نمایش دادن بخشی از محتوای سایت با طرح “masonry” می تواند زیبایی سایت را دوچندان کند و برای خواننده جالب توجه باشد. با jQuery Masonry مهم نیست که طول پست شما چقدر است، چارچوب “masonry” به صورت خودکار تمام فضاهای خالی را پر می کند. در ابن آموزش قصد دارم به برسی پشت پرده ی فریم ورک jQuery Masonry با وردپرس 3.5 بپردازم.

چارچوب Masonry چیست؟

اگر شما با شنیدن نام “masonry” یاد آجر دیوار ساختمانی می افتید، بنابراین شما تصویر کلی خوبی از این فریم ورک در زهن تجسم کرده اید که “masonry” به چه شکل در سایت به نمایش در می آید. اگر گیج شده اید، نگاهی به سایت Pinterest بیندازید که چگونه تمام “سنجاق” در سایت جایگذاری شده اند، همه چیز به صورت عمودی چیده شده اند و همه ی فضاهای خالی پر شده اند. شما می توانید همین کار را با “CSS” انجام دهید، اما شاید فضاهای خالی دید شود، به این خاطر که بر خلاف “jQuery Msonry”، “سی اس اس”  اول عناصر را افقی منظم می کند بعدا عمودی. این می تواند یک نقص بزرگ باشد و فضاهای خالی در بین عناصر وجود داشته باشد. اما با استفاده از “jQuery Masnonry” این مشکل ح شده است.

مثالی با CSS:

cssfloat

مثالی با jQuery Masonry:

masonry با “jQuery Masonry” هر پست متناسب با محل خود را جا می کند، تمام شکاف ها و فضاهای خالی از بین می رود، حالـــــــا ما درباره این ابزار اطلاع کافی داریم، بنابراین اجازه دهد شروع یه ساخت یک طرح ساده با استفاده از “Masonry” کنیم.

استفاده از wp_enqueue_script برای بارگزاری کتابخانه

قبل از این که شروع به ساخت دیوار خود کنیم نیاز به بارگزاری اسکریپت مناسب خود داریم. شما احتیاج به اضافه کردن کد زیر به فایل “functions.php” داریم.

 

راه اندازی شبکه از آجر

برای ساختار ساده خودم، می خواهم کد “اچ تی ام ال” زیر را داخل حلقه در وردپرس یا قالب سفارشی خودم وارد کنم. اول، یک دربرگیرنده به این صورت درست می کنیم <“div id=”container>

 

راه اندازی CSS

شما برای اینکه “masonry” درست کار کند نیاز دارید که به “container” و “پستها” عرض بدهید. من برای نسخه آزمایش خود عرض “container” را 960px انتخاب کرده ام و می خواهم 4 ستون از پست ها داشته باشم. بنابراین با انجام یک محاسبه ساده ریاضی، عرض هر پست را به دست می آوریم.

 عرض آجر برای هر پست = 960px / 4 = 240px

حال با به خاطر سپردن عدد به دست آمده کد زیر را به فایل “سی اس اس” اضافه می کنیم:

 

راه اندازی تابع

در آخر ما احتیاج داریم تا تابع “masonry” را به پروژه خود اضافه کنیم.

 

نتیجه گیری

“Masonry” همراه با گزینه های متنوع است که استفاده از آن در توسعه وردپرس جذاب می شود. برای مثال، شما می توانید گزینه های “animation” برای پست ها استفاده کنید، اضافه اقلام اضافی به دیوار (برای نشان دادن نمونه کار عالی است)، یا ترکیب آن با Paul Irish’s Infinite Scroll.