Kreiranje vlastitog addon-a za Elementor: Od ideje do funkcionalnog proširenja

U svetu WordPress-a, Elementor je postao sinonim za intuitivno kreiranje veb sajtova bez koda. Međutim, prava moć ovog vizuelnog editora otkriva se kada pređemo granice osnovnih widgeta i počnemo da kreiramo sopstvena rešenja. Kreiranje vlastitog addon-a za Elementor nije privilegija iskusnih programera – to je logičan sledeći korak za bilo koga ko želi da automatizuje svoj rad, reši specifičan problem ili čak pokrene novi poslovni poduhvat. Ovaj proces transformiše vas od pukog korisnika u kreatora, dajući vam potpunu kontrolu nad funkcionalnošću vaših sajtova.

Dok je Elementor Pro već bogat opcijama, postoje bezbrojni scenariji gde vam je potrebna tačno određena funkcionalnost. Možda vam treba widget koji dinamički prikazuje cene nekretnina iz vaše baze podataka, specijalizovani obrazac za zakazivanje termina za frizera, ili interaktivna mapa sa custom markerima za turističku agenciju. Upravo u tim situacijama, znanje kako da napravite sopstveni addon postaje neprocenjivo. Ovaj vodič će vas provesti kroz ceo proces, od postavljanja razvojnog okruženja do publikovanja vašeg prvog widgeta.

Zašto uopšte kreirati sopstveni Elementor addon?

Pre nego što zaronimo u kod, važno je razumeti šta možete postići i koliko je ovo znanje zapravo moćno.

Automatizacija i efikasnost: Zamislite da za svaki klijentski sajt ručno kodiramo istu kompleksnu sekciju. To je gubljenje vremena. Addon omogućava da tu sekciju pakujete kao "plug-and-play" widget, spremnog za korišćenje u bilo kom projektu uz par klikova. Ovo je posebno korisno za web agencije koje rade u određenoj niši – na primer, ako se specijalizujete za sajtove za restorane, možete kreirati addon sa widgetom za jelovnik koji se lako sinhronizuje sa menijem. Slično, za portfolio za umetnike, addon sa naprednom galerijom može biti game-changer.

Rešavanje specifičnih problema: Tržišni addon-ovi su napravljeni da zadovolje široke potrebe. Vaš posao ili posao vašeg klijenta ima jedinstvene zahteve. Kreiranjem custom rešenja, vi tačno rešavate taj problem, bez kompromisa i bez nepotrebnog "overheada" od funkcionalnosti koje vam ne trebaju. Ovo direktno utiče na optimizaciju brzine sajta, jer vi kontrolišete šta se učitava.

Novi poslovni model: Uspešan addon možete prodavati na tržištima kao što je CodeCanyon ili kroz sopstveni sajt. Zamislite da ste identifikovali nedostatak na tržištu – jednostavan widget za prikaz radnog vremena koji se automatski ažurira za praznike. To može postati vaš proizvod.

Šta vam je potrebno pre nego što počnete?

Da biste krenuli u kreiranje vlastitog addon-a za Elementor, neophodno je imati osnovno razumevanje nekoliko tehnologija. Ne morate biti senior programer, ali trebalo bi da se snalazite u sledećem:

Osnove PHP-a: Elementor je WordPress plugin, a WordPress je napisan u PHP-u. Morate razumeti funkcije, klase, hook-ove (akcije i filtere) i kako WordPress učitava plugine.
Osnove JavaScript-a (posebno jQuery): Za interaktivne widgete koji reaguju na korisničke akcije (klik, prevlačenje, unos), biće vam potrebno bar osnovno poznavanje JS-a.
HTML i CSS: Ovo je suština svakog widgeta – šta se prikazuje i kako izgleda. Elementor vam pruža alate za stilizovanje, ali osnove morate znati.
Razvojno okruženje: Nikada ne razvijajte na live sajtu! Koristite lokalno okruženje (kao Local by Flywheel, XAMPP) ili staging okruženje na vašem hosting provajderu. Takođe, obavezno uključite WP_DEBUG u vašem wp-config.php fajlu kako biste videli greške.

Ako želite da proširite svoje znanje o osnovama WordPress-a pre ovog koraka, pogledajte naš kompletan vodič za pravljenje sajta u WordPressu.

Struktura WordPress Plugina: Osnova vašeg Addon-a

Svaki Elementor addon je, u suštini, WordPress plugin. Počinjete tako što kreiramo novi folder u wp-content/plugins/. Nazovimo ga moj-elementor-addon. Unutar tog foldera, obavezno kreiramo glavni PHP fajl sa istim imenom: moj-elementor-addon.php.

Sadržaj ovog fajla je vaša "lična karta" za WordPress. Na početku fajla mora stajati komentar u specifičnom formatu:

<?php
/**
 * Plugin Name: Moj Elementor Addon
 * Description: Dodaje custom widget-e za Elementor page builder.
 * Version: 1.0.0
 * Author: Vaše Ime
 * Text Domain: moj-elementor-addon
 */

Ovo je minimum. Zatim, u istom fajlu, registrujemo naš plugin da se "zakači" na Elementor. Koristimo plugins_loaded akciju kako bismo bili sigurni da je Elementor učitan pre nego što pokušamo da ga proširimo.

add_action( 'plugins_loaded', 'registruj_moj_addon' );

function registruj_moj_addon() {
    // Proveravamo da li je Elementor instaliran i aktivan
    if ( ! did_action( 'elementor/loaded' ) ) {
        add_action( 'admin_notices', function() {
            echo '<div class="notice notice-warning"><p>';
            echo 'Moj Elementor Addon zahteva <strong>Elementor</strong> plugin da bi radio.';
            echo '</p></div>';
        } );
        return;
    }

    // Uključujemo glavnu klasu našeg addon-a
    require_once( __DIR__ . '/includes/class-moj-addon.php' );
    Moj_AddonPlugin::instance();
}

Hajde da kreiramo jednostavan, ali potpun widget koji prikazuje naslov i opis. Ovo će nam pokazati osnovnu anatomiju widgeta.

Kreirajte strukturu foldera: Unutar vašeg moj-elementor-addon foldera, napravite folder includes, a unutar njega fajl class-moj-addon.php (koji smo već pomenuli) i folder widgets.
Definišite glavnu klasu addon-a (class-moj-addon.php): Ova klasa će biti jezgro, zadužena za registraciju widgeta i kategorije.

<?php
namespace Moj_Addon;

class Plugin {
    private static $_instance = null;

    public static function instance() {
        if ( is_null( self::$_instance ) ) {
            self::$_instance = new self();
        }
        return self::$_instance;
    }

    public function __construct() {
        add_action( 'elementor/widgets/register', [ $this, 'registruj_widgetove' ] );
        add_action( 'elementor/elements/categories_registered', [ $this, 'dodaj_kategoriju' ] );
    }

    public function dodaj_kategoriju( $elements_manager ) {
        $elements_manager->add_category(
            'moja-kategorija',
            [
                'title' => 'Moj Addon',
                'icon' => 'fa fa-plug',
            ]
        );
    }

    public function registruj_widgetove( $widgets_manager ) {
        require_once( __DIR__ . '/widgets/pozdravni-widget.php' );
        $widgets_manager->register( new Moj_AddonWidgetsPozdravni_Widget() );
    }
}

Kreirajte sam widget (widgets/pozdravni-widget.php): Ovo je srž. Svaki widget nasleđuje Elementor's Widget_Base klasu.

<?php
namespace Moj_AddonWidgets;

use ElementorWidget_Base;
use ElementorControls_Manager;

class Pozdravni_Widget extends Widget_Base {

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

    public function get_title() {
        return __( 'Pozdravni Widget', 'moj-elementor-addon' );
    }

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

    public function get_categories() {
        return [ 'moja-kategorija' ];
    }

    protected function register_controls() {
        // SEKCIJA ZA SADRŽAJ
        $this->start_controls_section(
            'sadrzaj_sekcija',
            [
                'label' => __( 'Sadržaj', 'moj-elementor-addon' ),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'naslov',
            [
                'label' => __( 'Naslov', 'moj-elementor-addon' ),
                'type' => Controls_Manager::TEXT,
                'default' => __( 'Zdravo, svete!', 'moj-elementor-addon' ),
                'placeholder' => __( 'Unesite naslov ovde', 'moj-elementor-addon' ),
            ]
        );

        $this->add_control(
            'opis',
            [
                'label' => __( 'Opis', 'moj-elementor-addon' ),
                'type' => Controls_Manager::TEXTAREA,
                'default' => __( 'Ovo je moj prvi custom widget za Elementor. Lako se konfiguriše i koristi!', 'moj-elementor-addon' ),
                'placeholder' => __( 'Unesite opis ovde', 'moj-elementor-addon' ),
            ]
        );

        $this->end_controls_section();

        // SEKCIJA ZA STIL (dodajemo kasnije)
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="moj-pozdravni-widget">
            <h2><?php echo esc_html( $settings['naslov'] ); ?></h2>
            <p><?php echo wp_kses_post( $settings['opis'] ); ?></p>
        </div>
        <?php
    }

    // Metoda protected function content_template() za live preview u editoru (opcionalno, ali preporučljivo)
}

Šta smo uradili ovde?

get_* metode: Definišu osnovne informacije o widgetu (ime, naslov u panelu, ikonica, kategorija).
register_controls(): Ovo je gde kreiramo kontrole (pola za unos) u Elementor panelu. Koristimo Controls_Manager da dodamo polja za tekst i tekstarea.
render(): Ova metoda je odgovorna za prikaz widgeta na frontendu. Uzimamo vrednosti iz $settings i ubacujemo ih u HTML.

Sada možete da odete u WordPress admin -> Plugins, aktivirate "Moj Elementor Addon", otvorite neku stranicu sa Elementor-om i u paleti widgeta naći "Pozdravni Widget" u kategoriji "Moj Addon". Povucite ga i testirajte!

Dodavanje kontrola za stil i napredne opcije

Da bi widget bio koristan, mora da se može stilizovati. Elementor to čini izuzetno jednostavnim kroz Controls_Manager. Hajde da proširimo register_controls() metodu.

protected function register_controls() {
    // ... prethodna sekcija za sadržaj ...

    // SEKCIJA ZA STIL NASLOVA
    $this->start_controls_section(
        'stil_naslova_sekcija',
        [
            'label' => __( 'Stil naslova', 'moj-elementor-addon' ),
            'tab' => Controls_Manager::TAB_STYLE,
        ]
    );

    $this->add_control(
        'boja_naslova',
        [
            'label' => __( 'Boja teksta', 'moj-elementor-addon' ),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .moj-pozdravni-widget h2' => 'color: {{VALUE}}',
            ],
        ]
    );

    $this->add_group_control(
        ElementorGroup_Control_Typography::get_type(),
        [
            'name' => 'tipografija_naslova',
            'selector' => '{{WRAPPER}} .moj-pozdravni-widget h2',
        ]
    );

    $this->end_controls_section();

    // SEKCIJA ZA STIL OPISA (slično kao za naslov)
}

Ključni koncept ovde je {{WRAPPER}}. Ovo je dinamički CSS selektor koji Elementor generiše za svaku instancu vašeg widgeta, sprečavajući da se stilovi jedne instance mešaju sa drugima. Kada korisnik menja boju u panelu, Elementor automatski generiše inline CSS koji se primenjuje na {{WRAPPER}} .moj-pozdravni-widget h2.

Za naprednije widgete, možete dodati kontrolu za selekt (Controls_Manager::SELECT), prekidač (Controls_Manager::SWITCHER), odabir slike (Controls_Manager::MEDIA) ili čiste repeater kontrolu (Controls_Manager::REPEATER) za kreiranje listi (npr. lista usluga, tim ljudi). Za dubinsko razumevanje kako da optimizujete takve widgete za pretragu, proučite naš SEO cheatsheet za Elementor i Yoast SEO.

JavaScript i interaktivni widgeti

Šta ako želite widget koji reaguje na klik ili ima neku animaciju? Tada vam je potreban JavaScript. Elementor koristi Backbone.js za svoj live preview u editoru.

Da biste dodali JS za vaš widget, treba da koristite Elementor-ov sistem za enqueue skriptova. U vašoj glavnoj klasi (class-moj-addon.php), dodajte hook:

add_action( 'elementor/frontend/after_register_scripts', [ $this, 'registruj_skriptove' ] );

public function registruj_skriptove() {
    wp_register_script(
        'moj-addon-skript',
        plugins_url( '/assets/js/moj-addon.js', __FILE__ ),
        [ 'jquery', 'elementor-frontend' ], // Zavisnosti
        '1.0.0',
        true // Učitaj u footer
    );
}

Zatim, u klasi vašeg widgeta, dodajte metodu koja kaže da widget koristi tu skriptu:

public function get_script_depends() {
    return [ 'moj-addon-skript' ];
}

U samom JS fajlu (assets/js/moj-addon.js), obično "omotate" kod u:

„`javascript
( function( $ ) {
"use strict";

var MojWidgetHandler = elementorModules.frontend.handlers.Base.extend({
    onInit: function() {
        // Kod koji se izvršava kada se widget inicijalizuje na frontendu

Aleksandar Đekić

Autor teksta – Aleksandar Đekić

Aleksandar Đekić je osnivač i vlasnik sajta websajtizrada.rs, specijalizovanog za izradu profesionalnih WordPress sajtova i online prodavnica za mala i srednja preduzeća. U svetu web dizajna aktivan je više od sedam godina, tokom kojih je realizovao preko 350 sajtova za klijente iz Srbije, regiona i inostranstva.

Karijeru je započeo kao web dizajner, a vremenom se usmerio na kompletnu izradu WordPress projekata — od strategije i planiranja, preko dizajna, do tehničke optimizacije i SEO implementacije. Njegov pristup se zasniva na razumevanju poslovnih ciljeva klijenata, jednostavnoj komunikaciji i stvaranju funkcionalnih rešenja koja donose rezultate, a ne samo lep izgled.

Kao vlasnik sajta websajtizrada.rs, Aleksandar je razvio prepoznatljiv stil rada koji klijentima omogućava brzu i jasnu izradu, optimizovan kod, brze stranice, sigurnost i SEO strukturu koja se lako rangira na Google-u. Poznat je po tome što svaki projekat obrađuje detaljno i sistematično, bez šablona i generičkih pristupa.

Pored klijentskog rada, Aleksandar je i osnivač Live Škole WordPress-a, jedne od najpopularnijih edukacija za početnike i preduzetnike koji žele da nauče da samostalno prave profesionalne WordPress sajtove. Njegova predavanja i tekstovi kombinacija su praktičnog iskustva, jasnih koraka i saveta koji polaznicima pomažu da izbegnu najčešće greške.

Kroz blogove, tutorijale i edukativni sadržaj, Aleksandar redovno deli znanje o WordPress-u, SEO optimizaciji, izradi online prodavnica i digitalnom marketingu. Njegova misija je da moderni web postane dostupniji običnim ljudima i malim biznisima, bez komplikacija i tehničkog žargona.

Danas vodi više digitalnih projekata, sarađuje sa kompanijama iz različitih industrija i razvija sopstvene alate, procese i šablone koji ubrzavaju izradu sajtova. Klijenti ga najčešće opisuju kao stručnog, posvećenog i preciznog partnera na koga uvek mogu da računaju.