آموزش نمایش پست های وردپرس بصورت Grid یا شبکه ای

آموزش نمایش پست های وردپرس بصورت Grid یا شبکه ای

آیا می خواهید پست های وردپرس را به صورت شبکه ای نمایش دهید؟

طرح بندی شبکه ای، انعطاف پذیری بیشتری را هنگام نمایش پست های خود در وردپرس به شما می دهد. اینکار می تواند هنگام ایجاد صفحات سفارشی مفید باشد.

در این مقاله، ما به شما نشان خواهیم داد که چگونه به راحتی پست های وردپرس خود را به صورت شبکه ای در هر نقطه از سایت خود نمایش دهید.

پیش از ادامه ی مقاله ، در صورت نیاز به سرور مجازی به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.

چه زمانی برای وردپرس به طرح بندی شبکه ای نیاز دارید؟

هر قالب وردپرس از طرح بندی عمودی سنتی پست های وبلاگ پشتیبانی می کند و این برای اکثر انواع وب سایت ها به خوبی کار می کند. با این حال، این طرح بندی می تواند فضای زیادی را اشغال کند، به خصوص اگر پست های زیادی داشته باشید.

اگر در حال ایجاد یک صفحه اصلی سفارشی برای سایت خود هستید، ممکن است بخواهید از طرح بندی شبکه ای برای نمایش پست های اخیر خود استفاده کنید.

اینکار به شما فضای بیشتری برای اضافه کردن عناصر دیگر به صفحه اصلی خود می دهد.

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

بسیاری از مضامین مجلات و موضوعات عکاسی در حال حاضر از طرح‌بندی شبکه‌ای برای نمایش پست‌ها استفاده می‌کنند. با این حال، اگر موضوع شما از این قابلیت پشتیبانی نمی کند، باید آن را اضافه کنید.

در ادامه، اجازه دهید به شما نشان دهیم که چگونه پست های وردپرس خود را در یک طرح بندی شبکه نمایش دهید.

روش 1. یک طرح بندی شبکه پست وردپرس با ویرایشگر بلاک ایجاد کنید

این روش به شما این امکان را می‌دهد که پست‌ها و تصاویر کوچک خود را با استفاده از ویرایشگر بلوک وردپرس در یک طرح شبکه پست نمایش دهید.

یک بلوک شبکه پست داخلی وجود دارد که به شما امکان می دهد شبکه خود را ایجاد کنید.

برای انجام این کار، صفحه‌ای را که می‌خواهید ویرایش کنید باز کنید، سپس روی دکمه افزودن بلوک «به‌علاوه» کلیک کنید و «Query Loop» را جستجو کنید، سپس روی بلوک کلیک کنید تا آن را اضافه کنید:

این بلوک حلقه پست شما را به صفحه شما اضافه می کند.

سپس، روی گزینه Start Blank در بالای بلوک کلیک کنید تا یک شبکه پست ایجاد کنید:

این بسته به نوع اطلاعاتی که می‌خواهید با شبکه پست خود نمایش دهید، چند انتخاب متفاوت به شما می‌دهد.

ما گزینه “Image, Date, & Title” را انتخاب می کنیم، اما شما می توانید هر چیزی را که می خواهید انتخاب کنید:

پس از آن، موس را روی تصویر ببرید و گزینه “Grid View” را انتخاب کنید. اینکار فهرست شما را به یک شبکه پستی تبدیل می کند:

در مرحله بعد، می توانید اطلاعاتی را که می خواهید نمایش دهید سفارشی کنید.

ابتدا صفحه بندی را در پایین بلوک حذف می کنیم. برای انجام این کار، به سادگی روی آن کلیک کنید و روی منوی گزینه های «سه نقطه» کلیک کنید.

سپس بر روی “Remove Pagination” یا ” حذف صفحه بندی” کلیک کنید:

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

در مرحله بعد، لینک هایی را به تصویر کوچک و عنوان پست اضافه می کنیم.

به سادگی روی تصویر کوچک پست خود کلیک کنید و کلید “Link to Post” را در پانل گزینه های سمت راست روشن کنید:

سپس، همین کار را برای عنوان پست خود انجام دهید. هنگامی که کارتان تمام شد، روی دکمه «Update» یا «Publish» کلیک کنید تا شبکه پست خود را زنده کنید.

اکنون می توانید از وب سایت وردپرس خود دیدن کنید تا شبکه پست جدید وردپرس خود را ببینید:

حالا می توانید این بلوک را به هر صفحه یا پستی اضافه کنید.

روش 2. با افزونه Post Grid یک طرح بندی شبکه پست وردپرس ایجاد کنید

این روش یک راه ساده برای اضافه کردن یک شبکه پست قابل تنظیم ارائه می دهد که می توانید آن را در هر جایی از وب سایت خود اضافه کنید.

اولین کاری که باید انجام دهید این است که افزونه Post Grid را نصب و فعال کنید.

پس از فعال‌سازی، باید از Post Grid » Add New برای ایجاد اولین شبکه پست خود بازدید کنید.

سپس، به شبکه پست خود یک عنوان بدهید. این در هیچ کجای صفحه شما ظاهر نمی شود و فقط برای کمک به یادآوری شما است:

در بخش زیر، تنظیمات شبکه پست را خواهید دید که به بخش های مختلف با چندین تب تقسیم شده است.

ابتدا باید روی تب Query Post کلیک کنید. این بخشی است که انواع پست هایی را که می خواهید در کادر “‘Post types” نمایش دهید، تعریف می کنید.

به طور پیش فرض، فقط پست ها را نمایش می دهد، اما می توانید صفحات و حتی انواع پست های سفارشی را هم اضافه کنید:

پس از آن، باید بر روی تب “Layouts” کلیک کنید.

سپس، روی دکمه «Create layout» کلیک کنید. صفحه ی مورد نظر شما در پنجره ی جدید باز خواهد شد:

شما باید طرح مورد نظر خود را نام ببرید. سپس بر روی گزینه “General” کلیک کنید و لیستی از برچسب ها باز می شود.

این تگ ها اطلاعاتی هستند که در شبکه پست شما نمایش داده می شوند:

ما گزینه “Thumbnail with link” و گزینه “Post title with link” را انتخاب می کنیم. سپس روی «Publish» یا «Update» کلیک کنید تا طرح‌بندی مورد نظرتان ذخیره شود:

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

به سادگی روی new layout در بخش «Item layouts» در پایین صفحه کلیک کنید:

در مرحله بعد، روی تب “Item style” کلیک کنید. در اینجا می توانید اندازه شبکه خود را تعیین کنید.

تنظیمات پیش‌فرض باید برای اکثر سایت‌ها کار کند، اما اگر نه، می‌توانید آن‌ها را در اینجا تغییر دهید:

پس از اتمام کار، روی دکمه «Publish» در بالای صفحه کلیک کنید و شبکه شما آماده افزودن به وبلاگ وردپرس  خواهد بود.

اکنون، باید روی برگه “Shortcode” کلیک کنید و سپس کد کوتاه را در کادر “Post Grid Shortcode” کپی کنید:

پس از آن، صفحه ای را که می خواهید لیست پست های خود را در آن نمایش دهید باز کنید و روی دکمه افزودن بلوک “Plus” کلیک کنید.

سپس «Shortcode» را جستجو کرده و بلوک «Shortcode» را انتخاب کنید:

در مرحله بعد، کد کوتاهی که قبلاً کپی کرده‌اید را در کادر قرار دهید. سپس، روی دکمه «update» یا «Publish» کلیک کنید:

اکنون، می توانید صفحه خود را مشاهده کنید تا طرح شبکه پست وردپرس خود را به صورت زنده ببینید:

روش 3. با افزودن کد به وردپرس، یک طرح بندی شبکه پست وردپرس ایجاد کنید

این روش نیاز به درک اولیه ای از نحوه اضافه کردن کد به وردپرس دارد. اگر قبلاً این کار را انجام نداده اید، راهنمای ما در مورد نحوه کپی و جایگذاری کد در وردپرس را ببینید.

قبل از اینکه کد اضافه کنید، باید اندازه تصویر جدیدی ایجاد کنید که از آن برای شبکه پست خود استفاده می کنید. در مرحله بعد، باید فایل تم وردپرس مناسب را پیدا کنید که در آن قطعه کد را اضافه می کنید. به عنوان مثال، می توانید آن را به single.php خود اضافه کنید، بنابراین در پایین همه پست های شما ظاهر می شود.

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

ابتدا قطعه کد زیر را به فایل قالب خود اضافه کنید:

<?php
$counter = 1; //start counter

$grids = 2; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

if(have_posts()) : while(have_posts()) : the_post();
?>

این قطعه کد پرس و جوی حلقه پست را تنظیم می کند. در صورت تمایل می‌توانید متغیر «posts_per_page» را برای نمایش پست‌های بیشتر در هر صفحه تغییر دهید.

سپس قطعه کد زیر را به فایل قالب خود اضافه کنید:

<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="griditemleft">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>

این قطعه کد دو ستون برای پست های ما ایجاد می کند و عنوان و تصویر پست را نمایش می دهد. همچنین یک کلاس CSS ایجاد می کند که بعداً نحوه استایل دادن را به شما نشان خواهیم داد.

همچنین به “postimage” اشاره می کند، بنابراین باید آن را به نام اندازه تصویری که قبلا ایجاد کرده اید تغییر دهید.

پس از آن قطعه کد زیر را در پایان اضافه کنید:

<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

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

در بخش زیر  می توانید کد نهایی و ظاهر کلی ان را مشاهده کنید:

<div id="gridcontainer">

<?php

$counter = 1; //start counter

  

$grids = 2; //Grids per row

  

global $query_string; //Need this to make pagination work

  

  

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */

query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

  

  

if(have_posts()) :  while(have_posts()) :  the_post(); 

?>

<?php

//Show the left hand side column

if($counter == 1) :

?>

            <div class="griditemleft">

                <div class="postimage">

                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>

                </div>

                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

            </div>

<?php

//Show the right hand side column

elseif($counter == $grids) :

?>

<div class="griditemright">

                <div class="postimage">

                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>

                </div>

                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

            </div>

<div class="clear"></div>

<?php

$counter = 0;

endif;

?>

<?php

$counter++;

endwhile;

//Pagination can go here if you want it.

endif;

?>

</div>

اکنون، باید CSS زیر را به سایت خود اضافه کنید تا مطمئن شوید که شبکه پست شما به خوبی نمایش داده می شود.

#gridcontainer{

     margin: 20px 0; 

     width: 100%; 

}

#gridcontainer h2 a{

     color: #77787a; 

     font-size: 13px;

}

#gridcontainer .griditemleft{

     float: left; 

     width: 278px; 

     margin: 0 40px 40px 0;

}

#gridcontainer .griditemright{

     float: left; 

     width: 278px;

}

#gridcontainer .postimage{

     margin: 0 0 10px 0;

}

می توانید سلکتور های مختلف CSS را تغییر دهید تا ببینید چگونه عناصر مختلف حلقه پست شما را تغییر می دهند.

امیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه پست های وردپرس خود را به صورت شبکه ای نمایش دهید. موفق باشید!