چندی پیش که در حین گشت گذار در سایت های خارجی بودم، رد یک سایت موضوعی توجه ام ر به خود جلب کرد و آن این بود که با هر بار رفرش کردن صفحه یک تصویر جدید در هدر قرار می گرفت. ابتدا فکر کردم تصاویر اسلایدر هستن که من متوجه ورق خوردنشان نمی شوم، ولی هر چه صبر کردم تصویر عوض نشد تا اینکه متوجه شدم با قطعه کدی تصاویر بصورت رندوم و تصادفی در هدر فراخوانی می شوند. حال مزیت این کار چه می تواند باشد؟ کمی که به این موضوع فکر کردم ایده جالبی به ذهنم رسید. با ایجاد تصاویر تصادفی در هدر وردپرس می توان بجای نمایش تصاویر بیهوده ، کاری کرد که با هر بار مراجعه کاربر ، یک محصول جدید یا خدمات جدید نمایش داده شود. حتی می توان در یک گام فراتر، تبلیغات را نیز به صورت تصادفی در بخش هدر سایت نمایش در آورد.
حال اگر با خواند متن بالا مشتاق شده اید شما هم این کار را انجام دهید، در ادامه با ما همراه شوید.
اکر از دسته کاربران تازه کار باشید شاید پیش خودتان فکر کنید که انجام این کار نیاز به دانش کدنویسی دارد و یا با افزونه خاصی قرار است انجام شود و برای شما سخت است. باید عرض کنیم خیر، ایجاد تصاویر تصادفی در هدر بسیار آسانتر از آنچیزی است که فکرش را بکنید.
برای شروع ابتدا باید چند نکته را در خصوص تصاویر مربوطه رعایت نمایید.
1- تمامی تصاویر شما باید دارای سایز یکسان باشند، مثلا 1024px در 400px
2- تمام تصاویر انتخابی شما باید دارای پسوند یکسان باشند، مثلا jpg
3- تمای تصاویر شما باید بصورت ترتیبی نام گذاری شوند مثلاً image_1 , image_2 , image_3 و الی آخر ( وجود خط آندرلاین بعد از نام و اختصاص یک شماره الزامیست )
در نظر داشته باشید که برای ایجاد تصاویر تصادفی در هدر شما میتوانید از هر تعداد تصویر که خواستید استفاده کنید و محدودتی در آن وجود ندارد.
بعد از اینکه تصاویرتان را آماده کردید یک راست به سراغ فایل header.php قالب رفته و آنرا با ویرایشگر کد باز نموده و کدهای زیر را در آن قرار دهید.
<img src="http://path_to_images/image_<?php echo(rand(1,3)); ?>.jpg"
width="image_width" height="image_height" alt="image_alt_text" />
توجه به چند نکته مهم در این قسمت الزامیست.
- مسیر تصاویر انتخابی خود را در کد بالا بجای واژه path_to_images قرار دهید.
- برای تصاویر انتخابی خود یک فولدر در ریشه سایت خود ایجاد کرده و تمامی تصاویر را در آن قرار دهید. زیرا وجود تصاویر متفرقه ممکن است عمل انتخاب را دچار مشکل نماید.
- با توجه به کد مربوطه ، فایل هدر را کاملا مرور نمایید تا کد مشابه یا هر کدی مربوط به تصویر هدر در آن وجود نداشته باشد.
- با توجه به تعداد تصاویر انتخابی خود در خط اول کد مقدار عدد 3 را به تناسب تعداد تصاویر تغییر دهید.
- در بخش width و height در کد بالا، عرض و ارتفاع تصویر را بر مبنای پیکسل وارد نمایید.
اگر قالب شما بخشی بعنوان تصویر هدر ندارد بهتر است کد بالا را در داخل تگ <div> قرار داده و یک کلاس نیز برای آن تعیین نمایید. بدینصورت شما میتوانید بعد از ذخیره کردن فایل با استفاده از کدهای سی اس اس به کلاس مورد نظر اطلاعات مناسب را داده و یک بخش مناسب برای تصاویر تصادفی در هدر ایجاد نمایید.
نمونه کد داخل div به شکل زیر است:
<div class="randomheader">
<img src="http://path_to_images/image_<?php echo(rand(1,3)); ?>.jpg"
width="image_width" height="image_height" alt="image_alt_text" />
</div>
حال بعنوان نمونه کدهای سی اس اس را به شکل زیر تعریف میکنیم
.randomheader
{
display: block;
width: auto;
height: 400px;
margin:0px;
}
اگر همه موارد را درست انجام داده باشید، حال با هر بار رفرش کردن سایت میبایست یکی از تصاویر بصورت تصادفی نمایش داده شود. البته در تعداد تصاویر کم ممکن است چندین بار یک تصویر پشت سر هم تکرار شود. پیشنهاد میکنیم حداقل بیش از 5 تصویر استفاده نمایید.
موفق باشید.
