در بهار سال ۲۰۱۲، نسخه ۳.۴ وردپرس منتشر شد. علاوه بر معرفی سفارشی‌ساز پوسته (Theme Customizer) و امکان قرار دادن خودکار توییت‌ها، این نسخه تابع wp_is_mobile را به توسعه‌دهندگان معرفی نمود این تابع به آنها کمک می کرد تا بازدیدکنندگانی که با دستگاه هایی مانند موبایل یا تبلت وارد سایت می شدند را تشخیص دهند.
تابع wp_is_mobile زمانی ارائه شد که نمایشگر Retina Display مشهور اپل برای آیفون ۴، تنها دارای رزولوشن ۶۴۰×۹۶۰ پیکسل بود. وقتی آیفون ۵ چند ماه پس از انتشار وردپرس ۳.۴ عرضه شد، رزولوشن صفحه نمایش آن به ۶۴۰×۱۱۳۶ پیکسل افزایش یافت اما همچنان فاصله زیادی با نمایشگرهای مدرن گوشی‌های هوشمند و تبلت وجود دارد که در آنها مرز بین صفحه نمایش موبایل و دسکتاپ به طور قابل توجهی محو شده است.
تصویر(۱)
هدف و کاربرد تابع wp_is_mobile
در سال ۲۰۱۲، پشتیبانی مرورگرها از مدیا کوئری‌های CSS که امکان طراحی واکنشگرا (Responsive Design) را فراهم می‌کردند، هنوز نسبتاً نوپا بود اما هدف تابع ()wp_is_mobile، ایجاد چیدمان های واکنشگرا نبود.
این تابع هیچ‌گونه تمایزی بین موبایل ها و تبلت‌ها قائل نمی‌شود و به تعداد پیکسل‌های موجود در مرورگر بازدیدکننده توجهی ندارد. تابع wp_is_mobile با این هدف طراحی شد تا به توسعه‌دهندگان کمک کند هنگام نمایش به دستگاه‌های موبایلی که اغلب قدرت پردازشی کمتری داشتند و ممکن بود کاربرانشان بابت انتقال داده‌ها به شرکت‌های مخابراتی هزینه زیادی پرداخت نمایند، مصرف پهنای باند را بهینه کنند.
اگرچه توانایی‌های سخت‌افزاری گوشی‌ها و تبلت‌های جدید، آنها را از اکثر کامپیوترهای رومیزی سال ۲۰۱۲ قدرتمندتر ساخته است اما همچنان می‌توان با تقسیم‌بندی ساده دستگاه‌ها تحت دو گروه «همراه» و «غیرهمراه»، در مدیریت پهنای باند به نتایج مطلوبی دست یافت. بطور کلی می توان از این تابع جهت بهینه سازی وردپرس برای موبایل استفاده نمود.
تابع ()wp_is_mobile در عمل
توسط تابع ()wp_is_mobile در وردپرس، می‌توانید تشخیص دهید که آیا کاربر از طریق دستگاه همراه (گوشی هوشمند یا تبلت) به سایت شما مراجعه می‌کند یا خیر. در صورت تشخیص دستگاه همراه، این تابع مقدار true را برمی‌گرداند. کاربرد رایج این تابع در PHP به شکل زیر است:
<?php if( wp_is_mobile() ){ ?>
<p>این محتوا برای دستگاه‌های همراه است</p>
<?php } else { ?>
<p>این محتوا برای دسکتاپ (و لپ‌تاپ‌ها) است.</p>
<?php } ?>
اگر واقعاً نیاز دارید خروجی سایت خود را برای دستگاه‌های همراه بهینه کنید (مانند کاهش مصرف پهنای باند)، می‌توانید از تکنیک فوق در فایل‌های قالب استفاده کرده و ساختارهای کاملاً متفاوتی برای صفحات موبایل و دسکتاپ ارائه دهید.
تشخیص دستگاه برای انطباق دقیق‌تر محتوا
مدیا کوئری‌های CSS و سایر تکنیک‌های طراحی واکنشگرا می‌توانند به چیدمان صفحات کمک کنند تا با اندازه‌ها و جهت‌های مختلف صفحه سازگار شوند اما این روش‌ها نمی‌توانند به شما بگویند که کاربر از یک دستگاه همراه یا دسکتاپ استفاده می‌کند.
به عنوان مثال، شما می‌دانید که کاربران دسکتاپ معمولاً از موس برای «کلیک» استفاده می‌کنند، در حالی که کاربران موبایل از «لمس» بهره می‌برند. همچنین، کاربران دسکتاپ ممکن است برای باز کردن لینک در پنجره جدید روی آن کلیک راست کنند، در حالی که کاربران موبایل جهت انجام همین کار معمولاً باید دکمه‌ای را لمس کرده و نگه دارند. حتی برای راهنمایی کاربران درباره نحوه ناوبری در وب‌سایت، ممکن است اصطلاحات متفاوتی مورد نیاز باشد.
تصویر(۲)
با ترکیب تابع wp_is_mobile و شورتکدهای وردپرس، می‌توانید محتوای سفارشی‌شده‌ای را برای کاربران موبایل و دسکتاپ نمایش دهید که ویرایش آن برای مدیران سایت نیز بسیار آسان خواهد بود. بدین منظور، ابتدا کد زیر را به فایل 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;
}
} // 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>Password Help</h2>
To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.
در یک دستگاه همراه، خروجی بالا به صورت زیر نمایش داده می‌شود:
تصویر(۳)
و در سایر دستگاه‌ها، بازدیدکنندگان چنین متنی را خواهند دید:
تصویر(۴)
این تکنیک کمک می‌کند تا به راحتی محتوایی ارائه دهید که نحوه تعامل بازدیدکنندگان با سایت شما را در نظر می گیرد.
تابع wp_is_mobile و کش وردپرس
حتما اطلاع دارید که کش کردن صفحات وب یکی از موثرترین روش‌ها جهت بهبود عملکرد سایت است اما کش پایه وردپرس می‌تواند تلاش جهت نمایش محتوای متفاوت در درخواست‌های یکسان برای یک صفحه را با مشکل مواجه کند.
وردپرس با ذخیره محتوای صفحات در کش، سرعت بارگذاری را افزایش می‌دهد اما اگر اولین بازدید از یک صفحه توسط کاربر موبایل انجام گردد و تابع wp_is_mobile این مورد را تشخیص دهد، نسخه موبایلی آن صفحه در کش ذخیره شده و تا زمان پاک شدن کش، به همه کاربران (حتی کاربران دسکتاپ) نمایش داده می‌شود.
نتیجه گیری
اگرچه تابع wp_is_mobile در وردپرس ممکن است قدیمی به نظر برسد اما همچنان ابزاری مفید جهت تشخیص دستگاه‌های موبایل و دسکتاپ می باشد و می‌تواند به بهبود تجربه کاربری سایت شما کمک کند. به یاد داشته باشید که برای ارائه بهترین تجربه کاربری در هر دو پلتفرم، باید از کش‌های جداگانه جهت محتوای موبایل و دسکتاپ استفاده کنید.