FoxyComplete - Görseller ile Gelişmiş Otomatik Tamamlama Araması
Bugün bir süredir projelerimde uyguladığım modaya uygun bir işlevselliği paylaşacağım.
Ben buna “FoxyComplete” diyoruz ve sonuçta, içeriğin sonucundan veya belirli bir dosyadan otomatik olarak alıntılanan resimlerle birlikte tıklanabilir arama sonuçları getiriliyor . Uygulaması kolay ve bir kez bittiğinde, çimdiklemesi kolaydır.
Bu işlevsellik uygulaması tamamen tasarımcı ve geliştirici tercihine bağlıdır, ancak kullanıcı deneyimi üzerindeki etkisi, modern tasarım ve geliştirme projelerine eklenmesi için en iyi seçimdir.
Bu işlevselliği kişisel olarak kullandığım iş birimleri, kapsamlı bir arama özelliği gerektiren e-ticaret, kurumsal tasarımlar, fotoğraf, eğlence ve gelecek projeleridir.
Eminim ki hepiniz ziyaret ettiniz. IMDb ve elma web siteleri ve arama özelliklerini denedim. Değilse - aşağıda gelişmiş arama işlevlerinin nasıl göründüğünün bir önizlemesidir.
Hepimizin yapılabileceğini biliyoruz ama sonra soru şu: “Neden tüm bu güzel hazırlanmış web sitelerinde genellikle yapılmıyor?” Muhtemelen, her şeyden hızlı bir çözümün eksikliğidir.
Resimlerle aynı Otomatik Tamamlama Arama özelliğini uygulamamda Fotoğraf Blog Bir süre önce tasarladığım, başarmak elbette zordu, ama sonunda harika oldu. Blog'umdaki ziyaretçiler, resim galerimden arama yapmanın keyfini çıkarırlar ve hemen sonra ne göreceklerine ilişkin önizlemeyi anında alırlar.
Aşağıda, blogumdaki arama özelliği nasıl görünüyor.
Bu derste aşağıda belirtilen konuları ele alacağım.
- Komut dosyasına kısa bir bakış
- WordPress Eklentisi Olarak FoxyComplete (Yerel / Dinamik)
- Görüntülerle Youtube Arama Olarak FoxyComplete Uygulanması
- Güvenliği Artırma
WordPress Tasarımcıları için , bu bir parça kek ve WordPress / PHP Geliştiricileri için - sunduğu çeşitli işlevleri ve uygulamaları keşfetmek için büyük bir fırsat. Gelişmiş uygulama için gereksinimler WordPress, PHP, HTML, jQuery ve CSS ile ilgili temel bilgiler olacaktır.
Komut dosyasına kısa bir bakış
İlk önce, bu derste ne oluşturacağımıza hızlıca bir zıplama yapalım. İçin aşağıdaki resme tıklayınız temel demo .
Lütfen, bu öğreticinin, herkesin anladığından ve herkesin kendi gereksinimlerine göre tasarlayabileceğinden veya ayarlayabildiğinden emin olmak için çok temel bir düzeyde tutuyorum. Yaptığım işlevsellikten ilham alındı. jQuery Otomatik Tamamlama Eklentisi Jorn Zaefferer tarafından.
Yukarıdaki hızlı örnek, sonucun başlığını otomatik olarak tamamlar ancak seçili bir URL'ye (bir sonraki bölümde gerçekleştirilir) yönlendirmek için de ayarlayabiliriz. Arama alanının kimliği, " WordPress Arama Alanı" için kullanılan varsayılan "s" olarak tutulmuştur (bu kavramı bir WordPress Eklentisi geliştirmek için devam ettirdiğimiz için yararlı olacaktır).
Sonuçların şekillendirilmesi kolaydır: tasarımınıza göre stil vermesi kolay temiz bir yapıdan oluşur.
.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img ve .ac_results ul li a span
Bu temel örnek, JSON biçiminde bir dizi bildirdiğimiz basit bir JavaScript dosyası olan statik bir veri kaynağı kullanır. Tüm işlevlerimiz diziyi ayrıştırmak ve sonuçları görüntülemek.
Endişelenme - sadece temel bir dizi anahtar ve değer çiftleri ve bundan daha fazlası değil. Anahtarlarımız bize sonuç sayfasına, önizleme görüntüsüne ve dizgede arama yapmak zorunda olduğumuz başlığa götürecek olan permalink'dir . Bu temel demo için varsayılan bir görüntü ve bir örnek başlık tuttum.
Örnek dizi yapısı
[{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }… Repeat as much as you want to]JavaScript işlevselliği kolaydır. JQuery'de sonuçta oluşan JSON Array'ı ayrıştırıyoruz, sonuçları gereksinimlerimize göre biçimlendiriyoruz ve görüntüyü iletiyoruz.
Geliştiriciler için İpucu: Sonuçların, sonuçların nasıl görüntüleneceğini değiştirmek istediğinizde, foxycomplete.js betiğindeki işlev biçimine () bakın. Diziyi girdi olarak alan ve dizinin öğelerini içeren biçimlendirilmiş HTML döndüren bir JavaScript işlevidir. Anlamak için oldukça basit ama değiştirmek istiyorsanız, bunu yapın!
WordPress eklentisi olarak FoxyComplete (yerel / dinamik)
WordPress Eklentisini bir .zip dosyası olarak indirmek için aşağıdaki resme tıklayın.
Tasarımcılar için
Umarım hatırladım ki, tasarımcılar için bir parça kek olması gerektiğini söylemiştim, işte burada! Plug-n-Play WordPress Eklentisi Olarak FoxyComplete doğrudan kutudan çalışır - basit bir uygulama için basit yapılandırma gereklidir. Tek yapmanız gereken onu indirmek, yüklemek ve bunun için tasarlarken oynamak.
Eklenti Seçenekleri aşağıdaki gibidir:
Yerel Arama'yı Etkinleştir: Birkaç web sitesine göz attıktan sonra, arama seçeneklerinin inanılmaz bir hızla, hatta büyük bir veritabanında bile örnek IMDB olduğunu buldum. Vurgulanan ilk şey onların gelişmiş hızlı sunucularıydı - ancak barındırma ve çeşitli miktarda veriyi paylaşan düzenli kullanıcılar? Bu yüzden yerel arama öncelikli bir seçenek haline getirdim. WordPress yüklemenizin alt kısmında, tüm yayınlarınıza ve sayfalarınıza URL'leriyle birlikte bir dizi içeren bir JavaScript dosyası ve bulunursa görüntü önizlemeleri yükler. Yerel arama için istediğiniz zaman değiştirebileceğiniz halde eklenti varsayılan olarak dinamik aramaya döner.
Limit: Görünen sonuçların sınırı üzerinde bir kontrolün olması gerekir. Tasarımla tutarlılığı korumaya ve kullanıcıların yalnızca en alakalı sonuçları almasına yardımcı olur. Varsayılan olarak en iyi beş sonuçla sonuçlanır.
Otomatik Tamamlama Genişliği: Başlangıçta her zaman girişin genişliğine eşit tutuldu, ancak Google tarzı geniş arama kutusunda aramadığımız anlaşıldı. Hala giriş elemanının genişliğine göre varsayılandır ancak istediğiniz zaman değiştirebilirsiniz.
Girdinin Kimliği: Bir WordPress Eklentisi olduğundan, “#s” tercihini, istediğiniz her şeye dönüştürülebilen bir varsayılan seçim olarak tercih ettim. Sadece istediğiniz giriş öğesinin kimliğini ('#' olmadan) girin ve işte budur.
Varsayılan Görüntü: Bazen eklenti ilgili bir görüntü bulamayabilir ve bunun için bir demo görüntüsü ekledim, ancak bunun üzerinde de kontrolünüz var: eklenti dizinindeki kendi örnek resminizle değiştirin.
Dinamik Arama ilgili içeriği akıllıca arar ve işlevselliğe hemen hemen dinamik bir JSON dizisi sağlar. İlk olarak, yayınlanmış ve herkese açık olan WordPress kurulumundaki tüm yayınları ve sayfaları toplar. Ardından , görüntüleri şu adresteki 3 adımda arar :
- Medya Yüklemeleri
- “Thumbnail” Özel Alan
- Gönderi İçeriğindeki Görüntüler
Tüm verilere sahip olduktan sonra, her bir yazının / sayfanın başlığını ve ilgili içeriğini birleştirir ve kapsamlı bir arama deneyimi için sorgulanan öğeyi arar. Bulunduktan sonra, X öğesinin sayısı diyelim - bu X, JavaScript işlevselliğine döndürülen bir JSON dizisine iter.
Dinamik ve yerel işlevler
Bu kritik bir konudur ve yorumlar bölümünde bir tartışmaya açığım. Kişisel olarak, birçok kıvrımın deneyimini geliştirirse, yerel bir kaynağa zarar vermenin olmadığını hissediyorum. Yerel Arama'yı uyguladığım bir başka sebep de, Google’ı Gmail’de bile uyguladığımı tespit etmekti.
Kullanıcı giriş yaptıktan sonra, Gmail sunucusuna bir istek gönderir ve tüm kişilerinizin tüm e-posta adreslerini ve adlarını veya diğer adlarını altbilgide alır, bunlar daha sonra Kime, Bilgi İşlemi, BCC ve Etiketler otomatik tamamlama alanları için kullanılır. Ne söylüyorsun meşru?
Görüntülerle YouTube benzeri bir arama olarak FoxyComplete uygulaması
Yukarıda belirtildiği gibi, geliştiriciler için de bir çok işlevsellik vardır. Yukarıdaki, YouTube yayınlarını kullanarak yaptığımız ve daha sonra JSON biçiminde gerekli sonuçları vermek için bunları PHP'de ayrıştırmaktır. Bunlar hakkında bilgi edinebilirsiniz İşte . YouTube Foxycomplete Search'ün bir demosu için aşağıdaki resme tıklayın.
Yapabileceğiniz başka bir işlev ise, modal veya yer paylaşımlı oynatma ile oynatılan YouTube Arama Motoru'dur. Örneğin, bir video için arama yaptığınızda ve otomatik tamamlama sonuçlarında onu tıklattığınızda, kalıcı bir iletişim kutusu veya içinde video içeren bir yer paylaşır, web sitenizde oynatılır, ancak YouTube'dan kaynaklanır. Güzel değil mi?
Güvenliği iyileştirmek
WordPress eklentisi kullandığım gibi güvenli olsa da WordPress Nounces Dinamik sürümdeki sabitleri ve yereldeki şifrelemeyi kullanarak bile güvenli bir şekilde yapılabilir.
Kullandığımız bir güvenlik önlemi, Ajax çağrısını kontrol etmek ve aynı zamanda aşağıda gösterildiği gibi aynı alandan bir Ajax araması olup olmadığını kontrol etmekti.
//define SAME_DOMAIN to true in the Header of your document.define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');define('DOING_AJAX', true);if(IS_AJAX && DOING_AJAX && SAME_DOMAIN){//your search logic}Bunu sağlamak için sayısız yoldan sadece biri!
Sonuç
Bu, gelecekte tasarım ve geliştirme projelerinizde size yardımcı olabilecek FoxyComplete oldu. Bu Sürüm 1.0 ve değerli geri bildirimleriniz ve desteğiniz ile geliştirmeye devam edeceğim.
Aşağıdaki yorumlar bölümünde ne düşündüğünüzü belirtin ve bu, kolayca ve düzenli olarak düzenleyebileceğim bir ortamda barındırıldığından, süper önerilerinizle - her iki uçta da mükemmel kullanıcı deneyimi ile harika bir ücretsiz eklenti yapalım.