آژاکس نمودن قالب های جوملا۱٫۵ و جوملا ۱٫۶

​

حال بریم سراغ اینکه اصلا آژآکس با قالب شما چیکار میکنه . فرض کنید در حال حاضر شما در حال مشاهده این صفحه در وب سایتی هستید حال میخواهید به صفحه بعدی بروید . به صفحه دقت بفرمایید … کدام عناصر در صفحه تغییر میکند ؟ قسمت مطلب ! به زبان ساده وقتی یک قالب آژآکسی میشه در گذر از هر صفحه مطالبی که تغییر نمیکنند ثابت میماند و مطالبی که تغییر میکنند دوباره خوانده میشوند این کار باعث افزایش سرعت چند برابری سایت میگرد
استفاده از این روش ممکن در قالب شما جواب ندهد و با قالب هایی که با تیبل طراحی شده اند دچار مشکل باشد . از روی دیگر استفاده از این روش در کنار تمام مزایا دارای یک ایراد است و آن هم این میباشد که گوگل در این حالت سایت شما دیر تر از زمان معمول ایندکس میکند که البته آن هم راه حل دارد . اما حالا فرض کنید قالب شما تیبل باشه و از این سیستم هم استفاده کنید دیگه فاتحه seo خوندس ! البته روی ۹۹% قالب هایی که با تیبل طراحی شده است اصلا این روش جواب نمیده . اما از یک طرف هم استفاده از این روش باعث میشه بازدید کننده عاشق سایت شما بشه . من برای سایت هایی که برای شرکت ها طراحی میکنم بیشتر از این روش استفاده میکنم چرا که سایت های شرکتی خیلی نیاز به seo ندارند .مشتری سایت را میبینه و میپسنده و چون از تکنولوژی جدیدی درش استفاده شده بازدید کننده ها هم لذت میبرند.
خوب بریم سر آموزش نحوه استفاده از افزونه ها :
این پلاگین یک کتابخانه آژاکس به سایت جوملایی شما اضافه میکند.
توجه :
بعد از نصب پلاگین قالب fullajax_tmpl را نیز نصب کنید.!
زمانیکه هر دو مورد را نصب کردید ..
قدم اول
شما باید id محل نمایش سیستم آژاکس در قالب را در اولین پنجره تنظیمات پلاگین وارد نمایید. id های مورد نظر را میتوانید از فایل index.php قالب خود پیدا نمایید. در صورتی که مایل باشید خودتان موقعیتی ایجاد نمایید کد نمونه زیر را در بین موقعیتهای فایل index.php قالب خود قرار داده و id را در تنظیمات پلاگین forajax وارد نمایید.
کد نمونه:

کد:

<div id=”forajax”>
<jdoc:include type=”message” />
<jdoc:include type=”component” />
</div>

قدم دوم
اگر شما از افزونه مسیر سایت استفاده میکنید باید در محل مخصوص id افزونه مسیر سایت – سومین قسمت در تنظیمات پلاگینid – مربوطه را وارد نمایید. در غیر این صورت میتوانید از کد نمونه زیر در فایل index.php قالب خود استفاده نمایید. و در تنظیمات پلاگین گزینه id افزونه مسیر سایت را به حالت پیش فرض باقی بگذارید.
کد نمونه:

کد:

<div id=”breadcrumbs”>
<jdoc:include type=”modules” name=”breadcrumbs” />
</div>

امکانات اضافی
· اگر از منوهایی برای ارسال مطلب، ارسال لینک و… در سایت خود استفاده میکنید ؛ حتما id این منو ها را درقسمت مربوطه در تنظیمات پلاگین وارد نمایید. ( قسمت پنجم در تنظیمات پلاگین)
· همچنین اگر سرور شما HTTP_AJAX_ENGINE را از نوار ادرس حذف نمیکند، شما میتوانید params:’ax=ok’, را در قسمت کدها و پارامترهای سیستم اژاکس در تنظیمات پلاگین حذف نمایید .
· به دنبال این عبارت بگردید:

·

کد:

SRAX.Filter.add({url:’/', id:fullAjaxId, rc:1, params:’ax=ok’, onload:doSomethingAfterFAjxPagLoad});

· وقسمتی که با رنگ بنفش مشخص شده است را حذف نمایید . بعد از انجام این امر عبارت ‘?ax=ok’ از نوار ادرس حذف خواهد شد.
جلوه انیمیشن
برای تغییر تصویر شما باید قسمت کدهای جاوا برای جلوه انیمیشن را در تنظیمات پلاگین ویرایش کنید.

کد:

var imgLoader = new Element(‘img’,{
‘id’:'gifAjaxLoadingAnimation’,
’src’:'/media/system/images/mootree_loader.gif’, // ادرس تصویر مورد نظر
‘alt’:'Loading’,
’styles’:{
‘position’:'relative’,
‘border’:'none’,
‘padding’:'0′,
تنظیم فاصله افقی ‘margin-left’: mIdWidth*0.5 ,
تنظیم فاصله عمودی ‘top’: mIdHeight*0.3       
}});

برای ادرس تصویر شما میتوانید از ‘http://mysite.com/loading.gif’ یا ‘/loading.gif استفاده نمایید.
همچنین برای تنظیمات فاصله میتوان از واحد px نیز استفاده کرد.
نمونه:
برای واحد پیکسل margin-left’: ‘100′
یا
برای استفاده از درصد در تنظیم فاصله ‘margin-left’: ‘30%’
عرض مطلب mIdWidth
ارتفاع مطلب mIdHeight
برای ایجاد جلوه های انیمیشنی دلخواه شما باید ‘< ;/span> در قسمت تنظیمات انیمیشن را ویرایش کنید
نمونه:

کد:

SRAX.Effect.add({id: ‘You-Content-ID’,
start:function(id, request){
// Do here animation after click before request
request(); // execute this when animation ends
},
end:function(){
// Do here animation after request
}
});

در نهایت همین آموزش در داخل فایل فشرده وجود دارد .

» دانلود با حجم ۳۲۶ کیلوبایت ( لینک مستقیم ) «​