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

Started By IFTHEN, Jul 04 2016 08:56 PM

2 پاسخ برای این موضوع
IFTHEN

    عضو تازه وارد

  • عضو انجمن
  • ستاره
  • 4 محبوبیت
  • 27 ارسال

ارسالی 04 July 2016 - 08:56 PM

مدت زیادی دنبال این بودم که بتونم آخرین مطالب وبلاگی که با سیستم وردپرس راه اندازی شده به همراه تصویر شاخص (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

    عضو ویژه

  • عضو انجمن
  • ستارهستارهستارهستاره
  • 38 محبوبیت
  • 337 ارسال

ارسالی 05 July 2016 - 12:40 PM

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

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

S_Ahmad

    عضو تازه وارد

  • عضو انجمن
  • ستاره
  • 5 محبوبیت
  • 18 ارسال

ارسالی 01 February 2019 - 09:48 PM

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

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

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


همچنین به وردپرس, پرستاشاپ, wordpress, prestashop, blockrss نیز برچسب خورده است

0 کاربر در حال خواندن این موضوع است

0 کاربر، 0 مهمان و 0 عضو مخفی