WPBeginner v6 – Yeni Site Tasarımımızın Perde Arkası

Son birkaç hafta içinde WPBeginner’ı ziyaret ettiyseniz, muhtemelen yeni bir web sitesi tasarımına sahip olduğumuzu fark etmişsinizdir. Bir öncekiyle pek çok benzerliği olsa da, perde arkasında değişen çok şey var.

Bültende söz verdiğim gibi, yeniden tasarımımızın ardındaki düşünce sürecini, neler öğrendiğimizi, sitedeki yenilikleri ve en önemlisi öğrendiklerimizden bazılarını web sitenizi geliştirmek için nasıl kullanabileceğinizi paylaşmak istiyorum.

Küçük Bir Arka Plan

WPBeginner’ı 2009 yılında başlattım ve çoğu yeni içerik oluşturucu gibi, web sitemizin tema tasarımını ilk 3 yılda dört kez değiştirdim.

İşim büyüdükçe, web sitesinin yeniden tasarlanmasının çok fazla zaman ve kaynak gerektirdiğini, bunun da temel misyonumuzu yerine getirmek için daha iyi harcanabileceğini fark ettim:

Bu yüzden tüm odağımı temel misyonumuza adadım ve işimiz muazzam bir şekilde büyüdü.

WPBeginner’ın son yeniden tasarımı 2016’da başlatıldı ve o zamandan beri uzun bir yol kat ettik.

İşte son 5 yılda olanlar:

• WPBeginner blogunda binden fazla ücretsiz WordPress eğitimi oluşturduk ve YouTube Kanalımıza yüzlerce yeni video eğitimi ekledik.
• Şu anda 80.000’den fazla üyesiyle en büyük WordPress facebook grubu olan WPBeginner Engage topluluğumuzu Facebook’ta başlattık (katılmak ücretsizdir).
• MemberPress, Pretty Links, Formidable Forms, Uncanny Automator ve diğer 6 eklenti de dahil olmak üzere favori WordPress eklentilerimizden bazılarına yatırım yapmak için WPBeginner Growth fonunu başlattık.
• İki yeni WordPress eklentisini, bir WordPress sosyal kanıt eklentisi olan TrustPulse‘ı ve güçlü bir WordPress hediye ve yarışma eklentisi olan RafflePress‘i piyasaya sürdük.
• Ünlü AIOSEO (WordPress için hepsi bir arada SEO eklentisi), SeedProd (sürükle ve bırak WordPress site oluşturucu), Smash Balloon (1 numaralı sosyal medya beslemeleri eklentisi), PushEngage (web sitesi push bildirim eklentisi) ve AffiliateWP (WordPress için satış ortaklığı yönetimi eklentisi) dahil olmak üzere beş WordPress büyüme eklentisi satın aldık.
• Ayrıca ünlü WP Mail SMTP eklentisi (e-posta teslim edilebilirliğini düzeltmek için), SearchWP (güçlü WordPress arama eklentisi), Easy Digital Downloads (dijital ürünler satmak için popüler e-ticaret eklentisi), WP Simple Pay (kredi kartı ödemelerini kabul etmek için kolay eklenti) ve Sugar Calendar (WordPress için basit etkinlik takvimi eklentisi) dahil olmak üzere beş WordPress platform ve altyapı eklentisi satın aldık.

Toplu olarak eklentilerimiz şu anda 19 milyondan fazla web sitesi tarafından kullanılıyor ve eklentilerimizden 4’ü tüm zamanların en iyi 20 WordPress eklentisi arasında yer alıyor.

Tüm bunlar büyük başarılar olsa da, misyonumuzu geliştirmeye ve hizmet etmeye devam edebilmemiz için ele alınması gereken yeni bir dizi zorluğumuz var.

Bu da beni WPBeginner v6’ya getiriyor.

İçerik Keşfedilebilirliğine Odaklı Tasarım

WPBeginner basit bir eğitim blogu olarak başladı, ancak gerçekten WordPress için Wikipedia haline geldi.

Kullanıcılarımız bize defalarca WordPress sorunlarına bir cevap bulmak istediklerinde, anahtar kelimeyi Google’da arattıklarını ve en iyi çözümü bulmak için sonuna WPBeginner’ı eklediklerini söylediler.

Okuyucularımızın WordPress ile ilgili sorularına hızlı bir şekilde yanıt bulmalarına yardımcı olmak için Arama özelliğini yeni ana sayfamızın odak noktası haline getirdik.

İster içerik kütüphanemizde arama yapmak için gelen bir ziyaretçi olun, ister WordPress’e yeni başlayan bir okuyucu olun, WPBeginner’ın ana sayfası artık aradığınızı bulmanızı kolaylaştırıyor.

Ayrıca, arama simgesine tıkladığınızda tüm tekil yazı sayfalarındaki kenar çubuğumuzda ve web sitemizin başlığında benzer bir arama widget’ı göreceksiniz.

WPBeginner’ın teknik bilgisi olmayan kullanıcılar için en büyük WordPress kaynak sitesi haline gelmesinin nedenlerinden biri, karmaşık WordPress konularını sade bir İngilizce ile adım adım açıklamamızdır.

Yeni tasarımda, WordPress sözlüğü bölümümüze canlı arama özelliği ekledik, böylece yaygın WordPress diline kolayca aşina olabilirsiniz. Bu temelde WordPress terimleri için bir sözlük gibidir.

WPBeginner kullanıcısı olarak, popüler eklentiler, premium temalar, barındırma ve diğer pazarlama araçlarındaki en iyi WordPress indirimlerine özel erişim elde edersiniz.

Ekibimiz sizin için en iyi fırsatları müzakere ederek gerçekten harika bir iş çıkardı ve bu bölüm 100’den fazla kupon ve fırsat içerecek şekilde oldukça büyüdü.

Kullanıcılardan gelen yoğun istek üzerine Fırsatlar bölümümüze Canlı Arama özelliğini de ekledik, böylece en sevdiğiniz WordPress ürünlerindeki en iyi fırsatları hızlı bir şekilde bulabilirsiniz.

2022’ye girerken bizim için en büyük öncelik içerik keşfedilebilirliği.

Bu, en iyi kullanıcı deneyimini sunmamıza, sitede kalma süresini artırmamıza, sayfa görüntülemelerini artırmamıza ve genel hemen çıkma oranımızı düşürmemize yardımcı olur.

2022’de kullanıcı deneyimi optimizasyonunun (UXO) SEO’da kritik bir rol oynayacağına inanıyorum.

Rakiplerinizi yenmek ve rekabet avantajı elde etmek istiyorsanız, UXO’ya dikkat etmenizi şiddetle tavsiye ederim.

Bu makale boyunca yeni temamızda yaptığımız gibi benzer özellikleri sitenizde nasıl uygulayabileceğinize dair ipuçları paylaşacağım.

WordPress Arama Nasıl Geliştirilir

Varsayılan WordPress arama özelliği çok güçlü değildir, bu nedenle sıralama algoritmasını özelleştirmek ve her aramada nelerin gösterileceğini kontrol etmek istiyorsanız, SearchWP eklentisini kullanmanızı öneririm.

Alternatif olarak, Google algoritmasını kullanan Google özel site aramasını da kullanabilirsiniz, ancak bunun dezavantajı Google’ın arama sayfalarınızda reklam gösterecek olmasıdır ki bu pek iyi görünmemektedir.

Sitenize Fırsatlar bölümünde veya Sözlük’te yaptığımız gibi canlı arama eklemek istiyorsanız, WordPress’te AJAX canlı aramanın nasıl ekleneceğine ilişkin bu öğreticiyi izleyin.

Yararlı bulabileceğiniz diğer WordPress arama eğitimleri, özel bir WordPress arama formunun nasıl oluşturulacağı ve WordPress menüsüne arama çubuğunun nasıl ekleneceğidir.

Yeni WordPress Mega Menü

İçerik keşfedilebilirliği teması doğrultusunda, eski WordPress açılır menülerimizi yeni çok sütunlu Mega Menüler haline getirdik.

Bu, yeni kullanıcılarımızın en iyi içeriğimizi hızlı ve kolay bir şekilde bulmalarını sağlar.

Ayrıca yeni ürünlerimizi, geliştirdiğimiz ücretsiz iş araçlarını ve daha fazlasını daha iyi vurgulamamızı sağlıyor.

WordPress’te Mega Menü Nasıl Eklenir

WPBeginner için özel bir çözüm oluşturmuş olsak da, üst sayfalarınızı daha iyi vurgulamak için WordPress’e nasıl mega menü ekleyeceğinize dair bu öğreticiyi takip edebilirsiniz.

WordPress Blok Editörü (Nihayet)

2019’da WordPress, içerik oluşturmak için süper güçlü blok düzenleyicisini (diğer adıyla Gutenberg) tanıttı.

Hemen kişisel blogumda kullanmaya başladım, ancak WPBeginner çok sayıda özel kodlanmış özelliğe sahip eski bir tema kullandığından, geçiş o kadar kolay olmadı.

Bu nedenle, son iki yıldır, tüm yeni web sitelerimiz WordPress blok düzenleyicisinin en son ve en iyi özelliklerine sahipken, WPBeginner sitesinde Klasik Düzen leyiciyi kullanmak zorunda kaldık.

Son olarak yeni temamızla birlikte artık WordPress blok editörünün tüm harika özelliklerini kullanabiliyoruz.

Örneğin, artık hiç kod yazmadan gerçekten harika bir “Biliyor muydunuz” bloğu ekleyebilirim:

Ayrıca WordPress blok editörünü kullanarak birkaç açılış sayfamızı tamamen yeniden tasarladık.

Örneğin, yeni ücretsiz WordPress blog kurulumu açılış sayfamıza göz atın.

Ayrıca, yeni geliştirdiğimiz ücretsiz araçlardan bazılarını vurgulamak için blok düzenleyiciyi kullanarak ücretsiz iş araçlarımızı yeniden tasarladık.

SeedProd ‘u gerektiğinde tamamen özel açılış sayfaları oluşturmak için kullanmaya devam edeceğiz çünkü uygun bir sürükle ve bırak WordPress sayfa oluşturucu.

Özel bir açılış sayfası oluşturmak için Gutenberg’in nasıl kullanılacağını öğrenmek eğlenceli olsa da, pazarlama ekiplerinin özel bir açılış sayfası oluşturabilmesi için kurulum için hala ÇOK fazla kodlama yapılması gerekiyor.

Oysa bir sayfa oluşturucu eklentisi kullandığınızda, pazarlama ekipleri, geliştirme ekibinden herhangi bir yardım almadan hızlı bir şekilde özel açılış sayfaları, huni düzenleri vb. oluşturabilir.

WordPress çekirdek ekibi tam site düzenleme özellikleri üzerinde çok çalışıyor, ancak SeedProd, Divi veya Beaver Builder gibi sayfa oluşturucularla elde ettiğiniz güçlü özelliklerle rekabet edebilmesi için hala çok fazla çalışmaya ihtiyacı var.

Bununla birlikte, blok editörü oldukça harika ve içeriğinizi geliştirmek için harika tasarım öğeleri oluşturmak için kullanabileceğiniz çok sayıda WordPress blok eklentisi var.

İşte yeni temamızın öne çıkan eklentileri vurgulamak için sahip olduğu bir başka harika blok:

SeedProd, WordPress için en acemi dostu sürükle ve bırak sayfa oluşturucusudur. 150’den fazla önceden hazırlanmış şablonla birlikte gelir ve tema oluşturucu özelliği tamamen özel WordPress temaları oluşturmanıza olanak tanır (herhangi bir kod olmadan). SeedProd’u Bugün Deneyin “

Gelecek blog yazılarında, içeriğimizin okunabilirliğini daha da artırmak için sahip olduğumuz daha fazla içerik tasarım bloğu göreceğinizden eminim.

Yoast’tan AIOSEO’ya geçiş

WPBeginner sitesi uzun süredir Yoast SEO eklentisinin çok eski ve özelleştirilmiş bir sürümünü (v 2.3.5) kullanıyordu.

Bir perspektiften bakacak olursak, şu anda 17. sürümdeler.

Yoast’ı güncellemek istemedim çünkü ekipleri SEO için önemli olduğunu düşündüğüm bazı temel özellikleri kaldırmıştı.

Ayrıca genel WordPress SEO alanının yenilik yapmayı bıraktığını hissettim.

Bu yüzden 2020’nin başında orijinal hepsi bir arada SEO eklentisi olan AIOSEO‘yu satın aldık ve ekibime onu tamamen yenilettirdim.

Ekibimizin yaptığı işle gurur duyuyorum ve rekabet avantajı elde etmek için ihtiyacınız olan tüm SEO özelliklerine sahip.

Blok editörü gibi, yeni web sitelerimiz AIOSEO’ya geçmeye başladı ve sıralamalarının iyileştiğini görmeye başladı, bu yüzden WPBeginner’da kullanmaya başlamak için istekliydim.

Şimdi, All in One SEO’nun en son ve en iyi SEO özelliklerini kullanıyoruz.

Artık videolarla içerik sıralamamızı yükseltmeye yardımcı olmak için video site haritası, içeriğimizin daha hızlı dizine eklenmesine yardımcı olmak için RSS site haritası, site SEO’muz üzerinde daha fazla ince ayar kontrolüne sahip olmak için gelişmiş SEO modülleri ve çok daha fazlası gibi özelliklere sahibiz.

Piyasadaki en iyi SEO eklentisi olduğuna gerçekten inanıyorum ve en önemlisi küçük işletmeler ve ajanslar için uygun fiyatlı.

Önümüzdeki haftalarda ayrıntılı bir özellik dökümü ile neden geçiş yaptığımız hakkında tam bir yazı yazmayı planlıyorum, ancak bu arada All in One SEO’nun ücretsiz sürümünü deneyebilir veya WPBeginner’da kullandığım tüm güçlü özelliklere sahip Pro sürüm üne göz atabilirsiniz.

WordPress Hız İyileştirmeleri

Çok sayıda çalışma, daha hızlı web sitelerinin kullanıcı deneyimini iyileştirdiğini, sitede kalma süresini ve genel dönüşümleri artırdığını göstermiştir.

Google’ın web sitesi hızını bir SEO sıralama faktörü haline getirmesinin nedeni de budur.

Eğer siteyi bir süredir takip ediyorsanız, performans optimizasyonu konusunda takıntılı olduğumu biliyorsunuzdur.

WPBeginner sitesi, muhteşem WordPress barındırma ortağımız SiteGround sayesinde zaten oldukça hızlıydı. Google bulut platformu üzerine inşa edilmiş son derece optimize edilmiş bir WordPress barındırma çözümü sunuyorlar.

Ve elbette WordPress’in en iyi hız uygulamalarını takip ediyorduk, ancak yeni tema tasarımımızla birkaç önemli hız iyileştirmesi yaptık.

İşte Google Sayfa Hızı sonuçlarımız:

İşte GTMetrix ve Pingdom’dan alınan ana sayfa sonuçları:

Ve yeni bölümler, ana sayfaya daha fazla içerik, daha geniş görseller vb. eklememize rağmen bu sonucu aldık.

Ve siz sormadan söyleyeyim, WPBeginner sitesinde şu anda 68 aktif eklenti var.

Peki, sayfa boyutunu küçültüp her şeyi daha hızlı hale getirirken siteye daha fazla içerik eklemeyi nasıl başardığımı merak ediyor olabilirsiniz.

Artık ihtiyacımız olmadığını düşündüğüm şeyleri kaldırdım ve bunlar gerçekten daha fazla web sitesi sahibinin de yapmayı düşünmesini istediğim şeyler.

Bu sadece sitenizi hızlandırarak SEO sıralamalarına yardımcı olmakla kalmayacak, aynı zamanda genel bant genişliği tüketiminizi azaltacak, maliyetleri düşürecek ve web sitenizin karbon ayak izini iyileştirecektir.

WordPress Yorumlarından Gravatar’ı Devre Dışı Bırakma

WordPress, Küresel Olarak Tanınan Avatarlar’ın kısaltması olan Gravatar adlı yerleşik bir 3. taraf hizmetiyle birlikte gelir.

Bu, bir kullanıcı WordPress sitenize yorum bıraktığında profil fotoğrafını veya avatarını görmenizi sağlar.

Buradaki zorluk, web sitenizin ziyaretçilerinin bir Gravatar hesabı oluşturmasını gerektirmesidir ki çoğu kullanıcı bunu yapmaz. Bunun yerine web siteniz sadece iyi görünmeyen gri gizemli adam avatarını yükler.

Diyelim ki 50 yorum alan popüler bir blog yazınız var ve kullanıcıların yalnızca %10’unun Gravatar resmi var, %90’ının ise yok. Bu, sayfanızın yüklediği ve içeriğe gerçekten önemli bir değer katmayan 50 ek görsel anlamına gelir.

Bu yüzden birçok popüler blog Gravatar’ı devre dışı bırakmaya başladı ve biz de WPBeginner’da aynısını yapıyoruz.

Bu basit değişiklik, sayfa yükleme sürelerimizi ve site hız puanımızı büyük ölçüde iyileştirdi.

3. Taraf Özel Yazı Tiplerini Kaldırma

Dürüst olacağım, geçmişte özel yazı tipleri hakkında iki kez düşünmemiştim.

Bu normal hissettiren bir şeydi ve en azından hızlı bir internete sahip olacak kadar şanslıysanız sitenin tipografi açısından iyi görünmesini sağlıyordu.

Eski WPBeginner temasında, Proxima Nova adlı özel bir Adobe yazı tipi, FontAwesome adlı popüler bir simge yazı tipi ve OptinMonster açılır pencerelerimiz Google yazı tiplerinden Source Sans Pro kullanıyordu.

Siteyi internet kalitesinin düşük olduğu uzak bir konumdan ziyaret ettiğimde, bu yazı tiplerinin kullanıcı deneyimi üzerinde ne kadar büyük bir performans etkisi olduğunu gerçekten fark ettim.

Yeni tasarımımızda bu sorunu çözmek istedim, böylece gelişmekte olan ülkelerdeki öğrencilerin ve işletme sahiplerinin WPBeginner’a erişmelerini, WordPress öğrenmelerini ve çevrimiçi varlıklarını büyütmelerini kolaylaştırabiliriz.

Yeni WPBeginner v6 teması, uzun bir yol kat etmiş olan varsayılan Sistem Yazı Tiplerini kullanıyor. Tüm cihazlarda harika görünüyorlar ve elbette süper hızlılar.

Stilize edilmemiş metnin yanıp sönmesi yok (FOUT), kümülatif düzen kayması yok (CLS) ve bloklama süresi önemli ölçüde azaldı.

WordPress panosuna giriş yaparsanız veya Github’ı kullanırsanız, yazı tiplerimizin benzer olduğunu fark edeceksiniz çünkü bu platformların her ikisi de sistem yazı tiplerine daha önce geçiş yaptı.

Özel yazı tiplerini kaldırmak tüm ticari web siteleri için uygun bir çözüm olmayabilir, ancak hız söz konusu olduğunda hem tasarımcıların hem de geliştiricilerin kesinlikle dikkat etmesi gereken bir şey olduğuna inanıyorum.

Yardımcı olabilecek bazı en iyi uygulamalar:

• Başlık ve içerik için iki ayrı yazı tipi kullanmak yerine, her ikisi için de aynı yazı tipini kullanmayı düşünün.
• İnce, normal, yarı kalın, kalın, ekstra kalın, siyah ve ardından tüm bunların italik versiyonları gibi birden fazla farklı yazı tipi ağırlığı ve stili kullanmak yerine, yazı tipi ağırlıklarını yalnızca ikiye indirmeyi düşünün: normal ve kalın.
• FontAwesome veya başka bir simge yazı tipi kitaplığının tamamını yüklemek yerine, ihtiyacınız olan simgelerin doğrudan SVG’lerini eklemeyi düşünün.

OptinMonster’da Özel Yazı Tiplerini Devre Dışı Bırakma

Tema tasarlanıp kodlandıktan sonra, fontlarla ilgili bir sorunu daha çözmem gerekiyordu.

Web sitesi açılır pencerelerim ve e-posta abonelik formlarım OptinMonster kullanıyor ve hala Google yazı tiplerini yüklüyorlardı.

Artık OptinMonster’ı devre dışı bırakmak bir seçenek değildi çünkü daha fazla e-posta abonesi edinmeme ve web sitesi dönüşümlerimizi artırmama yardımcı oluyor.

Neyse ki, bu benim şirketlerimden biri, bu yüzden geliştirme ekibinden Google fontlarını devre dışı bırakmak için bir çözüm istedim.

Bu özelliği isteyen ilk kişi ben değilmişim ve OptinMonster’ın yalnızca Google yazı tiplerini devre dışı bırakmakla kalmayıp aynı zamanda istediğiniz herhangi bir özel web yazı tipini yüklemenize olanak tanıyan bir API çözümü zaten varmış.

Teknoloji konusunda oldukça bilgiliyim ve ekibin dokümantasyonda paylaştığı küçük parçacığı uygulayabilirim, ancak müşterilerimizin çoğunun böyle olmadığını biliyorum.

Şimdi ekibimiz bu özelliği kampanya oluşturucunun içine yerleştirdi (kodlama gerekmiyor).

Ancak kodlarla aranız iyiyse ve bu ayarı her kampanya için manuel olarak kapatmak istemiyorsanız, benim kullandığım yöntemi takip edebilirsiniz.

OptinMonster’ın sitenizdeki herhangi bir web yazı tipini yüklemesini devre dışı bırakmak için önce aşağıdaki JS kod parçacığını ekleyin:

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) {
event.detail.Scripts.enabled.fonts= false;
});
</script>

Ardından, style.css dosyanıza aşağıdaki CSS’yi ekleyin:

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

Tabii ki yazı tiplerini web sitenizin yazı tipleriyle eşleşecek şekilde değiştirmeyi unutmayın. Bu, temel olarak yukarıdaki yazı tipi ailesini sitenize yüklenen tüm OptinMonster kampanyalarına uygulayacaktır.

W3 Total Cache’den WP Rocket’a geçildi

Uzun süredir WPBeginner üzerinde W3 Total Cache eklentisinin oldukça özelleştirilmiş bir yapılandırmasını çalıştırıyordum.

İşi halletse de, tüm ürün sitelerimizde kullandığımız WP Rocket ile boy ölçüşemezdi.

Bu yüzden bu yeniden tasarımla birlikte, en önemlisi güvenilir bir önbellek ön yükleme ve dosya küçültme olmak üzere ÇOK sayıda harika web sitesi hız özelliği ile birlikte gelen WP Rocket’e geçtim.

Web sitenizin hızını artırmak istiyorsanız bu eklenti çok önemlidir.

Kısa bir not: Satış ortaklığı bağlantılarınızı yönetmek için ThirstyAffiliates veya Pretty Links kullanıyorsanız, bunları önbelleğe alınmaktan çıkardığınızdan emin olun.

Gelişmiş Kurallar sekmesine gidin ve URL’leri Asla Önbelleğe Alma ayarının altına satış ortağı slug’ınızı ekleyin.

Bunu yapmazsanız ve önbellek ön yüklemesini etkinleştirdiyseniz, WP Rocket, dahili bağlantılar gibi göründükleri için bağlı kuruluş bağlantılarınızı önbelleğe almaya çalışacaktır.

Bu, tıklama sayılarınızı yapay olarak şişirebilir ve satış ortağı metriklerinizi etkileyebilir.

WP Rocket ekibinden popüler satış ortaklığı eklentilerini otomatik olarak tespit edip edemeyeceklerini ve daha acemi dostu hale getirmek için hariç tutulan URL etiketini önceden doldurup dolduramayacaklarını görmelerini istedim ve umarım öneriyi uygularlar.

Sırada Ne Var?

2022 için büyük planlarım var, bu yüzden yeni site tasarımını bu yıl bitmeden yayına almak istedim.

WPBeginner’da birçoğunuzun son 2 yıldır sorduğu yepyeni bir bölüm açmayı planlıyoruz.

Yakında geliyor ve 2022’nin 2. çeyreğinin başında piyasaya sürmeyi umuyorum.

Ayrıca, sizler için daha iyi bir genel okuma deneyimi yaratmak için yeni blok editöründe daha fazla deneme yapmayı planlıyorum.

Bunun dışında, 2022’de orada gerçekten harika şeyler yapacağımız için YouTube kanalımıza bir göz atın.

Her zaman olduğu gibi, yıllar boyunca devam eden desteğiniz ve geri bildiriminiz için hepinize teşekkür etmek istiyorum.

Saygılarımla,
Syed Balkhi
WPBeginner’ın Kurucusu