Wix Yardım Merkezi
    Ana Sayfa
  1. Sitenizi Oluşturma
  2. Editor X
  3. Editor X Sitesine Öge Ekleme
    4. Editor X: Sitenize Özel Öge Ekleme

Editor X: Sitenize Özel Öge Ekleme

4 dakikalık okuma
Editor X platformu, ajanslara ve serbest çalışanlara yönelik yeni platformumuz Wix Studio'ya geçiş yapıyor.Wix Studio hakkında daha fazla bilgi edinin (Yalnızca İngilizce)
Özel Ögeleri kullanarak kendi tasarım özellikleriniz ve CSS yeteneklerinizle sitenizi geliştirin. Bir özel ögeyi bir sunucu URL'sine veya bir Velo dosyasına bağlayarak herhangi bir Javascript bileşenini ekleyebilirsiniz. Gerekirse, doğrudan Editor X'ten daha fazla özellik ayarlayabilirsiniz. 

Bu makalede bilgi edinebileceğiniz konular:

Başlamadan önce:
Sitenizin bir Premium Paketi olduğundan ve Editor X reklamı içermeyecek şekilde bir domaine bağlı olduğundan emin olun. Daha Fazla Bilgi

Özel Ögeler Nedir?

Özel ögeler, Editor X sitenizde kendi HTML etiketlerinizi kullanabilmenizi sağlar. Desteklenen tüm tarayıcılarda çalışan bu özel ögeler ayrıca HTML 5 uyumlu JavaScript ES6 kitaplıklarıyla veya çerçeveleriyle birlikte kullanılabilirler.
İpuçları:
  • Üçüncü taraf kaynaklardan özel ögeleri de kullanabilirsiniz, ama özel ögeyi sayfanıza eklerken Özellikler'den Etiket Adı'nı güncellediğinizden emin olun.
  • Özel ögenizin performansı, nasıl uygulandığına bağlıdır.

Özel Öge Ekleme ve Ayarlama

Sitenize ihtiyaç duyduğunuz kadar özel öge ekleyin. Özel ögeyi sayfanıza sürükledikten sonra, kaynağını (bir sunucu URL'si veya bir Velo dosyası) tanımlayın ve sayfa kayıt defterinde görünmesi için bir etiket adı verin.
Özel ögenizin tüm kesme noktalarında harika göründüğünden emin olmak için Denetçi paneli  kullanın, boyutlandırmasını, yerleştirmesini, hizalamasını ve daha fazlasını ayarlayabilirsiniz. 
Not:
Varsayılan olarak, özel ögeler sayfanızın customElements kayıt defterinde görünür. Özel ögeniz için girdiğiniz etiket adı, adını bu kayıt defterinde tanımlar. 

Özel Ögenin Özniteliklerini Belirleme

HTML özniteliklerini ayarlayarak ögenizin özelliklerinde ve davranışında daha fazla ayarlama yapın. Öge Öznitelikleri paneli, Editor X üzerinden doğrudan öznitelik ekleme, düzenleme ve kaldırma işlemleri yapabilmenizi sağlar, böylece asıl koda erişmenize gerek kalmaz.
Önemli:
Özel ögenizin kodu, tanımlanan öznitelikleri onaylamalı ve işlemelidir. Aksi takdirde düzgün çalışmaz.

Özel Öge Örneği

Aşağıda sitenize nasıl temel bir özel öge ekleyebileceğiniz gösterilmiştir. Talimatlar sitenize nasıl "Hello World" metnini ekleyeceğinizi açıklar.
Önce bir ögeyi oluşturup ögeyi ve davranışını bir JavaScript dosyasında kodlamanız gerekiyor. 
Ardından, özel öge sınıfını tanımlayın.
Biz bu örnekte sınıfı HelloWorld olarak tanımladık ve özel ögeyi kaydederken aynı adı kullanacağız. Aşağıdaki connectedCallback() işlevi, öge DOM'a eklentilendiğinde otomatik tetiklenen bir yaşam döngüsü geri çağırma işlevidir.
1class HelloWorld extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello World!'; } } customElements.define('hello-world', HelloWorld);
Özel öge sınıfını tanımladıktan sonra customElements.define(name, class) yöntemiyle özel öge sınıfını kaydediyoruz. 
Özel ögeyi sitenize eklerken kayıtlı adı Etiket Adı olarak girin. Özel öge kaydedildikten sonra sitenizde kullanılabilir.
1CustomElementRegistry.define('hello-world', HelloWorld);
Daha detaylı bilgilere mi ihtiyacınız var?
Bu ögeyi Velo by Wix ile nasıl kullanacağınızı öğrenmek için buraya tıklayın

Bu içerik yardımcı oldu mu?

|

Bu makalede

  • Özel Ögeler Nedir?
  • Özel Öge Ekleme ve Ayarlama
  • Özel Ögenin Özniteliklerini Belirleme
  • Özel Öge Örneği