Wix Yardım Merkezi
    Ana Sayfa
  1. Sitenizi Oluşturma
  2. Wix Editor
  3. Daha Fazla
    4. Wix Editör: Sitenize Özel Öge Ekleme

Wix Editör: Sitenize Özel Öge Ekleme

4 dakikalık okuma
Özel ögeleri kullanarak sitenize görünür içerikler ekleyin ve ek CSS özelliklerine sahip ögeler tasarlayın. 
Bu makaleden öğrenebilecekleriniz:
Önemli:
Wix tarafından oluşturulmamış veya test edilmemiş harici kodlar için destek hizmeti sağlayamayız. Kod snippet'inizle ilgili bir sorun yaşıyorsanız lütfen doğrudan sağlayıcıyla iletişime geçin.

Özel ögeler nedir?

Özel ögeler, Wix sitenizde kullanabileceğiniz özel HTML etiketleri oluşturmanıza olanak sağlar. Özel ögeler Wix destekli tüm tarayıcılarda çalışır ve tüm JavaScript ES6 kütüphaneleri ile veya HTML 5 ile çalışan tüm çerçevelerle kullanılabilir.
Şunları yapmak için özel öge kullanmak isteyebilirsiniz:
  • Wix Editör'ün Ekleme panelinde veya uygulamalarda henüz kullanılabilir durumda olmayan kendi ögelerinizi tasarlamak için.
  • CSS animasyonu, geri sayım animasyonu, içerik haritaları, araç ipuçları, etiketler, grafikler, tırnak işaretleri imleç değişiklikleri ve kaydırma etkilişimleri gibi ek CSS özelliklerine sahip ögeler tasarlamak için.
  • Örneğin sayfada düzenlerin çarpışmasını önlemek için yayınlanmış sitenizdeki ögenizin yüksekliğini değiştirmek için.
  • Performansı geliştirmek için (iframe-tabanlı bileşenlerle karşılaştırıldığında). Bu büyük oranda özel ögenin uygulanışına göre değişiklik gösterir.
Not:
Üçüncü taraf kaynaklardan özel ögeleri de kullanabilirsiniz, ama özel ögeyi sayfanıza eklerken Özellikler'den Etiket Adı'nı güncellediğinizden emin olun.

Özel öge ekleme

  1. Editör'ün sol tarafındaki Öge Ekle simgesine tıklayın.
  2. Kodu Göm'e tıklayın.
  3. Sayfanıza eklemek için Özel Öge'ye tıklayın.
  4. Kaynak Seç'e tıklayın.
  5. Sunucu URL'si seçeneğine URL'yi ve dosya adını girin.
    Not: Velo kullanıyorsanız, Velo Dosyası'na tıklayabilirsiniz.
  6. Etiket Adı'nı girin.
Wix Editör'deki 'Öge Ekle' panelindeki gömme sekmesi. İmleç, özel öge seçeneğinin üzerinde geziniyor.
Not:
Tüm ögelerin, sayfa için özel ögeler kayıt defterinde tanımlanması gerekir. Etiket adı, ögeyi kaydederken kullanılan addır. Etiket adını JavaScript dosyasındaki customElements.define() satırında bulabilirsiniz.

Özel ögenin özniteliklerini belirleme

Önemli:
Öznitelikler henüz tüm kullanıcılara açık değildir.
Özel ögenin DOM node'undaki HTML özniteliklerini tanımlayın. Özel ögenin kodunda tanımlı bu öznitelikleri onaylamak ve işlemek için kod eklediğinizden emin olun. 
  1. Özel ögeden Öznitelikleri Belirle'ye tıklayın.
  2. Yeni Öznitelik'e tıklayın.
  3. Özniteliği adlandırın, örneğin "dönüş" veya "genişlik". 
  4. Öznitelik için değer atayın, örn. 45.
Not:
Özel bir ögenin HTML özniteliklerini de düzenleyebilir ve kaldırabilirsiniz.

Kurallar ve sınırlamalar

  • Güvenlik nedenlerinden ötürü özel ögeleri kullanmak için sitenizi Premium Paket'e yükseltmeli, sitenize bir domain bağlamalı ve sitenizde reklam bulundurmamalısınız.
  • Kodunuzun HTTP değil HTTPS biçiminde olduğuna dikkat edin, aksi takdirde canlı sitenizde görüntülenmez.
  • JavaScript kodu sayfanın temel ögelerini içerir, ancak tasarım ayarları ve diğer karmaşık işlevler ayrı olarak depolanabilir. Bu nedenle CSS ve diğer JS dosyaları gibi bazı ögeler, JS koduna dahil edilmedikleri takdirde olmaları gerektiği gibi görünmeyebilir veya çalışmayabilirler.
  • Her zaman kodun güncel ve HTML5 uyumlu olduğundan emin olun. Çoğu tarayıcı JS veya HTML'in eski sürümleri kullanılarak yazılan sayfaları ve komut dosyalarını düzgün şekilde göstermez. 
  • Velo API kullanıldığında SEO ayrı olarak tanımlanabilir. 
  • Performans, özel ögenin uygulanışına göre değişik gösterebilir.
  • Velo kullanmıyorsanız özel öge kodu sizin tarafınızdan barındırılmalıdır.
Önemli:
Güvenlik nedenleriyle özel ögeler önizleme modunda ve Editör'ün içindeki bir iFrame'in içinde oluşturulur. Bu durum bileşenin düzenini olumsuz etkileyebilir. Yayınlanmış sitenize gidin ve ögenin canlı sitenizde nasıl göründüğünüze göz atın. Ayrıca test sitelerini canlı site önizlemesi olarak kullanabilirsiniz. 

Ö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ştup ögeyi ve davranışını bir JavaScript dosyasında kodlamanız gerekiyor. 
Not:

Özel ögenizi oluşturma ve ekleme:

  1. Özel ögeniz için bir sunucu kurun veya bir sunucuya erişin. Kendi sunucunuzda harici olarak hosting yapıyorsanız Wix Editör'de özel öge eklerken özel ögeyi sunucu URL'sine bağlamanız gerekecektir.
  2. Standart ECMAScript 2015 sınıf sözdizimini kullanan bir JavaScript dosyasında özel bir öge oluşturmak için herhangi bir IDE'yi kullanın. Tam talimatlar ve örnekler için MDN belgelerine bakın.
  1. Özel öge sınıfını tanımlayın:
    • HelloWorld sınıfı, özel ögenin sınıfıdır ve bu sınıfı özel ögeyi kaydederken göreceğiz.
    • connectedCallback(), öge DOM'a bağlandığında otomatik olarak 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);

  1. customElements.define(name, class) yöntemiyle özel öge sınıfını kaydedin. Özel ögeyi Editör'de siteye eklerken kayıtlı adı etiket adı olarak girin. Özel öge kaydedildikten sonra sitenizde kullanılabilir.

    • İlk parametre, hello-world, Editör'de tanımlanacak (8. adım) etiket adıyla eşlenir.
    • İkinci parametre, HelloWorld özel ögenin sınıf adıdır.
1CustomElementRegistry.define('hello-world', HelloWorld);
  1. Editörünüzdeki özel ögeyi ekleyin (yukarıya bakın).
  2. Ayarlar'a tıklayın.
  3. Sunucu URL'si'ni seçin ve özel ögenizin komut dosyasının sunucu URL'sini girin.
  4. Etiket adını girin. Etiket adı, önceki adımda define() işlevini kullanarak kaydettiğimiz öge adıdır. Bu örnekte etiket adı hello-world'dür.
  5. Sitenizi kaydedin ve yayınlayın.
Daha detaylı bilgilere mi ihtiyacınız var?
İpuçları:
  • Özel ögenizi tüm sayfalarda görüntüleme. 
  • Ekrana Sabitle ile kaydırma sırasında bile özel ögenizi görüntüleyin. Alternatif olarak, özel öge kodunda CSS sabit konumlandırılmış ögeyi kullanın.

Bu içerik yardımcı oldu mu?

|
Bu makalede
  • Özel ögeler nedir?
  • Özel öge ekleme
  • Özel ögenin özniteliklerini belirleme
  • Kurallar ve sınırlamalar
  • Özel öge örneği