شاید تا حالا یک اسلایدر را دیدید و خواستید از ان در وبسایت خود استفاده کنید. و یا قالب های دارای اسلایدر را تهیه کنید ولی از آنجا که مطالب و تصاویر اسلاید ثابت می باشد.کمی موجب اعصاب خورد کنی می باشد. من برای اینکه اسلایدر آخرین مطالب سایت و یا دسته خاصی از پلاگین بلاک پیشرفته استفاده کرده ام که شما می توانید از اینجا دانلود کنید.
در این آموزش سعی شده مختصری هم به نحوه ی کارکرد این ماژول اشاره شود.
برای فهم بیشتر آموزش از یک قالب مخصوص دیتالایف به نام megatron که داری اسلایدر نیز می باشد استفاده شده است.
آموزش نصب
ابتدا فایل Slider.tpl در پوشه اصلی قالب را باز کنید.
به دنبال کد زیر بگردید.
آن را Cut کیند(دقت کنید cut نه copy).
یک فایل جدید به نام panel.tpl در پوشه اصلی قالب بسازید. محتویات cut شده را در آن paste کنید.
حالا باید محتویات فایل panel.tpl را ویرایش کینیم تا برای اسلایدر اولین تصویر پست،عنوان مطلب و لینک به پست را اضافه کینم
باید تگ ها اختصاصی دیتالایف را در قسمت های تعین شده وارد کنید.
تگ {image} برای نمایش اولین تصویر پست در اسلایدر
تگ {title} برای عنوان مطلب و تگ {full-link} نمایش کامل پست می باشد.
حالا ما یک قالب برای بلوک اسلایدر خود تعریف کردیم حالا باید از کد زیر برای نمایش بلوک استفاد کنیم.
حالا باید این کد را در قسمتی از فایل slider.tpl ، که cut کردید قرار دهید.
(کد بالا می گوید یک پست بر اساس تاریخ و اولین تصویر موجود در ادامه مطلب را نمایش دهد)
منظورم کد زیر می باشد.
تا این مرحله کد نهایی فایل slider.tpl باید به این صورت باشد
اگر در کد بالا دقت کرده باشید برای نمایش مطلب یکی مانده به آخر از کد زیر استفاد کردم
این کد تقریبا هیچ فرقی نمکند به جز آنکه در آخرش &startFrom=1 را قرار دادم. وظیفه این قطعه کد این است که مطلب یکی مانده به آخر را نمایش بدهد. دقیق تر بگم از مطلب یک مانده به آخر شروع به نمایش پست ها میکند.ولی چون ما نیز از کد &limit=1 استفاده کردیم فقط یک مطلب نمایش می دهد که این همان پست یکی مانده به آخر می باشد.
برای نمایش پست دو تا مانده به آخر &startFrom=2 استفاده کنید و در ادامه برای نمایش پست های بعدی از اعداد 3 ، 4 و.. استفاده شود.
درادامه باید خط های 29 تا 35 فایل slider.tpl را ویرایش کنید این خطوط مشخص کننده تصاویر بندانگشتی برای انتخاب اسلاید های بعدی مباشد. که درست مانند مراحل قبل کد زیر
پیدا کرده و با این کد جایگزین کنید.
در کد بالا ما template را با فایل thumbs تنظیم کردیم.این در حالی است که ما چنین فایلی را در قالب نداریم برای این کار فایلی را به نام thumbs.tpl در پوشه اصلی قالب می سازیم و قبل از این کد های بالا را جایگزین کد های ذکر شده کنید . به دنبال کد زیر بگردید و آن را در فایل جدید که نام آن را thumbs قرار دادید کپی کنید.
بعد از کپی کرد این قطعه کد باید تگ های اختصاصی دیتالایف را در آن بگنجانیم. برای همین به جای
"{THEME}/slider/1.jpg" alt="" کد {image} را که برای نمایش اولین تصویر موجو در پست کاربرد دارد را وارد کنید.
اگر مراحل را به درستی انجام دادید باید فایل های زیر دارای محتوای زیر باشند.
Slider.tpl
ـــــــــــــــــــــــــ
Panel.tpl
ـــــــــــــــــ
Thumbs.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} برای نمایش اولین تصویر پست در اسلایدر
تگ {title} برای عنوان مطلب و تگ {full-link} نمایش کامل پست می باشد.
[img]{image}[/img]
<div class="panel-overlay">
<div class="link">[url=http://{full-link}][img]{THEME}/images/spacer.gif[/img][/url]</div>
<div class="slidertext">{title}</div>
</div>
حالا ما یک قالب برای بلوک اسلایدر خود تعریف کردیم حالا باید از کد زیر برای نمایش بلوک استفاد کنیم.
حالا باید این کد را در قسمتی از فایل slider.tpl ، که cut کردید قرار دهید.
{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"> {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"> {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"> {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"> {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"> {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>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story"}</li> <li>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=1"}</li> <li>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=2"}</li> <li>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=3"}</li> <li>{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>
اگر در کد بالا دقت کرده باشید برای نمایش مطلب یکی مانده به آخر از کد زیر استفاد کردم
{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>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story"}</li> <li>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=1"}</li> <li>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=2"}</li> <li>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=3"}</li> <li>{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"> {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"> {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"> {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"> {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"> {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>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story"}</li> <li>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=1"}</li> <li>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=2"}</li> <li>{include file="engine/modules/blockpro/block.pro.3.php?&limit=1&template=thumbs&sort=date&image=full_story&startFrom=3"}</li> <li>{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="{full-link}"><img src="{THEME}/images/spacer.gif" alt=""/></a></div> <div class="slidertext">{title}</div> </div>
ـــــــــــــــــ
Thumbs.tpl
<div class="thumbs"><img src="{image}" alt=""/></div>
سوالات متداول
این هک برای تمام اسلایدر های آماده و قالب های دارای اسلایدر کار می کند.قابل ذکر می باشد اسامی panel.tpl و thumbs.tpl اختیاری می باشد و همچنین محتویاتشان نیز به کد های قالب بستگی دارد.
روند کلی ساخت اسلایدر آخرین مطالب سایت و یا آخرین های دسته ی خاص با کمک ماژول بلاک های پیشرفته به این شرح می باشد:
اگر قالب سایت شما اسلایدر ندارد شما می توانید از اسلایدر های آماده استفاده کنید و یا اگر به همراه خود اسلایدر دارد شما باید ببنید که چه کدی هایی برای نمایش عکس اسلایدر ، اگر تصویر بند انگشتی داشت کد های مربوط به آن ، عنوان مطلب و اگر در اسلایدر مختصری از توضیحات را داشت کد های آن استفاده می شود. و آن ها را Cut کرده در فایل جدیدی که ساختید قرار دهید و به جای کد های cut شده از دستور فراخوانی آن بلوک (به وسیله ماژول بلاک پیشرفته) قرا دهید.
در فایل های جدید باید تگ های {image} ، {title} و ... استفاده کنید.
روند کلی ساخت اسلایدر آخرین مطالب سایت و یا آخرین های دسته ی خاص با کمک ماژول بلاک های پیشرفته به این شرح می باشد:
اگر قالب سایت شما اسلایدر ندارد شما می توانید از اسلایدر های آماده استفاده کنید و یا اگر به همراه خود اسلایدر دارد شما باید ببنید که چه کدی هایی برای نمایش عکس اسلایدر ، اگر تصویر بند انگشتی داشت کد های مربوط به آن ، عنوان مطلب و اگر در اسلایدر مختصری از توضیحات را داشت کد های آن استفاده می شود. و آن ها را Cut کرده در فایل جدیدی که ساختید قرار دهید و به جای کد های cut شده از دستور فراخوانی آن بلوک (به وسیله ماژول بلاک پیشرفته) قرا دهید.
در فایل های جدید باید تگ های {image} ، {title} و ... استفاده کنید.
