فعال كردن دكمه Add to Home Screen سایت وردپرس

سلام! تا حالا برات پیش اومده بری تو یه سایت مثل دیوار یا اسنپ و وقتی با موبایلت بازش می‌کنی، یه پیغام ببینی که می‌گه «افزودن به صفحه اصلی» یا همون Add to Home Screen؟ اگه روی اون بزنی، یه آیکن شبیه اپلیکیشن روی صفحه اصلی گوشیت ظاهر میشه و از اون به بعد، بدون نیاز به مرورگر مستقیم می‌تونی وارد سایت بشی. این ویژگی خیلی شبیه اپ‌های واقعی کار می‌کنه، ولی در واقع یه وب‌اپلیکیشنه که نیازی به نصب از گوگل پلی، اپ‌استور یا هیچ مارکت دیگه‌ای نداره.

حالا اگه کاربر iOS باشی، از داخل مرورگر سافاری وقتی روی آیکن فلش پایین صفحه بزنی، گزینه‌ی «Add to Home Screen» برات میاد. اونجا می‌تونی یه اسم برای وب‌اپت انتخاب کنی و حتی آیکنش رو تغییر بدی. بعد از زدن Add، سایت به‌صورت یه اپلیکیشن مستقل به صفحه اصلی گوشیت اضافه میشه. برای کاربرای اندروید هم معمولاً یه پیغام خودکار پایین صفحه ظاهر میشه که پیشنهاد میده اپلیکیشن وب سایت رو نصب کنن.

حالا جذاب‌ترین بخش ماجرا اینه که تو هم می‌تونی همین قابلیت رو برای سایت وردپرسی خودت فعال کنی. یعنی وقتی یه کاربر با موبایل وارد سایتت میشه، یه گزینه براش ظاهر بشه تا فقط با یه کلیک، سایتت مثل یه اپلیکیشن روی گوشیش نصب بشه. اینطوری سایتت حرفه‌ای‌تر به نظر می‌رسه، تجربه کاربریش خیلی بهتر میشه و احتمال بازدید مجدد کاربرا هم بالا میره. در ادامه قدم‌به‌قدم یاد می‌گیری چطور بدون نیاز به اپ‌استور یا فایل APK، این قابلیت جذاب Add to Home Screen رو برای سایت وردپرس خودت راه بندازی.

نصب و راه‌اندازی افزونه PWA در وردپرس

خب حالا که فهمیدیم قابلیت Add to Home Screen چیه و چرا این‌قدر محبوب شده، بریم سراغ بخش اصلی ماجرا یعنی راه‌اندازی PWA روی سایت وردپرسی خودمون. برای شروع باید بدونی که این قابلیت درواقع بخشی از چیزی به اسم PWA یا Progressive Web App هست. به زبان ساده، PWA بهت اجازه میده سایتت مثل یه اپلیکیشن واقعی رفتار کنه؛ یعنی کاربر بتونه اون رو به صفحه اصلی گوشی اضافه کنه، حتی آفلاین هم بعضی بخش‌هاش رو ببینه و یه تجربه‌ی سریع‌تر و مدرن‌تر داشته باشه.

برای شروع، وارد پنل مدیریت وردپرس خودت شو. از منوی سمت راست، برو به بخش «افزونه‌ها» و بعد روی «افزودن» کلیک کن. حالا توی قسمت جستجو بنویس PWA. وقتی سرچ می‌کنی، چند تا افزونه مختلف برات میاد. این افزونه‌ها همون‌هایی هستن که کمک می‌کنن سایتت تبدیل به یه وب‌اپلیکیشن پیشرفته بشه. البته اسم فارسیش یه‌جورایی بامزه‌ست چون بهش می‌گن «اپلیکیشن‌های وب پیش‌رونده»، ولی همه معمولاً بهش میگن PWA.

از بین افزونه‌هایی که میاد، دوتا از بهترین گزینه‌ها PWA و PWA for WP & AMP هستن. اولی رو تیمی ساخته که با گوگل و XWP همکاری دارن، یعنی یه افزونه رسمی‌تر و سبک‌تره. افزونه دوم، قابلیت‌های بیشتری مثل بنرهای اعلان و تنظیمات ظاهری متنوع‌تر داره. اگه بخوای ظاهر سایتت کمی تعاملی‌تر بشه، اون دومی گزینه خوبیه، ولی اگه دنبال یه افزونه ساده و مطمئن هستی که خود گوگل تو توسعه‌ش نقش داشته، همون افزونه‌ی اول یعنی PWA انتخاب بهتریه.

بعد از نصب افزونه، روی دکمه‌ی «فعال‌سازی» کلیک کن. حالا وردپرس خودش به‌صورت خودکار تنظیمات اولیه‌ی PWA رو برات انجام میده. اگه وارد بخش توضیحات افزونه بشی، می‌بینی که گوگل، XWP و RT Camp از تیم‌های مشارکت‌کننده توی توسعه‌ش بودن (البته برخلاف تصور خیلی‌ها، شرکت Automattic که سازنده وردپرسه، نقشی تو این افزونه نداره). این همکاری گوگل با وردپرس باعث میشه افزونه‌ی PWA عملکرد خیلی بهینه‌تری نسبت به خیلی از پلاگین‌های مشابه داشته باشه.

داخل قسمت «سؤالات متداول» یا FAQ افزونه، یه سری نکات فنی هم هست که توضیح میده چطور می‌تونی بخش‌هایی مثل رنگ تم، نام اپلیکیشن یا آیکن رو شخصی‌سازی کنی. فعلاً لازم نیست نگران این بخش‌ها باشی، چون در ادامه مقاله قدم‌به‌قدم یاد می‌گیری چطور تنظیماتش رو به دلخواه خودت تغییر بدی تا سایتت دقیقاً همون شکلی بشه که می‌خوای.

با نصب PWA درواقع یه قدم بزرگ برای حرفه‌ای‌تر شدن سایتت برداشتی، چون از اینجا به بعد می‌تونی کاری کنی سایتت مثل یه اپ موبایلی واقعی روی گوشی کاربرها نصب بشه و همیشه فقط با یه لمس ساده در دسترس باشه.

تنظیمات اولیه افزونه PWA در وردپرس

بعد از اینکه افزونه‌ی PWA رو نصب و فعال کردی، نوبت می‌رسه به بخش تنظیماتش. برای پیدا کردنش، کافیه بری به منوی تنظیمات > خواندن (Reading). اینجا یه بخش جدید اضافه میشه که مربوط به PWA هست. شاید برات جالب باشه که تنظیماتش خیلی پیچیده نیست و فقط یه گزینه‌ی اصلی داره به اسم مرور آفلاین (Offline browsing).

این گزینه دقیقاً کاری می‌کنه که از اسمش معلومه: اگه فعالش کنی، کاربر حتی وقتی اینترنت نداره، می‌تونه نسخه‌ی کش‌شده‌ای از سایتت رو ببینه. یعنی اگه یه بار سایتت رو باز کرده باشه، دفعه‌ی بعد بدون اینترنت هم می‌تونه به محتوای قبلی دسترسی داشته باشه. در نگاه اول این قابلیت خیلی خوب به نظر می‌رسه، چون باعث میشه کاربر حس کنه واقعاً با یه اپلیکیشن واقعی طرفه.

اما یه نکته‌ی مهم اینجاست که بهتره فعلاً این گزینه رو فعال نکنی. چرا؟ چون قابلیت کش یا همون ذخیره‌ی آفلاین ممکنه بعضی وقت‌ها درست کار نکنه و باعث بشه اطلاعات اشتباهی برای کاربرها نشون داده بشه. مثلاً تصور کن کاربر وارد حساب کاربری خودش شده، ولی مرورگر به‌جای اطلاعات اون، نسخه‌ی ذخیره‌شده از یه کاربر دیگه رو باز کنه! این موضوع می‌تونه هم از نظر امنیتی مشکل‌ساز بشه، هم باعث سردرگمی کاربران بشه.

بنابراین پیشنهاد من اینه که فعلاً تیک مرور آفلاین رو نزن و بگذار افزونه با حالت پیش‌فرض خودش کار کنه. اینطوری از هرگونه خطا یا کش اشتباه جلوگیری می‌کنی. بعد از اینکه مطمئن شدی سایتت پایدار و درست تنظیم شده، اگه خواستی بعداً می‌تونی دوباره به این قسمت برگردی و مرور آفلاین رو فعال کنی.

در نهایت فراموش نکن روی دکمه‌ی ذخیره تغییرات کلیک کنی تا تنظیماتت اعمال بشن. همین! تنظیمات پایه‌ی PWA به همین سادگی انجام میشه و از اینجا به بعد سایتت آماده‌ست تا برای کاربران موبایل مثل یه اپ واقعی ظاهر بشه.

بررسی نتیجه فعال‌سازی PWA روی سایت وردپرس

بعد از اینکه افزونه‌ی PWA رو نصب و تنظیم کردی، طبیعیه که در نگاه اول هیچ تغییر خاصی روی ظاهر سایتت نبینی. یعنی وقتی سایتت رو باز می‌کنی، خبری از دکمه یا بنر جدیدی نیست و ممکنه با خودت فکر کنی چیزی درست نصب نشده. اما در واقع، این تغییرات در پشت صحنه اتفاق می‌افتن و برای مرورگرها قابل شناسایی می‌شن، نه لزوماً برای چشم ما.

در بعضی مرورگرها، مخصوصاً مرورگرهای جدید مثل کروم، اج، فایرفاکس یا سافاری، وقتی سایتت به درستی با تنظیمات PWA سازگار باشه، یه گزینه ظاهر میشه که به کاربر اجازه میده سایت رو مثل یه اپلیکیشن روی دستگاهش نصب کنه. مثلاً در اندروید، ممکنه پایین صفحه یه پیام ببینی که نوشته «Add to Home Screen» یا «Install App». در مرورگر دسکتاپ هم معمولاً یه آیکن کوچیک کنار نوار آدرس ظاهر میشه که با کلیک روش می‌تونی سایت رو به عنوان اپ نصب کنی.

البته اگه الان هنوز اون گزینه رو نمی‌بینی، نگران نباش. گاهی اوقات مرورگر سایت رو کش (Cache) می‌کنه و هنوز متوجه تغییرات جدید نشده. کافیه یه‌بار کش مرورگرت رو پاک کنی یا سایت رو در حالت ناشناس (Incognito) باز کنی تا بتونی نتیجه رو ببینی.

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

پس اگه فعلاً تغییر خاصی نمی‌بینی، عجله نکن. عملکرد PWA پشت صحنه فعاله و مرورگرها به مرور اون رو تشخیص میدن. تو مرحله‌ی بعد یاد می‌گیری چطور ظاهر و رفتار این وب‌اپلیکیشن رو شخصی‌سازی کنی تا وقتی کاربر سایتت رو نصب می‌کنه، با یه آیکن و اسم اختصاصی واردش بشه، درست مثل یه اپ واقعی.

بررسی عملکرد PWA در موبایل و اضافه کردن سایت به صفحه اصلی

حالا وقتشه نتیجه کارمون رو روی موبایل ببینیم. گوشی رو بردار و مرورگرت رو باز کن (ترجیحاً سافاری روی iOS یا کروم روی اندروید). بعد آدرس سایتت رو وارد کن، همون سایتی که روش PWA رو نصب کردی. مثلاً همین www.wepersia.com. وقتی صفحه بالا اومد، روی آیکن اشتراک‌گذاری (Share) که پایین مرورگر قرار داره بزن.

حالا اگه تنظیماتت درست انجام شده باشه، وقتی کمی پایین‌تر بری، یه گزینه به اسم Add to Home Screen می‌بینی. این همون گزینه‌ایه که باعث میشه سایتت مثل یه اپلیکیشن واقعی روی صفحه اصلی گوشی کاربر نصب بشه. بعد از اینکه روش کلیک کردی، یه پنجره باز میشه که توش اسم سایتت نوشته شده و یه آیکن هم کنارشه. اون آیکن همون Favicon سایتته، یعنی تصویری که کنار آدرس سایت یا توی تب مرورگر دیده میشه. اگه بخوای یه آیکن اختصاصی‌تر برای اپلیکیشن وب‌ت داشته باشی، می‌تونی از بخش سفارشی‌سازی (Customize) در پیشخوان وردپرس و قسمت سایت آیکون (Site Icon) اون رو تغییر بدی.

بعد از اینکه دکمه‌ی Add رو زدی، مرورگر خودش به‌صورت خودکار یه میانبر از سایتت رو به صفحه اصلی گوشی اضافه می‌کنه. حالا اگه روی اون آیکن جدید بزنی، سایتت توی یه محیط جدا باز میشه، بدون نوار آدرس، بدون تب‌های مرورگر، و با ظاهری شبیه یه اپلیکیشن واقعی.

این دقیقاً همون حسیه که کاربرا از اپ‌های موبایلی دارن. با این تفاوت که سایتت دیگه نیازی به نصب از گوگل‌پلی یا اپ‌استور نداره و مستقیم از مرورگر قابل استفاده‌ست. از این به بعد هر بار که کاربر بخواد وارد سایتت بشه، فقط کافیه روی اون آیکن بزنـه، بدون حتی باز کردن مرورگر یا تایپ آدرس. همین ویژگی ساده باعث میشه کاربران راحت‌تر و سریع‌تر به سایتت برگردن و تعاملشون با برندت خیلی بیشتر بشه.

تفاوت حالت معمولی با فعال‌سازی PWA در سایت وردپرس

یه نکته مهم اینه که حتی بدون نصب افزونه‌ی PWA هم، در بعضی مرورگرها (مثل کروم یا سافاری)، گزینه‌ی Add to Home Screen ممکنه برای سایتت ظاهر بشه. یعنی کاربر می‌تونه سایتت رو به صفحه‌ی اصلی گوشی خودش اضافه کنه، اما اون چیزی که به‌دست میاد، فقط یه میانبر ساده‌ست؛ نه یه اپلیکیشن واقعی با عملکرد بهینه.

اینجاست که PWA خودش رو نشون میده. وقتی این افزونه روی سایتت فعال باشه، سایتت از حالت یه میانبر ساده خارج میشه و مثل یه وب‌اپلیکیشن واقعی رفتار می‌کنه. یعنی سرعت لود صفحات بهتر میشه، انیمیشن‌ها نرم‌تر اجرا می‌شن، و تجربه‌ی کاربر موقع کار با سایت خیلی روون‌تر و جذاب‌تر میشه. حتی می‌تونی تنظیماتی خاص فقط برای نسخه‌ی PWA تعریف کنی، مثلاً ظاهر متفاوت، رنگ پس‌زمینه مخصوص یا آیکن اختصاصی برای اپلیکیشن وب.

یه مزیت دیگه‌ی PWA اینه که اصلاً فضای خاصی از هاست یا گوشی کاربر نمی‌گیره. نصبش به معنی اضافه شدن چند تا فایل سبک مثل manifest.json و فایل‌های سرویس‌ورکره، که در مجموع حجم خیلی کمی دارن. با همین چند فایل کوچیک، سایتت یه پله پیشرفته‌تر میشه و تجربه‌ای نزدیک به اپلیکیشن موبایل واقعی ارائه میده.

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

جمع‌بندی

خب رسیدیم به آخر مقاله! تا اینجا یاد گرفتیم که چطور با نصب و فعال‌سازی افزونه‌ی PWA توی وردپرس، قابلیت جذاب Add to Home Screen رو برای سایتمون فعال کنیم. دیدی که این ویژگی چطور باعث میشه سایت مثل یه اپ واقعی روی موبایل کاربرا نصب بشه و تجربه‌ی استفاده ازش خیلی راحت‌تر و حرفه‌ای‌تر بشه. از مراحل نصب افزونه گرفته تا تنظیماتش، فعال‌سازی یا غیرفعال کردن مرور آفلاین، و حتی تست نهایی روی گوشی، همش قدم‌به‌قدم پیش رفتیم تا هر کسی—even بدون دانش فنی زیاد—بتونه خودش این قابلیت رو پیاده‌سازی کنه.

اما یه نکته خیلی مهم‌تر از همه این‌ها، ارتباط ما با شماست. واقعاً تو این چند سال که داریم آموزش‌های وردپرسی، طراحی سایت، و تولید محتوا منتشر می‌کنیم، از فیدبک‌ها و نظرات شما کلی ایده گرفتیم. الان تو سایت میه‌هم‌وردپرس بیش از ۲۵۰۰ تا مقاله و ویدیو آموزشی منتشر شده و هر روز هم ویدیوهای جدیدی در حال ضبط و انتشار هست. با این حال هنوزم خوشحال می‌شیم بدونیم شما دوست دارین چه آموزش‌هایی ببینین یا چه موضوعاتی براتون مفیدتره.

پس لطفاً نظرتون رو بگین. چه زیر همین مقاله، چه توی یوتیوب، چه توی اینستاگرام یا حتی از طریق فرم تماس سایت، هر جا که راحتین. فقط بنویسین چی دوست دارین یاد بگیرین تا ما دقیقاً همونو براتون آماده کنیم. ما همیشه داریم سعی می‌کنیم آموزش‌هایی تولید کنیم که به دردتون بخوره، کاربردی باشه و واقعاً بتونه توی رشد سایت و کسب‌وکارتون کمک کنه. ممنون که تا آخر همراه ما بودین. شاد و سربلند باشید. 🙂

تیم تولید محتوا

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