Widget Iklan Teks Elementor

epadtext.php yang berfungsi untuk membuat teks ads. Widget ini memiliki tampilan untuk user dengan ads di sebelah kiri dan code HTML yang siap dikopi di sebelah kanannya. Pengaturan mencakup heading, description, subheading, dan style tambahan.

epadtext.php

<?php
namespace Elementor;

class Purwa_Elang_Text_Ads_Widget extends Widget_Base {

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

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

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

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

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

        $this->add_control(
            'heading',
            [
                'label' => __( 'Heading', 'purwa-elang' ),
                'type' => Controls_Manager::TEXT,
                'default' => __( 'This is a heading', 'purwa-elang' ),
                'placeholder' => __( 'Type your heading here', 'purwa-elang' ),
            ]
        );

        $this->add_control(
            'sub_heading',
            [
                'label' => __( 'Sub Heading', 'purwa-elang' ),
                'type' => Controls_Manager::TEXT,
                'default' => __( 'This is a sub heading', 'purwa-elang' ),
                'placeholder' => __( 'Type your sub heading here', 'purwa-elang' ),
            ]
        );

        $this->add_control(
            'description',
            [
                'label' => __( 'Description', 'purwa-elang' ),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __( 'This is a description', 'purwa-elang' ),
                'placeholder' => __( 'Type your description here', 'purwa-elang' ),
            ]
        );

        $this->add_control(
            'url',
            [
                'label' => __( 'URL', 'purwa-elang' ),
                'type' => Controls_Manager::URL,
                'placeholder' => __( 'https://your-link.com', 'purwa-elang' ),
                'show_external' => true,
                'default' => [
                    'url' => '',
                    'is_external' => true,
                    'nofollow' => true,
                ],
            ]
        );

        $this->end_controls_section();

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

        $this->add_control(
            'heading_color',
            [
                'label' => __( 'Heading Color', 'purwa-elang' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ad-heading' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'sub_heading_color',
            [
                'label' => __( 'Sub Heading Color', 'purwa-elang' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ad-sub-heading' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'description_color',
            [
                'label' => __( 'Description Color', 'purwa-elang' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .ad-description' => 'color: {{VALUE}};',
                ],
            ]
        );

        $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' ),
                    '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' ),
                    '160x600' => __( '160 x 600 (Wide Skyscraper)', 'purwa-elang' ),
                    '320x50' => __( '320 x 50 (Mobile Banner)', 'purwa-elang' ),
                ],
                'default' => '300x250',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $heading = $settings['heading'];
        $sub_heading = $settings['sub_heading'];
        $description = $settings['description'];
        $url = $settings['url']['url'];
        $ad_size = $settings['ad_size'];

        $html_code = '<a href="'. esc_url($url) .'" target="_blank" rel="nofollow noopener">
                        <div class="ad-container" style="width: '. esc_html($ad_size) .'; border: 1px solid #ccc; padding: 10px;">
                            <h2 class="ad-heading">'. esc_html($heading) .'</h2>
                            <h3 class="ad-sub-heading">'. esc_html($sub_heading) .'</h3>
                            <p class="ad-description">'. esc_html($description) .'</p>
                        </div>
                      </a>';

        $script_code = '<div class="purwa-elang-ad" style="width: '. esc_html($ad_size) .';">
                            <a href="'. esc_url($url) .'" target="_blank" rel="nofollow noopener">
                                <div style="border: 1px solid #ccc; padding: 10px;">
                                    <h2 style="color: '. $settings['heading_color'] .'">'. esc_html($heading) .'</h2>
                                    <h3 style="color: '. $settings['sub_heading_color'] .'">'. esc_html($sub_heading) .'</h3>
                                    <p style="color: '. $settings['description_color'] .'">'. esc_html($description) .'</p>
                                </div>
                            </a>
                        </div>';

        ?>

        <div class="purwa-elang-text-ads" style="display: flex; align-items: center;">
            <div class="ad-preview" style="width: <?= esc_html($ad_size) ?>; border: 1px solid #ccc; padding: 10px;">
                <a href="<?= esc_url($url) ?>" target="_blank" rel="nofollow noopener">
                    <h2 class="ad-heading" style="margin: 0;"><?= esc_html($heading) ?></h2>
                    <h3 class="ad-sub-heading" style="margin: 0;"><?= esc_html($sub_heading) ?></h3>
                    <p class="ad-description" style="margin: 0;"><?= esc_html($description) ?></p>
                </a>
            </div>
            <div class="ad-code" style="margin-left: 20px;">
                <textarea style="width: 300px; height: 150px;" readonly><?= esc_html($html_code) ?></textarea>
                <br>
                <textarea style="width: 300px; height: 150px;" readonly><?= esc_html($script_code) ?></textarea>
            </div>
        </div>

        <?php
    }
}

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

Copy

Langkah-Langkah Instalasi

1. Buat file utama plugin ep-ai-mandiri-addon.php dan salin kode plugin utama di atas ke dalam file tersebut.
2. Buat folder widgets di dalam direktori plugin.
3. Di dalam folder widgets, buat file epadtext.php dan salin kode widget di atas ke dalam file tersebut.
4. Unggah plugin ini ke direktori wp-content/plugins di instalasi WordPress Anda.
5. Aktifkan plugin melalui dashboard WordPress.