WPBeginner v6 – Yeni Sitemizin Tasarımının Perde Arkası

Son birkaç hafta içinde WPBeginner'ı ziyaret ettiyseniz, muhtemelen yeni bir web sitesi tasarımı yaptığımızı fark etmişsinizdir. Eskisine birçok benzerliği olsa da, arka planda çok şey değişti.

Bültenimde de söz verdiğim gibi, yeniden tasarımımızın arkasındaki düşünce sürecini, öğrendiklerimizi, sitedeki yenilikleri ve en önemlisi öğrenimlerimizin bazılarını web sitenizi iyileştirmek için nasıl kullanabileceğinizi paylaşmak istiyorum.

Küçük Bir Arka Plan

WPBeginner'ı 2009'da başlattım ve çoğu yeni içerik üreticisi gibi, ilk 3 yılda web sitemizin tema tasarımını dört kez değiştirdim.

İşletmem büyüdükçe, web sitesi yeniden tasarımlarının ana görevimizi yerine getirmek için daha iyi kullanılabilecek çok zaman ve kaynak aldığını fark ettim:

So I made it a point to dedicate all my focus on our core mission and our business grew tremendously.

WPBeginner'ın son yeniden tasarımı 2016'da yayına alındı ve o zamandan beri çok yol kat ettik.

Son 5 yılda neler oldu:

• WPBeginner blogunda binden fazla ücretsiz WordPress öğreticisi oluşturduk ve YouTube Kanalımızda yüzlerce yeni video öğreticisi ekledik.
• Facebook'ta WPBeginner Engage topluluğumuzu başlattık ve bu topluluk şu anda 80.000'den fazla üyesiyle en büyük WordPress Facebook grubudur (katılmak ücretsizdir).
• WPBeginner Growth fonunu, MemberPress, Pretty Links, Formidable Forms, Uncanny Automator ve diğer 6 tanesi dahil olmak üzere en sevdiğimiz WordPress eklentilerine yatırım yapmak için başlattık.
• İki yeni WordPress eklentisi başlattık: TrustPulse, bir WordPress sosyal kanıt eklentisi ve RafflePress, güçlü bir WordPress çekiliş ve yarışma eklentisi.
• Ünlü AIOSEO (WordPress için hepsi bir arada SEO eklentisi), SeedProd (sürükle & bırak WordPress site oluşturucu), Smash Balloon (#1 sosyal medya akışları eklentisi), PushEngage (web sitesi anlık bildirim eklentisi) ve AffiliateWP (WordPress için bağlı kuruluş yönetim 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ün 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 platformu ve altyapı eklentisi edindik.

Toplamda eklentilerimiz artık 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.

Bunların hepsi harika başarılar olsa da, misyonumuzu geliştirmeye ve hizmet etmeye devam edebilmemiz için ele alınması gereken yeni zorluklarımız var.

This brings me to WPBeginner v6.

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

WPBeginner, basit bir öğretici blog olarak başladı, ancak gerçekten de WordPress'in Vikipedi'si haline geldi.

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

Okuyucularımızın WordPress sorularına hızlıca yanıt bulmalarına yardımcı olmak için yeni ana sayfamızda Arama özelliğine büyük önem verdik.

İçerik kütüphanemizi aramak için geri dönen bir ziyaretçi veya WordPress'e yeni başlayan yeni bir okuyucu olun, WPBeginner'ın ana sayfası artık aradığınızı bulmanızı kolaylaştırıyor.

Tüm tek gönderi sayfalarındaki kenar çubuğumuzda ve arama simgesine tıkladığınızda web sitemizin üstbilgisinde benzer bir arama widget'ı da göreceksiniz.

WPBeginner'ın teknolojiyle arası iyi olmayan kullanıcılar için en büyük WordPress kaynak sitesi haline gelmesinin nedenlerinden biri, karmaşık WordPress konularını anlaşılır bir dille, adım adım açıklamamızdır.

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

As a WPBeginner user, you get exclusive access to the best WordPress discounts on popular plugins, premium themes, hosting, and other marketing tools.

Ekibimiz sizin için en iyi fırsatları müzakere etmek için gerçekten harika bir iş çıkardı ve bu bölüm 100'den fazla kupon ve fırsata sahip olacak şekilde oldukça büyüdü.

Popüler kullanıcı isteği üzerine, en iyi WordPress ürünlerindeki en iyi fırsatı hızlıca bulabilmeniz için Teklifler bölümümüze Canlı Arama ekledik.

2022'ye girerken, bizim için büyük bir öncelik içerik keşfedilebilirliğidir.

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

I believe that in 2022, user experience optimization (UXO) is going to play a critical role in SEO.

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 sitenizde benzer özellikleri nasıl uygulayabileceğinize dair ipuçları paylaşacağım.

WordPress Aramasını Nasıl İyileştirirsiniz

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

Alternatif olarak, Google algoritmasını kullanan Google özel site aramayı da kullanabilirsiniz, ancak dezavantajı Google'ın arama sayfalarınızda reklam göstermesi, bu da pek iyi görünmez.

Sitemizde, Anlaşmalar bölümünde veya Sözlük'te yaptığımız gibi canlı arama eklemek istiyorsanız, WordPress'te AJAX canlı arama ekleme eğitimini buradan takip edin.

Yardımcı olabilecek diğer WordPress arama eğitimleri, özel bir WordPress arama formu oluşturma ve WordPress menüsüne arama çubuğu ekleme hakkındadır.

Yeni WordPress Mega Menü

İçerik keşfedilebilirliği temasına uygun olarak, eski WordPress açılır menülerimizi yeni çok sütunlu Mega Menülere yükselttik.

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

Ayrıca, yeni ürünlerimizi, oluşturduğumuz ücretsiz iş araçlarını ve daha fazlasını daha iyi vurgulamamıza olanak tanır.

WordPress'e Mega Menü Nasıl Eklenir

Although we’ve built a custom solution for WPBeginner, you can follow this tutorial on how to add a mega menu in WordPress to better highlight your top pages.

WordPress Blok Düzenleyici (Sonunda)

2019'da WordPress, içerik oluşturmak için süper güçlü blok düzenleyiciyi (Gutenberg olarak da bilinir) tanıttı.

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

Son iki yıldır, WPBeginner sitesinde Klasik Düzenleyici'yi kullanmak zorunda kaldık, oysa daha yeni web sitelerimizin tümü WordPress blok düzenleyicisinin en son ve en harika özelliklerini aldı.

Sonunda yeni temamızla, WordPress blok düzenleyicisinin tüm harika özelliklerini kullanabiliyoruz.

For example, now I can add a really cool “Did You Know” block without writing any code:

Ayrıca, WordPress blok düzenleyicisini 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.

Blok düzenleyiciyi kullanarak, oluşturduğumuz bazı yeni ücretsiz araçları öne çıkarmak için ücretsiz iş araçlarımızı da yeniden tasarladık.

Gerekli olduğunda tamamen özel açılış sayfaları oluşturmak için, bunun uygun bir sürükle ve bırak WordPress sayfa oluşturucu olması nedeniyle SeedProd kullanmaya devam edeceğiz.

Gutenberg'i özel açılış sayfaları oluşturmak için kullanmayı öğrenmek eğlenceli olsa da, pazarlama ekiplerinin özel bir açılış sayfası oluşturabilmesi için kurulum öncesinde HALA ÇOK fazla kodlama yapılması gerekiyor.

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

WordPress core team is working hard on the full-site editing features, but it still needs a lot of work before it can compete with the powerful features that you get with page builders like SeedProd, Divi, or Beaver Builder.

Bununla birlikte, blok düzenleyici oldukça harika ve içeriğinizi geliştirmek için harika tasarım öğeleri oluşturmak üzere kullanabileceğiniz pek çok WordPress blok eklentisi bulunmaktadır.

Yeni temamızın öne çıkan eklentileri vurgulamak için sunduğu harika bir blok daha:

SeedProd, WordPress için en başlangıç dostu sürükle ve bırak sayfa oluşturucudur. 150'den fazla hazır şablonla birlikte gelir ve tema oluşturucu özelliği, tamamen özel WordPress temaları (kodsuz) oluşturmanıza olanak tanır. SeedProd'u Bugün Deneyin »

Gelecek blog yazılarında, içerik okunabilirliğimizi daha da artırmak için kullanmamız gereken daha fazla içerik tasarım bloğu göreceğinizden eminim.

Yoast'tan AIOSEO'ya Geçiş

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

Perspektif olarak, şu anda 17. sürümdeler.

Yoast'ı güncellemek istemedim çünkü ekibi 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 nedenle 2020'nin başında, orijinal hepsi bir arada SEO eklentisi olan AIOSEO'yu satın aldım ve ekibim onu tamamen yeniden tasarladı.

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

Blok düzenleyici gibi, daha 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 kullanmak için sabırsızlanıyordum.

Şimdi, Hepsi Bir Arada SEO'dan en yeni ve en iyi SEO özelliklerini kullanıyoruz.

Artık video site haritası gibi özelliklerimiz, videolarla içerik sıralamalarımızı artırmaya yardımcı oluyor, içeriklerimizin daha hızlı indekslenmesine yardımcı olan RSS site haritası, site SEO'muz üzerinde daha ince ayarlı kontrol sahibi olmamızı sağlayan gelişmiş SEO modülleri ve çok daha fazlası.

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

Neden geçiş yaptığımız hakkında önümüzdeki haftalarda ayrıntılı bir özellik dökümüyle tam bir yazı yazmayı planlıyorum, ancak şimdilik 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

Sayısız çalışma, daha hızlı web sitelerinin kullanıcı deneyimini iyileştirdiğini, sitede geçirilen süreyi artırdığını ve genel dönüşümleri yükselttiğini göstermiştir.

Google'ın web sitesi hızını bir SEO sıralama faktörü yapmasının nedeni de budur.

Şimdi siteyi bir süredir takip ediyorsanız, performans optimizasyonuna takıntılı olduğumu biliyorsunuzdur.

WPBeginner sitesi, harika WordPress barındırma ortağımız SiteGround sayesinde zaten oldukça hızlıydı. Google bulut platformu üzerine kurulu, yüksek düzeyde optimize edilmiş bir WordPress barındırma çözümü sunuyorlar.

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

Google Sayfa Hızı sonuçlarımız:

İşte GTMetrix ve Pingdom'dan 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 elde ettik.

Ve sormadan önce, WPBeginner sitesinde şu anda 68 aktif eklenti bulunuyor.

Peki, siteye daha fazla içerik eklemeyi, sayfa boyutunu küçültmeyi ve her şeyi daha hızlı hale getirmeyi nasıl başardığımı merak ediyor olabilirsiniz?

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

Bu sadece sitenizin hızlanmasına yardımcı olmakla kalmayacak, SEO sıralamalarına katkıda bulunacak, 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, Gravatar olarak bilinen yerleşik bir 3. taraf hizmetiyle birlikte gelir.

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

Zorluk, web sitesi ziyaretçilerinizin bir Gravatar hesabı oluşturmasını gerektirmesidir ki çoğu kullanıcı bunu yapmaz. Bu nedenle web siteniz yalnızca iyi görünmeyen gri gizemli adam avatarını yükler.

Şimdi, 50 yorumu olan popüler bir blog yazınız olduğunu ve kullanıcıların yalnızca %10'unun bir Gravatar görüntüsüne sahip olduğunu, %90'ının ise olmadığını varsayalım. Peki, bu, sayfanızın yüklediği ve içeriğe önemli bir değer katmayan 50 ek resim demektir.

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ı önemli ölçüde iyileştirdi.

3. Taraf Özel Fontları Kaldırma

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

Bu, en azından şanslıysanız ve hızlı bir internetiniz varsa, tipografi açısından sitenin iyi görünmesini sağlayan normal bir şeydi.

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

Siteyi zayıf internet kalitesine sahip uzak bir konumdan ziyaret ettiğimde, bu yazı tiplerinin kullanıcı deneyimi üzerindeki performans etkisinin ne kadar büyük olduğunu gerçekten fark ettim.

Yeni tasarımımızda bu sorunu çözmek istedim, böylece gelişmekte olan ülkelerdeki öğrenciler ve işletme sahipleri WPBeginner'a kolayca erişebilir, WordPress'i öğrenebilir ve çevrimiçi varlıklarını büyütebilirler.

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 tabii ki süper hızlılar.

Stilize edilmemiş metin parlaması (FOUT) yok, kümülatif düzen kayması (CLS) yok ve engelleme süresi önemli ölçüde azaldı.

WordPress paneline giriş yaparsanız veya Github kullanırsanız, her iki platform da daha önce sistem yazı tiplerine geçtiği için yazı tiplerimizin benzer olduğunu fark edeceksiniz.

Özel yazı tiplerini kaldırmak tüm işletme web siteleri için geçerli bir çözüm olmasa da, hız söz konusu olduğunda hem tasarımcıların hem de geliştiricilerin dikkat etmesi gerektiğine inandığım bir şey kesinlikle.

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 gibi birden çok farklı font ağırlığı ve stili kullanmak yerine, font 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 tasarlandıktan ve kodlandıktan sonra, fontlarla ilgili bir sorunu daha çözmem gerekiyordu.

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

Şimdi OptinMonster'ı devre dışı bırakmak bir seçenek değildi, çünkü daha fazla e-posta abonesi kazanmama ve web sitemizin dönüşümlerini artırmama yardımcı oluyor.

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

Turned out, I wasn’t the first one who requested this feature, and OptinMonster already had an API solution that allows for not only disabling Google fonts, but also loading any custom web font that you want.

Teknoloji konusunda oldukça bilgiliyim ve belgede paylaşılan küçük kodu uygulayabilirim, ancak müşterilerimizin çoğunun bu yetenekte olmadığını biliyorum.

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

Ancak kod konusunda rahatsanız ve bu ayarı her kampanya için manuel olarak kapatmak istemiyorsanız, kullandığım hileyi takip edebilirsiniz.

Öncelikle OptinMonster'ın sitenizde herhangi bir web yazı tipini yüklemesini devre dışı bırakmak için aşağıdaki JS kod parçasını ekleyin:

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

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

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

Elbette, yazı tiplerini web sitenizin yazı tipleriyle eşleşecek şekilde değiştirmeyi unutmayın. Bu, yukarıdaki font-family'yi sitenizde yüklenen tüm OptinMonster kampanyalarına uygulayacaktır.

W3 Total Cache'ten WP Rocket'e Geçildi

Uzun zamandır WPBeginner'da W3 Total Cache eklentisinin oldukça özelleştirilmiş bir yapılandırmasını çalıştırıyordum.

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

Bu yeniden tasarımla, en önemlisi güvenilir bir önbellek ön yüklemesi ve dosya küçültme gibi harika web sitesi hızı özelliklerine sahip WP Rocket'a geçtim.

Web sitesi hızınızı iyileştirmek istiyorsanız bu eklenti çok önemlidir.

Eğer bağlı kuruluş bağlantılarınızı yönetmek için ThirstyAffiliates veya Pretty Links kullanıyorsanız, önbelleğe alınmalarını engellediğinizden emin olun.

Gelişmiş Kurallar sekmesine gidin ve önbelleğe alınmayacak URL'ler ayarlarına bağlı kuruluş takma adınızı ekleyin.

Bunu yapmazsanız ve önbellek ön yüklemesi etkinse, WP Rocket ortaklık bağlantılarınızı dahili bağlantılar gibi göründükleri için önbelleğe almaya çalışacaktır.

Bu, tıklama sayılarınızı yapay olarak şişirebilir ve bağlı kuruluş metriklerinizi etkileyebilir.

WP Rocket ekibinden, popüler ortaklık eklentilerini otomatik olarak algılayıp daha başlangıç dostu hale getirmek için hariç tutulan URL etiketini önceden doldurup dolduramayacaklarını sordum ve öneriyi uygulayacaklarını umuyorum.

Sırada Ne Var?

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

WPBeginner'da son 2 yıldır birçok kişinin hakkında sorduğu yepyeni bir bölüm başlatmayı planlıyoruz.

Yakında geliyor ve 2022'nin 2. çeyreğinin başına kadar yayına almayı umuyorum.

Ayrıca, sizin için daha iyi bir genel okuma deneyimi oluşturmak için yeni blok düzenleyicisinde daha fazla deney yapmayı planlıyorum.

Bunun dışında, YouTube kanalımızı takipte kalın, çünkü 2022'de orada gerçekten harika şeyler yapacağız.

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

Saygılarımla,
Syed Balkhi
WPBeginner Kurucusu