Elementor'a Özel İmleç Ekleme

Bu eğitimde, bir Elementor web sitesine özel bir imleç izleyici ekleyeceğiz (ancak bu, herhangi bir WordPress kurulumunda çalışmak üzere kolayca uyarlanabilir).

Özel imleç izleyicileri birkaç yüksek kaliteli, iyi tasarlanmış sitede bulunabilir ve bu benzersiz işlevi kendi eserinize nasıl ekleyeceğinizi size göstermek istedik.

Elementor'a özel bir imleç izleyici eklemek ücretsiz, basittir ve kendinizi ve sitenizi paketten ayırma konusunda uzun bir yol kat eder.

Özel İmleç İzleyici Nedir?

Bu efekt, "özel fare işaretçisi", "imleç izleyici" ve daha fazlası gibi birçok adla gider. Esasen, varsayılan işaretçinizi nokta ve daire gibi bir grafik öğesiyle değiştirir.

Varsayılan işaretçiyi değiştirerek benzersiz vurgulu efektleri ekleyebilirsiniz. Bu eğitimde, belirlenen düğmelerin üzerine gelindiğinde, işaretçimiz onların sınırlarına yapışacaktır.

WordPress'e Özel İmleç Nasıl Eklenir?

Bir WordPress web sitesine özel bir imleç izleyici eklemenin birkaç yolu vardır. Genel WordPress kurulumuna uygulanan bazı eklentiler, diğer öğe veya eklenti paketleri ise İmleç izleme yardımcı programlarını içerir. Tüm bu çözümler arasındaki ortak nokta, ücretli olmalarıdır.

WordPress için önde gelen çözüm “WP Özel İmleçler | WordPress İmleç Eklentisi”, Elementor tabanlı bir WordPress kurulumu için önde gelen çözüm, Dinamik Eklentilerle birlikte gelen imleç izleyici yardımcı programıdır.

• 
  

• 
  

Dinamik Eklentiler, herhangi bir Elementor web sitesine harika bir ektir, ancak aynı zamanda, birçok içerik oluşturucunun bütçesini aştığı için yılda 49,00 ABD dolarına mal olur.

Her ikisini de kullandık, ancak bir WordPress web sitesine ekledikleri fiyat ve ekstra kod bazen bu çözümleri biraz istenmeyen hale getiriyor. Sonuçta eklemek istediğimiz tek şey basit bir işaretçi değişimi.

Bu öğreticide, bir Elementor web sitesine imleç izleme eklemenin ücretsiz bir yolunu bulurken, her şeyi mümkün olduğunca basit ve entegrasyonu kolay tutmak istedik.

Bu imleç izleme çözümlerinin tümü, kullanıcılara web sitelerine özel imleç izleme efektleri eklemenin kolay bir yolunu sunan zarif bir JavaScript ve CSS koleksiyonunu tamamlar.

Çözümümüz için, bir WordPress web sitesine özel imleç efektleri ekleyen hafif, önceden var olan bir JavaScript kitaplığı bulmak istedik. Şaşırtıcı bir şekilde, bu etkiyi herhangi bir web sitesine entegre etmenin baskın yolu, manuel CSS ve JavaScript koleksiyonundan geçtiğinden, orada çok fazla teklif yok.

Bu eğitici, sitenize efekt ekleme yolunda size yol gösterir:

Ana sorun, birkaç 100 satır JavaScript ve CSS bulunmasıdır ve bu dillere aşina değilseniz, bu eğitim sizin beceri setinizin biraz dışındadır.

Bizim için, entegrasyonu kolay bir kitaplık arıyorduk – birkaç satır kodla Elementor'a eklenebilecek ve bunu eklemenin hızlı ve kolay bir yolunu arayanlar için bir eğitim yazabileceğimiz bir kitaplık. Efekt.

MagicMouse.JS: Özel İmleç İzleyici Kitaplığı

Aramamız, MagicMouse.js adlı bir Kitaplığın GitHub deposunu bulmamıza neden oldu – mükemmel çözüm.

GitHub sayfasında, web sitenizde fare (imleç) için bazı şaşırtıcı efektler oluşturmak için kendisini "hafif bir javascript kitaplığı" olarak faturalandırıyor – MagicMouse.js: https://magicmousejs.web.app".

Önceden var olan bir JavaScript kitaplığı olduğundan, onu bir WordPress web sitesine entegre etmek ve herhangi bir Elementor sayfasında başlatmak oldukça kolay olmalıdır.

Ayrıca, yalnızca birkaç kilobaytlık dosya boyutuyla inanılmaz derecede hafiftir. Son olarak, kod nispeten yeni, beş ay önce yayınlandı, yani muhtemelen çoğu modern tarayıcıyla uyumlu. Açık kaynak olduğundan, bu herhangi bir uygulamada, ticari veya başka bir şekilde kullanılabilir.

Diğer bir avantajı da, herhangi bir karmaşık entegrasyon olmadan WordPress'te çalıştırılabilen Vanilla JavaScript üzerine kurulmuş olmasıdır. Esasen, bir işaretçiyi özel bir imleçle değiştirmek gibi basit bir işi yapar ve herhangi bir WordPress web sitesine kolayca eklenebilir.

WordPress'e MagicMouse Ekleme

Basit belgelere göre, sihirli fare kitaplığını herhangi bir web sitesine kurmak için, asıl siteye hem JavaScript hem de CSS dosyalarını çağırmanız ve ardından sayfa bazında başlatmanız gerekir. Ardından, site genelinde özel vurgulu efektler de ekleyebilirsiniz.

Eğitimimizin geri kalanı, JavaScript ve CSS dosyalarını WordPress web sitemize tam olarak nasıl yükleyebileceğimizi tartışacak ve ardından gerçek efekti Elementor sayfalarımızda başlatacağız.

• Adım 1: MagicMouse JS ve CSS dosyalarını WordPress'e ekleyin
• Adım 2: Sayfalarda MagicMouse efektini başlatın (tek sayfalar veya genel olarak)
• 3. Adım (isteğe bağlı): Hover Efektlerini Ayarlayın

MagicMouse JS ve CSS dosyalarını WordPress'e ekleyin

Buradaki tüm adımlardan en zor ve karmaşık olanı bu olacak. İlk olarak GitHub deposundan en güncel dosyaları indireceğiz ve ardından function.php dosyamızı düzenleyerek JS ve CSS dosyalarını çekirdek WP sitemize yerleştireceğiz.

Bu adım adım öğreticiyi uyguladığınız sürece, o kadar zor olmamalı, ancak bu adımı tamamen atlamak ve Elementor sitenizde sihirli fare efektini başlatmak istiyorsanız, bu eklentiyi indirebilirsiniz. kitaplığı WordPress'e eklemek için özel olarak oluşturuldu.

WordPress'e JavaScript ve CSS eklerken, bunu yapmanın resmi olarak belgelenmiş ve önerilen yoluna "sıralama" denir (yukarıdaki eklentimiz sizin için otomatik olarak bunu yapar).

Öncelikle Github Repo'dan en güncel .JS ve .CSS dosyalarını indirin. Burada bulunurlar:

Tek ihtiyacınız olan bu iki dosya:

Ardından, FTP kullanarak bu iki dosyayı temanızın varlıklar klasörüne yükleyin. Örneğimizde Hello Elementor Temasını kullanıyoruz.

Tema kök dizininde varlıklar klasörüne gidin. Ardından magic_mouse.js dosyasını Assets -> JS klasörüne ve Magic-mouse.css dosyasını Assets -> CSS klasörüne yapıştırın.

Merhaba Elementor, varsayılan olarak JS ve CSS klasörlerini içermez, bu yüzden sadece yenilerini yaptık ve dosyaları ekledik.

Dosyalar yüklendikten sonra, onları WordPress'e ekleme zamanı. Yerel olarak barındırılan üçüncü taraf komut dosyalarını ve stil sayfalarını (CDN aracılığıyla değil) yüklerken, bunları WordPress web sitenize kaydetmeniz ve kuyruğa almanız gerekir.

Bunu yapmanın resmi yolu, bir alt tema yapmak ve özel bir function.php dosyası oluşturmaktır, ancak yöntemimizin yönetimi daha kolay olduğu için biraz sapacağız.

Kod Parçacıkları adlı ücretsiz bir eklenti indirin.

Kurulduktan sonra yeni bir kod parçacığı oluşturun. Bu, Functions.php dosyanıza gitme gereksinimini ortadan kaldırır ve siteniz için tüm özel PHP kodunu yönetmeniz için size merkezi bir konum sağlar. Bu, herhangi bir şey için function.php yoluna gitmek yerine kullandığımız eklentidir.

Elementor sitemizde hem .js hem de .css dosyalarımızı kuyruğa almak ve kaydetmek için on snippet'i kullanacağız. Esasen, bunun yaptığı şey, bir ziyaretçi sayfayı yüklediğinde sitedeki her iki dosyayı da yüklemektir. Bir <script> etiketi ve <link> etiketi ile yapılabilecekleri yapıyorsunuz (gerçi bu, işleri yapmanın doğru yolu olsa da).

İlk olarak mouse_magic.js dosyasını kuyruğa alıp kaydedeceğiz. Bunu yapmak için, onu adlandırın ve .js dosyasının konumunu belirtin. Öğreticimizi takip ediyorsanız, bu satırın nasıl görünmesi gerektiği:

 function isotropic_enqueue_javascript() { wp_enqueue_script( 'mousemagic-js', get_template_directory_uri() . '/assets/js/magic_mouse.js' ); }

Ardından, sayfalarınız ön uç ziyaretçiler için yüklendiğinde yükleyen dosyayı kaydedin.

 add_action( 'wp_enqueue_scripts', 'isotropic_enqueue_javascript' );

Şimdi aynı şeyi CSS stil sayfası için yapacağız (bu biraz farklı, kod açısından):

 function isotropic_enqueue_stylesheets() { wp_enqueue_style( 'mousemagic-css', get_template_directory_uri() . '/assets/css/magic-mouse.css' ); }

Kaydolun:

 add_action( 'wp_enqueue_scripts', 'isotropic_enqueue_stylesheets' );

Tam php yığınınız şöyle görünmelidir:

Kod parçacığını kaydedin ve etkinleştirin.

Şimdi .css ve .js dosyalarımızın web sitemizin ön yüzüne yüklenip yüklenmediğini test edeceğiz. Herhangi bir yazı tipi sayfasına gidin ve tarayıcı Geliştirme Araçlarını (CTRL + SHIFT + I) yükleyin.

Devtools açıldığında, sayfanızı yeniden yüklemek için ağ sekmesine ve CRTL + R'ye gidin. Ardından, "sihir" arayın ve hem CSS hem de JS dosyalarının görünüp görünmediğini kontrol edin. Varsa, sayfanıza yüklendikleri anlamına gelir ve ikinci adıma geçebilirsiniz.

Bu bölümü kapatmak için, birinci adımı atlamanıza izin veren bir eklenti yaptığımızı yeniden belirtmek istedim. Basitçe kurun, etkinleştirin ve ikinci adıma geçin.

Sayfalarda MagicMouse efektini başlatın (tek sayfalar veya genel olarak)

Şimdi daha basit kısım için. MagicMouse artık web sitemize yüklenmiştir. Tek yapmamız gereken, Elementor/WordPress sayfanıza varsayılan imleci özel işaretçiyle değiştirmesini söyleyen bir kod parçası eklemek. Github'daki belgeler, bu kodu, efektin görünmesini istediğiniz herhangi bir sayfaya eklemenizi söyler.

Önce kodu/seçenekleri ele alalım, ardından onu Elementor sitenize nasıl ekleyeceğinizi ele alalım.

 <script type="text/javascript"> options = { "cursorOuter": "circle-basic", "hoverEffect": "circle-move", "hoverItemMove": false, "defaultCursor": false, "outerWidth": 30, "outerHeight": 30 }; magicMouse(options); </script>

• CursorOuter bir "daire-temel" veya "devre dışı" olabilir.
• HoverEffect'in üç seçeneği vardır: varsayılan: "daire-hareket", diğer seçenekler: "işaretçi-bulanıklaştırma", "işaretçi-bindirme"
• Hoveritemmove ve varsayılan imleç doğru veya yanlış olabilir.
• OuterWidth ve OuterHeight, imleç efektinin boyutunu belirtir.

Seçeneklerinizi belirledikten/ayarladıktan sonra, şimdi hem sayfa yükleme üzerindeki etkiyi başlatacak hem de stillerinizi uygulayacak kodu sitenize eklemeniz gerekiyor.

Burada birkaç seçeneğiniz var.

1. Belirli bir sayfaya ekleyin
2. Global olarak ekleyin (Elementor Way)
3. Global olarak ekleyin (WordPress yolu)

Her seçeneği ele alalım.

Belirli bir sayfaya eklemek kolaydır. İlk olarak, özel imlecin gösterilmesini istediğiniz sayfa için Elementor düzenleyicisini açın. Ardından, bir HTML öğesini sayfanıza sürükleyin. Son olarak, kodu yapıştırın, sayfayı kaydedin ve ön uçta önizleyin. Her şey yolunda giderse, Elementor web sitenizde artık özel bir imleciniz olmalıdır.

Bunu genel olarak yapmak (özel imleci tüm sayfalara uygulayarak), bu html bloğu + kodunu Elementor'daki bir üstbilgi/altbilgi şablonuna ekleyerek yapılabilir.

Kodu, Kod Parçacıkları ve biraz PHP kullanarak da sitenize ekleyebilirsiniz. İşte bununla ilgili bir eğitim.

Şimdi, her şeyi test edin ve Elementor veya WordPress web sitenizde ücretsiz olarak özel bir fare işaretçiniz olmalıdır. Oldukça havalı, değil mi?

Bu Özel Düğme Efektlerini Ekleme

MagicMouse.js, işaretçiniz belirli öğelerin üzerine geldiğinde özel efektler için desteğe sahiptir. Bu video demosuna göz atın:

Düğmenin üzerine geldiğimizde, özel imlecimizin dış halkası kenarlığa oturur. Oldukça havalı, değil mi?

Bu javascript kitaplığı, bu efekt için yerleşik destek içeriyor – tek yapmanız gereken, ek efektin uygulanmasını istediğiniz öğeye 2 özel sınıf eklemek.

 magic-hover magic-hover__square

Can sıkıcı kısım, bu sınıfları, işe yaramayacağı için Elementor öğelerine basitçe ekleyememenizdir. Bunun nedeni, Elementor Elements'in tonlarca sınıf, kimlik ve DOM katmanına sahip olmasıdır. Snap efektinin Elementor sitenizde çalışmasını istiyorsanız, demo sayfasındaki düğmemiz gibi saf HTML öğeleri eklemeniz gerekir:

İşte kod:

 <button class="magic-hover magic-hover__square">Click Here</button> <style> #demobutton { background: #818A91; color: white; border:none; } </style>

Çözüm

Bu makale, Elementor/WordPress web sitenize nasıl benzersiz bir özel işaretçi/imleç ekleyeceğinizi göstermiş olmalıdır. İlk olarak, kitaplığı WordPress sitenize ekleyin, ardından onu başlatın ve son olarak, efektimizin yapışabileceği benzersiz Öğeler ekleyin.

Bu efekti eklemenin, Dinamik İçerik adlı Elementor eklentisini veya bağımsız “WP Özel İmleçler | WordPress İmleç Eklentisi” eklentisi.

Bununla birlikte, bu yöntem ücretsizdir ve bu öğreticide özetlenen adımları izleyerek çalıştırması ve çalıştırması oldukça kolay olmalıdır.

WordPress sitenize özel işaretçiler/imleçler eklemekle ilgili herhangi bir sorunuz varsa, yorumlar bölümümüzden bize ulaşmaktan çekinmeyin. Bu öğreticiyi beğendiyseniz, lütfen Sosyal Medyada paylaşın ve Posta Listemize abone olmayı düşünün.