دیتالایف انجین فارسی

آموزش گام به گام ساخت اسلایدر آخرین مطالب سایت

تاریخ انتشار: 14 شهریور 1392
ارسال کننده: darkshatoot
شاید تا حالا یک اسلایدر را دیدید و خواستید از ان در وبسایت خود استفاده کنید. و یا قالب های دارای اسلایدر را تهیه کنید ولی از آنجا که مطالب و تصاویر اسلاید ثابت می باشد.کمی موجب اعصاب خورد کنی می باشد. من برای اینکه اسلایدر آخرین مطالب سایت و یا دسته خاصی از پلاگین بلاک پیشرفته استفاده کرده ام که شما می توانید از اینجا دانلود کنید.
در این آموزش سعی شده مختصری هم به نحوه ی کارکرد این ماژول اشاره شود.
برای فهم بیشتر آموزش از یک قالب مخصوص دیتالایف به نام megatron که داری اسلایدر نیز می باشد استفاده شده است.
  • آموزش نصب
  • سوالات متداول
ابتدا فایل Slider.tpl در پوشه اصلی قالب را باز کنید.
به دنبال کد زیر بگردید.
<img src="{THEME}/slider/1.jpg" alt="" /> <div class="panel-overlay"> <div class="link"><a href="/"><img src="{THEME}/images/spacer.gif" alt=""/></a></div> <div class="slidertext">توضیحات مربوط به شکل شماره 1</div> </div>

آن را Cut کیند(دقت کنید cut نه copy).
یک فایل جدید به نام panel.tpl در پوشه اصلی قالب بسازید. محتویات cut شده را در آن paste کنید.
حالا باید محتویات فایل panel.tpl را ویرایش کینیم تا برای اسلایدر اولین تصویر پست،عنوان مطلب و لینک به پست را اضافه کینم
باید تگ ها اختصاصی دیتالایف را در قسمت های تعین شده وارد کنید.
تگ {image} برای نمایش اولین تصویر پست در اسلایدر
تگ آموزش گام به گام ساخت اسلایدر آخرین مطالب سایت برای عنوان مطلب و تگ http://www.datalifeengine.ir/extension/hacks/2667-آموزش-گام-به-گام-ساخت-اسلایدر-آخرین-مطالب-سایت.html نمایش کامل پست می باشد.
[img]{image}[/img] <div class="panel-overlay"> <div class="link">[url=http://http://www.datalifeengine.ir/extension/hacks/2667-آموزش-گام-به-گام-ساخت-اسلایدر-آخرین-مطالب-سایت.html][img]&#123;THEME}/images/spacer.gif[/img][/url]</div> <div class="slidertext">آموزش گام به گام ساخت اسلایدر آخرین مطالب سایت</div> </div>

حالا ما یک قالب برای بلوک اسلایدر خود تعریف کردیم حالا باید از کد زیر برای نمایش بلوک استفاد کنیم.
حالا باید این کد را در قسمتی از فایل slider.tpl ، که cut کردید قرار دهید.
&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story"}

(کد بالا می گوید یک پست بر اساس تاریخ و اولین تصویر موجود در ادامه مطلب را نمایش دهد)
منظورم کد زیر می باشد.
<img src="{THEME}/slider/1.jpg" alt="" /> <div class="panel-overlay"> <div class="link"><a href="/"><img src="{THEME}/images/spacer.gif" alt=""/></a></div> <div class="slidertext">توضیحات مربوط به شکل شماره 1</div> </div>

تا این مرحله کد نهایی فایل slider.tpl باید به این صورت باشد
<div id="photos" class="galleryview"> <!-- 1 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story"} </div> &startFrom=1 <!-- 2 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story&startFrom=1"} </div> <!-- 3 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story&startFrom=2"} </div> <!-- 4 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story&startFrom=3"} </div> <!-- 5 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story&startFrom=4"} </div> <ul class="filmstrip"> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=1"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=2"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=3"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=4"}</li> </ul> <div class="sliderover"></div> </div>

اگر در کد بالا دقت کرده باشید برای نمایش مطلب یکی مانده به آخر از کد زیر استفاد کردم
&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story&startFrom=1"}

این کد تقریبا هیچ فرقی نمکند به جز آنکه در آخرش &startFrom=1 را قرار دادم. وظیفه این قطعه کد این است که مطلب یکی مانده به آخر را نمایش بدهد. دقیق تر بگم از مطلب یک مانده به آخر شروع به نمایش پست ها میکند.ولی چون ما نیز از کد &limit=1 استفاده کردیم فقط یک مطلب نمایش می دهد که این همان پست یکی مانده به آخر می باشد.
برای نمایش پست دو تا مانده به آخر &startFrom=2 استفاده کنید و در ادامه برای نمایش پست های بعدی از اعداد 3 ، 4 و.. استفاده شود.
درادامه باید خط های 29 تا 35 فایل slider.tpl را ویرایش کنید این خطوط مشخص کننده تصاویر بندانگشتی برای انتخاب اسلاید های بعدی مباشد. که درست مانند مراحل قبل کد زیر
<ul class="filmstrip"> <li><div class="thumbs"><img src="{THEME}/slider/1.jpg" alt=""/></div></li> <li><div class="thumbs"><img src="{THEME}/slider/2.jpg" alt=""/></div></li> <li><div class="thumbs"><img src="{THEME}/slider/3.jpg" alt=""/></div></li> <li><div class="thumbs"><img src="{THEME}/slider/4.jpg" alt=""/></div></li> <li><div class="thumbs"><img src="{THEME}/slider/5.jpg" alt=""/></div></li> </ul>

پیدا کرده و با این کد جایگزین کنید.
<ul class="filmstrip"> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=1"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=2"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=3"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=4"}</li> </ul>

در کد بالا ما template را با فایل thumbs تنظیم کردیم.این در حالی است که ما چنین فایلی را در قالب نداریم برای این کار فایلی را به نام thumbs.tpl در پوشه اصلی قالب می سازیم و قبل از این کد های بالا را جایگزین کد های ذکر شده کنید . به دنبال کد زیر بگردید و آن را در فایل جدید که نام آن را thumbs قرار دادید کپی کنید.
<div class="thumbs"><img src="{THEME}/slider/1.jpg" alt=""/></div>

بعد از کپی کرد این قطعه کد باید تگ های اختصاصی دیتالایف را در آن بگنجانیم. برای همین به جای
"{THEME}/slider/1.jpg" alt="" کد {image} را که برای نمایش اولین تصویر موجو در پست کاربرد دارد را وارد کنید.
اگر مراحل را به درستی انجام دادید باید فایل های زیر دارای محتوای زیر باشند.
Slider.tpl
<div id="photos" class="galleryview"> <!-- 1 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story"} </div> &startFrom=1 <!-- 2 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story&startFrom=1"} </div> <!-- 3 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story&startFrom=2"} </div> <!-- 4 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story&startFrom=3"} </div> <!-- 5 --> <div class="panel"> &#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=panel&sort=date&image=full_story&startFrom=4"} </div> <ul class="filmstrip"> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=1"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=2"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=3"}</li> <li>&#123;include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=4"}</li> </ul> <div class="sliderover"></div> </div>

ـــــــــــــــــــــــــ
Panel.tpl
<img src="{image}" alt="" /> <div class="panel-overlay"> <div class="link"><a href="http://www.datalifeengine.ir/extension/hacks/2667-آموزش-گام-به-گام-ساخت-اسلایدر-آخرین-مطالب-سایت.html"><img src="{THEME}/images/spacer.gif" alt=""/></a></div> <div class="slidertext">آموزش گام به گام ساخت اسلایدر آخرین مطالب سایت</div> </div>

ـــــــــــــــــ
Thumbs.tpl
<div class="thumbs"><img src="{image}" alt=""/></div>
این هک برای تمام اسلایدر های آماده و قالب های دارای اسلایدر کار می کند.قابل ذکر می باشد اسامی panel.tpl و thumbs.tpl اختیاری می باشد و همچنین محتویاتشان نیز به کد های قالب بستگی دارد.
روند کلی ساخت اسلایدر آخرین مطالب سایت و یا آخرین های دسته ی خاص با کمک ماژول بلاک های پیشرفته به این شرح می باشد:
اگر قالب سایت شما اسلایدر ندارد شما می توانید از اسلایدر های آماده استفاده کنید و یا اگر به همراه خود اسلایدر دارد شما باید ببنید که چه کدی هایی برای نمایش عکس اسلایدر ، اگر تصویر بند انگشتی داشت کد های مربوط به آن ، عنوان مطلب و اگر در اسلایدر مختصری از توضیحات را داشت کد های آن استفاده می شود. و آن ها را Cut کرده در فایل جدیدی که ساختید قرار دهید و به جای کد های cut شده از دستور فراخوانی آن بلوک (به وسیله ماژول بلاک پیشرفته) قرا دهید.
در فایل های جدید باید تگ های {image} ، آموزش گام به گام ساخت اسلایدر آخرین مطالب سایت و ... استفاده کنید.
23 نفر (22 کاربر و 1 میهمان) از این مطلب تشکر کرده اند.
تشکر
جهت ارسال نظر، فرم زیر را تکمیل نمائید:
نام:*
ایمیل:*
متن نظر:

 
پررنگکج خط دارخط دار در وسط|سمت چپوسط سمت راست|قرار دادن شکلکانتخاب رنگ|پنهان کردن متنقراردادن نقل قولتبدیل نوشته ها به زبان روسیقراردادن Spoiler
کد امنیتی: *