افزودن دکمه تماس واتسآپ در وردپرس
آموزشپیام رسان واتسآپ در ایران دومین پیام رسان محبوب و اولین پیام رسان بدون نیاز به استفاده از فیلترشکن محسوب میشود . در زیر گزارشی از میزان استفاده از پیام رسان ها در ایران مربوط به تیرماه 98 میباشد توسط مرکز افکارسنجی دانشجویان ایران (ایسپا) منتشر شده است .
| نام شبکه اجتماعی | درصد تعداد کاربران |
|---|---|
| واتس اپ | 42.8 درصد |
| تلگرام | 42.4 درصد |
| اینستاگرام | 39.5 درصد |
| سروش | 2.8 درصد |
| فیسبوک | 2.3 درصد |
| توییتر | 1.9 درصد |
| لاین | 0.8 درصد |
| بله | 0.7 درصد |
| آی‌گپ | 0.6 درصد |
| گپ | 0.5 درصد |
| بیسفون | 0.2 درصد |
| ساینا | 0.1 درصد |
در جدول بالا واتس آپ در رتبه اول قرار گرفته که البته این به دلیل فیلترینگ تلگرام مربوط میشود . اما به دلیل همه گیر شدن نرم افزار های تغییر آی پی میتوان دوباره مطمئن بود که رتبه اول در اختیار تلگرام قرار گرفته است ، به همین دلیل در ابتدای نوشته گفتیم واتسآپ در رتبه دوم قرار دارد !
واتسآپ که توسط شرکت فیسبوک و مارک زاکربرگ خریداری شد در نسخه های جدید خود از Whatsapp from facebook نیز در صفحه ابتدایی خود استفاده میکند . همچنین این نرم افزار به دلیل ارائه نسخه تجاری (یا همان بیزینس) نشان داده که برای افراد با کسب و کار تجاری و دارای شخصیت حقوقی برنامه ویژه ای دارد .
همانطور که در برخی سایت ها نظیر سایت آی وحید مشاهده میکنید ارتباط با کارشناسان بخش فروش یا پشتیبانی از طریق تلگرام وجود دارد . امروز میخواهیم آموزش افزودن دکمه تماس واتسآپ در وردپرس را به شما آموزش دهیم . برای انجام این کار نیاز به نصب هیچ افزونه ای نخواهید داشت . تنها با کپی کردن چند خط کد میتوانید از این قابلیت واتسآپ استفاده کنید .
اضافه کردن دکمه تماس واتسآپ در وردپرس بدون کد نویسی
در مرحله اول شما نیاز به یک فایل از آیکون واتسآپ برای نمایش در سایت خواهید داشت . میتوانید از تصاویر دلخواه خود استفاده کنید . یا همچنین از تصویری که ما به صورت پیوست در انتهای همین نوشته و یا در زیر قابل مشاهده میباشد استفاده کنید .
پس از این کار باید فایل را به درون پوشه قالب خود اضافه کنید . سپس فایل css قالب خود را باز کرده و کد زیر را درون آن قرار دهید :
#whatsapp a {
position:fixed;
display:block;
left:5px;
bottom:5px;
width:80px;
height:80px;
background:url('whatsapp.png') transparent no-repeat scroll center center;
}توجه کنید با کد بالا پس از انجام تمامی کارها آیکون واتسآپ در سمت چپ و پایین صفحه نمایش داده خواهد شد و اندازه تصویر 80 پیکسل خواهد بود . در صورتی که تمایش داشته باشید میتوانید اندازه و مکان قرار گیری آن را تغییر دهید . پس از قرار دادن کد بالا ، باید کد زیر را درون فایل footer.php قبل از تمام شدن تگ body قرار دهید . در صورتی که تگ body وجود ندارد میتوانید کد را در کنار دیگر کدهای موجود در صفحه کپی کنید .
<div id="whatsapp"><a href="https://wa.me/989123456789" title="ارتباط با کارشناسان آی وحید در واتسآپ"> </a></div>برای تغییر شماره کافیست شماره تلفن خود را قرار دهید . همچنین میتوانید متن عنوان تصویر را نیز تغییر دهید . در صورتی که میخواهید متن پیام سفارشی قرار دهید که کاربر با کلیک بر روی لینک متن دلخواه شما را نیز ارسال کند میتوانید از کد زیر نیز استفاده کنید .
<div id="whatsapp"><a href="
https://wa.me/989123456789?text=Ivahid" title="ارتباط با کارشناسان آی وحید در واتسآپ"> </a></div>همچنین میتوانید در کد بالا از عبارت target=”_blank” استفاده کنید تا لینک در صفحه جدیدی باز شود تا مشکلی برای نرخ بانس سایت شما نیز وجود نداشته باشد .
امیدوارم از مطلب افزودن دکمه تماس واتسآپ در وردپرس استفاده کافی برده باشید . خوشحال میشویم نظرات خود را با ما در میان بگذارید .
اضافه کردن دکمه تلگرام در وردپرس با پلاگین
hi یک پلاگین کاملا اختصاصی و حرفه ای میباشد که توسط طراحان ایرانی کد نویسی شده تا نیاز کاربران وب سایت ها را نسبت به مشتریان خود برآورده سازند .
این افزونه مناسب برای انواع نمایشگرها می باشد.
برخی از ویژگی های افزونه hi
- کاملا واکنش گرا
- بصورت آجکس
- دکمه پشتیبانی
- بوت استرپ با طراحی ریسپانسیو
- قابلبت تنظیم عدم نمایش در ریسپانسیو
- تنظیم متن های روی دکمه
- قابلیت تنظیم لینک دکمه
خرید پلاگین hi در فروشگاه تمی
سلام با چه کدی میتونم عکسی که در سایت قرار دادم رو یه دکمه براش ایجاد کنم که وقتی روی اون کلیک میشه عکس به عنوان پس زمینه گوشی تنظیم بشه
سلام و عرض ادب
معذرت میخوام متوجه منظورتون نشدم. اگه ممکنه واضح تر توضیح بدید.
سلام خوبین من این کد رو قرار دادم اما مشکلی که هست اینه که وقتی اسکرول میکنیم در سایت آیکن ثابته و انگار از زیر المان های موجود در سایت حرکت میکنه در صورتی که باید از روی اونا حرکت کنه برای حل این مشکل چیکار کنم
سلام
داخل استایل هاتون این کد خط اضافه کنید.
z-index: 999999;
شاد باشید
ممنونم.منظورتون در بخش سفارشی سازی قالب هست؟
سلام مجدد
بله ، بخش سفارشی سازی بخش CSS
شاد و موفق باشید
عالی بود. سپاس از شما
اگر ممکن است کد همین دکمه را که با چرخش اسکرول بصورت منعطف حرکت میکند هم بفرمایید
در هر صورت سپاس و خیلی کاربردی بود و از این افزونه ها راحت شدم
هرکاری میکنم نمیتونم عکس واتساپو تو سایت لود کنم
کاش مینوشتین دقیقا تو کدوم فولدر قالب بزارم عکسو
سلام و عرض ادب
در بخش تعریف استایل ها
بجای تنها فراخوانی نام عکس ” whatsapp.png ” ، آدرس کامل عکس را قرار دهید . حتما مشکل حل خواهد شد.
شاد و موفق باشید
سلام روز بخیر
یه سوال از حضورتون داشتم
من می خوام در قسمت واتس آپ خود سایت(شبکه های اجتماعی) دوتا شماره قرار بدهم که به هر دو خط بشه پیام داد؟
آیا امکان این کار وجود دارد یا خیر؟
سلام وقت بخیر بله امکان این کار وجود داره و مشکلی برای سایت ایجاد نمیکنه
در قالب پوروتو ک میشه لینک شبکه های اجتماعی گذاشت با علامت # نشان داده میشه ولی لینک به صفحه ی اینیستا یا واتس آپ نمیشه
هر قالب تنظیمات مربوط به خودش دارد . اما با این آموزش ارائه داده شده صد در صد میتوانید یک دکمه تماس واتسآپ در سایت خود بدون توجه به امکانات قالب قرار دهید.
سلام
میشه فایل عکس رو با پسوند gif قرار داد
من هر کاری کردم قبول نکرد
واینکه سایز عکس رو دقیقا باید سایز واقعی انتخاب کنیم یا مهم نیست؟
ممنون
سلام فایل gif هم میتونید بزارید . البته فایل گیف برای تصاویر متحرک هست و بهتره که توی background استفاده نشه . شما میتوانید تصاویر png رو هم با استایل های Css به راحتی متحرک کنید . سعی کنید سایز تصویر همان سایزی باشه که شما در بزرگترین اندازه صفحه نمایش استفاده میکنید ، زیرا اینطور سایز تصویر کمتر میشه و توی لود سایتتون تاثیر مثبت داره .
با سلام
این اموزش شما در کل صفحات سایت نمایش داده میشه
چطور باید شخصی سازیش کرد یعنی میخوام در دو برگه از سایتم نمایش بدم فقط تو بقیه صفحات نمیخوام
سلام خدمت شما
آموزش این کار هم در مطالب قبلی بلاگ آی وحید منتشر شده بود . برای مشاهده میتوانید به لینک زیر مراجعه کنید :
https://ivahid.com/hide-elements-on-specific-pages-wordpress/