افزونه WP Mobile Detect شناسایی تلفن همراه از رایانه برای وردپرس

آموزش کامل افزونه WP Mobile Detect برای نمایش محتوای متفاوت در موبایل و دسکتاپ

اگر به دنبال راهی ساده برای نمایش محتوای متفاوت به کاربران موبایل و دسکتاپ در سایت وردپرس خود هستید، افزونه WP Mobile Detect یکی از بهترین گزینه‌هاست. این افزونه با شناسایی دقیق نوع دستگاه بازدیدکننده (موبایل، تبلت یا دسکتاپ)، به شما امکان می‌دهد محتوا را به صورت هدفمند و سفارشی نمایش دهید. در این مقاله قصد داریم آموزش کامل این افزونه را به‌عنوان یک روش بک‌اند برای مدیریت نمایش محتوا ارائه دهیم. همچنین در ادامه به روش فرانت‌اند با استفاده از CSS نیز خواهیم پرداخت.

چرا از افزونه WP Mobile Detect استفاده کنیم؟

با رشد تعداد کاربران موبایل، بهینه‌سازی نمایش محتوا در تلفن‌های همراه اهمیت زیادی پیدا کرده است. افزونه WP Mobile Detect به عنوان یک افزونه شناسایی موبایل در وردپرس، به شما این امکان را می‌دهد تا به راحتی تعیین کنید که کدام محتوا در موبایل نمایش داده شود و کدام در دسکتاپ. این افزونه سبک، سریع و بدون نیاز به پیکربندی پیچیده است.

مزایای افزونه نمایش متفاوت در موبایل وردپرس

• قابلیت تشخیص موبایل، تبلت و دسکتاپ

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

• استفاده آسان از کدهای کوتاه (Shortcode) یا توابع PHP

• مناسب برای نمایش محتوا فقط در موبایل وردپرس

• بهینه‌سازی تجربه کاربری برای هر نوع دستگاه

روش اول: استفاده از افزونه WP Mobile Detect (روش بک‌اند)

مرحله ۱: نصب افزونه

1. وارد پیشخوان وردپرس شوید.

2. از منوی «افزونه‌ها» روی «افزودن» کلیک کنید.

3. در کادر جستجو عبارت “WP Mobile Detect” را وارد کنید.

4. پس از یافتن افزونه، آن را نصب کرده و فعال کنید.

مرحله ۲: استفاده از کدهای کوتاه برای شناسایی موبایل در وردپرس

افزونه WP Mobile Detect کدهای کوتاهی در اختیار شما قرار می‌دهد که به راحتی می‌توانید از آن‌ها در نوشته‌ها یا برگه‌های وردپرس استفاده کنید.

نمایش محتوا فقط در موبایل:

[mobile]این متن فقط در موبایل نمایش داده می‌شود[/mobile]

نمایش محتوا فقط در دسکتاپ:

[notmobile]این متن فقط در دسکتاپ نمایش داده می‌شود[/notmobile]

نمایش محتوا فقط در تبلت:

[tablet]این محتوا مخصوص کاربران تبلت است[/tablet]

مخفی کردن محتوا در تبلت:

[nottablet]این محتوا در تبلت نمایش داده نمی‌شود[/nottablet]

مرحله ۳: استفاده از توابع PHP در قالب

برای نمایش شرطی محتوا در فایل‌های قالب، می‌توانید از توابع PHP این افزونه استفاده کنید.

نمایش محتوا فقط برای موبایل:

if ( function_exists('is_mobile') && is_mobile() ) {
    echo 'این بخش فقط در موبایل نمایش داده می‌شود';
}

نمایش محتوا فقط برای دسکتاپ:

if ( function_exists('is_mobile') && !is_mobile() ) {
    echo 'این بخش فقط در دسکتاپ نمایش داده می‌شود';
}

کاربردهای عملی افزونه WP Mobile Detect

• ایجاد تجربه کاربری بهتر با نمایش محتوای بهینه در موبایل

• مخفی کردن عناصر سنگین (مانند اسلایدرها) در نمایشگرهای کوچک

• نمایش تبلیغات خاص فقط برای کاربران موبایل یا دسکتاپ

• بهینه‌سازی سئو با نمایش محتوای مرتبط برای هر دستگاه

افزونه نمایش متفاوت در موبایل وردپرس به مدیران سایت اجازه می‌دهد به‌راحتی محتوای خود را بسته به نوع دستگاه شخصی‌سازی کنند. این ویژگی به افزایش نرخ تعامل کاربران و بهبود تجربه کلی سایت کمک می‌کند.

روش دوم: نمایش متفاوت در موبایل وردپرس در فرانت‌اند با استفاده از CSS

در کنار استفاده از افزونه، یک راه ساده و مؤثر دیگر برای نمایش محتوای متفاوت در موبایل و دسکتاپ استفاده از CSS در بخش سفارشی‌سازی وردپرس است. این روش نیازی به نصب افزونه ندارد و می‌تواند برای پنهان یا نمایش عناصر خاص در فرانت‌اند مورد استفاده قرار گیرد.

مرحله ۱: افزودن کد CSS در بخش سفارشی‌سازی

وارد پیشخوان وردپرس شوید و مسیر زیر را دنبال کنید:

1. نمایش ← سفارشی‌سازی ← CSS اضافی

2. کد زیر را وارد کنید:

.only-mobile {
  display: none;
}

@media (max-width: 768px) {
  .only-mobile {
    display: block;
  }
}

این کد باعث می‌شود هر عنصری که دارای کلاس only-mobile باشد فقط در موبایل نمایش داده شود.

مرحله ۲: اعمال کلاس به محتوای دلخواه

برای استفاده از این قابلیت، تنها کافی است کلاس only-mobile را به عنصر HTML مورد نظر اضافه کنید:

<div class="only-mobile">این پیام فقط در موبایل نمایش داده می‌شود</div>

مرحله ۳: تست نمایش موبایل با ابزار Inspect

برای بررسی و آزمایش نحوه نمایش موبایل، می‌توانید از ابزار Inspect مرورگر استفاده کنید:

1. روی صفحه سایت کلیک راست کرده و گزینه Inspect را انتخاب کنید.

2. آیکون نمایش موبایل (Toggle device toolbar) را بزنید.

3. اندازه و نوع دستگاه را انتخاب کرده و عملکرد سایت را بررسی کنید.

جمع‌بندی

افزونه WP Mobile Detect یکی از کاربردی‌ترین ابزارها برای تشخیص موبایل در وردپرس است و به عنوان یک راهکار بک‌اند به شما امکان مدیریت نمایش محتوای هدفمند را می‌دهد. در مقابل، استفاده از CSS در بخش سفارشی‌سازی یک راهکار سبک، سریع و بدون افزونه برای مدیریت محتوای متفاوت در فرانت‌اند است.

با بهره‌گیری از این دو روش، می‌توانید نمایش محتوای متفاوت در موبایل و دسکتاپ را به‌صورت حرفه‌ای مدیریت کرده و تجربه کاربری وب‌سایت خود را بهبود ببخشید.