نمایش وبسایت برای کاربران موبایل در وردپرس

سلام دوستان با یک مقاله کاربردی دیگر در خدمت شما هستیم و در این مقاله قصد داریم تا به شما نحوه نمایش وبسایت برای کاربران موبایل در وردپرس را آموزش دهیم پس تا پایان مقاله با ما همراه باشید.

ممکن است شما هم نیاز داشته باشید که به جای نمایش نسخه موبایل نسخه تبلت وبسایت خود را به کاربران خود نشان دهید.این کار با دو روش قابل انجام است که در ادامه به آن ها اشاره میکنیم.

تشخیص دستگاه کاربر با PHP و Javascript

ابتدا باید نوع دستگاهی که وارد وبسایت خود می شود را تشخیص دهید این کار را با استفاده از یک کد جاوا اسکریپت می توانید انجام دهید. با استفاده از کد زیر میتوانید نوع سکو(Platform) را مشخص نمایید. توجه داشته باشید که این کد را باید در قسمت head وبسایت خود قرار دهید.

به این منظور این کد را در فایل header.php قالب خود قرار دهید:

<script>
    if (window.innerWidth <= 768) {
        document.documentElement.classList.add('tablet');
    }
</script>

این کد باعث اضافه شدن کلاس tablet به تگ html میشود. همچنین در window.innerWidth مشخص میکنیم که اگر عرض دستگاه(Device) بیشتر از 768 بود محتوا را در حالت تبلت نمایش دهد.

اعمال استایل سفارشی در دستگاه های مختلف

اگر میخواهید ظاهر قسمتی از وبسایت خود را در حالت موبایل و تبلت تغییر دهید میتواند از ویژگی Media Query استفاده کنید. برای این مورد میتوانید به شکل زیر عمل کنید:

/* استایل‌های برای صفحات با عرض بیشتر از 768پیکسل */
@media only screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

@media نشانگر شروع یک مدیا کوئری(Media Query) است.

only screen: در واقع به این اشاره میکند که فقط روی دستگاه هایی که به وسیله max-width معرفی شده اند استایل ها اعمال شوند

به عنوان مثال در این کد گفته شده پلتفرم هایی که بیش از 768 پیکسل دارند کل متن های صفحه اندازه فونت آن 14پیکسل باشد

جمع بندی

به پایان این مقاله کاربردی رسیدیم. در این مقاله نحوه نمایش وبسایت برای کاربران موبایل در وردپرس را مورد بررسی قرار دادیم.خوشحال میشویم دیدگاه های ارزشمندتان را بشنویم😊