شاید شما دوست داشته باشید تا زمانی که سایتتون بصورت کامل لود نشده برای بازدیدکنندگان نمایش داده نشه، و یا بخواهید در حین زمان لود شدن سایتتون یک لوگو و عکس زیبا را تنظیم بکنید تا برای بازدیدکنندگان نمایش داده شوند و آن ها را به خود مشغول بکند تا زمانی که سایت کامل لود میشود. در روشی که امروز گفته شده است از هیچ افزونه ای استفاده نشده است بخاطر همین بر روی سرعت سایت شما مشکلی پیش نخواهد آمد و این کد ها نیز بسیار سبک میباشد و تاثیری بر روی سرعت لود شدن سایت شما ندارد. برای درست کردن لودینگ ما فقط با چند تا کلیک میتوانیم یک سیستم لودینگ بسیار حرفه ای طراحی بکنیم.
معمولا هدف اصلی وبمستر ها برای قرار دادن Loading ارائه یک ظاهر بصری زیباتر به سایت میباشد که گاهی اوقات این وبمستر ها علاوه بر اینکه به سایت خودشون یک زیبایی ظاهری منحصر بفرد اضافه کرده اند گاهی با قرار دادن لوگوی سایت خود بصورت غیر مستقیم شروع به برندینگ هم میکنند.
در آموزش وردپرس امروز ما برای شما یک عکس gif و انیمیشن رو به عنوان لوگوی لودینگ سایت اضافه میکنیم و بعد از آن شما میتوانید با سلیقه خودتان این عکس را نیز تغییر دهید همچنین آموزش امروز بر روی قالب وردپرس فعال سایت شما انجام میشود و در صورتی که قصد خرید قالب وردپرس جدید را دارید برای اینکه تظیمات شما از بین نرود باید دوباره بر روی قالب جدیدتون هم همین عملیات ها رو تکرار بکنید.
ما کد های خودمون رو در قسمت Header قالب وردپرس فعال سایت شما مینویسیم و در هر قالب دیگری که خواستید این قالبیت را اضافه بکنید از این روش میتوانید استفاده بکنید همچنین بدلیل تخصصی بودن این مورد و اینکه شما برای قرار دادن لودینگ در سایتتون ممکنه قسمتی رو اشتباه انجام بدید بخاطر همین بهتر است که قبل و بعد از قرار دادن کد ها از سایتتون بکاپ بگیرید تا اگر مشکلی برای شما پیش آمد با ریستور کردن بکاپ بتوانید مشکل را رفع بکنید.
نحوه قرار دادن Loading در وردپرس :
شما باید به مسیری که قالبتون در اون نصب هست بروید، برای اینکار از طریق فایل منجر هاستتون به مسیر زیر بروید:
wp-content/themes/themename
که در بالا منظور از themename همان اسم قالب فعال در سایت شما میباشدسپس در پوشه قالبتون دنبال یک فایل به نام Header.php باشید و این فایل رو برای Edit و ویرایش باز بکنید سپس در صفجه کلیدتون عبارت <body> رو سرچ بکنید و هر جایی که این کد رو پیدا کردید دقیقا در خط بعد از <body> کدی که در زیر قرار دادیم را وارد بکنید:
<div class="loader"></div>
سپس در فایل Style.css که در همان پوشه قالب سایت شما قرار دارد، کد های زیر را اضافه بکنید:
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(‘filex/loader.gif’) center center no-repeat #f8f8f8;
}در کد بالا منظور از filex/loader.gif همان آدرس فایل Gif شما میباشد که در این قسمت میتوانید آن را قرار دهید. سپس در فایل header.php دنبال تگ </head> باشید و هر قسمتی که این کد رو مشاهده کردید در یک خط قبل از اون کد زیر رو اضافه بکنید
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
همچنین بدلیل اینکه این فایل های کتابخانه بر روی سرعت لود شدن سایتتون تاثیر منفی نداره میتونید برای افزایش امنیت وردپرس کد های این قالب رو در هدر سایتتون قرار بدید و بعد از اون کد زیر رو استفاده بکنید:
<script type=”text/javascript”>
$(window).load(function() {
$(“.loader”).fadeOut(“slow”);
})
</script>
با تشکر از همراهی شما با این قسمت از آموزش وردپرس اگر در رابطه با این پست سوال یا مشکلی دارید در قسمت نظرات اعلام بکنید تا راهنمایی شوید. در صورتی که نیاز به قالب وردپرس دارید میتوانید به دسته بندی قالب وردپرس مراجعه بکنید.
