Widget Iklan ELementor

Ukuran iklan AdSense yang populer:

Ukuran Banner

1. 728 x 90 (Leaderboard)
2. 468 x 60 (Banner)
3. 234 x 60 (Half Banner)

Ukuran Persegi Panjang

1. 300 x 250 (Medium Rectangle)
2. 336 x 280 (Large Rectangle)
3. 250 x 250 (Square)
4. 200 x 200 (Small Square)

Ukuran Skyscraper

1. 120 x 600 (Skyscraper)
2. 160 x 600 (Wide Skyscraper)
3. 300 x 600 (Large Skyscraper)

Ukuran Mobile

1. 320 x 100 (Large Mobile Banner)
2. 320 x 50 (Mobile Banner)
3. 300 x 50 (Mobile Banner)

Ukuran Lainnya

1. 970 x 90 (Large Leaderboard)
2. 970 x 250 (Billboard)
3. 300 x 1050 (Portrait)

Google AdSense juga mendukung iklan responsif yang secara otomatis menyesuaikan ukuran iklan berdasarkan ruang yang tersedia pada perangkat pengguna.

epadsphp, elang purwa ads

<?php
namespace Elementor;

class Purwa_Elang_Ads_Widget extends Widget_Base {

    public function get_name() {
        return 'purwa-elang-ads';
    }

    public function get_title() {
        return __( 'Purwa Elang Ads', 'purwa-elang' );
    }

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

    public function get_categories() {
        return [ 'mandiri-addon' ];
    }

    protected function _register_controls() {
        // Section for Ad Image
        $this->start_controls_section(
            'section_image',
            [
                'label' => __( 'Image', 'purwa-elang' ),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'image',
            [
                'label' => __( 'Upload Image', 'purwa-elang' ),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->add_control(
            'ad_size',
            [
                'label' => __( 'Ad Size', 'purwa-elang' ),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    '728x90' => __( '728 x 90 (Leaderboard)', 'purwa-elang' ),
                    '468x60' => __( '468 x 60 (Banner)', 'purwa-elang' ),
                    '234x60' => __( '234 x 60 (Half Banner)', 'purwa-elang' ),
                    '300x250' => __( '300 x 250 (Medium Rectangle)', 'purwa-elang' ),
                    '336x280' => __( '336 x 280 (Large Rectangle)', 'purwa-elang' ),
                    '250x250' => __( '250 x 250 (Square)', 'purwa-elang' ),
                    '200x200' => __( '200 x 200 (Small Square)', 'purwa-elang' ),
                    '120x600' => __( '120 x 600 (Skyscraper)', 'purwa-elang' ),
                    '160x600' => __( '160 x 600 (Wide Skyscraper)', 'purwa-elang' ),
                    '300x600' => __( '300 x 600 (Large Skyscraper)', 'purwa-elang' ),
                    '320x100' => __( '320 x 100 (Large Mobile Banner)', 'purwa-elang' ),
                    '320x50' => __( '320 x 50 (Mobile Banner)', 'purwa-elang' ),
                    '300x50' => __( '300 x 50 (Mobile Banner)', 'purwa-elang' ),
                    '970x90' => __( '970 x 90 (Large Leaderboard)', 'purwa-elang' ),
                    '970x250' => __( '970 x 250 (Billboard)', 'purwa-elang' ),
                    '300x1050' => __( '300 x 1050 (Portrait)', 'purwa-elang' ),
                ],
                'default' => '728x90',
            ]
        );

        $this->end_controls_section();

        // Section for Thumbnail Style
        $this->start_controls_section(
            'section_thumbnail_style',
            [
                'label' => __( 'Thumbnail Style', 'purwa-elang' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'thumbnail_size',
            [
                'label' => __( 'Thumbnail Size', 'purwa-elang' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 50,
                        'max' => 300,
                    ],
                ],
                'default' => [
                    'size' => 100,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .ad-thumbnail img' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'thumbnail_alignment',
            [
                'label' => __( 'Thumbnail Alignment', 'purwa-elang' ),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => __( 'Left', 'purwa-elang' ),
                        'icon' => 'eicon-h-align-left',
                    ],
                    'center' => [
                        'title' => __( 'Center', 'purwa-elang' ),
                        'icon' => 'eicon-h-align-center',
                    ],
                    'right' => [
                        'title' => __( 'Right', 'purwa-elang' ),
                        'icon' => 'eicon-h-align-right',
                    ],
                ],
                'default' => 'left',
                'selectors' => [
                    '{{WRAPPER}} .purwa-elang-ads' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'thumbnail_border',
            [
                'label' => __( 'Thumbnail Border', 'purwa-elang' ),
                'type' => Controls_Manager::BORDER,
                'selectors' => [
                    '{{WRAPPER}} .ad-thumbnail img' => 'border: {{WIDTH}}{{UNIT}} {{STYLE}} {{COLOR}};',
                ],
            ]
        );

        $this->add_control(
            'thumbnail_border_radius',
            [
                'label' => __( 'Border Radius', 'purwa-elang' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ad-thumbnail img' => 'border-radius: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'thumbnail_margin',
            [
                'label' => __( 'Margin', 'purwa-elang' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em' ],
                'selectors' => [
                    '{{WRAPPER}} .ad-thumbnail' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $image_url = $settings['image']['url'];
        $ad_size = $settings['ad_size'];
        
        $dimensions = explode('x', $ad_size);
        $width = $dimensions[0];
        $height = $dimensions[1];
        
        $html_code = '<img src="'. esc_url($image_url) .'" width="'. $width .'" height="'. $height .'" alt="Ad Banner">';

        ?>

        <div class="purwa-elang-ads" style="display: flex; align-items: center;">
            <div class="ad-thumbnail">
                <img src="<?= esc_url($image_url) ?>" alt="Ad Thumbnail">
            </div>
            <div class="ad-code" style="margin-left: 20px;">
                <textarea style="width: 300px; height: 150px;" readonly><?= esc_html($html_code) ?></textarea>
            </div>
        </div>

        <?php
    }
}

Plugin::instance()->widgets_manager->register_widget_type( new Purwa_Elang_Ads_Widget() );
?>

Copy

Penjelasan tambahan:

1. Thumbnail Size: Menggunakan slider untuk mengatur ukuran thumbnail.
2. Thumbnail Alignment: Menggunakan pilihan alignment (left, center, right).
3. Thumbnail Border: Menggunakan kontrol border untuk mengatur style border.
4. Border Radius: Menggunakan slider untuk mengatur radius border.
5. Margin: Menggunakan kontrol dimensinya untuk mengatur margin.

Langkah selanjutnya sama dengan sebelumnya:

1. Buat file epads.php dan salin kode di atas ke dalam file tersebut.
2. Unggah file epads.php ke dalam direktori plugin WordPress Anda atau buat plugin baru dan masukkan file tersebut.
3. Aktifkan plugin melalui dashboard WordPress.
4. Widget "Purwa Elang Ads" akan muncul di kategori widget "purwa-elang-category" di Elementor.