GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

 

WordPress arama motoru berbat

WordPress kullanan ve arama motorundan övgüyle bahseden kimseyi tanımıyorum ve ilk sürümlerinden bu yana neredeyse hiç gelişmemiş olmasını hala anlamış değilim.

Sadece çalışma şekli açısından ilkel olmakla kalmıyor, hiçbir yapılandırma da sunmuyor. Sonuç sayfasının görünümü bile arzulanan çok şey bırakıyor. Kullandığınız şablona bağlı olarak, biraz daha iyi bir tasarıma sahip olabilir, ancak genel olarak hala tarih öncesi

Sonuçların görünümü CSS ile biraz iyileştirilebilir ve Relevanssi gibi ücretsiz bir eklenti (ücretli bir sürümle) (veritabanınızın ağırlığını üç katına çıkaracak olsa da) veya harici Algolia hizmetine bağlanan bu diğer eklenti (ayda 10.000 arama isteğine kadar ücretsiz) ile yanıt verebilirlik sağlanabilir.

Ancak nasıl çalıştığı konusunu başka bir güne bırakacağım çünkü hala bununla mücadele ediyorum ve tamamen estetik reformlarla ilgileneceğim GeneratePress (GP) ve GenerateBlocks (GB).

GeneratePress ve GenerateBlocks

GP ve GB hala geliştirilecek çok fazla kullanılabilirliği olan genç bir projenin iki aracıdır, GB, Elementor veya benzeri oluşturucular kullanıyorsanız beklediğiniz gibi aynı öğrenme eğrisini sunmaz.

Bu örnekte göreceğimiz gibi, GenerateBlocks ile bazı şeyleri inşa etmek için bazı süreçler çok daha uzun ve zahmetlidir ve ilk denemelerde biraz çaresiz olabilir. Gittikçe daha fazla blok ekledikçe işler daha karmaşık hale geliyor.

Öte yandan, nasıl çalıştıklarını bir kez anladığınızda ve onlarla başa çıktığınızda, her bir öğenin görünümü ve hissi üzerinde çok daha fazla kontrole sahip olursunuz.

zorluk, dokümantasyonu ve yaratıcılarının kendi yetkinlikleri dışındaki belirli tasarım sorunlarına bile yardımcı oldukları kusursuz bir destek ile dengelenmiştir, bu nedenle felsefelerine sadık kaldıkları için dikkate alınması gereken harika bir alternatiftir; adil, temiz ve hafif kod.

Blok Öğeleri

Blocks Elements, bundan sonra Elements olarak anılacaktır, Temmuz 2020'de GeneratePress Premium 1.11.0 sürümüne eklenmiştir. Kodla uğraşmak zorunda kalmadan blogunuzun hemen hemen her yerine içerik eklemek için normal bir kanca olarak kullanılabilir.

GenerateBlocks ile birleştirildiğinde, kancalar, üstbilgiler, altbilgiler, kenar çubukları, bir "Kahraman" sayfası, içerik şablonları vb. oluşturmak için WordPress blok düzenleyicisini kullanmanıza olanak tanır.

Şimdi işe koyulalım.

Yapı şablonu

Yapacağımız ilk şey "yapı şablonu" adını vereceğimiz bir şablon oluşturmak. Bu adım isteğe bağlıdır, ancak bir gün birkaç tıklama ile bir şeyleri değiştirmek istersek diye bir tane oluşturmaktan zarar gelmez.

Bu ismi verdim çünkü sadece yapısal yönleri tanımlayacak, içeriği değil. Yani, üstbilgiyi, altbilgiyi veya widget'larını, bir kenar çubuğunu göstermek veya göstermemek ya da genişliğini tanımlamak vb. istiyorsak ve böylece adımların geri kalanındaki blokların adlarıyla karıştırılmayız.

Görünüm/Elemanlar ana menüsünden veya en üstten, elemanların oluşturulmasına ve yönetimine erişebiliriz.

Elements de GeneratePress- Layout o diseño

Bizi ilgilendiren özel kullanım için, yeni bir öğe eklerken Tasarım 'ı seçiyoruz ve oluştur'a basıyoruz.

Ardından öğeye hangi sayfada uygulanmasını istediğimizi söylüyoruz. Bunu yapmak için "Görüntülenecek kurallar" sekmesine geçiyoruz ve konum olarak açılır menüden "arama sonuçları "nı seçiyoruz.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Öğeler çok sayıda özelleştirme olanağı sunar. Göreceğiniz gibi, bu açılır menüde blogunuzun çoğu konumunu seçerek bu ayarları oraya uygulayabilirsiniz.

Ayrıca hangi öğeleri gizlemek istediğimize de karar verebiliriz. Benim durumumda kenar çubuğu olmadan yapmak için yalnızca bir seçenek kullanacağım, bu yüzden"İçerik (Kenar çubuğu yok)" seçeneğini seçiyorum.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Kenar çubuğunu gizlemenin başka yolları da var, ancak bu en kolay ve en hızlısı olmasının yanı sıra, buraya geri dönerek veya doğrudan bu öğeyi/şablonu "Taslak" durumuna "yayından kaldırarak" herhangi bir değişikliği geri almamıza ve böylece sayfayı orijinal görünümüne döndürmemize olanak tanır.

Buna ek olarak,"Elemanları Devre Dışı Bırak" sekmesinde sayfayı pratik olarak temiz bırakabilirsiniz. Elementor'un "Canvas" sayfa şablonuna eşdeğer olduğunu söyleyebilirsiniz, hatta biraz daha geliştirilmiş ve kullanımı daha basit.

Desactivar Elementos en GeneratePress

Yapılandırma sekmelerinden birinde de önerilen iyi bir uygulama, başlığın yeterince açıklayıcı olmaması veya çok uzun olmasını istemememiz durumunda her bir Elemanın ne yaptığını dahili not larla belgelemektir.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Her şeye notlar ve yorumlar eklemeye alıştım çünkü çok fazla değişiklik yaptığınızda ve zaman içinde bunların nerede ve/veya nasıl yapıldığını unutmanız kaçınılmazdır. Dolayısıyla, dahili notlarda, bir şeyler yanlış giderse veya yeni değişiklikler yapmak isterseniz adımlarınızı takip etmek için ihtiyacınız olan tüm bilgilere her zaman sahip olacaksınız.

Bu şablonu yayınlayarak sonuç sayfasını zaten istediğimiz gibi yapılandırmış olacağız, ancak elbette şimdi bir arama yaparken boş olacak çünkü bu aramaların görünümünü belirleyecek yeni bir öğe oluşturmamız ve yayınlamamız gerekiyor.

Biz bunu yaparken bu şablonu şimdilik taslak olarak bırakabilir ve her şey hazır olduğunda yayınlayabilirsiniz.

Görünüm şablonu

Bu sadece başka bir Element olmasına rağmen, bu küçük rehber için "görünüm şablonu" olarak adlandırıyorum çünkü o zamanlar şeylerin isimlendirilmesi ve farklı olası kullanımları konusunda biraz kafam karışmıştı.

İşte asıl özelleştirme çalışması burada başlıyor.

Yeni bir öğe oluşturuyoruz, bu sefer bir Blok ve ona açıklayıcı bir isim veriyoruz.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Bir GenerateBlocks konteyneri ekliyoruz ve bu konteynerin içine bir Query Loop bloğu koyuyoruz.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Ve işte göreceğimiz şey bu.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Sonuçların yerel yapısını kopyalamak için"Boş başlat" seçeneğini seçtim, ancak bu bloğun sunduğu şablonlardan herhangi birini seçebilirsiniz.

Yapılacak en iyi şey, karar vermeden önce bunları denemektir çünkü bunlardan biri üzerinde çalışmaya başladığınızda başka bir tanesini uygulayamazsınız ve değiştirmek isterseniz tüm süreci sıfırdan başlatmanız gerekir (GB'yi çözmesi gereken bir şey).

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Şablonu seçtikten sonra, sorgu döngüsü bloğunu seçin (1) ve sağ tarafta "Blok" sekmesini göreceksiniz ( 2). Üzerine tıklayın ve "Sorgu parametreleri" altında "Şablondan sorguyu devral" (3) seçeneğini işaretleyin. Son olarak, en altta, "Görüntüleme Kuralları"/"Konum" (4) altında "Arama Sonuçları "nı arayıp ayarlıyoruz ve taslak olarak kaydediyoruz.

Sorgu döngüsünü açtığımızda şunu göreceğiz:

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

"Query Template" içine başka bir grid bloğu ekliyoruz ve istediğimiz yapıyı seçiyoruz.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Örnek için sütun görevi görecek iki konteynerden birini kullanacağız. Sol sütun öne çıkan görselin yeri olacak ve sağ sütun girişin alıntısını gösterecektir.

Ayrıca üç konteyner ile oynayabilir ve ortadakini bir alan olarak yapılandırabilirsiniz. Israr ediyorum, olasılıklar çok fazla ve yapılacak en iyi şey onlarla oynamak.

Fark etmiş olabileceğiniz gibi, göstermek istediğimiz şeyin nihai yönünü oluşturacak tüm parçaları içeren bir konteyneri neredeyse sıfırdan inşa ediyoruz. Bu durumda arama sonuçları, ancak bunu başka herhangi bir içerikle de yapabilirsiniz.

Şimdi bu iki konteyneri boşaltalım.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

İlk konteyneri seçiyoruz ve yeniden boyutlandırma seçeneklerine ilerlediğinizde göreceğiniz gibi genişliğini 33 olarak ayarlıyoruz (aslında 33.33 olarak ayarlanmıştır).

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Aynı şeyi ikinci konteyner için de yapıyoruz ve 66 'yı seçiyoruz (otomatik olarak 66,66 olarak ayarlanacaktır). Açıkçası, önemli olan nokta, kullandığınız tüm kapsayıcıların 100'e tamamlanmasıdır, böylece sayfanın yatay alanının dışına çıkmazlar ve aynı satırda görüntülenirler.

Şimdi, ilk konteyner seçiliyken, içine bir GenerateBlocks görüntü bloğu ekliyoruz.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

O zaman ne olacak, farklı görüntü alanları görünecek. Panik yapmayın, bunun nedeni bloğun Döngüyü algılaması ve davranışını yeniden oluşturmasıdır. Arama motorunuz on sonuç gösterirse, bunlar görünecek alanlardır. Sonuç sayfasının önizlemesinden başka bir şey olmayan geri kalanın çoğunu geçerek sadece görüntü kabı üzerinde çalışmaya devam edin.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Görüntüyü içeren kabı tekrar seçiyoruz (1). Sağdaki bloğun menüsünde "Dinamik verileri etkinleştir" seçeneğine iniyoruz ve etkinleştiriyoruz ( 2). Arka plan resim kaynağında "Öne çıkan resim" i seçiyoruz (3) ve resimler editörde görünecektir.

Bağlantı kaynağında "Bireysel bağlantı" (4) seçiyoruz, böylece her resim ilgili gönderiye bağlanıyor ve tekrar taslak olarak kaydediyoruz.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Şimdi ikinci konteynere gidiyoruz, onu seçiyoruz ve GenerateBlocks'tan bir "Headline" bloğu ekliyoruz.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Dinamik veri etkinleştirilmiş (2) "Başlık" bloğunu ( 1 ) seçin ve önceki işlemi tekrarlayın ( 3), ancak bu kez içeriğin kaynağı olarak "Başlık "ı ( 4 ) ve bağlantının kaynağında bireysel girişi ( 5) seçin

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Son olarak, bu adımları takiben girişin özünü göstermek için kullanılacak olan başka bir "Başlık" bloğunu aşağıya ekleyeceğiz.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Eklendikten sonra aynı işlemi tekrarlayacağız. Bu yeni blok seçiliyken (1) dinamik verileri ( 2 ) ve verilerin kaynağı olarak (3) mevcut girişi ve "Alıntı" içeriğinin kaynağını ( 4) etkinleştiriyoruz. Artık özütün uzunluğunu kelime cinsinden de ayarlayabilirsiniz (5).

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Son olarak, sonuçların altında görünecek olan sayfalandırmayı ekleyeceğiz. Bunu yapmak için sorgu döngüsü bloğunu (1) seçin ve düzenleme çubuğunda (2) bulacağınız noktalı küçük + sembolüne tıklayın.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Sayfalandırma, aradığınız görünüme uygun biçim, renk ve şekli vermeniz gereken bir düğme bloğu ile oluşturulmuştur. Az sayıda olmayan tüm olası yapılandırmalar, her bloğu mobil, tablet ve masaüstü için her zaman ince ayar yapma seçeneklerine sahip olacağınız bloğun menüsündedir.

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Bu yazıyı çok fazla uzatmamak için burada bırakacağım.

Editör tarafından sunulan önizlemenin ötesinde gerçekten nasıl çalıştığını görmek için tüm bunları önce bir test ortamında yapmanızı ve olması gerektiği gibi gösterdiğinden emin olduğunuzda yayınlamanızı tavsiye ederim.

Şunu da unutmayın, eğer başlangıçta önerilen ve " tasarım bloğu" olarak adlandırdığımız Yapı Şablonu taslak olarak bıraktığımızı, yayınlamanız gerekecektir.

Bu, estetik tercihlerinize bağlı olarak sonuç sayfasının görünümünü daha da özelleştirmek için bir başlangıç noktası olacaktır.

Özelleştirme için pek çok olasılık

GeneratePress ve GenerateBlocks ile WordPress arama sonuçları sayfasını özelleştirin

Başlık ve alıntı arasında iki kapsayıcılı bir ızgara bloğu gibi istediğiniz her şeyi düzenlemeye veya eklemeye devam edebilir ve oraya yayın tarihini, girişin yazarının numarasını veya istediğiniz her şeyi ekleyebilirsiniz.

İsterseniz, WordPress arama yaparken sonuç bulamadığında o yavan varsayılan sayfa için başka bir şablon bile oluşturabilir ve yardım düğmeleri veya ziyaretçiye yardımcı olacak başka herhangi bir öğe ekleyebilirsiniz.

Yazı tipini ve boyutunu değiştirebilir, bir tarafa veya diğerine yaslayabilir, öğelerin aralıklarını ve boyutlarını ayarlayabilir, resimler ve şekiller ekleyerek arka plan rengiyle oynayabilir, simgeler, kenarlıklar, bağlantılar üzerinde gezinme efektleri, kapsayıcılar üzerinde gölgeler vb. ekleyebilirsiniz.

Tüm bunları editörden çıkmadan ve CSS ile uğraşmak ya da şablon dosyalarınıza dokunmak zorunda kalmadan yapabilirsiniz.

Burada, okuma süresi ve ziyaret sayısını eklemek, boş alıntıları yazmak ve eksik öne çıkan resimleri eklemek gibi bazı şeyleri hala cilalamam gereken arama sonuçlarımın temel düzenini deneyebilirsiniz.

Bonus top: Sonuçlara tipik"Şunun için (sayı) sonuç gösteriliyor: ( aranankelime )" ifadesini eklemeniz gerekiyorsa, burada gerekli kodu bulabilirsiniz sorgu Döngüsü bloğunuzla çalışmasını sağlamak için kod ve talimatlar, GB desteğinden David'e teşekkürler


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting