در بهار ۲۰۱۲ نسخه ۳.۴ وردپرس منتشر شد. نسخه ۳.۴ علاوه بر معرفی سفارشیساز تم و قابلیت جاسازی خودکار توییتها، عملکردی با عنوان تابع ()wp_is_mobile را نیز اضافه کرد که توسعهدهندگان میتوانند از آن برای آزمایش اینکه آیا بازدیدکننده وبسایت از دستگاه تلفن همراه مانند موبایل یا تبلت وصل میشود استفاده کنند.
تابع ()wp_is_mobile در زمانی ایجاد شد که صفحه نمایش رتینا مشهوری که اپل برای آیفون ۴ خود رونمایی کرده بود، ۶۴۰ در ۹۶۰ پیکسل بود. هنگامی که آیفون ۵ چند ماه پس از وردپرس ۳.۴ رونمایی شد، صفحه نمایش گوشی به ۶۴۰ در ۱۱۳۶ پیکسل رسید – هنوز فاصله زیادی با نمایشگرهای تلفنهای هوشمند و تبلتهای مدرن وجود دارد، که مرزهای بین صفحه نمایش موبایل و صفحه دسکتاپ را محو میکند.
تابع ()wp_is_mobile چیست؟
تابع wp_is_mobile() در وردپرس برای تشخیص این که کاربر از یک دستگاه موبایل (مانند تلفن همراه یا تبلت) وارد سایت شده است، استفاده میشود. این تابع مقدار true را در صورت استفاده از یک دستگاه موبایل و مقدار false را در غیر این صورت برمیگرداند. این تابع با بررسی هدر User-Agent دستگاه کاربر، تشخیص را انجام میدهد.
if ( wp_is_mobile() ) { echo "شما از موبایل وارد شدهاید."; } else { echo "شما از دسکتاپ وارد شدهاید."; }
این تابع معمولا برای تغییر طراحی یا بارگذاری استایلهای مخصوص موبایل در قالب وردپرس استفاده میشود.
هدف تابع ()wp_is_mobile
در سال ۲۰۱۲، پشتیبانی مرورگر از CSS media queries که طراحی وب واکنشگرا را امکانپذیر میکرد، هنوز جدید بود. اما فعال کردن طرحبندیهای صفحه (page layouts) که با ابعاد مختلف viewport سازگار میشوند، هدف ()wp_is_mobile نبود.
این عملکرد هیچ تمایزی بین تلفنها و تبلتها ایجاد نمیکند و کاملا از پیکسلهای موجود در مرورگر بازدیدکننده بیاطلاع است. در عوض، تابع ()wp_is_mobile به عنوان ابزاری در نظر گرفته شد که به توسعهدهندگان اجازه میدهد تا پهنای باند را هنگام پاسخگویی به دستگاههای تلفن همراه که اغلب ضعیف بودند و احتمالا در دست کاربرانی بودند که به ارائهدهندگان مخابراتی خود برای انتقال داده پول پرداخت میکردند، بهینه کنند.
از آنجایی که امروزه تلفنها و تبلتها از بسیاری از کامپیوترهای موجود در سال ۲۰۱۲ قدرتمندتر هستند، پهنای باند محدودتر ممکن است اهمیت کمتری داشته باشد، اما هنوز موارد استفاده برای عملکردی وجود دارد که به سادگی دنیا را به دو بخش تقسیم میکند: دستگاههای تلفن همراه و هر چیز دیگری.
تابع ()wp_is_mobile در عمل
تابع ()wp_is_mobile وردپرس در نتیجه درخواست مرورگرها در اکثر گوشیهای هوشمند و تبلتها برمیگرداند. بنابراین، مثال کلاسیک تابعی که جریانهای محتوای مختلف را در PHP تولید میکند به شکل زیر است:
<?php if( wp_is_mobile()){ ?> <p>This content is for mobile devices</p> <?php } else { ?> <p>This content is for desktops (and laptops).</p> <?php } ?>
اگر واقعا نیاز به بهینه سازی خروجی وب سایت خود برای تلفن همراه دارید (احتمالا برای به حداقل رساندن نیازهای پهنای باند)، تکنیک بالا را می توان در فایلهای پوسته برای خروجی ساختارهای کاملا متفاوت
برای صفحات موبایل و دسکتاپ استفاده کرد.
تشخیص دستگاه برای تنظیمات محتوای ریز
CSS media queries و سایر تکنیکهای پشتیبانیکننده از طراحی وب واکنشگرا میتوانند به طرحبندی صفحه کمک کنند تا با طیف گستردهای از اندازهها و جهتگیریهای صفحه نمایش سازگار شوند. اما آنها نمیتوانند به شما در برقراری ارتباط با بازدیدکنندگان سایت خود به عنوان کاربران موبایل یا دسکتاپ کمک کنند.
به عنوان مثال، میدانید که کاربران دسکتاپ احتمالا از ماوس برای کلیک (click) کردن روی عناصر سایت شما استفاده میکنند، در حالی که کاربران تلفن همراه ضربه (tap) میزنند. کاربران دسکتاپ ممکن است روی یک لینک راست کلیک کنند تا آن را در یک پنجره مرورگر جدید باز کنند. در همین حال، کاربران تلفن همراه ممکن است برای شروع همان کار، فشار داده و نگه دارند (press and hold). فقط برقراری ارتباط با کاربران در مورد نحوه پیمایش وبسایت خود میتواند به این معنی باشد که نیمی از اوقات از اصطلاحات اشتباه استفاده میکنید.
در اینجا نحوه ترکیب تابع ()wp_is_mobile و کدهای کوتاه وردپرس برای پشتیبانی از خروجی گرانول محتوای موبایل یا دسکتاپ به روشی که برای ویرایشگرهای وبسایت هم آسان باشد، بررسی میکنیم.
ما از تشخیص موبایل یا دسکتاپ خود در ارتباط با توابع وردپرس () add_shortcode و () do_shortocde برای ایجاد ابزارهای شورت کدی که ویرایشگرها میتوانند در پستها اعمال نمایند استفاده میکنیم.
ابتدا، این کد را به فایل functions.php قالب خود اضافه میکنیم (پس از محافظت از آن با ایجاد یک چایلد تم):
/** * Add shortcodes */ // Create [desktop] shortcode add_shortcode('desktop', 'show_desktop_content'); function show_desktop_content($atts, $content = null){ if( !wp_is_mobile() ){ return do_shortcode( $content ); } else { return null; } }</p> <p dir="ltr">// Create [mobile] shortcode add_shortcode('mobile', 'show_mobile_content'); function show_mobile_content($atts, $content = null){ if( wp_is_mobile() ){ return do_shortcode( $content ); } else { return null; } }
این کدهای کوتاه [desktop] و [mobile] را ایجاد میکند که میتوانیم در هر پست یا محتوای صفحه مانند این استفاده کنیم:
<h2>راهنمای رمز</h2> To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.
این تکنیک ارائه محتوایی را که از نحوه تعامل بازدیدکنندگان با سایت وردپرس شما آگاه است، نسبتا آسان میکند.
هاست وردپرس با وب سرور محبوب لایت اسپید و کش لایت اسپید باعث میشود تا سرعت لود فوق العادهای را تجربه کنید.
با خرید هاست وردپرس کانفیگ حرفهای و نظارت بر سرور به صورت پیوسته توسط تیم فنی پارسدِو انجام خواهد شد.
تابع ()wp_is_mobile و کش وردپرس
نیازی نیست که از سال ۲۰۱۲ از وردپرس استفاده کرده باشید تا بدانید که کش کردن صفحه یکی از موثرترین راهها برای بهبود عملکرد است. اما کشینگ اولیه وردپرس میتواند چوب لای چرخ ارائه محتوای متفاوت در درخواستهای یک صفحه بگذارد.
کش وردپرس از یک صفحه جداگانه با درخواست مشتری آغاز میشود. اگر اولین درخواست از یک دستگاه تلفن همراه باشد، محتوای ذخیره شده در کش برای کاربران تلفن همراه در صورتی که توسط تابع ()wp_is_mobile اصلاح شود، تنظیم میشود. و هر درخواست بعدی برای آن صفحه، محتوای موبایل را – حتی به کاربران دسکتاپ – تا زمانی که کش پاک شود، ارائه میکند.
به همین توصبه میشود از کشهای جداگانه برای محتوای موبایل و دسکتاپ استفاده نمائید.
جمعبندی
تابع ()wp_is_mobile ممکن است مانند عتیقه فراموش شده به نظر برسد، اما ممکن است برای تشخیص موبالی یا دسکتاپ آن کاربردهایی پیدا کنید که می تواند به شما کمک کند تجربه بهتری برای همه بازدیدکنندگان وبسایت خود ایجاد نمائید. فراموش نکنید که اگر میخواهید بهترین عملکرد را از این مسیرهای موبایل و دسکتاپ داشته باشید، برای محتوای متفاوتی که تولید میکنید، به کش جداگانه نیاز دارید.