می توانید خیلی راحت در وردپرس برنامه نویسی کنید. مثلاً می توانید از جاوااسکریپت و css و html استفاده کنید و هر فیچری که می خواهید را پیاده سازی کنید.

برای اینکار، یک شورت کد می سازیم و داخل آن کد موردنظرمان را می نویسیم. بعد از آن می توانیم این شورت کد را در هر قسمت از سایت قرار دهیم (مثلا با صفحه ساز المنتور یا هر ادیتور دیگری)

مثلا در زیر کدی را می بینید که یک ماشین حساب ارزی می سازد. (داده ها از یک لینک گرفته می شود و به کاربر نمایش داده می شود)

*کد شورت کد را باید داخل فایل functions.php قرار دهید. (بهتر است که از پوسته سایت یک child بگیرید و داخل فایل child بگذارید ، تا با آپدیت پوسته اصلی، کد شما overwrite نشود)

// perfect money calculator ***************************************************************************************************************************

function render_perfectmoney_cal() {
    ob_start();
    ?>
    
<form id="myForm">


<span class="container">






<div class="firstcol">

<span style="display:flex; align-items:center; margin-left:5px; margin-bottom:20px;">
	<span style="display:flex; align-items:center;"><img class="calicon" src="https://sarafiplus.com/new/wp-content/uploads/2024/03/Website-icons-Menu-Perfect-Money-V1.png" >  </img></span>
<h3 for="selectField">شارژ حساب پرفکت مانی</h3>
</span>
<div>

        <label for="selectField">نوع ارز:</label>
        <select id="selectField" >
            <option value="1">دلار پرفکت مانی</option>
            <!-- Add more options as needed -->
        </select>
</div>
<br>

<span class="twocolrow">

	


<div class="col1">
         <label for="textFieldpm1">میزان ارزی:</label>
        <input type="text" id="textFieldpm1" oninput="updateTextFieldpm1()">
</div>

<div class="col2">

 <label for="textFieldpm2">میزان تومانی:</label>
        <input type="text" id="textFieldpm2"  oninput="updateTextFieldpm2()">

</div>


</span>



<div> 
<a class="submitbutton" href="https://p.sarafiplus.com/#/login?page=register">
ثبت سفارش	
	</a>

</div>

    </form>


</div>


<div class="secondcol">

<ul>
	
	
<span class="stat">

<li><h6 style="margin-left:10px;"> نرخ لحظه ای دلار پرفکت مانی:</h6></li>
<span ><p  id="price-container_pm">در حال به روز رسانی ...</p></span>
</span>
</ul>

	


</div>





</span>

    <script>
		
		let fetchedPrice_pm;
		
		
        function updateTextFieldpm1() {
            var selectValue1 = document.getElementById("textFieldpm1").value;
            var result = (fetchedPrice_pm  * selectValue1);
			 result = result.toLocaleString('en-US');
             document.getElementById("textFieldpm2").value = result; 
        }
		

		
		function updateTextFieldpm2() {
            var selectValue2 = document.getElementById("textFieldpm2").value;
            var result = selectValue2 / fetchedPrice_pm;
			 result = result.toLocaleString('en-US');
            document.getElementById("textFieldpm1").value = result;
        }
    



        // Function to fetch the price from the URL and display it
        function fetchPrice() {
            fetch('https://p.sarafiplus.com/price-list')
                .then(response => response.text())
                .then(data => {
				
				 let decodedData = data.replace(/\\u[\dA-F]{4}/gi, function (match) {
					return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
				});

		
				// Parse the JSON string after decoding
				let jsonData = JSON.parse(decodedData);

				// Iterate over the 'price_list' array
				for (let i = 0; i < jsonData.price_list.length; i++) {
					// Check if the title is 'پرفکت مانی'
					if (jsonData.price_list[i].title == 'پرفکت مانی') {
						// Get the 'buy' value
						let buyValue = jsonData.price_list[i].buy;
						fetchedPrice_pm = parseFloat(buyValue);
						let formattedPrice =  fetchedPrice_pm.toLocaleString('en-US');
						
						document.getElementById('price-container_pm').textContent = ` ${formattedPrice} تومان`;
						break; // Stop iterating once the entry is found
					}
				}
				
				
				
				
				
              
                })
                .catch(error => console.error('Error fetching price:', error));
        }

        // Call the fetchPrice function when the page loads
        window.addEventListener('DOMContentLoaded', fetchPrice);
    </script>





<style>

.container
{

display:flex;
}

.col1 , .col2
{
width:50%;


}

.twocolrow
{
display: flex;


}

.firstcol , .secondcol
{
   width:50%;
}

.firstcol
{


border-left: 1px solid #0000001a;
padding-left:50px;

}

.submitbutton
{
	display:block;
	width:100%;
	padding:10px;
	color:#ffffff;
	background-color:#042C5C;
	border-radius:10px;
	box-shadow: 1px 0px 20px 3px rgba(3.9999999999999982, 43.999999999999964, 92.00000000000001, 0.43) !important;
	margin-top:20px;
	border:none;
	text-align: center;

}

.submitbutton:hover
{
color:#042C5C;
background-color:#ffffff;
cursor:pointer;
	border: solid 1px #042C5C;
}

#textFieldpm1,#textFieldpm2
{

width:95%;
}

#selectField
{
background: #0043940F;
  border-color: #0043942B;
}


.secondcol
{


padding-right:50px;
	display: table;
  margin: auto;

}

.stat
{

height:33%;
display:flex; 
align-items:center;
}

.stat span
{

display:flex; 
align-items:center;
}
.stat p
{
margin-bottom:2px;
}
	
		.calicon
{

width:35px;
height:35px;
}

.firstcol h3
	{
		margin-bottom: 5px;
	}
	
	#myForm {
  background-image: url("https://sarafiplus.com/new/wp-content/uploads/2024/03/Sarafi-Plus-Pics-Home-Calculator-V4.png");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: contain;
}




/*سایز موبایل*/
@media only screen and (max-width: 768px)
{

.firstcol , .secondcol {
  border: none;
  padding-left: 0px;
  width: 100%;
}

.container
{
display: block;
}

.secondcol {
  padding: 20px;
  margin-top: 20px;
}



}





</style>









    <?php
    return ob_get_clean();
}
add_shortcode('perfectmoney_cal', 'render_perfectmoney_cal');

*داخل تگ script کد جاوااسکریپ خودمان را می گذاریم و در انتهای شورت کد هم کد css را اضافه می کنیم.

*دقت کنید که اگر بخواهید چند شورت کد مختلف بنویسید که در یک صفحه از سایت استفاده می شوند، باید نام متغیرها منحصر بفرد یا غیرتکراری باشد.

در ادامه کد کاملتری از یک ماشین حساب ارزی را می بینید که فیلد select دارد و کاربر بر اساس نوع ارزی که انتخاب می کند، می تواند مقدار تومانی آن را حساب کند:

// pay pal calculator ***************************************************************************************************************************

function render_paypal_cal() {
    ob_start();
    ?>
    
<form id="myForm" >


<span class="container">






<div class="firstcol">

<span style="display:flex; align-items:center; margin-left:5px; margin-bottom:20px;">
	<span style="display:flex; align-items:center;"><img class="calicon" src="https://sarafiplus.com/new/wp-content/uploads/2024/03/Website-icons-Menu-PayPal-V1.png" >  </img></span>
<h3 for="selectField">شارژ حساب پی پال</h3>
</span>


<div>

        <label for="selectField">نوع ارز:</label>
        <select id="selectField" >
            <option value="1">دلار پی پال</option>
            <option value="2">یورو پی پال</option>
            <option value="3">پوند پی پال</option>
            <!-- Add more options as needed -->
        </select>
</div>




        <br>

<span class="twocolrow">



<div class="col1">
         <label for="textFieldp1">میزان ارزی:</label>
        <input type="text" id="textFieldp1" oninput="updateTextFieldp1()">
</div>

<div class="col2">

 <label for="textFieldp2">میزان تومانی:</label>
        <input type="text" id="textFieldp2" oninput="updateTextFieldp2()" >

</div>


</span>



<div> 
	
	<a class="submitbutton" href="https://p.sarafiplus.com/#/login?page=register">
ثبت سفارش	
	</a>

</div>

    </form>


</div>


<div class="secondcol">

<ul>
	
	
<span class="stat">
<li><h6 style="margin-left:10px;"> نرخ لحظه ای دلار پی پال:</h6></li>
<span ><p id="dollorPrice">در حال بروزرسانی ...</p></span>
</span>

<span class="stat">
<li><h6 style="margin-left:10px;"> نرخ لحظه ای یورو پی پال:</h6></li>
<span ><p id="euroPrice">در حال بروزرسانی ...</p></span>
</span>

<span class="stat">
<li><h6 style="margin-left:10px;"> نرخ لحظه ای پوند پی پال:</h6></li>
<span ><p id="pondPrice">در حال بروزرسانی ...</p></span>
</span>
	
	</ul>



</div>





</span>

    <script>
		
		let dollorPrice;
		let euroPrice;
		let pondPrice;
		let selectedValue=1;
		
		
        function updateTextFieldp1() {
			
			var result;
			
			var selectValuep1 = document.getElementById("textFieldp1").value;
			
		
			if(selectedValue==1)
            	result = (dollorPrice  * selectValuep1);
			else if(selectedValue==2)
            	result = (euroPrice  * selectValuep1);
			else if(selectedValue==3)
            	result = (pondPrice  * selectValuep1);
			
			 result = result.toLocaleString('en-US');
             document.getElementById("textFieldp2").value = result; 
        }
		

		
		function updateTextFieldp2() {
			
			var result;
			
			var selectValuep2 = document.getElementById("textFieldp2").value;
			
		
			if(selectedValue==1)
				result = selectValuep2 / dollorPrice;
			else if(selectedValue==2)
            	result = selectValuep2 / euroPrice;
			else if(selectedValue==3)
            	result = selectValuep2 / pondPrice;
			
			 result = result.toLocaleString('en-US');
             document.getElementById("textFieldp1").value = result; 
			
			
         
        }
    



        // Function to fetch the price from the URL and display it
        function fetchPrice() {
			
			document.getElementById("selectField").addEventListener("change", function() {
    		selectedValue = this.value;
				updateTextFieldp1();
			

			});
	
			
			
            fetch('https://p.sarafiplus.com/price-list')
                .then(response => response.text())
                .then(data => {
				
				 let decodedData = data.replace(/\\u[\dA-F]{4}/gi, function (match) {
					return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
				});

		
				// Parse the JSON string after decoding
				let jsonData = JSON.parse(decodedData);

				// update dollor:
				for (let i = 0; i < jsonData.price_list.length; i++) {
					// Check if the title is 'دلار پی پال'
					if (jsonData.price_list[i].title == 'دلار پی پال') {
						// Get the 'buy' value
						let buyValue = jsonData.price_list[i].buy;
						dollorPrice = parseFloat(buyValue);
						let formattedPrice =  dollorPrice.toLocaleString('en-US');
						
						document.getElementById('dollorPrice').textContent = ` ${formattedPrice} تومان`;
						break; // Stop iterating once the entry is found
					}
				}
				
				
				// update euro:
				for (let i = 0; i < jsonData.price_list.length; i++) {
					// Check if the title is 'یورو پی پال'
					if (jsonData.price_list[i].title == 'یورو پی پال') {
						// Get the 'buy' value
						let buyValue = jsonData.price_list[i].buy;
						euroPrice = parseFloat(buyValue);
						let formattedPrice =  euroPrice.toLocaleString('en-US');
						
						document.getElementById('euroPrice').textContent = ` ${formattedPrice} تومان`;
						break; // Stop iterating once the entry is found
					}
				}
				
				
				// update pond:
				for (let i = 0; i < jsonData.price_list.length; i++) {
					// Check if the title is 'پوند پی پال'
					if (jsonData.price_list[i].title == 'پوند پی پال') {
						// Get the 'buy' value
						let buyValue = jsonData.price_list[i].buy;
						pondPrice = parseFloat(buyValue);
						let formattedPrice =  pondPrice.toLocaleString('en-US');
						
						document.getElementById('pondPrice').textContent = ` ${formattedPrice} تومان`;
						break; // Stop iterating once the entry is found
					}
				}
				
				
				
				
				
              
                })
                .catch(error => console.error('Error fetching price:', error));
        }

        // Call the fetchPrice function when the page loads
        window.addEventListener('DOMContentLoaded', fetchPrice);
		
	


   
		
		
		
    </script>






<style>

	#myForm
	{
		background-image: url("https://sarafiplus.com/new/wp-content/uploads/2024/03/Sarafi-Plus-Pics-Home-Calculator-V4.png");
		background-position: left bottom;
  background-repeat: no-repeat;
  background-size: contain;
	}
	
.container
{

display:flex;
	 
}

.col1 , .col2
{
width:50%;


}

.twocolrow
{
display: flex;


}

.firstcol , .secondcol
{
   width:50%;
	
}

.firstcol
{


border-left: 1px solid #0000001a;
padding-left:50px;


}

.submitbutton
{
	display:block;
	width:100%;
	padding:10px;
	color:#ffffff;
	background-color:#042C5C;
	border-radius:10px;
	box-shadow: 1px 0px 20px 3px rgba(3.9999999999999982, 43.999999999999964, 92.00000000000001, 0.43) !important;
	margin-top:20px;
	border:none;
	text-align: center;

}

.submitbutton:hover
{
color:#042C5C;
background-color:#ffffff;
cursor:pointer;
	border: solid 1px #042C5C;
}

#textFieldp1,#textFieldp2
{

width:95%;
}

#selectField
{
background: #0043940F;
  border-color: #0043942B;
}


.secondcol
{


padding-right:50px;
	

}

.stat
{

height:33%;
display:flex; 
align-items:center;
}

.stat span
{

display:flex; 
align-items:center;
}
.stat p
{
margin-bottom:2px;
}
	.calicon
{

width:35px;
height:35px;
}

.firstcol h3
	{
		margin-bottom: 5px;
	}



/*سایز موبایل*/
@media only screen and (max-width: 768px)
{

.firstcol , .secondcol {
  border: none;
  padding-left: 0px;
  width: 100%;
}

.container
{
display: block;
}

.secondcol {
  padding: 20px;
  margin-top: 20px;
}



}





</style>









    <?php
    return ob_get_clean();
}
add_shortcode('paypal_cal', 'render_paypal_cal');

* برای تزریق کد جاوااسکریپت به هدر یا فوتر سایت، از لینک معرفی شده استفاده کنید.