آموزش استفاده از حلقه ها برای تغییر ظاهر اولین مطلب در وردپرس

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

توسعه دهندگان اغلب برای انجام کارهای خود حلفه های دلخواه خود را ایجاد کرده و این کار را یا با ویرایش حلقه های استاندارد وردپرس انجام می دهند و یا در برخی مواقع به کل از تابع WP_Query برای برای ایجاد کامل حلقه های جدید استفاده میکنند.

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

برای مثال من میخواهم کل متن نخستین مطلب را نمایش دهم اما برای مطالب بعدی تنها به نمایش چکیده اکتفا می کنم. یا من میخواهم از یک تصویر شاخص با اندازه ای متفاوت برای اولین مطلب استفاده کنم یا میخواهم از استایل و کدهای CSS خاص و متفاوت از دیگر مطالب برای نخستین مطلب استفاده کنم.

انجام این کار می تواند باعث متمایز شدن مطالب اخیر شما شود، توجه کاربران را به آن جلب کرده و آنها را به خواندن مطلب مذکور و کلیک روی آن ترغیب کند. این کار همچنین می تواند باعث بهبود طراحی سایت شما شده و با ایجاد تضاد ساختاری در طراحی سایت، سبک طراحی را جذاب تر کند.

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

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

به چه چیزهایی نیاز خواهید داشت

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

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

شروع: ایجاد کوئری

سایتی که ما از آن استفاده می کنیم، دارای یک قالب سفارشی و دلخواه برای صفحه مربوط به “کتاب ها” است. این صفحه مطالبی را که به آن اضافه شود را نمایش داده و سپس با اجرای یک کوئری تمام کتاب ها را نمایش می دهد. این کار با استفاده از یک custom post type انجام شده است.

حلقه شما ممکن است متفاوت باشد – شاید از custom post type پیش فرض وردپرس برای نمایش مطالب در سایت خود استفاده می کنید. بگذریم، برای استفاده از این تکنیک نیازی به کار بر روی custom post type نیست. اگر تنها بر روی حلقه تمرکز کنید، به شما نشان می دهد که چگونه کار کرده و می توانید از آن برای سایت خود نیز استفاده کنید.

در این صفحه ای را مشاهده می کنید که خروجی یک حلقه بوده و تمام کتاب ها را در یک شبکه ۲x2 نمایش می دهد:

در این صفحه از کدهای CSS برای نمایش این شبکه ۲x2 استفاده شده است. در این حلقه ما عنوان، چکیده مطلب و تصویر شاخص را داریم.

این حلقه ای است که برای این کار استفاده شده است:

$args = array(
	'post_type' => 'rmcc_blurb',
);
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>

	<section class="books list full-width">
	
		<?php while ( $query->have_posts() ) : $query->the_post(); ?>

		<article id="post-<?php the_ID(); ?>" <?php post_class( array( 'book', 'left', 'half' ) ); ?>>
  
			<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
						
			<?php if ( has_post_thumbnail() ) { ?>
			
				<a href="<?php the_permalink(); ?>">
			
					<?php the_post_thumbnail( 'medium', array(
						'class' => 'left',
						'alt'	=> get_the_title()
						) );
					?>
				
				</a>
			
			<?php }?>
			
					
			<?php the_excerpt(); ?>
			
			<div class="button"><a href="<?php the_permalink(); ?>">Explore the Book</a></div>
  		
  		</article>
  
  		<?php endwhile; ?>
  
  		<?php wp_reset_postdata(); ?>
 
  	</section>
  
<?php } ?>

مشاهده می کنید که در این حلقه از یک post type استفاده شده و از همین تمام مطالب مربوط به آن post type نمایش داده می شود.

اما کاری که ما میخواهیم انجام دهیم این است: تغییر ظاهر اولین مطلب. پس بهتر است شروع کنیم.

ایجاد حلقه جداگانه برای اولین مطلب

برای تغییر ظاهر اولین مطلب، ما باید یک حلقه جداگانه ایجاد کنیم که تنها برای اجرای آن مطلب استفاده می شود.

برای انجام این کار، شما به دو پارامتر نیاز دارید: یکی برای post type و یکی برای تعداد مطالب که همان posts_per_page است. مقدار آن را باید ۱ بگذارید.

کار را با تکثیر حلقه اصلی آغاز کنید، با این کار شما دو حلقه در فایل قالب خود دارید که هر دو از WP_Query استفاده می کنند.حالا پارامترهای اولین حلقه را به صورت زیر ویرایش کنید:

$args = array(
	'post_type' => 'rmcc_blurb',
	'posts_per_page' => 1
);

این کد جدیدترین مطالب را دریافت خواهد کرد. اما آنچنان تغییری با این کار ایجاد نمی شود آن هم تا زمانیکه شما چیزهای دیگری را نیز در اولین حلقه تغییر دهید.

من میخواهم خروجی شامل چکیده و متن اصلی مطلب باشد. در ضمن میخواهم ظاهر آن را نیز تغییر دهم و با این کار تصویر شاخص و چکیده در بالای متن اصلی نمایش داده می شوند.

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

<article id="post-<?php the_ID(); ?>" <?php post_class( 'book' ); ?>>
	
	<div class="left one-third">
	
		<?php if ( has_post_thumbnail() ) { ?>
		
			<a href="<?php the_permalink(); ?>">
		
				<?php the_post_thumbnail( 'medium', array(
					'class' => 'left',
					'alt'	=> get_the_title()
					) );
				?>
			
			</a>
		
		<?php }?>
		
	</div>
	
	<div class="right two-thirds book-excerpt">
	
		<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
	
		<?php the_excerpt(); ?>
		
	</div>
	
	<div class="clear">
		<?php the_content(); ?>
	</div>
	
	</article>

مشاهده خواهید کرد که کدهایی برای تغییر ظاهر مطلب مذکور در کد بالا وجود دارند که این به قالب شما بستگی دارد.

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

خوب به نظر می آید. مشاهده می کنید که لینک مربوط به مشاهده صفحه مربوط به مطلب را نیز حذف کرده ام (علت آن هم این است که متن اصلی را نیز در این قسمت به نمایش درآورده ایم) و به جای آن دکمه ای برای خرید کتاب مذکور وجود دارد.

ویرایش و اصلاح حلقه برای مطالب بعدی

اما مشکلی وجود دارد.

این تصویری است که به شما نخستین مطلب و مطلب بعد از آن را نمایش می دهد:

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

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

توجه: اگر تا به حال از این روش استفاده کرده اید، پارامتر posts_per_page برای اولین حلقه و پارامتر offset برای دومین حلقه میبایست یکسان باشد، ممکن است همیشه ۱ نباشند.

در حلقه دوم، پارامترها را ویرایش و اصلاح کنید تا شبیه نمونه زیر باشند:

$args = array(
	'post_type' => 'rmcc_blurb',
	'offset' => 1
);

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

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

پیاده سازی این تکنیک روی حلقه استاندارد وردپرس

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

انجام این تکنیک در دو مرحله صورت میگیرد:

1. اضافه کردن یک کوئری اضافه با استفاده از WP_Query
2. در فایل functions.php مربوط به قالب، از pre_get_posts برای اصلاح حلقه استاندارد استفاده کنید.

اضافه کردن کوئری اضافی

ابتدا فایل قالبی را که میخواهید ویرایش کنید را باز کنید. این فایل یک قالب آرشیو خواهد بود. در موردی که ما با آن کار داریم، اگر از حلقه استاندارد برای نمایش خروجی custom post type خود استفاده کرده باشیم، نام فایل مذکور چیزی شبیه به archive-rmcc_book.php خواهد بود.

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

فایل قالب خود را ذخیره کرده و نخستین مطلب شما دو بار نمایش داده خواهد شد، همان گونه که در مثال بالا این اتفاق افتاد.

صرف نظر کردن از نخستین مطلب در کوئری اصلی

شما نمی توانید به صورت مستقیم پارامتر مذکور را برای کوئری اصلی موجود در فایل آرشیو ویرایش کنید. به جای آن شما باید از هوک pre_get_posts برای انجام این کار استفاده کنید. فایل functions.php خود را باز کرده و چیزی شبیه به کد زیر را به آن اضافه کنید:

$args = array(
	'post_type' => 'rmcc_blurb',
	'posts_per_page' => 1
);
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>

	<section class="books first wide-box">
	
		<?php while ( $query->have_posts() ) : $query->the_post(); ?>

		<article id="post-<?php the_ID(); ?>" <?php post_class( 'book' ); ?>>
			
			<div class="left one-third">
			
				<?php if ( has_post_thumbnail() ) { ?>
				
					<a href="<?php the_permalink(); ?>">
				
						<?php the_post_thumbnail( 'medium', array(
							'class' => 'left',
							'alt'	=> get_the_title()
							) );
						?>
					
					</a>
				
				<?php }?>
				
			</div>
			
			<div class="right two-thirds book-excerpt">
			
				<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
			
				<?php the_excerpt(); ?>
				
			</div>
			
			<div class="clear">
				<?php the_content(); ?>
			</div>
  		
  		</article>
  
  		<?php endwhile; ?>
  
  		<?php wp_reset_postdata(); ?>
 
  	</section>
  
<?php } ?>

حالا فایل functions.php را ذخیره کنید، مشاهده خواهید کرد که نخستین مطلب شما با استفاده از حلقه ویرایش شده و دیگر مطالب از طریق حلقه استاندارد نمایش داده می شوند.

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

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

با استفاده از این تکنیک، شما می توانید از WP_Query برای نمایش محتوای اضافی برای مطالب اخیر سایت خود استفاده کرده یا اینکه ظاهر آن را تغییر دهید. همان طور که در نمونه بالا مشاهده کردید، از این تکنیک استفاده کردیم و نخستین مطلب سایت را از دیگر مطالب موجود متمایز ساختیم.

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

پایان…!