WordPress’te Mikro Etkileşim – Sitenize eklemenin kolay yolları
Kısa süre önce 2018 için bekleyebileceğimiz WordPress web tasarım trendleri hakkında konuştum. Bu listede: Mikro Etkileşim. Bu kelime sizi merak ediyorsa, mikro etkileşim web sitesini daha eğlenceli hale getirmenin bir yoludur. Bunu, olağan veya sıkıcı görevlerden eğlence faktörlerini ince bir şekilde artırarak yaparlar. Genellikle mikro etkileşimler o kadar küçüktür ki, onu gerçekten bilinçli olarak kaydetmezsiniz. Ancak, hem web’de hem de gerçek hayatta her yerdeler. Bu ve diğer nedenlerden dolayı, bu yazıda WordPress’e mikro etkileşimlerin nasıl tanıtılacağı hakkında daha fazla tartışacağız. Her şeyden önce, mikro etkileşimlerin birçok örneğini göreceğiz ve web deneyimini nasıl geliştirdiklerini açıklayacağız. Bundan sonra, bu tür bir özelliği kendi WordPress web sitenize nasıl ekleyebileceğinizi göstereceğim.
Mikro etkileşim nedir (ve neden umursamalısınız)? Bu ilk bölümde, birçok örnekle, mikro etkileşimin tam olarak ne olduğunu öğreneceksiniz. Girişte belirtildiği gibi her gün mikro etkileşimle karşılaşırsınız, mikro etkileşimler web siteleriyle uğraşmayı daha eğlenceli hale getirir. Bunu kullanıcı eylemleri için geri bildirim (çoğu görsel) vererek yaparlar. Bilinçli olarak resmi dönemleri altında kaydetmeseniz bile, orada görmüş olabilirsiniz. Örneğin, Facebook yayınlarında hiç “Like” i tıkladınız mı? Aptalca bir soru nedir, elbette var.
Bir dahaki sefere yaptığınızda, düğmede neler olduğuna dikkat edin. Sadece çoğu beyazdan tamamen maviye değişmekle kalmadı, aynı zamanda bir saniyenin bir kısmı için bahçeden biraz atladı. Mikro bir etkileşimdi. Küçük olmasına rağmen, bu size tıklamanızın etkileşime girdiğiniz sayfayı etkilediğini açıklar. WordPress ile çalışıyorsanız, düzenli mikro etkileşimler de bulursunuz. Aslında, CMS onlarla dolu. Örneğin, Delete’yi tıklatarak eklentiyi kaldırırken, silme kelimesi döner …, isteğinizin işlendiğini söyleyin. Bittiğinde, tüm alan kırmızı yanıp söner ve daha sonra eklentinin silindiğini belirtir.
Mikro etkileşimler yönergeler sağlar ve eylemleri teşvik eder – mikro etkileşimler ayrıca hangi öğelerin kullanılabileceğini veya kullanıcının atması gereken bir sonraki adımı gösterir. Bu şekilde, bu mikro etkileşim arayüzü daha sezgisel hale getirir ve ince bir rehber olarak işlev görür. Mikro etkileşimi ne kullanabilirsiniz? Aşağıda mikro etkileşimler için popüler kullanım örnekleri örnekleridir. Kullanıcılara yardımcı olurlar:
Bir görevi tamamlayın (düğmeyi tıklamak gibi)
Bir veri parçası ile etkileşim (sıcaklığı, hacmi, sıralamayı artırın/azaltın)
Süreci Kontrol Etme (şarkıları veya videoları ileriye taşıma)
Ayarları ayarlayın (telefon ayarlarınızdaki anahtara bakın)
Küçük içerik görün veya oluştur (Facebook gönderileri gibi)
Kullanıcılara eylem veya güncelleme olasılığını anlatın (Twitter’ın yeni bir tweet görüntüleyen bir artı mesaj düğmesi var)
Daha fazla illüstrasyon örneği bulabilirsiniz. Şimdiye kadar mantıklı mı? Pekala, şimdi WordPress’te mikro etkileşimlerin nasıl kullanılacağına dönelim.
WordPress’e WordPress’e manuel olarak mikro etkileşim ekleyerek, sitenize girmenin birkaç yoluna sahipsiniz. Kodun yolunu biliyorsanız, her zaman elle ekleyebilirsiniz. Küçük bir kodlama bilgisi, sitenizi daha etkileşimli ve daha zengin kullanıcı deneyimi haline getirmek için çok yararlıdır. CSS CSS aracılığıyla mikro etkileşim, sitenizin birçok tasarımını belirlemiştir. Bu nedenle, bu aynı zamanda mikro etkileşim eklemek için iyi bir araçtır. Özellikle yapılması gereken tek şey temalı sayfanızı düzenlemek (veya çocuk teması tarafından tercih edilir). Veya özel bir CSS eklentisi (örneğin, özel CSS veya Jetpack ekle) veya WordPress’in ayarlanması kullanın. Buradaki en yaygın örneklerden biri köprüdür. Genellikle altı çizilir ve genellikle tıklama yeteneğini göstermek için farklı renklere sahiptirler. Ancak, Hover efektini ekleyerek daha etkileşimli hale getirebilirsiniz.
Web sitesini daha önce hiç kullanmamış olsanız bile, UI bölümüyle etkileşime girebileceğinizi anlayabilirsiniz. Ancak, geçiş, dönüşüm ve animasyon CSS ile daha da ileri gidebilirsiniz. Örneğin, imleci yönlendirirken dönen bir simge yapabilirsiniz.
Bunu başarmak için sitemde daha iyi yazı tipi harika yüklüyorum. Bu, bu bölüm koduyla içeriğime simgeler eklememe izin veriyor: bu css ekleyin ve yukarıda görülen sonuçlar var. .Rotation { Renk: #3EB9C8; İmleç: Pointer; -Webkit -Transition: Tüm kolaylık .6s; -Moz-Transition: Tüm kolaylıklar 0,6 saniye;
-MS-Transition: Tüm kolaylıklar 0,6 saniye;
-O-geçiş: tüm kolaylıklar 0,6 saniye;
Geçiş: Tüm kolaylıklar 0,6 saniye;
}
.Rotate: Point {
-moz-transform: dönme (360 derece);
-Webkit-Transform: Dönme (360 derece);
-O-transform: rotate (360deg);
Değişim: döndür (360 derece);
} CSS üzerinden öğeleri canlandırmanın daha fazla yolunu bulmak için yukarıdaki bağlantıyı kontrol edin. Kullanım durumunda, zarif temalar hakkında bu makaleye bakın. Ayrıca onay kutusu için tüm mikro etkileşim arşivlerini de bulabilirsiniz.
CSS hareketli unsurlar yapma konusunda eğitilmeden önce JavaScript aracılığıyla mikro etkileşim, bu tür şeyler için bir araç JavaScript’tir. Bu hala birçok durumda, özellikle mükemmel tarayıcı uyumluluğu nedeniyle kullanılmaktadır. Düğme, mikro etkileşim için ana gayrimenkul. CSS bunu yapmak için iyi bir seçim olsa da, bazı durumlarda JavaScript daha iyi bir alternatiftir.
Yukarıdaki örnek Ladda düğmesi ile oluşturulmuştur. Bu, serbestçe sunulan yükleme düğmesi kitaplığıdır. Ayrıca JavaScript’in WordPress web sitesine mikro etkileşimler ekleme potansiyeline sahip olduğunu göstermektedir.
Eklentiler aracılığıyla mikro WordPress etkileşimleri nasıl eklenir, ancak manuel kodlama UX’inizi yenilemenin tek yolu değildir. Ayrıca, işlevlerine yerleştirilmiş veya sitenize eklemenize yardımcı olan mikro etkileşimlerle birlikte gelen birçok WordPress eklentimiz var. İşte bazı örnekler. WPForms tarafından İletişim Formu İletişim Formu, WordPress için Draet ve Gevşek Kontak Formunun üreticisidir. Birisi bir form gönderdiğinde ayarlanabilecek yükleme metnini görüntülemenize izin veren ayarlarla görünür. Bu, daha önce tartıştığımız geri bildirim türünü üretir. Kullanıcılar, tıklamalarının kaydedildiğini bilir, böylece bir kereden fazla basmayacaklardır. Bu aynı zamanda eylem ve sonuçlar arasındaki zamanı kapatmalarını sağlar (örneğin, Teşekkürler sayfasına gönderilir). Çok küçük, ama çok etkili.
Açıklama Araç ipuçları, WordPress içeriğinize mikro etkileşimler eklemenin başka bir yoludur. Sadece içeriği daha etkileşimli ve çok yararlı ziyaretçiler yapmakla kalmazlar. WordPress Toolptips eklentisi, metinlere, resimlere, videolara, başlıklara, alıntılara ve diğerlerine araç ipuçları eklemenizi sağlar. İpuçları, PDF indirmeleri, resimler, sosyal bağlantılar ve diğerleri dahil olmak üzere WordPress editörleriyle oluşturabileceğiniz herhangi bir içeriği içerebilir.
Araç ipuçları, genellikle ek bilgi gerektiren form bakımından makuldir. En azından iletişim formu 7 için, bunun için özel bir eklentimiz bile var. Yönlendirme ve kaydırmanın etkisi Tabii ki, Hover efekti eklentiler şeklinde de mevcuttur (manuel olarak istemeyen veya yapamayanlar için). İşte Hover efektleri ve daha fazlası için bazı seçenekler. Microthemer Lite Bu eklenti, web sitenizde herhangi bir şeyi düzenlemek için eksiksiz bir CSS ön uç düzenleyicisidir. Ayrıca Hover etkisini de destekler. Ancak, ücretsiz sürümdeki 15 efektle sınırlısınız.
Görüntü Hover Efektleri – Görüntüler için özel bir Hover efekti sunar. Burada görebileceğiniz farklı stillerde 40’tan fazla etki.Animasyon! – Bu eklenti, yayınlarınıza, widget’larınıza ve sayfalarınıza CSS3 animasyonu uygulamanızı sağlar. Kaydırma, tıklama ve yönlendirirken uygulayabileceğiniz 50’den fazla animasyon seçeneği sunar. Doğrudan oradan eklemek için WordPress düzenleyicisine düğmeler ekleyin. Amazing Hover efektleri – Adından da anlaşılacağı gibi, bu uzatma 20’den fazla Hover efektiyle birlikte gelir. Demoya buradan bakın.
Sosyal paylaşım sosyal paylaşım ana çevrimiçi pazarlamadır. Bu aynı zamanda paylaşımı teşvik etmek için içeriğinize mikro etkileşimler eklemek için olağanüstü bir alandır. Klasik örnek “Bu tweet!” Ziyaretçilerin metni web sayfanızda ne zaman işaretlemesini sorun. Tıklayın ve teklifleri doğrudan paylaşabileceğiniz sosyal hesabınıza gönderileceksiniz. Bununla birlikte, bu sadece Twitter için değil, aynı zamanda sosyal platformlar ve diğer içerik türleri içindir. İşte bazı alternatif eklentiler:
Vurgulayın ve Paylaşın – Bu eklentiyi yükledikten sonra, ziyaretçiler sayfanızdaki metni vurduklarında, Twitter ve Facebook’ta paylaşma seçeneğini alırlar.Eklenti ayrıca tüm yayınları LinkedIn, Pinterest veya e -posta yoluyla göndermek isteyip istemediklerini sorar.Eklenti, WordPress etiketini otomatik olarak hashtag olarak değiştirir ve ayrıca Twitter kullanıcı adınızı mesaja dahil edilecek Yoast SEO’dan çeker.
FB WP için alıntı eklentisi – yalnızca Facebook için teklifleri paylaşmak için bir çözüm.Göndermenin ve sayfaların olağan yolunu çalıştırın.İstediğiniz yerde paylaşım düğmesi eklemek için kısa bir kod da kullanabilirsiniz.
