ماشین حساب وردپرس؛ ایجاد فرم و محاسبه نتیجه بدون پلاگین

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

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

ماشین حساب وردپرس

روش های مختلفی برای ایجاد یک ماشین حساب در وردپرس وجود دارد. در این مطلب قصد استفاده از کد های کوتاه و جاوا اسکریپت را داریم. پیش تر در مطلب «شورت کد وردپرس چیست» به صورت مفصل درباره روش ایجاد کد کوتاه در وردپرس صحبت کردیم. با افزودن کد زیر به فایل functions.php قالب خود، یک کد کوتاه ایجاد می کنیم:

function toocCalc()
{
	return 'سلام';
}
add_shortcode('tcBMI', 'toocCalc');

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

<div id="tcBMI">
    <h3>محاسبه شاخص توده بدنی</h3>
    <input id="tcHeight" type="text" placeholder="قد">
    <input id="tcWeight" type="text" placeholder="وزن">
    <button onclick="tcBMI()">محاسبه</button>
    <input id="tcResult" type="text" placeholder="نتیجه" disabled>
</div>

این کد را باید به عنوان return تابع کد کوتاه خود استفاده کنیم.

برای محاسبه خروجی نیز به سادگی از چند خط کد ساده جاوا اسکریپت استفاده می کنیم. برای مثال از کد زیر استفاده می کنیم:

<script>
    function tcBMI() {
        const height = document.getElementById("tcHeight");
        const weight = document.getElementById("tcWeight");
        const result = document.getElementById("tcResult");

        const calc = weight.value / (height.value * height.value);

        result.value = calc.toFixed(2);
    }
</script>

در این ابتدا input های خود را درون متغیر می ریزیم. سپس مقدار مورد نظر در محاسبه و در متغیر result قرار می دهیم. در پایان نیز خروجی را درون بخش مورد نظر خود چاپ می کنیم. در نهایت خروجی کلی کد های ما به شکل زیر می شود:

function toocCalc()
{
	return '
	<script>
		function tcBMI() {
			const height = document.getElementById("tcHeight");
			const weight = document.getElementById("tcWeight");
			const result = document.getElementById("tcResult");

			const calc = weight.value / (height.value * height.value);

			result.value = calc.toFixed(2);
		}
	</script>
	<div id="tcBMI">
		<h3>محاسبه شاخص توده بدنی</h3>
		<input id="tcHeight" type="text" placeholder="قد">
		<input id="tcWeight" type="text" placeholder="وزن">
		<button onclick="tcBMI()">محاسبه</button>
		<input id="tcResult" type="text" placeholder="نتیجه" disabled>
	</div>
	';
}
add_shortcode('tcBMI', 'toocCalc');

برای استفاده تنها باید کد کوتاه را در پست، برگه و … قرار دهیم. برای این کار به سادگی از بلوک کد کوتاه استفاده می کنیم. با بروزرسانی مطلب فرم ما در جایگاه خود نمایش داده می شود.