thiscodeWorks - Saving, organizing & sharing the best of code online

function smo_add_to_cart_func($atts) {
    ob_start();
	$atts = shortcode_atts(
        array(
            'product_id' => '',
        ), 
        $atts, 
        'smo_add_to_cart'
    );
	$product_id = $atts['product_id'];
	if ( ! class_exists( 'WooCommerce' ) ) {
        return;
    }
    $product = wc_get_product( $product_id );
    if ( ! $product || ! $product->is_purchasable() || ! $product->is_in_stock() ) {
        return;
    }
	
    echo '<form action="' . esc_url( get_the_permalink($product_id) ) . '" method="post" class="cart">';
    echo '<button type="submit" name="add-to-cart" value="' . esc_attr( $product_id ) . '" class="single_add_to_cart_button button alt">Add to cart - '.$product->get_price_html().'</button>';
    echo '</form>';
?>
<?php
	$output = ob_get_contents();
    ob_end_clean();
    return $output;
}

add_shortcode('smo_add_to_cart', 'smo_add_to_cart_func');

// Tạo field trong variation để nhập

// Tạo field trong variation
add_action( 'woocommerce_variation_options', 'add_custom_variation_field', 10, 3 );
function add_custom_variation_field( $loop, $variation_data, $variation ) {
    woocommerce_wp_text_input( array(
        'id' => '_custom_variation_field[' . $loop . ']',
        'label' => 'Custom Save Percent(%)',
        'desc_tip' => true,
        'description' => '',
        'value' => get_post_meta( $variation->ID, '_custom_variation_field', true )
    ));
}

add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
function save_custom_variation_field( $variation_id, $i ) {
	$custom_field = $_POST['_custom_variation_field'][$i];
    if ( isset( $custom_field ) ) {
        update_post_meta( $variation_id, '_custom_variation_field', esc_attr( $custom_field ) );
    }
}
add_filter( 'woocommerce_available_variation', 'bbloomer_add_custom_field_variation_data' );
function bbloomer_add_custom_field_variation_data( $variations ) {
  $variations['save_percent'] = '<span class="discount-percentage">Save ' . get_post_meta( $variations[ 'variation_id' ], '_custom_variation_field', true ) . '%</span>';
  return $variations;
}

// Tạo Save percentage trong variations
function custom_variation_price_discount( $variations ) {
    if( isset( $variations['price_html'] ) && $variations['price_html'] != '' ) {
		$discount_message = '';
		$variation = wc_get_product( $variations['variation_id'] );
		
		if ( $variation->is_on_sale() ) {
			if($variations['save_percent'] && $variations['save_percent'] == ''){
				$regular_price = $variation->get_regular_price();
				$sale_price = $variation->get_sale_price();
				if ( $regular_price > 0 && $sale_price > 0 ) {
					$percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
					$discount_message = '<span class="discount-percentage">Save ' . $percentage . '%</span>';
				}
			}else{
				$discount_message = $variations['save_percent'];
			}
		}
		
        $variations['price_html'] = '<div class="price-wrap">'. $variations['price_html'] . $discount_message  . '</div>';
    }
    return $variations;
}

add_filter( 'woocommerce_available_variation', 'custom_variation_price_discount' );

Remove Zoom product thumbnail

add_action( 'wp', 'bbloomer_remove_zoom_lightbox_theme_support', 99 );
  
function bbloomer_remove_zoom_lightbox_theme_support() { 
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-lightbox' );
    remove_theme_support( 'wc-product-gallery-slider' );
}

Order bump mini cart

remove_action('woocommerce_mini_cart_contents', 'commercekit_minicart_order_bump', 99);
add_action( 'custom_mini_cart_order_bump', 'commercekit_minicart_order_bump', 99 );


//pluign commercegurus-commercekit
https://drive.google.com/file/d/11QZEzZt8syH3elbPZFfp6Bbu8PTqUaac/view?usp=sharing

Mini cart

function custom_mini_cart() {
    if ( function_exists('WC') && WC()->cart ) {
        ?>
        <div class="custom-mini-cart">
            <a class="cart-contents" href="#" title="<?php _e( 'View your shopping cart', 'text-domain' ); ?>">
				<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" aria-hidden="true" class="icon icon-cart">
				 	 <title>Your cart</title><path d="M16 0H0V32H16 67.2l77.2 339.5 2.8 12.5H160 496h16V352H496 172.8l-14.5-64H496L566 64l10-32H542.5 100L95.6 12.5 92.8 0H80 16zm91.3 64H532.5l-60 192H151L107.3 64zM184 432a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm0 80a56 56 0 1 0 0-112 56 56 0 1 0 0 112zm248-56a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm80 0a56 56 0 1 0 -112 0 56 56 0 1 0 112 0z"></path>
				</svg>
                <span class="cart-contents-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
            </a>
        </div>
        <?php
    } else {
        echo '<p>' . __( 'Cart is empty.', 'text-domain' ) . '</p>';
    }
}
add_shortcode('custom_mini_cart', 'custom_mini_cart');
function custom_mini_cart_content() {
    if ( function_exists('WC') && WC()->cart ) {
        ?>
			<div class="bg_minicart_show"></div>
			<div class="minicart-wrap">
				<div class="widget_shopping_cart_heading">
					<h3>
						Your Cart
					</h3>
					<button type="button" aria-label="Close Cart" class="mni-cart-close"><img src="<?php echo get_stylesheet_directory_uri(); ?>/close.png" alt="" /></button>
				</div>
				<div class="widget_shopping_cart_content">
					<?php woocommerce_mini_cart(); ?>
				</div>
			</div>
            
        
        <?php
    } else {
        echo '<p>' . __( 'Cart is empty.', 'text-domain' ) . '</p>';
    }
}
add_shortcode('custom_mini_cart_content', 'custom_mini_cart_content');
function add_to_cart_fragment( $fragments ) {
    if ( function_exists('WC') && WC()->cart ) {
        ob_start();
        ?>
        <span class="cart-contents-count"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
        <?php
        $fragments['.cart-contents-count'] = ob_get_clean();
    }
    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'add_to_cart_fragment' );

Label new trên sản phẩm

<?php
		$product = wc_get_product(get_the_ID());
		$post_date = get_the_date('Y-m-d', get_the_ID());
		$post_date_time = strtotime($post_date);
		$current_date_time = strtotime(current_time('Y-m-d'));
		$date_diff = ($current_date_time - $post_date_time) / (60 * 60 * 24);
		if ($date_diff <= 10){
			echo '<span class="badge new-label">NEW</span>';
		}
	?>
	<?php
		$max_discount = 0;
		$output = '';

		if ($product->is_type('variable')) {
			foreach ($product->get_available_variations() as $variation) {
				$regular_price_variation = $variation['display_regular_price'];
				$sale_price_variation = $variation['display_price'];
				if ($sale_price_variation < $regular_price_variation) {
					$percentage_off = round((($regular_price_variation - $sale_price_variation) / $regular_price_variation) * 100);
					if ($percentage_off > $max_discount) {
						$max_discount = $percentage_off;
					}
				}
			}
			if ($max_discount > 0) {
				$output = '<span class="badge sale">ON SALE</span>';
			}
		} else {
			$regular_price = (float) $product->get_regular_price();
			$sale_price = (float) $product->get_sale_price();
			if ($sale_price && $sale_price < $regular_price) {
				$output = '<span class="badge sale">ON SALE</span>';
			}
		}
		if($output){
			echo $output;
		}
	?>

js change image khi chọn variations

$('form.variations_form').on('found_variation', function(event, variation) {
				
				var imageSrc = variation.image.src;

				if(jQuery('.rst-image-product-thumb').length){
					if (imageSrc) {
						if (swiper2.activeIndex !== 0)
							swiper2.slideTo(0);
						setTimeout(function(){
							$('.product-single-image .swiper-slide-active img').attr('src',imageSrc);
						},100)
					}
				}
			});

enable_ajax_add_to_cart_single_product

function enable_ajax_add_to_cart_single_product() {
    if (is_product()) {
        ?>
        <script type="text/javascript">
           
			jQuery(function($){
				
				/* global wc_add_to_cart_params */
				if ( typeof wc_add_to_cart_params === 'undefined' ) {
					return false;
				}
				// Ajax add to cart on the product page
				var $warp_fragment_refresh = {
					url: woocommerce_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_refreshed_fragments' ),
					type: 'POST',
					success: function( data ) {
						if ( data && data.fragments ) {

							$.each( data.fragments, function( key, value ) {
								$( key ).replaceWith( value );
							});

							$( document.body ).trigger( 'wc_fragments_refreshed' );
							$('body').addClass('is-visible');
						}
					}
				};

				$('form.cart').on('submit', function (e)
				{
					e.preventDefault();
					var form = $(this),
					button = form.find('.single_add_to_cart_button');
					button.block({ 
						message: null, 
						overlayCSS: {
							
							opacity: 0 
						}
					});

					var product_url = window.location;

					$.post(product_url, form.serialize() + '&_wp_http_referer=' + product_url, function (result)
					{
						

						// update fragments
						$.ajax($warp_fragment_refresh);

						button.unblock();

					});
				});
			});
        </script>
        <?php
   }
}
add_action('wp_footer', 'enable_ajax_add_to_cart_single_product');
function enqueue_woocommerce_ajax_add_to_cart() {
    if (is_product()) {
        wp_enqueue_script('wc-add-to-cart'); // WooCommerce Add to Cart Script
        wp_enqueue_script('woocommerce');
    }
}

add_action('wp_enqueue_scripts', 'enqueue_woocommerce_ajax_add_to_cart');

Display product variations in cart item

function display_product_variations_in_cart($cart_item, $cart_item_key) { 
    if (!empty($cart_item['variation'])) {
        echo '<div class="cart-item-variations">';
		
        foreach ($cart_item['variation'] as $key => $value) {
			
            $taxonomy = str_replace('attribute_', '', $key);
            $term = get_term_by('slug', $value, $taxonomy);
			
            if ($term) {
                echo '<p>' . $term->name . '</p>';
            }
        }
        echo '</div>';
    }
}
add_action('woocommerce_after_cart_item_name', 'display_product_variations_in_cart', 10, 2);

Custom variation price discount

function custom_variation_price_discount( $variations ) {
    if( isset( $variations['price_html'] ) && $variations['price_html'] != '' ) {
		$discount_message = '';
		$variation = wc_get_product( $variations['variation_id'] );
		
		if ( $variation->is_on_sale() ) {
			if($variations['save_percent'] && $variations['save_percent'] == ''){
				$regular_price = $variation->get_regular_price();
				$sale_price = $variation->get_sale_price();
				if ( $regular_price > 0 && $sale_price > 0 ) {
					$percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
					$discount_message = '<span class="discount-percentage">Save ' . $percentage . '%</span>';
				}
			}else{
				$discount_message = $variations['save_percent'];
			}
		}
		
        $variations['price_html'] = '<div class="price-wrap">'. $variations['price_html'] . $discount_message  . '</div>';
    }
    return $variations;
}

add_filter( 'woocommerce_available_variation', 'custom_variation_price_discount' );

Custom Product thumb sang swiper slider

function smo_product_images_func2($atts) {
    ob_start();
	$atts = shortcode_atts(
        array(
            'product_id' => '',
        ), 
        $atts, 
        'smo_product_images2'
    );
	if(isset($atts['product_id']) && $atts['product_id'] != '') {
		$id = $atts['product_id'];
	}else{
		$id = get_the_ID();
	}
	$product = wc_get_product($id);
	//global $product;
	$thumbnail_size = 'woocommerce_single';
    $thumbnail_size_full = 'full';
	if ($product) {
	$post_thumbnail_id = $product->get_image_id();
	$attachment_ids = $product->get_gallery_image_ids();
	$thumbnail_src     = wp_get_attachment_image_src( $post_thumbnail_id, $thumbnail_size_full );
	$thumbnail_src2     = wp_get_attachment_image_src( $post_thumbnail_id, $thumbnail_size );
	}
?>
<div class="product--thumbnail_slider">
<div class="swiper rst-image-product-big2">
    <div class="swiper-wrapper">
		<div class="swiper-slide rst-item-image-product-big">
			<img src="<?php echo esc_url( $thumbnail_src[0] ); ?>" alt="" />
		</div>
		<?php
		if ( is_array($attachment_ids) && !empty($attachment_ids) ) {
		foreach ( $attachment_ids as $attachment_id ) {
		$gallery_src = wp_get_attachment_image_src( $attachment_id, $thumbnail_size_full );
		?>
		<div class="swiper-slide rst-item-image-product-big">
			<img src="<?php echo esc_url( $gallery_src[0] ); ?>" alt="" />
		</div>
		<?php
		}
		}
		?>
	</div> 
	<div class="swiper-pagination"></div>
</div> 
<?php
	if ( is_array($attachment_ids) && !empty($attachment_ids) ) {
?>
<div class="rst-image-product-thumb-container2">
<div class="swiper rst-image-product-thumb2">
    <div class="swiper-wrapper">
		<div class="swiper-slide rst-item-image-product-thumb">
			<div class="rst-item-image-product-thumb-img"><img src="<?php echo esc_url( $thumbnail_src2[0] ); ?>" alt="" /></div>
		</div>
		<?php
		
		foreach ( $attachment_ids as $attachment_id ) {
		$gallery_src = wp_get_attachment_image_src( $attachment_id, $thumbnail_size );
		?>
		<div class="swiper-slide rst-item-image-product-thumb">
			<div class="rst-item-image-product-thumb-img"><img src="<?php echo esc_url( $gallery_src[0] ); ?>" alt="" /></div>
		</div>
		<?php
		}
		?>
	</div>
	
</div>
	</div>
<?php
	}
?>
</div>
<?php	
	$output = ob_get_contents();
    ob_end_clean();
    return $output;
}

add_shortcode('smo_product_images2', 'smo_product_images_func2');

Change vị trí variation.price_html

$(document).on('found_variation', 'form.cart', function(event, variation) {
	console.log(variation);
    if (variation.price_html) {
      $('.custom-price-box .elementor-widget-container').html(variation.price_html + variation.variation_description);
    }
});

Add Coupon To MiniCart

function addCouponToMiniCart(){
?>
<div class="mini-cart-nm-coupon" style="margin-bottom: 10px;">
    <div class="nm-coupon" style="display: flex;">
       <input type="text" id="nm-coupon-code" class="input-text nm-coupon-code" name="nm_coupon_code" value="" placeholder="Discount code">
       <button type="button" id="nm-apply-coupon-btn" class="button" name="nm_apply_coupon" value="" onclick="applyCoupon(this)" style="white-space: nowrap;">Apply</button>
    </div>
    <div class="nm-coupon-notify" style="display: none; color: #FF0000;"></div>
</div>
<script type="text/javascript">
function applyCoupon(button) {
    let form = button.closest('.nm-coupon');
    let couponCode = form.querySelector(".nm-coupon-code").value;
    let ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    
    jQuery.ajax({
        type: "GET",
        url: ajaxurl,
        dataType: 'json',
        data: 'coupon_code=' + couponCode + '&action=custom_apply_coupon',
        success: function (data) {
            if (data.status === 'success') {
                jQuery(document.body).trigger('wc_fragment_refresh');
                if (jQuery('body').hasClass('woocommerce-checkout'))
                    jQuery(document.body).trigger('update_checkout');
            } else if (data.status === 'already_used') {
                jQuery('.nm-coupon-notify').html('Coupon already used!');
                jQuery('.nm-coupon-notify').show();
            } else {
                jQuery('.nm-coupon-notify').html('Coupon is not valid!');
                jQuery('.nm-coupon-notify').show();
            }
        },
    });
}

(function($) {
    $('body').on('click', '.woocommerce-remove-coupon', function(e) {
        e.preventDefault();
        let ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
        var coupon = $(this).data('coupon');
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'remove_coupon',
                coupon: coupon,
            },
            success: function(response) {
                jQuery(document.body).trigger('wc_fragment_refresh');
            },
            error: function(error) {
                console.log('Error:', error);
            }
        });
    });
})(jQuery);
</script>
<?php    
}
//add_action('woocommerce_widget_shopping_cart_before_buttons', 'addCouponToMiniCart', 20);
add_action('woocommerce_custom_checkout_counpon', 'addCouponToMiniCart', 10);

add_action('wp_ajax_custom_apply_coupon', 'custom_apply_coupon');
add_action('wp_ajax_nopriv_custom_apply_coupon', 'custom_apply_coupon');

function custom_apply_coupon() {
    $coupon_code = isset($_GET['coupon_code']) ? $_GET['coupon_code'] : '';
    $coupon_code = sanitize_text_field($coupon_code);

    // Check if the coupon is already applied
    if (WC()->cart->has_discount($coupon_code)) {
        echo json_encode(array('status' => 'already_used'));
    } else {
        // Apply coupon
        $applied = WC()->cart->apply_coupon($coupon_code);
        if ($applied) {
            echo json_encode(array('status' => 'success'));
        } else {
            echo json_encode(array('status' => 'invalid'));
        }
    }
    wp_die();
}

add_action('wp_ajax_remove_coupon', 'remove_coupon_from_cart');
add_action('wp_ajax_nopriv_remove_coupon', 'remove_coupon_from_cart');

function remove_coupon_from_cart() {
    if (isset($_POST['coupon'])) {
        $coupon_code = sanitize_text_field($_POST['coupon']);
        WC()->cart->remove_coupon($coupon_code);
        wc_clear_notices(); 
        
        wp_send_json_success();
    } else {
        wp_send_json_error('Coupon code not provided.');
    }
}

Add Coupon vào Checkout

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
add_filter('woocommerce_checkout_fields', 'remove_postal_code_field');
function remove_postal_code_field($fields) {
    //unset($fields['billing']['kl_newsletter_checkbox']);
		//unset($fields['billing']['billing_email']);
    return $fields;
}

add_action( 'woocommerce_checkout_after_customer_details', 'woocommerce_checkout_payment', 10 );
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
function custom_woocommerce_place_order_button_text( $button_text ) {
    return 'Pay now';
}
add_filter( 'woocommerce_order_button_text', 'custom_woocommerce_place_order_button_text' );
function custom_checkout_privacy_policy_text( $text ) {
    return 'One or more items in your cart is a deferred or recurring purchase. By continuing with your payment, you agree that your payment method will automatically be charged at the price and frequency listed on this page until it ends or you cancel. All cancellations are subject to the <a href="" class="click-cancellation">cancellation policy</a>.';
}
add_filter( 'woocommerce_get_privacy_policy_text', 'custom_checkout_privacy_policy_text' );

function addCouponToMiniCart(){
?>
<div class="mini-cart-nm-coupon" style="margin-bottom: 10px;">
    <div class="nm-coupon" style="display: flex;">
       <input type="text" id="nm-coupon-code" class="input-text nm-coupon-code" name="nm_coupon_code" value="" placeholder="Discount code">
       <button type="button" id="nm-apply-coupon-btn" class="button" name="nm_apply_coupon" value="" onclick="applyCoupon(this)" style="white-space: nowrap;">Apply</button>
    </div>
    <div class="nm-coupon-notify" style="display: none; color: #FF0000;"></div>
</div>
<script type="text/javascript">
function applyCoupon(button) {
    let form = button.closest('.nm-coupon');
    let couponCode = form.querySelector(".nm-coupon-code").value;
    let ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    
    jQuery.ajax({
        type: "GET",
        url: ajaxurl,
        dataType: 'json',
        data: 'coupon_code=' + couponCode + '&action=custom_apply_coupon',
        success: function (data) {
            if (data.status === 'success') {
                jQuery(document.body).trigger('wc_fragment_refresh');
                if (jQuery('body').hasClass('woocommerce-checkout'))
                    jQuery(document.body).trigger('update_checkout');
            } else if (data.status === 'already_used') {
                jQuery('.nm-coupon-notify').html('Coupon already used!');
                jQuery('.nm-coupon-notify').show();
            } else {
                jQuery('.nm-coupon-notify').html('Coupon is not valid!');
                jQuery('.nm-coupon-notify').show();
            }
        },
    });
}

(function($) {
    $('body').on('click', '.woocommerce-remove-coupon', function(e) {
        e.preventDefault();
        let ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
        var coupon = $(this).data('coupon');
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'remove_coupon',
                coupon: coupon,
            },
            success: function(response) {
                jQuery(document.body).trigger('wc_fragment_refresh');
            },
            error: function(error) {
                console.log('Error:', error);
            }
        });
    });
})(jQuery);
</script>
<?php    
}
//add_action('woocommerce_widget_shopping_cart_before_buttons', 'addCouponToMiniCart', 20);
add_action('woocommerce_custom_checkout_counpon', 'addCouponToMiniCart', 10);

add_action('wp_ajax_custom_apply_coupon', 'custom_apply_coupon');
add_action('wp_ajax_nopriv_custom_apply_coupon', 'custom_apply_coupon');

function custom_apply_coupon() {
    $coupon_code = isset($_GET['coupon_code']) ? $_GET['coupon_code'] : '';
    $coupon_code = sanitize_text_field($coupon_code);

    // Check if the coupon is already applied
    if (WC()->cart->has_discount($coupon_code)) {
        echo json_encode(array('status' => 'already_used'));
    } else {
        // Apply coupon
        $applied = WC()->cart->apply_coupon($coupon_code);
        if ($applied) {
            echo json_encode(array('status' => 'success'));
        } else {
            echo json_encode(array('status' => 'invalid'));
        }
    }
    wp_die();
}

add_action('wp_ajax_remove_coupon', 'remove_coupon_from_cart');
add_action('wp_ajax_nopriv_remove_coupon', 'remove_coupon_from_cart');

function remove_coupon_from_cart() {
    if (isset($_POST['coupon'])) {
        $coupon_code = sanitize_text_field($_POST['coupon']);
        WC()->cart->remove_coupon($coupon_code);
        wc_clear_notices(); 
        
        wp_send_json_success();
    } else {
        wp_send_json_error('Coupon code not provided.');
    }
}

#bash

Java alternatives

@wizyOsva

sudo alternatives --config java

output file list using metafields

@procodefinder

{% if product.metafields.custom.file2.value != blank %}
  <ul>
    {% for file in product.metafields.custom.file2.value %}
      <li>
        <a href="{{ file.url.value }}" target="new">{{ file.title }}</a>
      </li>
    {% endfor %}
  </ul>
{% else %}
  <p>No files available.</p>
{% endif %}

4. Limpieza con docker-compose (recomendado si usas docker-compose.yml)

docker-compose down --rmi all --volumes --remove-orphans

--rmi all: elimina todas las imágenes creadas por docker-compose.
--volumes: elimina los volúmenes asociados.
--remove-orphans: elimina contenedores no definidos en el .yml actual.

3. Eliminar volúmenes y redes (opcional, para una limpieza completa)

# Eliminar volúmenes sin uso
docker volume prune -f

# Eliminar redes sin uso
docker network prune -f

2. Eliminar todas las imágenes existentes

Este comando elimina todas las imágenes de Docker del sistema (solo si no hay contenedores activos que las usen).

docker rmi $(docker images -a -q)

Detener y eliminar todos los contenedores

Estos comandos buscan todos los contenedores (activos y detenidos) y los detienen/eliminan automáticamente.

# Detener todos los contenedores
docker stop $(docker ps -a -q)

# Eliminar todos los contenedores
docker rm $(docker ps -a -q)

Contruir el archivo docker-compose.yml en docker

2. Archivo docker-compose.yml
¿Qué es un docker-compose.yml?
Es un archivo de configuración en formato YAML que permite definir y ejecutar múltiples contenedores Docker como un solo servicio, facilitando la orquestación de aplicaciones complejas.

Estructura básica de un docker-compose.yml
version: Define la versión de la sintaxis de Docker Compose.

services: Define los diferentes servicios o contenedores a levantar.

build: Ruta para construir la imagen Docker (opcional cuando se usa imagen pública).

image: Nombre de la imagen a usar.

ports: Puertos que se exponen y mapean al host.

volumes: Para montar volúmenes o carpetas locales dentro del contenedor.

environment: Variables de entorno para los contenedores.

Ejemplo básico:
version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
    environment:
      - NODE_ENV=development
  db:
    image: postgres:13
    environment:
      POSTGRES_USER: usuario
      POSTGRES_PASSWORD: contraseña
      POSTGRES_DB: mibase
    ports:
      - "5432:5432"
¿Cómo ejecutar un archivo docker-compose.yml?
Abrir una terminal.
Navegar a la carpeta donde está el archivo docker-compose.yml.

Ejecutar el comando:
docker-compose up
Esto creará y arrancará todos los servicios definidos en el archivo.

Para detener los servicios:
docker-compose down

Contruir el archivo DOCKERFILE en docker

Dockerfile
Qué es: Un archivo de texto que contiene una serie de instrucciones para construir una imagen Docker. Funciona como una "receta" para crear una imagen personalizada.

Para qué sirve: Define cómo se debe construir una imagen de contenedor, especificando la base del sistema operativo, las aplicaciones que se deben instalar, variables de entorno, archivos que se copian, comandos que se deben ejecutar para preparar la imagen, entre otros.

Cómo se arma: Se escribe paso a paso con comandos Docker (por ejemplo, FROM, COPY, RUN, CMD) que instruyen cómo se debe crear la imagen.

1. Dockerfile
¿Qué es un Dockerfile?
Un Dockerfile es un archivo de texto que contiene instrucciones para construir una imagen de Docker personalizada. Esta imagen luego se puede usar para crear contenedores.

Estructura básica de un Dockerfile
FROM: Define la imagen base desde la cual se construirá la nueva imagen.

WORKDIR: Define el directorio de trabajo dentro del contenedor.

COPY: Copia archivos o directorios desde tu sistema local hacia la imagen.

RUN: Ejecuta comandos en la imagen mientras se construye.

CMD: Define el comando que se ejecutará cuando se inicie un contenedor a partir de esta imagen.

Ejemplo básico:

# Imagen base
FROM node:14

# Directorio de trabajo
WORKDIR /app

# Copiar archivos al contenedor
COPY package*.json ./

# Instalar dependencias
RUN npm install

# Copiar el resto del código
COPY . .

# Puerto que se expondrá
EXPOSE 3000

# Comando para iniciar la aplicación
CMD ["npm", "start"]

¿Cómo ejecutar un Dockerfile?
Abrir una terminal.

Navegar a la carpeta donde está el Dockerfile.

Construir la imagen con el comando:
docker build -t nombre_de_la_imagen .

Ejecutar el contenedor con:
docker run -p 3000:3000 nombre_de_la_imagen

diferencia entre imagenes y contenedores en docker

Las diferencias entre imágenes y contenedores en Docker son las siguientes:

Una imagen de Docker es una plantilla de solo lectura que contiene las bibliotecas, dependencias, archivos y el entorno necesario para ejecutar una aplicación. Es un archivo reutilizable e inmutable que sirve para crear contenedores. Las imágenes se crean generalmente a partir de un archivo Dockerfile que contiene todas las instrucciones para construir la imagen.

Un contenedor de Docker es una instancia en ejecución creada a partir de una imagen de Docker. Es un entorno aislado que incluye todo lo necesario para ejecutar la aplicación. Los contenedores tienen una capa adicional que permite escritura y cambios durante su ejecución, pero estos cambios no afectan la imagen original.

En resumen:

| Aspecto | Imagen de Docker | Contenedor de Docker |
|--------------|---------------------------------------------|-------------------------------------------|
| Qué es | Archivo de solo lectura que contiene la plantilla | Instancia en ejecución de una imagen |
| Mutabilidad | Inmutable, no se modifica después de creada | Mutable, permite cambios durante la ejecución |
| Función | Plantilla para crear contenedores | Ejecutar la aplicación de forma aislada |
| Creación | Creada a partir de un Dockerfile | Creado a partir de una imagen |
| Uso | Almacenar y compartir la configuración y software | Ejecutar la aplicación en runtime |

**Comandos específicos para imágenes:**

docker build -t nombre_imagen . — crea una imagen a partir de un Dockerfile.

docker images — lista las imágenes disponibles.

docker rmi nombre_imagen — elimina una imagen.

Comandos específicos para contenedores:

docker run nombre_imagen — crea y ejecuta un contenedor a partir de una imagen.

docker ps — lista los contenedores en ejecución.

docker ps -a — lista todos los contenedores (incluyendo los detenidos).

docker stop nombre_contenedor — detiene un contenedor en ejecución.

docker start nombre_contenedor — inicia un contenedor detenido.

docker rm nombre_contenedor — elimina un contenedor.

Por ejemplo, para crear y ejecutar un contenedor con un terminal bash usando una imagen llamada "MyImage":

text
docker run -it MyImage bash
En conclusión, las imágenes son las plantillas estáticas usadas para crear y ejecutar contenedores, mientras que los contenedores son las instancias activas que ejecutan realmente las aplicaciones, y se manejan con comandos diferentes conforme a su función. Esto permite portar software de forma consistente y escalable en diferentes entornos.

Aanmalen database firewall rule

@merol007

EXECUTE sp_set_database_firewall_rule N'Allow Azure', '0.0.0.0', '0.0.0.0';

SELECT * FROM sys.database_firewall_rules ORDER BY name;

Ajax Html

function blog_list_shortcode($atts) {
	ob_start();
    $atts = shortcode_atts(array(), $atts);
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $posts_per_page = get_option('posts_per_page');
	$cat = isset($_GET['cat'])?$_GET['cat']:'';
	
	$args = array(
		'post_type'      => 'post',
		'post_status'    => 'publish',
		'posts_per_page' => $posts_per_page,
		'paged'          => $paged,
	);
	$tax_query = [];
	if (!empty($cat)) {
		$tax_query[] = [
			'taxonomy' => 'category',
			'field'    => 'slug',
			'terms'    => [$cat],
		];
	}
	if (!empty($tax_query)) {
		$args['tax_query'] = $tax_query;
	}
    $query = new WP_Query($args);

    

    if ($query->have_posts()) {
		?>
		<form method="GET" action="" class="frmFilterPost">
			<input type="hidden" value="" name="cat" class="category_val" />
			<?php  
				$category = get_terms([
					'taxonomy'   => 'category',
					'hide_empty' => true,
			
				]);
				if(!empty($category)):
				$column_item = ceil(count($category) / 4);
				$total = count($category);
			?>	
			<div class="rst-box-filter">
				<div class="rst-box-filter-list deskop">
						<div class="rst-box-filter-list-all">
							<a class="rst-box-filter-item <?php echo $cat ? '' : 'active' ?>" data-slug="" >All<span class="count">(<?php echo $query->found_posts; ?>)</span></a>
						</div>	
						<div>
						<?php
							$i = 0;
							foreach ($category as $key => $value){
								$i++;
								$class="";
								if(!empty($cat) && $cat == $value->slug){
									$class="active";
								}
						?>
						
							<a class="rst-box-filter-item <?php echo $class; ?>" data-slug="<?php echo $value->slug ?>" ><?php echo $value->name ?><span class="count">(<?php echo $value->count ?>)</span></a>
						
						<?php
							if($i%$column_item == 0 && $i != $total ){
								echo '</div><div>';
							}
							}
						?>
							</div>
					
				</div>
				<div class="rst-box-filter-list mobile">
						<div class="rst-box-filter-list-all">
							<a class="rst-box-filter-item <?php echo $cat ? '' : 'active' ?>" data-slug="" >All<span class="count">(<?php echo $query->found_posts; ?>)</span></a>
						</div>	
						
						<?php
							foreach ($category as $key => $value){
								$class="";
								if(!empty($cat) && $cat == $value->slug){
									$class="active";
								}
						?>
						<div>
							<a class="rst-box-filter-item <?php echo $class; ?>" data-slug="<?php echo $value->slug ?>" ><?php echo $value->name ?><span class="count">(<?php echo $value->count ?>)</span></a>
						</div>
						<?php
							
							}
						?>
							
					
				</div>
			</div>
			<?php endif; ?>
		</form>
	<div class="rst-blog-lists-container-ajax">
		<div class="rst-blog-lists-container">
		<div class="rst-blog-lists">
		<?php
        

        while ($query->have_posts()) {
            $query->the_post();
			
            $post_id = get_the_ID();
            $permalink = get_permalink();
            $title = get_the_title();
			$excerpt = wp_trim_words(get_the_excerpt(), 22, '...');
            $thumbnail = get_the_post_thumbnail_url($post_id, 'full');
            $post_date = get_the_date();
            ?>
            <div class="blog-item">
				<a href="<?php echo esc_url($permalink); ?>"></a>
				<span class="icon-more">
				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.25 7.25C15.6562 7.25 16 7.59375 16 8C16 8.4375 15.6562 8.75 15.25 8.75H8.75V15.25C8.75 15.6875 8.40625 16 8 16C7.5625 16 7.25 15.6875 7.25 15.25V8.75H0.75C0.3125 8.75 0 8.4375 0 8C0 7.59375 0.3125 7.25 0.75 7.25H7.25V0.75C7.25 0.34375 7.5625 0 8 0C8.40625 0 8.75 0.34375 8.75 0.75V7.25H15.25Z" fill="#0A5660"/>
</svg>

				</span>
				<?php if($thumbnail):?>
					<div class="rst-blog-post-image"> 
						<img src="<?php echo esc_url($thumbnail); ?>" alt="<?php echo esc_attr($title); ?>">
					</div>
				<?php endif;?>
				<div class="rst-blog-post-content">
					<div class="rst-blog-post-content-top">
						<h3><?php echo esc_html($title); ?></h3>
						<p><?php echo get_the_excerpt(); ?></p>
					</div>
					<div class="rst-blog-post-meta">
						<span class="rst-post-date"><?php echo get_the_date(); ?></span><span class="rst-space"></span><span class="rst-post-author">by <a href="<?php echo get_author_posts_url( get_post_field('post_author', $post_id) ); ?>" class="meta-author"><?php the_author()?></a></span>
					</div>	
				</div>
            </div>
            <?php
        }
		
		?>
        </div>
			<?php
			echo rst_the_posts_navigation($query);
		?>
			</div>
</div>
		<?php
        

    } else {
        echo '<p>No posts found.</p>';
    }

    wp_reset_postdata();
	?>
	<script type="text/javascript">
		(function($){
			$('.rst-box-filter-item').click(function(){
				var value = $(this).attr('data-slug');
				$('.rst-box-filter-item').removeClass('active');
				$(this).addClass('active');
				$('.category_val').val(value);
				$('.frmFilterPost').submit();
				return false;
			});
			
			
			function customAjaxSend(form,fullUrl){
				$.ajax({
					url: fullUrl,
					method: form.attr('method'),
					data: form.serialize(),
					dataType: 'html',
					beforeSend: function () {
						$('.rst-blog-lists-container').addClass('loading')
					},
					success: function(response) {
						const html = $(response);
						const items = html.find('.rst-blog-lists-container');
						$('.rst-blog-lists-container-ajax').html(items);
						$('.rst-blog-lists-container').removeClass('loading')
					},
					error: function(jqXHR, textStatus, errorThrown) {
						console.log('Error submitting form');
						console.log(textStatus, errorThrown);
					}
				});
			}
			
			$('.frmFilterPost').on('submit', function(e) {
				e.preventDefault(); 
				var form = $(this); 
				var url = form.attr('action'); 
				var fullUrl = url + '?' + form.serialize();
				var link_page = $('.link_page').val();
				//history.pushState({}, '', link_page);
				let currentUrl = window.location.href;
				let newUrl = currentUrl.replace(/page\/\d+\//, '');
				customAjaxSend(form, newUrl);
			});
			$('body').on('click','#tf-pagination a',function(e){
				e.preventDefault();
				var form = $('.frmFilterPost'); 
				var fullUrl = $(this).attr('href');
				$('html, body').animate({
					scrollTop: $(".rst-blog-lists").offset().top - 300
				}, 1000);
				customAjaxSend(form, fullUrl);
				
			})
			
		})(jQuery);
	</script>
	<?php
    return ob_get_clean();
}
add_shortcode('blog_list', 'blog_list_shortcode');

Key

https://richplugins.com/business-reviews-bundle-wordpress-plugin

Grativi form:
82c574d3fc7f2da8c1239bc384e29e01
KEY MAP Api:
sk_9+Kn7QUZfX*0obV?i4J39?*FSKw:V
AIzaSyDNsicAsP6-VuGtAb1O9riI3oc_NOb7IOU
Key ticket
b9c9c200b7074f730ae5be8a6e894403b7e55699
Key ACF Pro:
b3JkZXJfaWQ9ODA4NjF8dHlwZT1kZXZlbG9wZXJ8ZGF0ZT0yMDE2LTA1LTAzIDE4OjM4OjIy
key wpform:
ff7340730b5c8079ff161a5158ef05c0

https://wpml.org
info@f-mediendesign.de
0711nb

Ajax Search thông thường

// PHP Action
function highlight_text($text, $keyword) {
    return preg_replace('/(' . preg_quote($keyword, '/') . ')/i', '<strong>$1</strong>', $text);
}
add_action('wp_ajax_rst_ajax_search', 'rst_ajax_search_action');
add_action('wp_ajax_nopriv_rst_ajax_search', 'rst_ajax_search_action');

function rst_ajax_search_action() {
	global $wp_query;
	$s = isset($_POST['s']) ? sanitize_text_field($_POST['s']) : '';
	if ($s) {
		$args = array(
			'post_type'      => 'product',
			'post_status'    => 'publish',
			'posts_per_page' => 10,
			's'              => $s,
		);
		$the_query = new WP_Query($args);
		$wp_query = $the_query;
		$i = 0;
		if ($the_query->have_posts()) :
			?>
			<div class="rst-search-result-product">
				<span class="result-head">PRODUCTS<span>(<?php echo esc_html($the_query->found_posts); ?>)</span></span>
				<div class="rst-list-result-product">
					<div class="rst-list-result-product-column">
					<?php
						while ($the_query->have_posts()) : $the_query->the_post();
						$product_id = get_the_ID();
						$i++;
						$product = wc_get_product($product_id);
						$sku = $product->get_sku();
						if($i == 6){
							echo '</div><div class="rst-list-result-product-column">';
						}
					?>
					<div class="rst-item-result-product">
						<div class="rst-item-result-product-thumb">
							<?php echo get_the_post_thumbnail($product_id, 'woocommerce_thumbnail'); ?>
						</div>
						<div class="rst-item-result-product-meta">
							<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
							<?php 
								if($sku){
							?>
							<span>SKU: <?php echo esc_html($sku); ?></span>
							<?php
								}
							?>
						</div>
					</div>
					<?php
						endwhile;
					?>
					</div>
				</div>
				<?php
					if ($the_query->found_posts > 10) {
				?>
					<div class="wiew_all_product_wrap">
						<a href="<?php echo esc_url(home_url('/?s=' . $s . '&post_type=product')); ?>" class="wiew_all_product">View all products </a>
				</div>
				<?php
					}
				?>
			</div>
			<div class="rst-search-result-meta">
				<?php
					$args = array(
						'taxonomy'   => 'product_cat',
						'number' => 2,
						'orderby' => 'name',
						'name__like' => $s,
						'hide_empty' => false,
					);
					$tags = get_terms($args);
					$total = count($tags);
					//var_dump($tags);
					 if (!empty($tags) && !is_wp_error($tags)) {
						$y = 0;
				?>
				
				<div class="rst-search-result-meta-box rst-search-result-meta-box-product-cat">
					<span class="result-head">CATEGORIES<span>(<?php echo $total; ?>)</span></span>
					<ul>
					<?php
						foreach ($tags as $tag) {
							$y++;
							$tag_link = get_tag_link($tag->term_id);
							$term = get_term($tag->term_id);
							$thumbnail_id = get_term_meta( $tag->term_id, 'thumbnail_id', true );
							$thumbnail_url = wp_get_attachment_url( $thumbnail_id );
							$parent_terms = [];
							while ($term->parent != 0) {
								$term = get_term($term->parent);
								if (!is_wp_error($term) && $term) {
									$parent_terms[] = $term;
								}
							}
							$in = '';
							if (!empty($parent_terms)) {
								$in = 'in ';
								$reversed_array = array_reverse($parent_terms);
								$z = 0;
								foreach ($reversed_array as $item) {
									$z++;
									if($z == 1){
										$in = $in . esc_html($item->name);
									}else{
										$in = $in . ' > ' . esc_html($item->name);
									}
									
								}
							}
							
							$title_tag = highlight_text($tag->name,$s);
					?>
					<li><a href="<?php echo esc_url($tag_link); ?>" class="taxonomy-link-meta">
					<?php
						if ( $thumbnail_url ) {
					?>
					<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="" />
					<?php
						}
					?>
					<div>
					<h4><?php echo $title_tag; ?></h4>
					<?php
						if($in){
					?>
					<span><?php echo $in; ?></span>
					<?php
						}
					?>
					</div>
					</a></li>
					<?php
						//if($y == 2) break;
						}
					?>
					</ul>
				</div>
				<?php
					 }
				?>
				<?php
					$args = array(
						'taxonomy'   => 'post_tag',
						'number' => 1,
						'name__like' => $s,
						'hide_empty' => true,
					);
					$tags = get_terms($args);
					 if (!empty($tags) && !is_wp_error($tags)) {
				?>
				<div class="rst-search-result-meta-box">
					<span class="result-head">TAGS</span>
					<ul>
						<?php
							foreach ($tags as $tag) {
								
								$tag_link = get_tag_link($tag->term_id);
								 $title_tag = highlight_text($tag->name,$s);
						?>
						<li><a href="<?php echo esc_url($tag_link); ?>"><?php echo $title_tag; ?></a></li>
						<?php
							
							}
						?>
					</ul>
				
				</div>
				<?php
					 }
				?>
				<?php
				$args_post = array(
					'post_type'      => 'post',
					'post_status'    => 'publish',
					'posts_per_page' => 1,
					's'              => $s,
				);
				
				$the_query_post = new WP_Query($args_post);
				if ($the_query_post->have_posts()) :
					?>
				<div class="rst-search-result-meta-box">				
					<span class="result-head">POSTS</span>
					<ul>
						<?php
							while ($the_query_post->have_posts()) : $the_query_post->the_post();
								$tag_link = get_the_permalink();
								$title_tag = highlight_text(get_the_title(),$s);
						?>
						<li><a href="<?php echo esc_url($tag_link); ?>"><?php echo $title_tag; ?></a></li>
						<?php
							endwhile;
						?>
					</ul>
				</div>
				<?php
					endif; 
					wp_reset_query();
				?>
			</div>
		<?php
		else :
			echo '<p class="no-result">No results</p>';
		endif;
		wp_reset_query();
	}
	exit;
}



//Js Call
jQuery('.rst-search .rst-wcas-search-input').on("input", function(e) {
	e.preventDefault();
	var dInput = this.value;
	if (dInput.length >= 2) {
		jQuery('.rst-search-result').addClass('show');
		jQuery('.rst-wcas-proccesing').addClass('show');
		jQuery('.rst-wcas-close').removeClass('show');
		var ajax_url = jQuery('.ajax_url').val();
		jQuery.ajax({
			type: "POST",
			url: ajax_url,
			data: {
				'action' 	: 'rst_ajax_search',
				's' 		: dInput,
			}
		}).done(function(data){
			var items = jQuery(data);
			jQuery('.rst-wcas-proccesing').removeClass('show');
			jQuery('.rst-wcas-close').addClass('show');
			jQuery('.rst-search-result-inner').html(items);
		});
	}
});

FAQ JS show all khi click

 $('.et_pb_toggle').removeClass('et_pb_toggle_open');
	  $('.et_pb_toggle_content').hide();
	  $('.et_pb_toggle_title').on('click', function() {
		let parent = $(this).closest('.et_pb_toggle');
		let content = parent.find('.et_pb_toggle_content');

		if (parent.hasClass('et_pb_toggle_open')) {
		  content.slideUp();
		  parent.removeClass('et_pb_toggle_open');
		} else {
		  content.slideDown();
		  parent.addClass('et_pb_toggle_open');
		}
	  });

Mega Menu

class Rst_Custom_Navigation extends Walker_Nav_Menu {
	 function display_element($element, &$children_elements, $max_depth, $depth = 0, $args = [], &$output = '') {
        // Check if current element has children
        $element->has_children = !empty($children_elements[$element->ID]);

        // Continue the normal walker process
        parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
	function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes = array_diff($classes, ['menu-item-has-children']);
		/*
		$classes1 = array();
		$classes1[] = 'menu-item';
        $classes1[] = 'menu-item-' . $item->ID;
		*/
		if (!empty($item->has_children)) {
            $classes[] = 'rst-menu-item-has-children';
        }
        $mega_menu = get_field('mega_menu',$item);
        if($mega_menu){
            $classes[] = 'has-submenu-mega-menu';
        }
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
			
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
        $id = 'menu-item-'. $item->ID;
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
		
		$promotion = get_field('promotion',$item) ? get_field('promotion',$item) : 'current';
        $href = !empty($item->url) ? $item->url : '#';
		$atts = array();
		$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
		$atts['target'] = ! empty( $item->target )     ? $item->target     : '';
		$atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
		$atts['href']   = ! empty( $item->url )        ? $item->url        : '';
		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( ! empty( $value ) ) {
				$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}
        $output .= '<li' . $id . $class_names .'>';
        $output .= '<a' . $attributes . '>';
        $output .= esc_html( $item->title );
         $output .= '<svg class="icon_link" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M8.96875 0.375C9.32422 0.375 9.625 0.675781 9.625 1.03125V7.59375C9.625 7.97656 9.32422 8.25 8.96875 8.25C8.58594 8.25 8.3125 7.97656 8.3125 7.59375V2.61719L1.99609 8.93359C1.72266 9.20703 1.3125 9.20703 1.06641 8.93359C0.792969 8.6875 0.792969 8.27734 1.06641 8.03125L7.38281 1.71484L2.40625 1.6875C2.02344 1.6875 1.75 1.41406 1.75 1.03125C1.75 0.675781 2.02344 0.375 2.40625 0.375H8.96875Z" fill="#E32838"/></svg>';
        if ( in_array( 'rst-menu-item-has-children', $classes ) ) {
            $output .= ' <span class="submenu-icon"><svg width="13" height="9" viewBox="0 0 13 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5625 8.03516L5.88867 7.36133L1.20117 2.67383L0.527344 2L1.875 0.681641L2.51953 1.35547L6.5625 5.36914L10.5762 1.35547L11.25 0.681641L12.5684 2L11.8945 2.67383L7.20703 7.36133L6.5625 8.03516Z" fill="#C7202F"/></svg></span>';
        }
        $output .= '</a>';
		ob_start();
		if($mega_menu){
			?>
			<div class="rst-mega-menu-container">
				<div class="rst-mega-menu-container-inner">
					<div class="rst-mega-menu-left">
						<div class="rst-mega-menu-left-inner">
							<div class="rst-mega-menu-left-inner-heading">
								Emergency Services
							</div>
							<?php
								$emergency_services = get_field('emergency_services','option');
								if(is_array($emergency_services) && !empty($emergency_services)){
							?>
							<div class="rst-mega-menu-left-inner-content">
								<h3><?php echo $emergency_services['title']; ?></h3>
								<p><?php echo do_shortcode($emergency_services['description']); ?></p>
								<?php
									if(get_field('phone','option')){
								?>
								<a href="tel:<?php echo get_field('phone','option'); ?>">Call Now</a>
								<?php	
								}
								?>
							</div>
							<?php
							}
							?>
						</div>
					</div>
					<div class="rst-mega-menu-center">
						<div class="rst-back-menu">
							<span>BACK</span>
							<svg width="13" height="9" viewBox="0 0 13 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.5625 8.03516L5.88867 7.36133L1.20117 2.67383L0.527344 2L1.875 0.681641L2.51953 1.35547L6.5625 5.36914L10.5762 1.35547L11.25 0.681641L12.5684 2L11.8945 2.67383L7.20703 7.36133L6.5625 8.03516Z" fill="#C7202F"/></svg>
						</div>
			<?php
		}
		$output .=  ob_get_clean();
    }

    function end_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
		ob_start();
		$mega_menu = get_field('mega_menu',$item);
		$promotion = get_field('promotion',$item) ? get_field('promotion',$item) : 'current';
		if($mega_menu){
			?>
			</div>
			<div class="rst-mega-menu-right <?php echo $promotion == 'current' ? 'promotion-current' : 'promotion-featured'; ?>">
				<div class="rst-mega-menu-right-inner">
					<?php
						if($promotion == 'featured'){
					
						$featured_promotion = get_field('featured_promotion','option');
						if(is_array($featured_promotion) && !empty($featured_promotion)){
					
					?>
					<span>Featured Promotion</span>
					<h3><?php echo $featured_promotion['title']; ?></h3><p><?php echo $featured_promotion['description']; ?></p>
					<?php
						if($featured_promotion['promo_code']){
					?>
					<a href="#footer" data-promo="<?php echo $featured_promotion['promo_code']; ?>" class="use-promo-code">
						<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M10.5 10.375C10.9648 10.375 11.375 9.99219 11.375 9.5V3.92188C11.375 3.8125 11.3203 3.70312 11.2383 3.62109L9.37891 1.76172C9.29688 1.67969 9.1875 1.625 9.07812 1.625H6.125C5.63281 1.625 5.25 2.03516 5.25 2.5V9.5C5.25 9.99219 5.63281 10.375 6.125 10.375H10.5ZM11.8398 2.99219C12.0859 3.23828 12.25 3.59375 12.25 3.92188V9.5C12.25 10.4844 11.457 11.25 10.5 11.25H6.125C5.14062 11.25 4.375 10.4844 4.375 9.5V2.5C4.375 1.54297 5.14062 0.75 6.125 0.75H9.07812C9.40625 0.75 9.76172 0.914062 10.0078 1.16016L11.8398 2.99219ZM1.75 4.25H3.5V5.125H1.75C1.25781 5.125 0.875 5.53516 0.875 6V13C0.875 13.4922 1.25781 13.875 1.75 13.875H6.125C6.58984 13.875 7 13.4922 7 13V12.125H7.875V13C7.875 13.9844 7.08203 14.75 6.125 14.75H1.75C0.765625 14.75 0 13.9844 0 13V6C0 5.04297 0.765625 4.25 1.75 4.25Z" fill="#1B459B"/>
						</svg>
						<span>Use Promo Code: </span>
						<?php echo $featured_promotion['promo_code']; ?>
					</a>
					<?php
						}
						}
					?>
					<a href="#footer" data-code="<?php echo $featured_promotion['title']; ?>" class="get_this_deal">Get this deal</a>
					<?php
						}else{
							$current_promotion = get_field('current_promotion','option');
						if(is_array($current_promotion) && !empty($current_promotion)){
					?>
					<span>Current promotion</span>
					<h3><?php echo $current_promotion['title']; ?></h3>
					<p><?php echo $current_promotion['description']; ?></p>
					<?php
						if($current_promotion['image']){
					?>
					<img src="<?php echo $current_promotion['image']; ?>" alt="" />
					<?php
						}
					?>
					<?php
						}
						}
					?>
					
					
				</div>
			</div>
			</div></div>
			<?php
		}
		$output .=  ob_get_clean();
        $output .= '</li>';
    }

    function start_lvl( &$output, $depth = 0, $args = null ) {
        $output .= '<ul class="sub-menu">';
    }

    function end_lvl( &$output, $depth = 0, $args = null ) {
        $output .= '</ul>';
    }
}
function custom_wp_nav_menu_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'menu' => '',
            'container' => 'div',
            'container_class' => 'rst-main-menu-container',
            'menu_class' => 'menu',
        ),
        $atts,
        'smo_nav_menu'
    );
    if (!empty($atts['menu'])) {
        return wp_nav_menu(array(
            'menu' => $atts['menu'],
            'container' => $atts['container'],
            'container_class' => $atts['container_class'],
            'menu_class' => $atts['menu_class'],
			'walker'  => new Rst_Custom_Navigation(),
            'echo' => false
        ));
    }
}

add_shortcode('smo_nav_menu', 'custom_wp_nav_menu_shortcode');

Cách viết Shortcode Elementor

<?php
//Pluign 
<?php

/**

 * Plugin Name: Smo Elementor Addon

 * Description: Simple widgets for Elementor.

 * Version:     1.0.0

 * Author:      Elementor Developer

 * Author URI:  https://developers.elementor.com/

 * Text Domain: elementor-addon

 */



function smo_register_widget( $widgets_manager ) {
	require_once( __DIR__ . '/widgets/smo_timeline.php' );
    $widgets_manager->register( new \Elementor_Timeline() );
}

add_action( 'elementor/widgets/register', 'smo_register_widget' );


//File shortcode 
class Elementor_Client_Logos extends \Elementor\Widget_Base {

	public function get_name() {
		return 'smo_client_logos';
	}

	public function get_title() {
		return esc_html__( 'Smo Client Logos', 'elementor-addon' );
	}

	public function get_icon() {
		return 'eicon-featured-image';
	}

	public function get_categories() {
		return [ 'basic' ];
	}

	public function get_keywords() {
		return [ 'Client Logos' ];
	}
	protected function register_controls() {
	
		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'smo' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
			'list_top',
			[
				'label' => esc_html__( 'List Top', 'smo' ),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => [
					[
						'name' => 'list1_image',
						'label' => esc_html__( 'Choose Image', 'smo' ),
						'type' => \Elementor\Controls_Manager::MEDIA,
						'default' => '',
					],
					[
						'name' => 'bg_color',
						'label' => esc_html__( 'Background Color', 'smo' ),
						'type' => \Elementor\Controls_Manager::COLOR,
						'default' => '#DDF780',
						'label_block' => true,
					],
					
				],
				'default' => [
					
				],
				'title_field' => '',
			]
		);
		$this->add_control(
			'list_bottom',
			[
				'label' => esc_html__( 'List Bottom', 'smo' ),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => [
					[
						'name' => 'list2_image',
						'label' => esc_html__( 'Choose Image', 'smo' ),
						'type' => \Elementor\Controls_Manager::MEDIA,
						'default' => '',
					],
					[
						'name' => 'bg2_color',
						'label' => esc_html__( 'Background Color', 'smo' ),
						'type' => \Elementor\Controls_Manager::COLOR,
						'default' => '#DDF780',
						'label_block' => true,
					],
					
				],
				'default' => [
					
				],
				'title_field' => '',
			]
		);
		$this->end_controls_section();
		// Content Tab End
	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		if ( is_array($settings['list_top']) && !empty($settings['list_top']) ) {
		?>
		
			<div class="rst-client-logos">
				<div class="rst-client-logos-container rst-client-logos-top">
					<div class="rst-client-logos-wrapper-container">
						<?php
							foreach (  $settings['list_top'] as $item ) {
								$bg = $item['bg_color'] ? $item['bg_color'] : '#DDF780';
						?>
						<?php
							if($item['list1_image']['url']){
						?>
						<div class="rst-client-logos-item">
							<div class="rst-client-logos-item-radius" style="background-color: <?php echo $bg; ?>">
								<img src="<?php echo $item['list1_image']['url']; ?>" alt="" />
							</div>
						</div>
						<?php
							}
							}
						?>
					</div>
					<div class="rst-client-logos-wrapper-container">
						<?php
							foreach (  $settings['list_top'] as $item ) {
								$bg = $item['bg_color'] ? $item['bg_color'] : '#DDF780';
						?>
						<?php
							if($item['list1_image']['url']){
						?>
						<div class="rst-client-logos-item">
							<div class="rst-client-logos-item-radius" style="background-color: <?php echo $bg; ?>">
								<img src="<?php echo $item['list1_image']['url']; ?>" alt="" />
							</div>
						</div>
						<?php
							}
							}
						?>
					</div>
				</div>
				<?php
					if ( is_array($settings['list_bottom']) && !empty($settings['list_bottom']) ) {
				?>
				<div class="rst-client-logos-container rst-client-logos-top">
					<div class="rst-client-logos-wrapper-container">
						<?php
							foreach (  $settings['list_bottom'] as $item ) {
								$bg2 = $item['bg2_color'] ? $item['bg2_color'] : '#DDF780';
						?>
						<?php
							if($item['list2_image']['url']){
						?>
						<div class="rst-client-logos-item">
							<div class="rst-client-logos-item-radius" style="background-color: <?php echo $bg2; ?>">
								<img src="<?php echo $item['list2_image']['url']; ?>" alt="" />
							</div>
						</div>
						<?php
							}
							}
						?>
					</div>
					<div class="rst-client-logos-wrapper-container">
						<?php
							foreach (  $settings['list_bottom'] as $item ) {
								$bg2 = $item['bg2_color'] ? $item['bg2_color'] : '#DDF780';
						?>
						<?php
							if($item['list2_image']['url']){
						?>
						<div class="rst-client-logos-item">
							<div class="rst-client-logos-item-radius" style="background-color: <?php echo $bg2; ?>">
								<img src="<?php echo $item['list2_image']['url']; ?>" alt="" />
							</div>
						</div>
						<?php
							}
							}
						?>
					</div>
				</div>
				<?php
					}
				?>
			</div>
		
		<?php
		}
	}
}

Cách viết shortcode Visua Composer

function smo_custom_slider_service_shortcode($atts = []){
	$atts = shortcode_atts([
		'list_service' => [],
	],$atts);
	ob_start();
	$list_service = vc_param_group_parse_atts($atts['list_service']);
	
	if(is_array($list_service) && !empty($list_service)):
	?>
	<div class="smo-list-service-wrapper-container">
		<div class="list-service-deskop">
			<div class="list-service-row">
				<?php
					foreach ($list_service as $key => $value) {
				?>
				<div>
					<a class="rst-item-service" href="<?php echo $value['link']; ?>">
						<?php echo $value['title']; ?>
					</a>
				</div>	
				<?php
					}
				?>
			</div>
		</div>
		<div class="list-service-mobile">
			<div class="swiper list_service_slider"> 
				<div class="swiper-wrapper">
				<?php
					foreach ($list_service as $key => $value) {
				?>
				<div class="swiper-slide">
					<a class="rst-item-service" href="<?php echo $value['link']; ?>">
						<?php echo $value['title']; ?>
					</a>
				</div>
				<?php
					}
				?>
				</div>
			</div>
		</div>
	</div>
	<?php	
	endif;
	return ob_get_clean();
}
add_shortcode('smo_custom_slider_service','smo_custom_slider_service_shortcode');

add_action( 'vc_before_init', 'smo_custom_slider_service_map' );
function smo_custom_slider_service_map(){
	vc_map( array(
	  "name" => __( "Custom Service"),
	  "base" => "smo_custom_slider_service",
	  "class" => "",
	  "category" => __( "SMO"),
	  "params" => array(
		 array(
		  "type" => "param_group", 
		  'param_name' => 'list_service', 
		  "heading" => __( "List Service"),
		  'params' => array(
		  	 
			 array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Title',
				  'param_name' => 'title',
		     ), 
			  array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Link',
				  'param_name' => 'link',
		     ), 
		  ),
		 )
	  )
 ) );
}
function smo_custom_slider_key_figures_shortcode($atts = []){
	$atts = shortcode_atts([
		'list_key_figures' => [],
	],$atts);
	ob_start();
	$key_figures = vc_param_group_parse_atts($atts['list_key_figures']);
	shuffle($key_figures);
	if(is_array($key_figures) && !empty($key_figures)):
	?>
	<div class="smo-list-key-figures-wrapper-container">
		<div class="swiper list_key_figures_slider"> 
			<div class="swiper-wrapper">
			<?php
				foreach ($key_figures as $key => $item) {
			?>
				
				<div class="swiper-slide">
			<div class=" rst-item-key-figures">
				<div class="rst-item-key-figures-value counter">
					<?php echo $item['value']; ?>
				</div>
				<p class="rst-item-key-figures-label"><?php echo $item['label']; ?></p>
			</div>
					</div>
			<?php
				}
			?>
			</div>
		</div>
	</div>
	<?php	
	endif;
	return ob_get_clean();
}
add_shortcode('smo_custom_slider_key_figures','smo_custom_slider_key_figures_shortcode');

add_action( 'vc_before_init', 'smo_custom_slider_key_figures_map' );
function smo_custom_slider_key_figures_map(){
	vc_map( array(
	  "name" => __( "Key Figures"),
	  "base" => "smo_custom_slider_key_figures",
	  "class" => "",
	  "category" => __( "SMO"),
	  "params" => array(
		 array(
		  "type" => "param_group", 
		  'param_name' => 'list_key_figures', 
		  "heading" => __( "List Key Figures"),
		  'params' => array(
		  	 
			 array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Value',
				  'param_name' => 'value',
		     ), 
			  array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Label',
				  'param_name' => 'label',
		     ), 
		  ),
		 )
	  )
 ) );
}

function smo_custom_slider_teams_shortcode($atts = []){
	$atts = shortcode_atts([
		'list_teams' => [],
	],$atts);
	ob_start();
	$list_teams = vc_param_group_parse_atts($atts['list_teams']);
	
	if(is_array($list_teams) && !empty($list_teams)):
	?>
	<div class="smo-list-team-wrapper-container">
		<div class="swiper list_teams_slider"> 
			<div class="swiper-wrapper">
			<?php
				foreach ($list_teams as $key => $item) {
			?>
			<div class="swiper-slide rst-item-team">
				<div class="rst-team-avatar">
					<img src="<?php echo wp_get_attachment_url($item['avatar']) ?>" alt="" />
					<div class="rst-team-avatar-description">
						<?php echo $item['description']; ?>
					</div>
				</div>
				<div class="rst-team-info">
					<h4>
						<?php
							if($item['fname']){
						?>
						<span><?php echo $item['fname']; ?></span>
						<?php
							}
						?>
						<?php echo $item['lname']; ?>
					</h4>
					<div class="rst-team-info-social">
					<?php
						if($item['email']){
					?>
						<div class="rst-team-info-email">
							<a href="mailto:<?php echo $item['email']; ?>"><span class="rst-team-info-icon"><svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
							<g clip-path="url(#clip0_512_950)">
							<path opacity="0.986" fill-rule="evenodd" clip-rule="evenodd" d="M1.87755 1.73525C8.95951 1.7264 16.0415 1.73525 23.1234 1.76181C23.2665 1.7984 23.3976 1.86037 23.5169 1.94771C20.2798 5.47028 17.0339 8.98467 13.7792 12.491C12.9267 13.2346 12.0743 13.2346 11.2218 12.491C7.98412 8.99429 4.7464 5.49753 1.5087 2.00083C1.47488 1.95665 1.48308 1.92124 1.53329 1.8946C1.65705 1.85052 1.7718 1.7974 1.87755 1.73525Z" fill="white"/>
							<path opacity="0.974" fill-rule="evenodd" clip-rule="evenodd" d="M0.647542 2.79724C0.69928 2.78933 0.74846 2.79814 0.795083 2.8238C3.31215 5.53339 5.82033 8.25106 8.31967 10.9769C5.82033 13.7028 3.31215 16.4204 0.795083 19.13C0.74846 19.1557 0.69928 19.1645 0.647542 19.1566C0.601839 18.9639 0.560852 18.7692 0.524591 18.5723C0.491803 13.5087 0.491803 8.44509 0.524591 3.3815C0.560852 3.18461 0.601839 2.98989 0.647542 2.79724Z" fill="white"/>
							<path opacity="0.974" fill-rule="evenodd" clip-rule="evenodd" d="M24.2053 2.79736C24.2544 2.79736 24.3036 2.79736 24.3528 2.79736C24.3985 2.99001 24.4395 3.18473 24.4757 3.38163C24.5085 8.44521 24.5085 13.5089 24.4757 18.5724C24.4395 18.7693 24.3985 18.9641 24.3528 19.1567C24.3011 19.1646 24.2519 19.1558 24.2053 19.1301C21.6882 16.4205 19.18 13.7029 16.6807 10.977C19.1899 8.24938 21.6981 5.52279 24.2053 2.79736Z" fill="white"/>
							<path opacity="0.984" fill-rule="evenodd" clip-rule="evenodd" d="M9.00869 11.827C9.06043 11.8191 9.10961 11.8279 9.15624 11.8536C9.76583 12.5475 10.4052 13.2025 11.0743 13.8188C12.1644 14.4065 13.2136 14.3357 14.2218 13.6064C14.7628 13.0221 15.3038 12.4378 15.8448 11.8536C15.8939 11.8182 15.9431 11.8182 15.9923 11.8536C18.5093 14.5632 21.0175 17.2808 23.5169 20.0067C23.3976 20.0941 23.2665 20.156 23.1234 20.1926C16.0415 20.228 8.95951 20.228 1.87755 20.1926C1.76093 20.1536 1.64618 20.1093 1.53329 20.0598C1.48308 20.0331 1.47488 19.9978 1.5087 19.9536C4.0186 17.2517 6.5186 14.5429 9.00869 11.827Z" fill="white"/>
							</g>
							<defs>
							<clipPath id="clip0_512_950">
							<rect width="25" height="20" fill="white" transform="translate(0 0.975586)"/>
							</clipPath>
							</defs>
							</svg></span>
							<span class="rst-team-info-text"><?php echo $item['email']; ?></span></a>
						</div>
						<?php
							}
						?>
						<?php
							if($item['phone']){
						?>
						<div class="rst-team-info-phone">
							<a href="tell:<?php echo $item['phone']; ?>">
							<span class="rst-team-info-icon"><svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path opacity="0.989" fill-rule="evenodd" clip-rule="evenodd" d="M6.13618 0.983333C6.72752 0.933604 7.20612 1.12328 7.57201 1.55236C8.58955 2.82768 9.47314 4.18251 10.2228 5.61687C10.3446 5.89212 10.4256 6.17663 10.4658 6.47041C10.4487 6.68685 10.3824 6.89007 10.267 7.08009C9.75677 7.5901 9.20453 8.05752 8.61023 8.48234C9.69006 11.2032 11.7076 13.0661 14.6628 14.071C15.0011 13.7258 15.3325 13.3736 15.6568 13.0143C15.9678 12.6444 16.3727 12.4277 16.8718 12.3639C17.5921 12.4923 18.2695 12.7294 18.904 13.0752C20.0589 13.691 21.1781 14.3549 22.2617 15.0668C22.8562 15.5282 22.9813 16.0769 22.6372 16.713C22.0146 17.4755 21.3004 18.1596 20.4945 18.7655C19.6539 19.43 18.7409 19.999 17.7554 20.4726C17.0173 20.494 16.2957 20.3992 15.5906 20.1881C13.8497 19.6718 12.2298 18.9402 10.7308 17.9933C7.20254 15.7501 4.50025 12.8575 2.62392 9.31557C2.16625 8.36398 1.84227 7.37493 1.65197 6.34848C1.62252 6.11814 1.62252 5.88785 1.65197 5.65751C2.62991 3.99854 3.90375 2.55564 5.47349 1.32882C5.68423 1.1914 5.90512 1.07624 6.13618 0.983333Z" fill="white"/>
							</svg></span>
							<span class="rst-team-info-text"><?php echo $item['phone']; ?></span></a>
						</div>
						<?php
							}
						?>
					</div>
				</div>
			</div>
			<?php
				}
			?>
			</div>
		</div>
	</div>
	<?php	
	endif;
	return ob_get_clean();
}
add_shortcode('smo_custom_slider_teams','smo_custom_slider_teams_shortcode');

add_action( 'vc_before_init', 'smo_custom_slider_teams_map' );
function smo_custom_slider_teams_map(){
	vc_map( array(
	  "name" => __( "List Teams"),
	  "base" => "smo_custom_slider_teams",
	  "class" => "",
	  "category" => __( "SMO"),
	  "params" => array(
		 array(
		  "type" => "param_group", 
		  'param_name' => 'list_teams', 
		  "heading" => __( "List Teams"),
		  'params' => array(
		  	 array(
				  'type' => 'attach_image',
				  'value' => '',
				  'heading' => 'Avatar',
				  'param_name' => 'avatar',
		     ),
			 array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'First Name',
				  'param_name' => 'fname',
		     ), 
			 array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Last Name',
				  'param_name' => 'lname',
		     ), 
			  array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Email',
				  'param_name' => 'email',
		     ), 
			  array(
				  'type' => 'textfield',
				  'value' => '',
				  'heading' => 'Phone',
				  'param_name' => 'phone',
		     ),
			 array(
				  'type' => 'textarea',
				  'value' => '',
				  'heading' => 'Description',
				  'param_name' => 'description',
		     ),
		  ),
		 )
	  )
 ) );
}

Share social wordpress

<a href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&amp;url=<?php echo get_the_permalink(); ?>" class="social-link" target="_blank" rel="noopener noreferrer follow" data-wpel-link="internal">
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="28" height="28" rx="4" fill="#43414F"></rect>
            <path d="M19.9222 4.66675H23.0741L16.1883 12.5742L24.2888 23.3334H17.9457L12.9779 16.8085L7.2928 23.3334H4.13916L11.504 14.8763L3.7334 4.66675H10.237L14.7275 10.6315L19.9222 4.66675ZM18.8157 21.4381H20.5627L9.28848 6.46302H7.41409L18.8157 21.4381Z" fill="white"></path>
        </svg>
    </a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_the_permalink(); ?>" class="social-link" target="_blank" rel="noopener noreferrer follow" data-wpel-link="internal">
      <svg width="28" height="28" class="facebook" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_3307_57195)">
          <path d="M24.889 1.60787e-07H3.11C2.7015 1.39669e-07 2.29701 0.0804758 1.91962 0.23683C1.54224 0.393185 1.19935 0.622355 0.910544 0.911252C0.621741 1.20015 0.392681 1.54311 0.236448 1.92055C0.0802144 2.29799 -0.000131188 2.70251 1.60787e-07 3.111V24.89C1.39669e-07 25.2985 0.0804758 25.703 0.23683 26.0804C0.393185 26.4578 0.622355 26.8007 0.911252 27.0895C1.20015 27.3783 1.54311 27.6073 1.92055 27.7636C2.29799 27.9198 2.70251 28.0001 3.111 28H14.966V17.172H11.321V12.932H14.966V9.815C14.966 6.2 17.176 4.229 20.403 4.229C21.4898 4.22651 22.5759 4.28092 23.657 4.392V8.172H21.436C19.678 8.172 19.336 9.003 19.336 10.229V12.928H23.536L22.99 17.167H19.31V28H24.889C25.2976 28.0001 25.7022 27.9198 26.0797 27.7635C26.4572 27.6072 26.8002 27.378 27.0891 27.0891C27.378 26.8002 27.6072 26.4572 27.7635 26.0797C27.9198 25.7022 28.0001 25.2976 28 24.889V3.11C28 2.7015 27.9195 2.29701 27.7632 1.91962C27.6068 1.54224 27.3776 1.19935 27.0887 0.910544C26.7999 0.621741 26.4569 0.392681 26.0795 0.236448C25.702 0.0802144 25.2975 -0.000131188 24.889 1.60787e-07Z"></path>
        </g>
        <defs>
          <clipPath id="clip0_3307_57195">
            <rect width="28" height="28" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
    </a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo get_the_permalink(); ?>" class="social-link" target="_blank" rel="noopener noreferrer follow" data-wpel-link="internal">
      <svg width="28" height="28" class="linkedin h-p-0-lg h-mb-3-lg" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_3302_57044)">
          <path d="M24.889 1.60787e-07H3.11C2.7015 1.39669e-07 2.29701 0.0804758 1.91962 0.23683C1.54224 0.393185 1.19935 0.622355 0.910544 0.911252C0.621741 1.20015 0.392681 1.54311 0.236448 1.92055C0.0802144 2.29799 -0.000131188 2.70251 1.60787e-07 3.111V24.89C1.39669e-07 25.2985 0.0804758 25.703 0.23683 26.0804C0.393185 26.4578 0.622355 26.8007 0.911252 27.0895C1.20015 27.3783 1.54311 27.6073 1.92055 27.7636C2.29799 27.9198 2.70251 28.0001 3.111 28H24.89C25.2985 28 25.703 27.9195 26.0804 27.7632C26.4578 27.6068 26.8007 27.3776 27.0895 27.0887C27.3783 26.7999 27.6073 26.4569 27.7636 26.0795C27.9198 25.702 28.0001 25.2975 28 24.889V3.11C28 2.7015 27.9195 2.29701 27.7632 1.91962C27.6068 1.54224 27.3776 1.19935 27.0887 0.910544C26.7999 0.621741 26.4569 0.392681 26.0795 0.236448C25.702 0.0802144 25.2975 -0.000131188 24.889 1.60787e-07ZM9.333 21.778H5.41V10.888H9.334V21.778H9.333ZM7.302 8.893C6.102 8.893 5.302 8.093 5.302 7.026C5.302 5.959 6.1 5.16 7.433 5.16C8.633 5.16 9.433 5.96 9.433 7.026C9.433 8.094 8.633 8.893 7.301 8.893H7.302ZM23.333 21.778H19.535V15.826C19.535 14.18 18.522 13.801 18.142 13.801C17.762 13.801 16.497 14.054 16.497 15.826V21.778H12.572V10.888H16.497V12.408C17.002 11.522 18.015 10.888 19.914 10.888C21.814 10.888 23.334 12.408 23.334 15.826V21.778H23.333Z"></path>
        </g>
        <defs>
          <clipPath id="clip0_3302_57044">
            <rect width="28" height="28" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
    </a>
<a href="mailto:?subject=<?php the_title(); ?>&amp;body=Article:<?php echo get_the_permalink(); ?>" class="social-link" target="_blank" rel="nofollow noopener noreferrer">
      <svg width="28" height="28" class="mail h-p-0-lg h-mb-3-lg" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
        <path d="M2.8 3.00001C2.12163 2.99621 1.4654 3.24121 0.955496 3.68864C0.445591 4.13608 0.117389 4.7549 0.033 5.42801L14 14L27.967 5.42801C27.8826 4.7549 27.5544 4.13608 27.0445 3.68864C26.5346 3.24121 25.8784 2.99621 25.2 3.00001H2.8ZM0 8.15901V22.25C0 23.77 1.253 25 2.8 25H25.2C26.747 25 28 23.77 28 22.25V8.15901L14.741 16.296C14.5178 16.4323 14.2615 16.5043 14 16.5043C13.7385 16.5043 13.4822 16.4323 13.259 16.296L0 8.16001V8.15901Z"></path>
      </svg>
    </a>

Phân trang Number

if ( ! function_exists( 'rst_the_posts_navigation' ) ) :
/**
 * Display navigation to next/previous set of posts when applicable.
 *
 * @todo Remove this function when WordPress 4.3 is released.
 */
function rst_the_posts_navigation($query) {
	// Don't print empty markup if there's only one page.
	if ( $query->max_num_pages < 2 ) {
		return;
	}
	$big = 999999999;
	$my_page = max( get_query_var('paged'), get_query_var('page') );
	$paginate_links = paginate_links( array(
		'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
		'format' => '?paged=%#%',
		'current' => max( 1, $my_page ),
		'total' => $query->max_num_pages,
		'prev_text'    => '<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.64844 5.10156C5.85938 5.33594 5.85938 5.6875 5.64844 5.89844L1.14844 10.3984C0.914062 10.6328 0.5625 10.6328 0.351562 10.3984C0.117188 10.1875 0.117188 9.83594 0.351562 9.625L4.45312 5.52344L0.351562 1.39844C0.117188 1.1875 0.117188 0.835938 0.351562 0.625C0.5625 0.390625 0.914062 0.390625 1.125 0.625L5.64844 5.10156Z" fill="#0A5660"/>
</svg>

',
		'next_text'    => '<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.64844 5.10156C5.85938 5.33594 5.85938 5.6875 5.64844 5.89844L1.14844 10.3984C0.914062 10.6328 0.5625 10.6328 0.351562 10.3984C0.117188 10.1875 0.117188 9.83594 0.351562 9.625L4.45312 5.52344L0.351562 1.39844C0.117188 1.1875 0.117188 0.835938 0.351562 0.625C0.5625 0.390625 0.914062 0.390625 1.125 0.625L5.64844 5.10156Z" fill="#0A5660"/>
</svg>

',
		'type'			=> 'array'
	 ));
	
	if( is_array( $paginate_links ) ) {
		$paged = ( $my_page == 0 ) ? 1 : $my_page;
		echo '<div id="tf-pagination">';
			echo '<nav class="wp-pagenavi">';
				
				foreach ( $paginate_links as $page ) {
					echo force_balance_tags($page);
				}
			
			echo '</nav>';
		echo '</div>';
	}
}
endif;

Phân trang Next/prev

function smo_post_navigation_shortcode() {
	ob_start();
	?>
	<nav class="navigation post-navigation" role="navigation">
		<div class="nav-links">
			<?php
			$prev_post = get_previous_post(true);
			if (!empty($prev_post)) {
					?>
					<div class="prev-post">
						<a href="<?php echo get_permalink($prev_post->ID); ?>" class="click-icon"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.28125 7.46875C0.046875 7.23438 0.046875 6.80469 0.28125 6.57031L6.53125 0.320312C6.76562 0.0859375 7.19531 0.0859375 7.42969 0.320312C7.66406 0.554688 7.66406 0.984375 7.42969 1.21875L1.60938 7L7.42969 12.8203C7.66406 13.0547 7.66406 13.4844 7.42969 13.7188C7.19531 13.9531 6.76562 13.9531 6.53125 13.7188L0.28125 7.46875Z" fill="#027DC0"/>
</svg>
</a>
						<div class="infor-post-navigation">
							<h6>Previous NEWS</h6>
							<p><?php echo esc_html($prev_post->post_title); ?></p>
						</div>
					</div>
					<?php
						}else{
				echo '<div></div>';
			}
					?>
					<?php
			$next_post = get_next_post(true);
			if (!empty($next_post)) {
					?>
					<div class="next-post">
						<div class="infor-post-navigation">
							<h6>NEXT NEWS</h6>
							<p><?php echo esc_html($next_post->post_title); ?></p>
						</div>
						<a href="<?php echo get_permalink($next_post->ID); ?>" class="click-icon"><svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.67969 6.57031C7.91406 6.80469 7.91406 7.23438 7.67969 7.46875L1.42969 13.7188C1.19531 13.9531 0.765625 13.9531 0.53125 13.7188C0.296875 13.4844 0.296875 13.0547 0.53125 12.8203L6.35156 7L0.53125 1.21875C0.296875 0.984375 0.296875 0.554688 0.53125 0.320312C0.765625 0.0859375 1.19531 0.0859375 1.42969 0.320312L7.67969 6.57031Z" fill="#027DC0"/>
</svg>

						</a>
					</div>
					<?php
						}else{
				echo '<div></div>';
			}
	?>
		</div><!-- .nav-links -->
	</nav><!-- .navigation -->
	<?php
	return ob_get_clean();
}
add_shortcode('smo_post_navigation', 'smo_post_navigation_shortcode');

Js scroll đổi màu text

jQuery('.title_animate .elementor-heading-title').each(function() {
	const $this = jQuery(this);
	const content = $this.text();
	var html = '';
	for (let i = 0; i < content.length; i++) {
	  html += `<span>${content[i]}</span>`;
	}
	$this.html(html);
});
window.addEventListener('scroll', function() {
	var delay = 0;

	jQuery('.title_animate .elementor-heading-title').each(function() {
	  const scrollY = window.scrollY;
	  const thisTop = jQuery(this).offset().top;
	  const screenHeight = window.innerHeight;
	  const start = thisTop - (screenHeight);
	  const end = thisTop - (screenHeight / 4);
	  const move = scrollY - start;
	  const percent = move / (end - start) * 100;
	  const spans = jQuery(this).find('span');
	  const animated = Math.floor(spans.length / 100 * percent);
	  spans.each(function(i) {
		let color = i <= animated ? '#213F39' : 'rgba(33,63,57,0.5)';
		if (i <= animated && !jQuery(this).hasClass('animated')) {
		  jQuery(this).css({
			transition: `all 0.3s linear`,
			color: color
		  });
		  delay += 0.02;
		  jQuery(this).addClass('animated');
		}
		if (i > animated) {
		  jQuery(this).css({
			transition: `none`,
			color: color
		  });
		  jQuery(this).removeClass('animated');
		}
	  })
	})
});

Date time picker

add_action( 'wp_footer', 'load_flatpickr_datetime_script' );
function load_flatpickr_datetime_script() {
    ?>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        flatpickr(".datetimepicker input", {
            enableTime: true,
            dateFormat: "m/d/Y @ h:i K", // h:i = 12h, K = AM/PM
            time_24hr: false
        });
    });
    </script>
	<style>
		body .gform_fields .gfield.datetimepicker .ginput_container  input{
			background-image: url(<?php echo home_url(); ?>/wp-content/uploads/2025/04/calendar.svg) !important;
			background-position: center right  10px !important;
			background-repeat: no-repeat !important;
		}
	</style>
    <?php
}

Select option thành div để style cho dễ

if ($('.custom-select').length) {
		var x, i, j, l, ll, selElmnt, a, b, c;
		/* Look for any elements with the class "custom-select": */
		x = document.getElementsByClassName("custom-select");
		l = x.length;
		for (i = 0; i < l; i++) {
			selElmnt = x[i].getElementsByTagName("select")[0];
			ll = selElmnt.length;
			/* For each element, create a new DIV that will act as the selected item: */
			a = document.createElement("DIV");
			a.setAttribute("class", "select-selected");
			a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
			x[i].appendChild(a);

			/* For each element, create a new DIV that will contain the option list: */
			b = document.createElement("DIV");
			b.setAttribute("class", "select-items select-hide");
			for (j = 0; j < ll; j++) {  //
				/* For each option in the original select element,
				create a new DIV that will act as an option item: */
				c = document.createElement("DIV");
				c.innerHTML = selElmnt.options[j].innerHTML;

				/*  */
				if (j === selElmnt.selectedIndex) {
					c.setAttribute("class", "same-as-selected");
				}

				c.addEventListener("click", function(e) {
					/* When an item is clicked, update the original select box,
					and the selected item: */
					var y, i, k, s, h, sl, yl;
					s = this.parentNode.parentNode.getElementsByTagName("select")[0];
					sl = s.length;
					h = this.parentNode.previousSibling;
					for (i = 0; i < sl; i++) {
						if (s.options[i].innerHTML == this.innerHTML) {
							s.selectedIndex = i;
							h.innerHTML = this.innerHTML;
							y = this.parentNode.getElementsByClassName("same-as-selected");
							yl = y.length;
							for (k = 0; k < yl; k++) {
								y[k].removeAttribute("class");
							}
							this.setAttribute("class", "same-as-selected");
							break;
						}
					}
					h.click();
				});
				b.appendChild(c);
			}
			x[i].appendChild(b);
			a.addEventListener("click", function(e) {
				/* When the select box is clicked, close any other select boxes,
				and open/close the current select box: */
				e.stopPropagation();
				closeAllSelect(this);
				this.nextSibling.classList.toggle("select-hide");
				this.classList.toggle("select-arrow-active");
			});
		}

		function closeAllSelect(elmnt) {
			/* A function that will close all select boxes in the document,
			except the current select box: */
			var x, y, i, xl, yl, arrNo = [];
			x = document.getElementsByClassName("select-items");
			y = document.getElementsByClassName("select-selected");
			xl = x.length;
			yl = y.length;
			for (i = 0; i < yl; i++) {
				if (elmnt == y[i]) {
					arrNo.push(i)
				} else {
					y[i].classList.remove("select-arrow-active");
				}
			}
			for (i = 0; i < xl; i++) {
				if (arrNo.indexOf(i)) {
					x[i].classList.add("select-hide");
				}
			}
		}

		/* If the user clicks anywhere outside the select box,
		then close all select boxes: */
		document.addEventListener("click", closeAllSelect);
	}

Khi đến section thì fixed section, lăn chuột thì scroll ngang các item bên trong đến cuối thì scroll xuống dưới tiếp

<style>
/* Your full existing CSS — exactly as you gave it */
.mdw-horizontal-scroll{
    --progress-bar: true;
    --progress-bar-color: ;
    --progress-bar-height: 2px;
}
body{
    --disable-movement-desktop: false;
    --disable-movement-tablet: false;
    --disable-movement-mobile: true;
    --hide-default-scrollbar: false;
    --disable-horizontal-scroll-mobile: false;
}
html.hide-scrollbar::-webkit-scrollbar{
    display: none;
}
html.hide-scrollbar{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
@media (min-width: 768px) {
.mdw-horizontal-scroll{
    overflow: hidden;
    --initial-height: var(--min-height,100vh);
}
.mdw-horizontal-scroll:after{
    content: "";
    left: 0;
    top: calc(100vh - var(--progress-bar-height,2px));
    width: 100vw;
    height: var(--progress-bar-height,2px);
    background: var(--progress-bar-color,FFFF00);
    transform: scaleX(calc(var(--progress,0)*100%));
    position: fixed;
    transform-origin: left;
    will-change: transform;
    transition: transform 0.1s linear;
    opacity: 0;
}
.mdw-horizontal-scroll.fixed:after{
    opacity: 1;
}
.mdw-horizontal-scroll.progress-bar-disabled:after{
    display: none;
}
.mdw-horizontal-scroll > .e-con,
.mdw-horizontal-scroll > .e-container{
    transition: none;
    height: var(--initial-height,100vh);
}
body.tiny-scroll .mdw-horizontal-scroll > .e-con,
body.tiny-scroll .mdw-horizontal-scroll > .e-container{
    will-change: transform;
    transition: transform 1s cubic-bezier(0,.33,.07,1.03);
}
.mdw-horizontal-scroll.fixed > .e-con,
.mdw-horizontal-scroll.fixed > .e-container{
    position: fixed;
    top: 0;
    left: 0;
}
.mdw-horizontal-scroll.bottom{
    justify-content: flex-end;
}
.mdw-horizontal-scroll > .e-con > *,
.mdw-horizontal-scroll > .e-container > *{
    height: var(--min-height, 100vh);
}
.mdw-horizontal-scroll.hs-disabled{
    height: auto !important;
}
.mdw-horizontal-scroll.hs-disabled:after{
    display: none;
}
.mdw-horizontal-scroll.hs-disabled > .e-con,
.mdw-horizontal-scroll.hs-disabled > .e-container{
    flex-direction: column;
    height: auto;
}
.mdw-horizontal-scroll.hs-disabled.fixed > .e-con,
.mdw-horizontal-scroll.hs-disabled.fixed > .e-container{
    position: relative;
}
.mdw-horizontal-scroll.hs-disabled > .e-con > *,
.mdw-horizontal-scroll.hs-disabled > .e-container > *{
    height: auto;
}
.mdw-horizontal-scroll.hs-disabled > .e-con > .e-con,
.mdw-horizontal-scroll.hs-disabled > .e-container > .e-container{
    width: 100%;
}
}
/* Scrolling Movement */
.e-con[class^='mdw-hs-movement'],
.e-con[class*=' mdw-hs-movement'],
.e-container[class^='mdw-hs-movement'],
.e-container[class*=' mdw-hs-movement'],
.elementor-widget[class^='mdw-hs-movement'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement'] .elementor-widget-container{
    transform: translateX(calc(var(--e-transform-translateX,0px) + var(--translateX,0)*-1px)) translateY(calc(var(--e-transform-translateY,0px) + var(--translateY,0)*1px)) rotate(calc(var(--rotateZ,0deg) + var(--rotate,0)*1deg));
    transition: none;
}
body.tiny-scroll .e-con[class^='mdw-hs-movement'],
body.tiny-scroll .e-con[class*=' mdw-hs-movement'],
body.tiny-scroll .e-container[class^='mdw-hs-movement'],
body.tiny-scroll .e-container[class*=' mdw-hs-movement'],
body.tiny-scroll .elementor-widget[class^='mdw-hs-movement'] .elementor-widget-container,
body.tiny-scroll .elementor-widget[class*=' mdw-hs-movement'] .elementor-widget-container{
    will-change: transform;
    transition: transform 1s cubic-bezier(0,.33,.07,1.03);
}
.e-con[class^='mdw-hs-movement-translate-x'],
.e-con[class*=' mdw-hs-movement-translate-x'],
.e-container[class^='mdw-hs-movement-translate-x'],
.e-container[class*=' mdw-hs-movement-translate-x'],
.elementor-widget[class^='mdw-hs-movement-translate-x'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-translate-x'] .elementor-widget-container{
    --translateX: calc(var(--parallax,0)*var(--speed-x,10)*var(--direction-x,1));
}
.e-con[class^='mdw-hs-movement-translate-y'],
.e-con[class*=' mdw-hs-movement-translate-y'],
.e-container[class^='mdw-hs-movement-translate-y'],
.e-container[class*=' mdw-hs-movement-translate-y'],
.elementor-widget[class^='mdw-hs-movement-translate-y'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-translate-y'] .elementor-widget-container{
    --translateY: calc(var(--parallax,0)*var(--speed-y,10)*var(--direction-y,1));
}
.e-con[class^='mdw-hs-movement-rotate'],
.e-con[class*=' mdw-hs-movement-rotate'],
.e-container[class^='mdw-hs-movement-rotate'],
.e-container[class*=' mdw-hs-movement-rotate'],
.elementor-widget[class^='mdw-hs-movement-rotate'] .elementor-widget-container,
.elementor-widget[class*=' mdw-hs-movement-rotate'] .elementor-widget-container{
    --rotate: calc(var(--parallax,0)*var(--speed-r,10)*var(--direction-r,1));
}
/* Reveal Animtion */
.mdw-reveal-animation,
.mdw-reveal-animation-left,
.mdw-reveal-animation-right,
.mdw-reveal-animation-top,
.mdw-reveal-animation-bottom{
    animation: none !important;
    transition: all 1s ease-in-out !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.mdw-reveal-animation:not(.animated),
.mdw-reveal-animation-left:not(.animated),
.mdw-reveal-animation-right:not(.animated),
.mdw-reveal-animation-top:not(.animated),
.mdw-reveal-animation-bottom:not(.animated){
    opacity: 0;
}
.mdw-reveal-animation:not(.animated),
.mdw-reveal-animation-bottom:not(.animated){
    transform: translateY(2em);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.mdw-reveal-animation-left:not(.animated){
    transform: translateX(-2em);
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.mdw-reveal-animation-right:not(.animated){
    transform: translateX(2em);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.mdw-reveal-animation-top:not(.animated){
    transform: translateY(-2em);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
/* For Mobile Devices */
@media (max-width: 767px){
    .mdw-horizontal-scroll > .e-con,
    .mdw-horizontal-scroll > .e-container{
        transition: transform 0.1s linear;
    }
}
.mdw-horizontal-scroll{
	position: relative;
	z-index: 9;
}
/* === ADDED: smooth transition on container === */
.mdw-horizontal-scroll .e-con,
.mdw-horizontal-scroll .e-container {
    will-change: transform;
    /* Default no transition, will be set dynamically */
    transition: none;
}

</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
if(!MDWNonce109){
var MDWNonce109 = true
;(function($){
    function init(){
        $('body').append('<div class="mdw-100vh" style="height: 100vh;display: none;"></div>')
        if($('body').css('--hide-default-scrollbar') && $('body').css('--hide-default-scrollbar').trim() == 'true'){
            $('html').addClass('hide-scrollbar')   
        }
    }
    function getValue(text, defaultValue){
        return (text.match(/\d+/) ? text.match(/\d+/)[0] : defaultValue)/100
    }
    function getDirection(text){
        return text.search('reverse') > -1 ? -1 : 1
    }
    function horizontalScroll(scroll, windowWidth, windowHeight, disableMobile){
        $('.mdw-horizontal-scroll').each(function(){
            var $this = $(this),
                container = $this.find('.swiper-wrapper').eq(0),
                containerTop = $this.offset().top,
                totalWidth = 80,
                extraWidth = 0,
                passed = scroll - containerTop,
                translate = passed,
                minHeight = $this.css('--min-height') ? $this.css('--min-height') : '100vh';
			if($this.find('.four-step-left').length > 0){
				 totalWidth = $this.find('.four-step-left').offset().left + 80;
			}			
            container.children('.swiper-slide').each(function(){
                totalWidth += $(this).outerWidth() + parseFloat($(this).css('margin-left')) + parseFloat($(this).css('margin-right'));
            });

            if( windowWidth < 768 && disableMobile ){
                totalWidth = windowWidth;
                $this.addClass('hs-disabled');
            }else{
                $this.removeClass('hs-disabled');
            }

            $this.attr('total-width', totalWidth);

            if(totalWidth > windowWidth){
                extraWidth = totalWidth - windowWidth;
            }

            $this.height('calc(' + minHeight + ' + ' + extraWidth + 'px)');

            if(passed < 0){ translate = 0; }
            if(passed > extraWidth){ translate = extraWidth; }

            var progress = translate / extraWidth;

            if(progress <= 0){
                $this.removeClass('fixed bottom');
            }
            if(progress > 0 && progress < 1){
                $this.addClass('fixed');
                $this.removeClass('bottom');
            }
            if(progress >= 1){
                $this.removeClass('fixed');
                $this.addClass('bottom');
            }

            // Apply smooth transition only at start/end scroll
            if (progress <= 0 || progress >= 1) {
                container.css('transition', 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)');
            } else {
                container.css('transition', 'none');
            }

            container.css('transform', 'translateX(-' + translate + 'px)');
            $this.css('--progress', progress);

            if($this.css('--progress-bar') && $this.css('--progress-bar') == 'true'){
                $this.removeClass('progress-bar-disabled');
            }else{
                $this.addClass('progress-bar-disabled');
            }
        });
    }

    function scrollActivity(){
        var scroll = $(window).scrollTop(),
            windowWidth = window.innerWidth,
            windowHeight = window.innerHeight,
            disableMobile = $('body').css('--disable-horizontal-scroll-mobile') && $('body').css('--disable-horizontal-scroll-mobile').trim() === 'true';

        if($('body').css('--disable-movement-desktop') && $('body').css('--disable-movement-desktop').trim() === 'true'){
            if(windowWidth >= 1024) return;
        }
        if($('body').css('--disable-movement-tablet') && $('body').css('--disable-movement-tablet').trim() === 'true'){
            if(windowWidth < 1024 && windowWidth >= 768) return;
        }
        if($('body').css('--disable-movement-mobile') && $('body').css('--disable-movement-mobile').trim() === 'true'){
            if(windowWidth < 768) return;
        }

        horizontalScroll(scroll, windowWidth, windowHeight, disableMobile);
    }
    function scrollToSection(e){
        var href = $(this).attr('href');
        if(href && href.indexOf('#') === 0){
            e.preventDefault();
            var offset = 0;
            var $target = $(href);
            if($target.length){
                $('html, body').stop().animate({scrollTop: $target.offset().top - offset}, 600);
            }
        }
    }
    $(document).ready(function(){
        init();
        scrollActivity();
        $('body').on('click', 'a', scrollToSection);
    });
    $(window).on('scroll resize load', function(){
        scrollActivity();
    });
})(jQuery)
}
</script>

Promise.all ejemplo de la vida real

Un ejemplo real donde puedes usar Promise.all con async/await es cuando necesitas hacer múltiples operaciones asíncronas en paralelo y esperar a que todas terminen antes de continuar. Por ejemplo, en el caso de una aplicación que debe obtener información de varios usuarios desde diferentes endpoints de una API y luego procesar todos esos datos juntos.

Imagina que tienes que traer datos de dos usuarios distintos al mismo tiempo. Usando Promise.all con async/await puedes lanzar ambas solicitudes al mismo tiempo y esperar a que ambas terminen antes de continuar:

javascript
async function obtenerDatosUsuarios() {
  async function getUser(userId) {
    const response = await fetch(`https://api.miapi.com/user/${userId}`);
    const userData = await response.json();
    return userData;
  }

  try {
    const [usuario1, usuario2] = await Promise.all([getUser(1), getUser(2)]);
    console.log('Datos de usuario 1:', usuario1);
    console.log('Datos de usuario 2:', usuario2);
    // Aquí puedes trabajar con ambos datos al mismo tiempo
  } catch (error) {
    console.error('Error al obtener datos de usuarios:', error);
  }
}

obtenerDatosUsuarios();
En esta situación, si alguna de las dos solicitudes falla, el Promise.all se rechaza inmediatamente y entras en el bloque catch para manejar el error. Esto es eficiente porque no esperas a terminar una solicitud para empezar la otra, sino que ambas se pagan en paralelo y el programa espera a que las dos terminen para continuar. Además, puedes manejar fácilmente el error si alguna de las solicitudes falla.

Otro caso real puede ser enviar un lote de correos electrónicos a muchos usuarios en paralelo, procesándolos por lotes para no saturar el servidor. En cada lote usas Promise.all para esperar que se terminen de enviar los correos antes de pasar al siguiente grupo.

Así, Promise.all con async/await es útil para operaciones asíncronas que pueden ejecutarse en paralelo y donde se requiere que todas concluyan satisfactoriamente para continuar.

Promise.all, Promise.any, Promise.race y Promise.allSettled pero usando async y await

1. Promise.all con async/await:Espera a que todas las promesas se resuelvan. Si alguna promesa es rechazada, se rechaza inmediatamente con el motivo del primer error.

async function ejemploPromiseAll() {
  const p1 = Promise.resolve(3);
  const p2 = 1337; // valor normal, se acepta directamente
  const p3 = new Promise(resolve => setTimeout(resolve, 100, "foo"));

  try {
    const resultados = await Promise.all([p1, p2, p3]);
    console.log(resultados); // [3, 1337, "foo"]
  } catch (error) {
    console.error("Error:", error);
  }
}
ejemploPromiseAll();

2. Promise.any con async/await: Resuelve cuando la primera promesa se resuelve exitosamente. Rechaza solo si todas las promesas son rechazadas.

async function ejemploPromiseAny() {
  const p1 = Promise.reject("Error 1");
  const p2 = new Promise(resolve => setTimeout(resolve, 100, "Éxito 2"));
  const p3 = new Promise(resolve => setTimeout(resolve, 200, "Éxito 3"));

  try {
    const resultado = await Promise.any([p1, p2, p3]);
    console.log(resultado); // "Éxito 2"
  } catch (error) {
    console.error("Todas las promesas fallaron:", error);
  }
}
ejemploPromiseAny();

3. Promise.race con async/await: Resuelve o rechaza tan pronto como la primera promesa se resuelva o rechace.
async function ejemploPromiseRace() {
  const p1 = new Promise(resolve => setTimeout(resolve, 500, "Resultado p1"));
  const p2 = new Promise((_, reject) => setTimeout(reject, 100, "Error p2"));

  try {
    const resultado = await Promise.race([p1, p2]);
    console.log(resultado);
  } catch (error) {
    console.error("Error del primero en terminar:", error); // "Error p2"
  }
}
ejemploPromiseRace();

4. Promise.allSettled con async/await: Espera a que todas las promesas terminen (resueltas o rechazadas) y devuelve un array con el estado y valor o razón de cada promesa.

async function ejemploPromiseAllSettled() {
  const p1 = Promise.resolve("Éxito p1");
  const p2 = Promise.reject("Error p2");
  const p3 = Promise.resolve("Éxito p3");

  const resultados = await Promise.allSettled([p1, p2, p3]);

  resultados.forEach((result, index) => {
    if (result.status === "fulfilled") {
      console.log(`Promesa ${index + 1} cumplida con valor: ${result.value}`);
    } else {
      console.log(`Promesa ${index + 1} rechazada con razón: ${result.reason}`);
    }
  });
}
ejemploPromiseAllSettled();

manejo de promesas

Antes de la introducción de async y await en JavaScript, el manejo de operaciones asíncronas con promesas se hacía principalmente usando los métodos .then() y .catch() de las promesas. Estos métodos permitían encadenar funciones que se ejecutaban cuando la promesa se resolvía o se rechazaba, respectivamente. Por ejemplo:
miPromesa()
  .then(resultado => {
    // manejar resultado exitoso
  })
  .catch(error => {
    // manejar error
  });
1. Promise.all
Espera a que todas las promesas se resuelvan. Si alguna promesa es rechazada, se rechaza inmediatamente con el motivo del primer error.

const p1 = Promise.resolve(3);
const p2 = 1337; // No es promesa, se acepta tal cual en el array de resultados
const p3 = new Promise((resolve) => setTimeout(resolve, 100, "foo"));

Promise.all([p1, p2, p3]).then(values => {
  console.log(values); // [3, 1337, "foo"]
}).catch(error => {
  console.error(error);
});

2. Promise.any
Resuelve cuando la primera promesa se resuelve exitosamente. Rechaza solo si todas las promesas son rechazadas.

const p1 = Promise.reject("Error 1");
const p2 = new Promise((resolve) => setTimeout(resolve, 100, "Éxito 2"));
const p3 = new Promise((resolve) => setTimeout(resolve, 200, "Éxito 3"));

Promise.any([p1, p2, p3]).then(value => {
  console.log(value); // "Éxito 2"
}).catch(error => {
  console.error(error); // Se ejecutaría si todas las promesas fallan
});

3.-3. Promise.race
Resuelve o rechaza tan pronto como la primera promesa se resuelva o rechace.
const p1 = new Promise((resolve) => setTimeout(resolve, 500, "Resultado p1"));
const p2 = new Promise((_, reject) => setTimeout(reject, 100, "Error p2"));

Promise.race([p1, p2]).then(value => {
  console.log(value);
}).catch(error => {
  console.error(error); // "Error p2", ya que es la primera en finalizar con rechazo
});

4. Promise.allSettled
Espera a que todas las promesas terminen (resueltas o rechazadas) y devuelve un array con el estado y valor o razón de cada promesa.

const p1 = Promise.resolve("Éxito p1");
const p2 = Promise.reject("Error p2");
const p3 = Promise.resolve("Éxito p3");

Promise.allSettled([p1, p2, p3]).then(results => {
  results.forEach((result, index) => {
    if (result.status === "fulfilled") {
      console.log(`Promesa ${index + 1} cumplida con valor: ${result.value}`);
    } else {
      console.log(`Promesa ${index + 1} rechazada con razón: ${result.reason}`);
    }
  });
});

Include file WP

@hamzahanif192

require_once( get_stylesheet_directory() .'/posttype.php');
require_once( get_stylesheet_directory() .'/function_loops.php');

#php

Search with Precision using in_array() and array_search()

Checking if a value exists?
if (in_array('admin', $roles, true)) {
    // true === strict check, avoids weird type bugs
}

Need to find the key instead?
$key = array_search('editor', $roles, true);
// Returns: 'editor'

Always use the strict mode (true) – otherwise, PHP might return unexpected results due to loose comparisons (like “0" == false).

Pro tip: If you do lots of lookups, consider flipping the array so the value becomes the key – that’s way faster.

#php

Filter Like a Pro with array_filter()

Let’s clean some data:
$data = ['apple', '', null, 'banana', false];
$clean = array_filter($data);
// Result: ['apple', 'banana']

By default, array_filter() removes falsey values: null, false, ‘’, 0, etc.

But you can pass your own logic:
$even = array_filter([1, 2, 3, 4], fn($n) => $n % 2 === 0);
// Result: [1 => 2, 3 => 4]

Combine Keys and Values with array_combine()

Sometimes your data comes in two separate pieces. Maybe you read from a CSV file:
$headers = ['name', 'email', 'role'];
$row = ['Alice', 'alice@example.com', 'admin'];

To turn this into an associative array:
$user = array_combine($headers, $row);
/*
[
  'name' => 'Alice',
  'email' => 'alice@example.com',
  'role' => 'admin'
]
*/

Flip Keys and values with array_flip()

$roles = ['admin' => 1, 'editor' => 2, 'viewer' => 3];

Need to look up the role name by ID?
$lookup = array_flip($roles);
// Result: [1 => 'admin', 2 => 'editor', 3 => 'viewer']

#php

Extract Data the Smart Way with array_column()

$users = [
    ['id' => 1, 'name' => 'Alice'],
    ['id' => 2, 'name' => 'Bob'],
    ['id' => 3, 'name' => 'Charlie'],
];

To get all the names:
$names = array_column($users, 'name');
// Result: ['Alice', 'Bob', 'Charlie']

Want to index them by ID?
$names = array_column($users, 'name', 'id');
// Result: [1 => 'Alice', 2 => 'Bob', 3 => 'Charlie']

etiqueta dialog en html

<style>
        .dialog {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        .dialog-content {
            background-color: white;
            margin: 15% auto;
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            max-width: 500px;
        }
    </style>
1.-<dialog id="myDialog" class="dialog">
      <div class="dialog-content">
          <h2>Dialog Title</h2>
          <p>This is a dialog box.</p>
          <button onclick="myDialog.close()">Close</button>
          <button onclick="myDialog.showModal()">Abrir Modal</button>
      </div>
	</dialog>
<script>
  const myDialog = document.getElementById('myDialog');
</script>

<button onclick="myDialog.showModal()">abrir Modal</button>
    
2.-<button id="openDialog">Abrir diálogo</button>

<dialog id="myDialog">
  <p>Este es un cuadro de diálogo</p>
  <button id="closeDialog">Cerrar</button>
</dialog>

<script>
  const openDialogButton = document.getElementById("openDialog");
  const dialog = document.getElementById("myDialog");
  const closeDialogButton = document.getElementById("closeDialog");

  openDialogButton.addEventListener("click", () => {
    dialog.showModal(); // Muestra el cuadro de diálogo en modo modal
  });

  closeDialogButton.addEventListener("click", () => {
    dialog.close(); // Cierra el cuadro de diálogo
  });
</script>

usando el coamndo network