پست ها توسط نفیسه افقی

برای این کار باید یک دستور 301 درست کنید و آدرس قبلی را به آدرس جدید ریدایرکت کنید. بسته به اینکه از چه سروی استفاده می کنید، باید وارد فایل تنظیمات سرور شوید و این تغییرات را آنجا اعمال کنید. (مثلا برای سرور nginx، باید وارد فایل nginx.conf بشوید و در قسمت server ، دستور ریدایرکت را اضافه کنید):

server
{
    location /weblog/66cd17078f9dd77e3be23bc1 {
        return 301 https://flicka.ir/tags/%D8%B1%D9%88%D8%BA%D9%86_%D8%B3%D9%85;
    }

}

بعد از ذخیره فایل nginx.conf ، دستورات زیر را بزنید تا سرور ری استارت شود (در centos):

sudo nginx -t
sudo systemctl reload nginx

برای جلوگیری از این کار میتونید به روش های زیر عمل کنید:

1- اگه از dns سرورهای دیگه استفاده می کنید (مثلاً cloudfare) ، احتمالا گزینه ای دارن که اجازه اومدن ترافیک از سمت دامنه های دیگه به غیر از دامنه اصلی خودتون رو بدن. که باید فعالش کنید.

2- اما روش معقولانه تر اینه که خودتون تنظیمات سروری که استفاده می کنید رو ویرایش کنید (مثلا nginx یا apache ) و قانون هایی برای منع ارسال ترافیک به دومین های خاص یا دومین هایی به غیر از دومین خودتون رو تعریف کنید.

مثلا من در تنظیمات nginx سرورم این قسمت ها رو بهش اضافه کردم (فایل nginx.conf واقع در /etc/nginx/nginx.cof) :

server {
    listen 443 ssl;
    server_name mydomain.ir;  # Only serve requests matching this domain

    ssl_certificate /path/to/certificate/;
    ssl_certificate_key /path/to/certificate/;

    if ($host != "mydomain.ir") {
        return 444;  # Drop the connection without a response
    }

	# Block requests from the specific domain (myiem.co)
        if ($http_referer ~* "myiem.co") {
           return 403;  # Block with HTTP 403 Forbidden
        }

    location / {
        proxy_pass http://mydomain.ir:3000;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

[*] این خط مشخص میکنه که هر درخواستی از سمت دامنه ای به غیر از دامنه شما بلاک بشه (همین خط کافیه):

if ($host != "mydomain.ir") { return 444; # Drop the connection without a response }

[*] اما اگه خواستید کاملا مطمئن بشید که یه دامنه خاص (مثل دامنه دزد من) نمیتونه از شما ترافیک بگیره، خط زیر رو اضافه کنید:

# Block requests from the specific domain (myiem.co)
if ($http_referer ~* "myiem.co") {
return 403; # Block with HTTP 403 Forbidden
}

[*] یادتون باشه که بعد از ذخیره فایل ، یه بار nginx رو ری استارت کنید: sudo systemctl reload nginx

سلام دوست عزیز

بیلد گرفتن از اندروید استودیو کار پرچالشیه کلاً ، امیدوارم زود کارتون راه بیفته

فایل build.gradle رو باز کنید ( دقت کنین که دو تا فایل به این نام داریم) یه همچین فایلی هست:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

[*] اینجا ورژن sdk و dependency ها مشخص میشه. ورژن compileSdkVersion  رو دانلود کنین

[*] ارور شما ممکنه به خاطر موجود نبودن ورژن gradle مورد نیاز برای کامپایل هم باشه، یه فایلی داریم بنام :  gradle-wrapper.properties داخلش یه همچین چیزی رو میبینید:  ورژن gradle که مشخص شده رو هم باید نصب کنین (مثلا اینجا gradle-8.0.1 است)

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
networkTimeout=10000
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

[*] در ضمن یادتون باشه که تقریبا همه چی اندروید برای ما تحریمه، پس حتما فیلترشکن روشن کنین یا برای اندروید استودیو پراکسی تعریف کنین

برای راه اندازی فایروال روی لینوکس می توانید از پکیج firewalld استفاده کنید (برای آموزش نحوه نصب و راه اندازی لینک را ببینید)

برای اینکه پورت های خاصی را روی فایروال باز کنید تا بتوانند درخواست های کاربران را جواب دهند ، می توانید از دستورات زیر استفاده کنید: (مثلا اینجا ما پورت های 80 و 443 را باز می کنیم)

sudo firewall-cmd --permanent --remove-port=80/tcp
sudo firewall-cmd --permanent --remove-port=443/tcp
sudo firewall-cmd --reload

برای اینکه ببینید لیست پورت های مجاز روی فایروال لینوکس چه هستند هم می توانید از دستور زیر استفاده کنید:

sudo firewall-cmd --list-ports

اگر می خواهید بدون پلاگین و تنها با css آیکن های سایت وردپرسی را تغییر دهید ، می توانید از این روش استفاده کنید:

* آیکن باید با تگ <i> تعریف شده باشد

1- پک آیکن هایی که می خواهید استفاده کنید را در فایل functions.php لیست کنید:

مثلا اگر می خواهید از آیکن های bootstrap استفاده کنید:

function enqueue_bootstrap_icons() {
    wp_enqueue_style('bootstrap-icons', 'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css', array(), null);
}
add_action('wp_enqueue_scripts', 'enqueue_bootstrap_icons');

یا اگر می خواهید از آیکن های fontawsome استفاده کنید:

function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css', array(), null);
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');

2- با استفاده از ابزار inspect مرورگر، نام کلاس آیکن را پیدا کنید.

(از این نام برای استفاده از کد css استفاده می کنیم. )

فرض کنید کد html آیکن بصورت زیر باشد:

<i class="fa fa-pencil">
::before
</i>

3- با استفاده از کد css زیر ، آیکن را تغییر دهید:

.fa.fa-pencil::before
{
content: "\F796"; 
font-family: 'bootstrap-icons' !important;
}

برای این کار راه های مختلفی وجود دارد:

1- استفاده از پلاگین

2- نوشتن در قسمت js پوسته (برخی از پوسته های وردپرس این امکان را می دهند)

3- قرار دادن فایل js خودتان روی هاست

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

در اینصورت می توانیم برای المان های html که کلاس داده ایم، هر کد جاوااسکریپتی را اجرا کنیم و دستمان برای خیلی از کارها باز می شود 🙂

قرار دادن فایل js خودتان روی هاست

1- اول بهتر است که از پوسته اصلی سایت یک پوسته child بگیرید و تغییرات را روی آن انجام دهید. در اینصورت با آپدیت پوسته اصلی، تغییرات شما پاک نمی شود. (لینک را ببینید)

2- حالا وارد پوسته child شوید و یک فولدر بنام js بسازید . بعد فایلی بنام custom-script.js بسازید و کد جاوااسکریپت خودتان را درون آن قرار دهید. یعنی سلسله مراتب بصورت زیر می شود:

wp-content
└── themes
    └── your-child-theme
        ├── style.css
        ├── functions.php
        └── js
            └── custom-script.js

3- بعد از این کار باید وارد فایل functions.php شوید و فایل custom-script.js که تازه ساختید را به وردپرس معرفی کنید: (این کد، فایل را درون فوتر تزریق می کند)

function enqueue_custom_script() {
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_script');

حالا بعد از لود صفحه، کد شما هم اجرا می شود. مثلا کد زیر، برای این است که وقتی المان section1 هاور شد، المان section2  با یک انیمیشن fadein نمایش داده شود و وقتی موس از ان خارج شد، با یک انیمیشن fade out مخفی شود:

document.querySelector('.section1').addEventListener('mouseenter', function() {
  var section2 = document.querySelector('.section2');
  section2.style.opacity = 0; // Set initial opacity to 0
  section2.style.display = 'block'; // Display section2
  fadeIn(section2); // Apply fade-in animation
});

document.querySelector('.section2').addEventListener('mouseleave', function() {
  fadeOut(this); // Apply fade-out animation
});

function fadeIn(element) {
  var opacity = 0;
  var timer = setInterval(function() {
    if (opacity >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = opacity;
    opacity += 0.1; // Increment opacity gradually
  }, 50); // Adjust the interval for smoother animation
}

function fadeOut(element) {
  var opacity = 1;
  var timer = setInterval(function() {
    if (opacity <= 0) {
      clearInterval(timer);
      element.style.display = 'none'; // Hide section2 after fade-out
    }
    element.style.opacity = opacity;
    opacity -= 0.1; // Decrement opacity gradually
  }, 50); // Adjust the interval for smoother animation
}

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

فرض کنید دو div داریم، یکی با کلاس section1 و یکی با کلاس section2 ،

section2 بطور پیشفرض مخفی است ولی می خواهیم وقتی section1 هاور شد، section2 را نمایش دهیم. با استفاده از کد زیر می توانیم این کار را انجام دهیم:

.section2 {
  display: none;
}

.section1:hover ~ .section2 {
  display: block;
}

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

کافی است به المانی که می خواهید انیمیشن را روی آن اجرا کنید یک نام کلاس بدهید (مثلا: ninja)

حالا از کد زیر برای چرخش آن استفاده کنید:

.ninja{animation: myAnim 5s
linear 0s infinite
}

.ninja{transform-origin: center;
    display: inline-block;
}

@keyframes myAnim {
  100% {
     transform: rotate(360deg) translateX(10px) rotate(-360deg);
  }
  0% {
    transform: rotate(0deg) translateX(10px) rotate(0deg);
}
}

این کد برای چرخش در جهت عقربه های ساعت است، اگر خواستید خلاف عقربه های ساعت بچرخد، از کد زیر استفاده کنید:

.ninja2{animation: myAnim2 5s
linear 0s infinite
}

.ninja2{transform-origin: center;
    display: inline-block;
}

@keyframes myAnim2 {
     0% {
        transform: rotate(0deg) translateX(10px) rotate(0deg);
    }
    100% {
        transform: rotate(-360deg) translateX(10px) rotate(360deg);
    }
}

با استفاده از کد زیر می توانید این کار را انجام دهید: (در تابع functions.php کد زیر را قرار دهید، بعد در المنتور یا هر صفحه ساز دیگری، با شورت کد [breadcrumbs] از آن استفاده کنید:

function custom_breadcrumbs() {
    $separator = ' » ';
    $home = 'خانه'; // text for the 'Home' link
    $show_current = 1; // 1 - show current page title, 0 - don't show
    $before = '<span class="current">'; // tag before the current crumb
    $after = '</span>'; // tag after the current crumb

    global $post;

    // Get the current page ID
    $current_page_id = $post->ID;

    // Get the hierarchy of the current page
    $ancestors = get_post_ancestors($current_page_id);

    // Initialize breadcrumbs variable
    $breadcrumbs = '<div id="breadcrumbs">';

    // Add home link
    $breadcrumbs .= '<a href="' . home_url() . '">' . $home . '</a>' . $separator;

    // Add ancestors to breadcrumbs
    if ($ancestors) {
        foreach (array_reverse($ancestors) as $ancestor) {
            $breadcrumbs .= '<a href="' . get_permalink($ancestor) . '">' . get_the_title($ancestor) . '</a>' . $separator;
        }
    }

    // Add the current page
    if ($show_current == 1) $breadcrumbs .= $before . get_the_title($current_page_id) . $after;

    $breadcrumbs .= '</div>';

    return $breadcrumbs;
}



add_shortcode('breadcrumbs', 'custom_breadcrumbs'); // Register the shortcode

س

می توانید خیلی راحت در وردپرس برنامه نویسی کنید. مثلاً می توانید از جاوااسکریپت و 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');

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

اگر این گزینه فعال نیست، در سی پنل وارد فایل wp-config.php بشوید و عبارت زیر را به آن اضافه کنید. اگر هم از قبل وجود دارد ، مقدار آن را به false تغییر دهید:

define( 'DISALLOW_FILE_EDIT', false );

react native کتابخانه ای بنام RefreshControl دارد که با تعریف آن در یک Flatlist می توانید pull to refresh را پیاده سازی کنید. بصورت زیر ایمپورتش کنید:

import {RefreshControl} from 'react-native';

حالا در FlatList  از آن استفاده کنید:

const [refreshing, setRefreshing] = useState(false);
const handleRefresh = async () => {
   .
   .
   .
  };
.
.
.
<FlatList
      data={data}
      refreshControl={
          <RefreshControl
             refreshing={refreshing}
             onRefresh={handleRefresh}
           />}
/>

*در تابع handleRefresh باید کار آپدیت را انجام دهید. متغیر refreshing هم باید ابتدای این تابع true کنید و پس از آپدیت دیتا ، false کنید.

برای آپلود عکس و ویدیو من از کتابخانه react-native-image-crop-picker استفاده می کنم. با دستور npm install react-native-image-crop-picker --save نصبش کنید. بصورت زیر ایمپورت کنید:

import ImagePicker from 'react-native-image-crop-picker';

حالا شبیه مثال زیر می توانید از آن استفاده کنید:

const [selectedImages, setSelectedImages] = useState([]);
    const pickImages = async () => {

      var images;
      try {
          images = await ImagePicker.openPicker({
          multiple: true,
          mediaType: 'photo',
        });
  
        // Selected images successfully
        setSelectedImages(images);
      } catch (error) {
        console.log('ImagePicker Error: ', error);
      }
    };

  

.
.
.
.
.
.
<TouchableOpacity onPress={pickImages}>
              <Text style={styles.uploadButton}>آپلود عکس یا فیلم</Text>
</TouchableOpacity>

*دقت کنید که باید در فولدر android و فایل AndroidManifext.xml ، اجازه دسترسی به فضای ذخیره سازی را بدهید (یکبار کش را پاک کرده و مجدداً برنامه را بالا بیاورید):

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

*با multiple: true می توانید به کاربر اجازه دهید که چند فایل را انتخاب کند.

*می توانید عکس انتخابی را با سایز دلخواهی تان crop کنید : (دقت نکنید که نباید multiple: true باشد)

ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

*اگر می خواهید ویدیو انتخاب شود ، از mediaType:’photo’ و اگر می خواهید هم عکس و هم ویدیو انتخاب شود از mediaType:”any” استفاده کنید.

*selectedImages حاوی عکسهای انتخابی کاربر است.

برای پیاده سازی shimmer effect کتابخانه های زیادی وجود دارد که من از react-native-shimmer استفاده می کنم. با دستور npm install react-native-shimmer --save نصبش کنید و بصورت زیر ایمپورتش کنید:

import Shimmer from 'react-native-shimmer';

بصورت زیر هم می توانید از آن استفاده کنید:

 <Shimmer direction='left' style={{ width: '13%', marginLeft:12 }}>
          <Text style={{width: 50, height: 50,borderRadius: 50, backgroundColor: '#535252'}}/>
        </Shimmer>

برای پیاده سازی چنین انیمیشنی دو مرحله اصلی داریم:

1- وقتی کاربر دو بار روی عکس کلیک می کند را تشخیص دهیم.

2- و بعد عکسی خاص (مثلاً یک قلب) را با انیمیشن نشان دهیم.

1- تشخیص double tap

کلاً برای تشخیص تعامل کاربر با اپ (مثلاً تشخیص کلیک ها) از کتابخانهreact-native-gesture-handler استفاده می کنیم. با دستور npm install react-native-gesture-handler –save  نصبش کنید و بصورت زیر TapGestureHandler را ایمپورت کنید:

import { TapGestureHandler} from 'react-native-gesture-handler';

حالا به صورت زیر می توانید از آن استفاده کنید:

<TapGestureHandler
            numberOfTaps={2}
            onActivated={onDoubleTap}> 
                
                    <ImageBackground
                    
                    style={styles.pic} 
                    source={{uri: process.env.REACT_APP_BACK+'/posts/'+  props.post?.file}}>
                    
                    {/* like animation: */}
                    <Animated.View style={rStyle}>
                    <Image style={styles.heartPic}  source={require('../../assets/icons/heart-filled.png')}></Image>
                    </Animated.View>

                    </ImageBackground>
               

                     }
                    
                  
    </TapGestureHandler>
        

*در این کد، من یک عکس قلب را روی ImageBackground نمایش می دهم، به همراه انیمیشن (انیمیشن را با Animated.View پیاده سازی می کنم که در ادامه توضیح می دهم)

*متد onDoubleTap تابعی است که به هنگام دو بار کلیک کردن کاربر اجرا می شود که وظیفه نشان دادن انیمیشن را دارد. ( اگر numberOfTaps={1} باشد، این متد با یکبار کلیک کاربر فراخوانی می شود)

2- نمایش عکس با انیمیشن

برای ساخت انیمیشن، کتابخانه react-native-reanimated را نصب کنید. متد onDoubleTap بصورت زیر نوشته می شود:

import Animated, { useSharedValue, withSpring, useAnimatedStyle, withTiming } from 'react-native-reanimated';

// like animation:
    const scale = useSharedValue(0);
    const opacity = useSharedValue(1);
    const rStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
    opacity: opacity.value,
    }));

    const onDoubleTap = async () => {
      
        scale.value = withSpring(1, {}, () => {
           
            // Reset animation values after completion
            scale.value = withTiming(0, { duration: 500 });
            opacity.value = withTiming(1, { duration: 500 });
          });
        
        // like:
        if(!liked)
          like();

    };