بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
بزودی دوره جدید در روی سایت چگونه در سئو شکست بخوریم !

ساخت دکمه واتساپ در وردپرس بدون افزونه

مقالات طراحی سایت

طراحی دکمه چت داخل واتساپ برای انواع وب سایت ها و همچنین قالب های وردپرسی با کمترین کد بدون نیاز به نصب افزونه 1

0 101
ساخت دکمه واتساپ در وردپرس بدون افزونه

قبلا در مقالات مشابه در وب سایت سئو نود ، در رابطه با ساخت دکمه هایی همچون اسکرول به اول صفحه ، آموزش هایی را خدمتتان ارائه کردیم که صرفا با چند خط خودتان بتوانید این دکمه را ایجاد کنید و نیاز به نصب افزونه های مختلف نباشد . در این مقاله آموزشی قصد داریم تا ساخت دکمه واتساپ در وردپرس بدون افزونه را خدمتتان آموزش دهیم . ساخت این دکمه‌ها نیازی به افزونه خاصی ندارد از این جهت دوستانی که در مورد کدهای 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 نیز بسادگی استفاده کنید و سورس کد ارائه شده هیچ ارتباطی به سیستم مدیریت محتوای وردپرس ندارد . سئوالات خود را در بخش دیدگاه ها با ما در میان بگذارید .

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

سلکتور empty چیست و برای چه مواردی در طراحی با css کاربرد دارد ؟ صفرتاصد نکات مربوط به انتخابگر empty در css

0 60

استفاده از سلکتور visited برای استایل نویسی بهتر لینک‌ها در طراحی پروژه های وب ! درست ترین حالت برای تغییر استایل لینک ها در حالت visited .

2 74
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است

آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود