مطالب وبلاگ وردپرس در فروشگاه پرستاشاپ

[IFTHEN]

مدت زیادی دنبال این بودم که بتونم آخرین مطالب وبلاگی که با سیستم وردپرس راه اندازی شده به همراه تصویر شاخص (Featured Image) رو داخل صفحه اصلی فروشگاه راه اندازی شده با پرستاشاپ، نمایش بدم.
پرستاشاپ ماژولی داره به نام Blockrss که با نصب اون و اضافه کردن فید وبلاگ مورد نظر، عنوان (Title) آخرین مطالب رو در قسمتی که ماژول قرار داده شده (ساید بار و یا فوتر و یا هرجایی که برای قرارگیری ماژول داخل قالب تعریف شده) نمایش می ده.
اما اگر بخواهید عکس شاخص (Featured Image) رو هم نمایش بده باید تغییر کوچیکی داخل فایل blockrss.tpl بدید.
بعد از باز کردن فایل blockrss.tpl کد زیر رو پیدا کنید:

<!-- Block RSS module-->
<div id="rss_block_left" class="block">
	<p class="title_block">{$title}</p>
	<div class="block_content">
		{if $rss_links}
			<ul>
				{foreach from=$rss_links item='rss_link'}
					<li><a href="{$rss_link.url}">{$rss_link.title}</a></li>
				{/foreach}
			</ul>
		{else}
			<p>{l s='No RSS feed added' mod='blockrss'}</p>
		{/if}
	</div>
</div>
<!-- /Block RSS module-->

و کد زیر رو داخل تگ <li></li> اضافه کنید:

<img src="{$rss_link.image}">

برای اینکه هم عنوان نوشته و هم عکس به صورت لینک در بیان و بشه از طریق CSS استایل داد، کد رو به صورت زیر نوشتم:

<!-- /Block RSS module-->

و کد زیر رو داخل تگ <li></li> اضافه کنید:

<!-- Block RSS module-->
<div id="rss_block_left" class="block">
	<p class="title_block">{$title}</p>
	<div class="block_content">
		{if $rss_links}
			<ul>
				{foreach from=$rss_links item='rss_link'}
					<li><a href="{$rss_link.url}"><span class="rss-img"><img class="circlerss" src="{$rss_link.image}"></span><span class="rsstitle">{$rss_link.title}</span></a></li>
				{/foreach}
			</ul>
		{else}
			<p>{l s='No RSS feed added' mod='blockrss'}</p>
		{/if}
	</div>
</div>
<!-- /Block RSS module-->

از کدهای زیر هم برای استایل دهی استفاده کردم:

#rss_block_left li {
margin-bottom: 15px;
}
.rss-img {
margin-left: 5px;
margin-bottom: 10px;
display: inline-block;
}
.circlerss {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.rsstitle {
display: inline-block;
width: 150px;
line-height: 22px;
vertical-align: top;
margin-right: 5px;
}

که این کد و نحوه استفاده از تگ‌ های HTML برای مثال و نمونه هست، شما می تونید از تگ‌های مورد نیاز خودتون استفاده کنید.

 

 

منبع: وبلاگ «اگر...آنگاه...» (شرطی بی نام)

[سات کالا Satkala.com]

سلام دوست عزیز

با تشکر از آموزش تون . ولی کاش یکمی زودتر این آموزش رو میزاشتین .

[S_Ahmad]

سلام. این کد برای من که پرستا 1.6 دارم کار نکرد!

میشه بیشتر راهنمایی کنید!

در ضمن بفرمایید که کدهایی که برای استایل دهی معرفی کردید باید در کدام فایل و در کجا قرار بگیره!