ساخت دکمه واتساپ در وردپرس بدون افزونه
مقالات طراحی سایتطراحی دکمه چت داخل واتساپ برای انواع وب سایت ها و همچنین قالب های وردپرسی با کمترین کد بدون نیاز به نصب افزونه 1
قبلا در مقالات مشابه در وب سایت سئو نود ، در رابطه با ساخت دکمه هایی همچون اسکرول به اول صفحه ، آموزش هایی را خدمتتان ارائه کردیم که صرفا با چند خط خودتان بتوانید این دکمه را ایجاد کنید و نیاز به نصب افزونه های مختلف نباشد . در این مقاله آموزشی قصد داریم تا ساخت دکمه واتساپ در وردپرس بدون افزونه را خدمتتان آموزش دهیم . ساخت این دکمه‌ها نیازی به افزونه خاصی ندارد از این جهت دوستانی که در مورد کدهای html و css کمی آشنایی دارند می‌توانند بسادگی با نوشتن کمی کد در داخل 2 فایل از قالب وردپرس ( یا حتی وب سایت های غیر وردپرس ) این دکمه را طراحی کنند .
گام 1 ساخت دکمه واتساپ بدون افزونه
برای اینکه دکمه واتساپ را برای سایت وردپرسی خودتان طراحی کنید شما نیاز به دو قسمت کد دارید ، کد بخش اول مربوط به html و ساختار دکمه است و بخش دوم مربوط به قسمت طراحی و کدهای css که خودتان می‌توانید طبق طرح دلخواه این دکمه را دیزاین کنید اما در این آموزش یک استایل کلی خدمتتان ارائه خواهیم کرد که در تمامی وب سایت ها قابل استفاده باشد . برای قدم اول به سراغ قسمت ” نمایش ” در داخل پیشخوان وردپرس و سپس قسمت ” ویرایشگر پرونده پوسته ” مراجعه کنید . اگر شما روی یک پوسته html کار می‌کنید در داخل فایل index.html یا index.php این کار را انجام دهید .
توجه داشته باشید که ما در این قسمت کدهای برنامه نویسی قرار نخواهیم داد و از این جهت درصورت ایجاد خطا در کد ، هیچ خللی در عملکرد سایت شما ایجاد نخواهد شد پس از این بابت نگرانی نداشته باشید .
اول از همه سراغ فایل footer.php در ستون سمت چپ ویرایشگر پرونده پوسته بروید . با کلیک روی این فایل ، امکان ویرایش آن را خواهید داشت . در داخل این فایل باید قبل از قسمت زیر که در انتهای کدهای قرار دارد :
</body>
</html>کد خودتان را قرار دهید . کدی که باید قبل از این بخش قرار دهید به شکل زیر است :
<a href="wa.me/+989028468446" target="_blank" class="WappBtn">Whatsapp</a>در این کد قسمتی که اهمیت دارد بخش href است . در داخل این قسمت شما باید بجای شماره تماسی که ما قرار دادیم ، بعد از کد ایران یعنی 98 ، شماره تماس خودتان را همانند نمونه وارد کنید . کاربر شما هنگام کلیک بروی این دکمه در داخل ویندوز ، وارد صفحه چت با شما خواهد شد ( در نسخه واتساپ وب ) .
البته در این قسمت ما در داخل دکمه یک متن به شکل ” Whatsapp ” قرار دادیم که کاربران آن را مشاهده می‌کنند . اگر قصد دارید تا از فونت آیکون واتساپ استفاده کنید باید اطلاع داشته باشید که کتابخانه چه آیکون فونتی روی سایت شما قرار دارد . برای مثال سایت ما از فونت آیکون بوت استرپ استفاده می‌کند و ما می‌توانیم کد را به این شکل نیز بنویسیم :
<a href="wa.me/+989028468446" target="_blank" class="WappBtn"><i class="bi bi-whatsapp"></i></a>پس می‌توانیم در این دوحالت دکمه خود را ایجاد کنیم . البته که حالت استفاده از فونت آیکون بسیار مرسوم تر و کاربر پسندتر است . اما اکنون باید به ظاهر این دکمه نیز کمی خدمت کنیم پس به مرحله دوم ساخت دکمه واتساپ بدون افزونه می‌رویم .
گام 2 ساخت دکمه واتساپ بدون افزونه
در این مرحله باید کمی روی استایل دکمه کار کنیم . برای این کار باید به سراغ فایل style.css بروید تا کمی داخل آن کدنویسی کنیم . قبل از کدنویسی باید دقت کنید که اگر شما در کد بالا ، از هیچ آیکونی استفاده نکردید و صرفا متن Whatsapp را قرار دادید ، باید کدتان را به شکل زیر بنویسید :
.WappBtn{
display:inline-block;
position:fixed;
text-align:center;
font-size:16px;
padding:8px;
bottom:20px;
left:20px;
z-index:3;
border-radius:6px;
background-color:green;
color:#212121;
}اما اگر از فونت آیکون در داخل تگ a استفاده کردید ، کد شما به شکل زیر خواهد بود :
.WappBtn{
display:inline-block;
position:fixed;
width:50px;
height:50px;
text-align:center;
line-height:50px;
font-size:22px;
bottom:20px;
left:20px;
z-index:3;
border-radius:50%;
background-color:green;
color:#212121;
}شما می‌توانید به همین سادگی یک دکمه واتساپ بدون افزونه ، طراحی و در داخل سایت خودتان قرار دهید . توجه داشته باشید که در این آموزش صرفا عنوان فایل های وردپرس جهت قراردادن صحیح کدها در محل درست آموزش داده شده درحالی که می‌توانید از این کد در سایت هایی با کد html نیز بسادگی استفاده کنید و سورس کد ارائه شده هیچ ارتباطی به سیستم مدیریت محتوای وردپرس ندارد . سئوالات خود را در بخش دیدگاه ها با ما در میان بگذارید .
