Satın Al

FonPageBuilder Özel Bileşen Geliştirme Son Güncelleme: 29-06-2026

Kendi Bileşeninizi Geliştirin

FonPageBuilder artık yalnızca yerleşik bileşenlerle sınırlı değil. Açık bir geliştirici API'si sayesinde kendi özel bileşenlerinizi (custom widget) doğrudan FonPageBuilder ekosistemine entegre edebilir; admin panelindeki bileşen seçicisinde görünür hale getirebilir ve temanızın ön yüzünde tam kontrol ile render edebilirsiniz. Tüm süreç, şifreli (encoded) çekirdek koda dokunmaksızın yalnızca birkaç açık dosya üzerinden yönetilir.

Plug-and-Play Entegrasyon

Doğru dizine yerleştirilen bileşen, sistem tarafından otomatik olarak keşfedilir ve panele eklenir; hiçbir kayıt adımı gerekmez.

30+ Alan Tipi Desteği

Metin, renk, gradient, tipografi, medya, tekrar eden listeler ve daha fazlası — FonPageBuilder'ın tüm form motoru kullanımınıza açık.

Çok Dilli Hazır Altyapı

Metin ve medya alanları için yerleşik çok dil desteği; sitenizin aktif dil sayısı kadar otomatik giriş alanı üretilir.

Akıllı Varlık Yönetimi

Harici CSS/JS kütüphaneleri yalnızca bileşenin sayfada kullanıldığı durumlarda yüklenir; gereksiz kod yüküne son.

Responsive Alan Desteği

Seçili alan tipleri, xl/lg/md/sm/xs kırılım noktaları için ayrı değer girişine olanak tanır.

Güvenlik Katmanı

Otomatik keşif sırasında statik güvenlik analizi uygulanır; tehlikeli fonksiyon çağrıları içeren bileşenler yüklenmez.

Hazır mısınız?

Örnek bileşenler, tam API referansı ve adım adım geliştirme rehberi için resmi GitHub repository'sine göz atın. Sayfa sonunda doğrudan erişim bağlantısı yer almaktadır.

Nasıl Çalışır?

Bir özel bileşen iki ayrı bölümden oluşur: admin tarafı (bileşen konfigürasyon dosyaları) ve frontend tarafı (renderer). Her iki bölüm de birbirinden bağımsız dizinlerde yönetilir.

1
Dizin ve manifest oluşturun

builder/custom-widgets/{widget_type}/ altında bileşeninizin adını taşıyan bir klasör açın. Bu klasöre manifest.json dosyasını ekleyin: bileşenin tipi, görünen adı, grubu ve ikonu burada tanımlanır. Sistem bu dosyayı otomatik olarak algılar; panele kayıt gerektirmez.

2
Konfigürasyonu tanımlayın

config.php dosyasında FonCustomWidget_{type} sınıfını oluşturun. getConfig() metodundan sekme/alan tanımlarını döndürün. 30'dan fazla alan tipi ve koşullu görünürlük (depend) desteği bu aşamada devreye girer.

3
Dil dosyasını ekleyin

lang/en.php (zorunlu) ve isteğe bağlı lang/tr.php dosyalarında alan etiketleri ile açıklamaları tanımlayın. Dil dosyaları yalnızca string → string çiftlerini kabul eder.

Hangi Anahtarlar Zorunlu?

widget_name ve widget_description dışındaki tüm anahtarlar isteğe bağlıdır. Bu iki anahtar, sisteme bileşenin görünen adını ve kısa açıklamasını bildirmek için CustomWidgetRegistry tarafından kullanılır. Diğer alan etiketleri ise config.php içinde $language['anahtar'] ?? 'Varsayılan Metin' yapısıyla okunur; dil dosyasında tanımlı olmayan her anahtar için ?? operatörünün sağ tarafındaki sabit metin devreye girer. Dolayısıyla alan etiketlerini doğrudan config.php içinde kendi dilinizde yazmayı tercih ediyorsanız dil dosyasını yalnızca widget_name ve widget_description tanımlarıyla sınırlı tutabilirsiniz.

4
Frontend renderer'ı yazın

templates/website/{tema_adi}/builder/custom-widgets/{type}/renderer.php dosyasında FonCustomWidgetRenderer_{type} sınıfını oluşturun. Statik render() metodu HTML çıktısını döndürür. $theme nesnesi üzerinden varlık kaydı, inline CSS/JS ve çok dilli metin çözümleme fonksiyonlarına erişebilirsiniz.

Dosya İsimlendirme Kuralı

{widget_type} değeri yalnızca küçük harf, rakam ve alt çizgi içerebilir (3–40 karakter, küçük harfle başlamalı). Sınıf isimleri bu değere göre otomatik türetilir: FonCustomWidget_{type} ve FonCustomWidgetRenderer_{type}.

Dizin Yapısı

Özel bileşenler iki farklı dizinde yönetilir. Admin yapılandırma dosyaları FonPageBuilder modülünde, frontend render dosyaları ise temanızda tutulur.

Admin — Konfigürasyon Dizini
coremio/modules/Addons/FonPageBuilder/builder/
├── custom-widgets/
│   ├── my_pricing_table/          ← bileşen tipiyle aynı ad
│   │   ├── manifest.json          ← zorunlu: meta veri (tip, ad, grup, ikon)
│   │   ├── config.php             ← zorunlu: FonCustomWidget_{type} sınıfı
│   │   └── lang/
│   │       ├── en.php             ← zorunlu: İngilizce etiketler
│   │       └── tr.php             ← opsiyonel: Türkçe etiketler
│   └── another_widget/
│       └── ...
├── CustomWidgetRegistry.php       ← otomatik keşif katmanı (değiştirmeyin)
└── PageData.php                   ← yerleşik widget listesi (değiştirmeyin)
Frontend — Renderer Dizini
templates/website/{tema_adi}/builder/
└── custom-widgets/
    └── my_pricing_table/
        └── renderer.php           ← zorunlu: FonCustomWidgetRenderer_{type} sınıfı

Fallback Davranışı

Tema tarafındaki theme.php, render isteği aldığında önce yerleşik metodu ({type}_widget) arar. Bulamazsa otomatik olarak custom-widgets/{type}/renderer.php dosyasını yükler. Renderer bulunamazsa güvenli biçimde boş string döner — site hiçbir zaman hata vermez.

Desteklenen Alan Tipleri

FonPageBuilder'ın form motoru, özel bileşenlerinizde kullanabileceğiniz 30'dan fazla alan tipini destekler. Tüm tipler config.php içindeki getConfig() metodundan doğrudan erişilebilir durumdadır.

Kategori Alan Tipleri
Metin text textLanguage textarea textareaLanguage textareaEditor textareaEditorLanguage hidden
Sayısal number slider datetime
Seçim select bool headings
Renk & Efekt color gradient border shadow
Medya image imageLanguage video videoLanguage icon
Tipografi & Stil typography style_preview
İçerik Kaynağı category sources package
Dinamik Liste repeatable child_repeatable child
UI Yardımcılar seperator info

Tüm alan tiplerinin parametre tabloları, zorunlu/opsiyonel anahtarlar ve örnek kullanım kodları için GitHub repository'sindeki README dosyasına başvurun.

Akıllı Varlık Yönetimi

Özel bileşeniniz Swiper, lightgallery, Select2 gibi harici bir kütüphane gerektiriyorsa bu dosyaların sitenizin her sayfasında yüklenmesine gerek yoktur. FonPageBuilder'ın varlık yönetim sistemi, kayıtlı kütüphaneleri yalnızca bileşenin fiilen kullanıldığı sayfalara ekler.

Çalışma prensibi üç adıma dayanır:

  1. Renderer'da bildirin: $theme->registerWidgetAsset(['lightgallery']) çağrısıyla kütüphane anahtarını sisteme tanıtın.
  2. Dosyaları yükleyin: Kütüphanenin .css ve .js dosyalarını temanızın css/ ve js/ dizinlerine koyun.
  3. Asset dosyalarını bağlayın: builder/custom_assets/css_assets.php ve js_assets.php dosyalarında $hoptions dizisini kontrol ederek ilgili <link> ve <script> etiketlerini koşullu olarak ekleyin.

Genel Yükleme Alternatifi

Kütüphanenin tüm sayfalarda aktif olmasını isterseniz kodu doğrudan templates/website/{tema_adi}/css/custom.css ve js/custom.js dosyalarına ekleyebilirsiniz. Ancak performans odaklı geliştirme için sayfa bazlı yükleme (registerWidgetAsset) her zaman önerilen yaklaşımdır.

Güvenlik Kuralları

Özel bileşen dosyaları, sisteme yüklenirken CustomWidgetRegistry tarafından statik güvenlik analizine tabi tutulur. Aşağıdaki işlemleri içeren bileşenler otomatik olarak reddedilir ve panelde görünmez:

// ❌ Yasak — Kod yürütme
eval();  system();  exec();  shell_exec();  passthru();  assert();

// ❌ Yasak — Dosya yazma / silme
file_put_contents();  unlink();  rename();

// ❌ Yasak — Ağ erişimi
curl_exec();  fsockopen();

// ❌ Yasak — Süper global erişimi
$_POST  $_GET  $_SERVER  $_COOKIE

İzin verilen kullanımlar arasında PageData yardımcı metodları (PageData::defaultTypography(), PageData::button_types() vb.) ile standart PHP dizi ve dizgi fonksiyonları yer alır.

GitHub Repository

Özel bileşen geliştirmeye başlamak için ihtiyacınız olan her şey — tam API referansı, çalışan örnek bileşenler ve adım adım kurulum rehberi — resmi GitHub repository'sinde Türkçe ve İngilizce olarak yayınlanmaktadır.

fonpagebuilder-custom-widgets

Örnek bileşenler (example_card, notice_box), tüm alan tiplerinin kod örnekleri ve renderer mimarisi için repository'ye gidin.

Repository'ye Git
TR README Türkçe EN README English

Hazır Örnek Bileşenler

Repository, doğrudan şablon olarak kullanabileceğiniz iki örnek bileşen içerir:
1- example_card
Şu alan tiplerini gösterir: text, select, icon, bool, color, number, slider, responsive, child.
2- notice_box
Şu alan tiplerini gösterir: repeatable, child_repeatable, depend ve çok dilli input alanları.

Üretim ortamına geçmeden önce bu örnek widget (bileşen) dizinlerini silebilirsiniz.