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
		}
	}
}