1) Neden Yeni Bir Web Sitesi Oluşturduk ve Sadece "Temaları Değiştiremedik"

Değişim ihtiyacını ilk belirlediğimizde, görev basit görünüyordu: "En üst bloğu değiştir ve harekete geçme çağrısını daha etkili hale getir." İlk bakışta bu hızlı bir çözüm gibi görünebilir, ancak kısa sürede bu küçük görevin sitenin yapısı ve tasarımıyla ilgili çok daha büyük temel sorunları ortaya çıkardığını fark ettik. Sorun sadece bir blok değildi; elden geçirilmesi gereken sitenin tüm mimarisiydi.

Web sitemiz zamanla, birleştirici bir tema veya şablon olmadan, çeşitli tasarımlar ve düzenler kullanılarak eklenen farklı sayfalarla oluşturulmuştu. Her sayfa tasarımında benzersizdi, bu yaratıcı gelebilir ancak önemli bir soruna yol açtı: tutarsızlık. Sadece en üstteki blok için yeni bir tasarım yapıp sitenin geri kalanını olduğu gibi bırakırsak, bu bloğu 700'den fazla sayfa ve gönderide manuel olarak güncellemek anlamına gelirdi. Daha da kötüsü, bu manuel işlemi gelecekte değişiklik yapmak istediğimiz her seferinde tekrarlamak zorunda kalacaktık. Her birinin en son güncellemelere sahip olduğundan emin olmak için yüzlerce sayfayı taramanın ne kadar verimsiz olduğunu hayal edin. Eski siteyle çalışmaya devam etmenin sürdürülebilir olmayacağı kısa sürede anlaşıldı.

Her bir sayfayı güncellemenin lojistiğinin ötesinde, genel kullanıcı deneyimini de göz önünde bulundurmamız gerekiyordu. Günümüzde kullanıcılar bir web sitesini ziyaret ettiklerinde kusursuz, tutarlı deneyimler bekliyor. Bir sayfayı aşağı kaydırdıklarında ve tasarımın tutarsız olduğunu gördüklerinde (her blok farklı stiller kullanıyor) bu kopuk ve profesyonel olmayan bir izlenim yaratıyor. Daha da kötüsü, bir kullanıcı bir sayfadan diğerine geçtiğinde düzenin ve tasarımın tamamen farklı olduğunu fark ettiğinde, bu bir düzensizlik hissini pekiştiriyor.

Tutarsızlık düzenin ötesine uzanıyordu. Sitedeki görsellerin çoğu güncelliğini yitirmişti, kötü tasarlanmıştı veya hatta sinir ağları tarafından uygunsuz bir şekilde oluşturulmuştu. Bu görseller modern tasarım standartlarıyla uyumlu değildi ve bunları değiştirmek de bir başka zorlu görevdi. Kötü görsellerin kullanımı sitenin genel kalitesini kötü yansıtıyordu ve kullanıcılarda sunduğumuz ürün veya hizmet hakkında olumsuz bir izlenim bırakıyordu.

Elementor gibi bir araç kullanarak siteyi kapsamlı bir şekilde güncellemenin basit bir yolu yoktu. Her sayfa ve blok kendi satır içi stillerini içeriyordu, bu da değişikliklerin küresel olarak yapılamayacağı anlamına geliyordu. Sitenin stilini güncellemek isteseydik, her bir sayfayı tek tek inceleyip her bloğu manuel olarak güncellememiz gerekirdi, bu da zaman alıcı ve verimsiz olurdu. Bunu aklımızda tutarak, tek çözümümüzün sıfırdan yeni bir web sitesi oluşturmak olduğu ortaya çıktı. Bu, aynı URL'leri koruyarak ancak yeni, tutarlı ve kolayca güncellenebilir bir tasarımla tüm içeriği aktarmamıza olanak tanırdı.

2) Neden Elementor'u Kullanmamaya Karar Verdik

Elementor, WordPress için en popüler sayfa oluşturucularından biridir. Yüzeysel olarak, hızlı ve kolay sayfa oluşturma olanağı sağlayan harika bir araç gibi görünüyor. Ancak, onunla kapsamlı bir şekilde çalıştıktan sonra, Elementor'dan uzaklaşmaya ve bunun yerine özel olarak oluşturulmuş bir web sitesi seçmeye karar vermemize neden olan birkaç sınırlamayla karşılaştık.

Elementor'un Sınırlamaları ve Zorlukları:

1. Hatalar ve Aksaklıklar : Elementor birçok kullanışlı özellik sunsa da teknik sorunları da yok değil. Örneğin, bir sayfayı kopyalayıp düzenlemeye çalıştığımızda, yeni sayfa genellikle herhangi bir değişiklik yapmadan önce bile orijinalinden farklı görünüyordu. Öğelerin nasıl görüntülendiğiyle ilgili sık sık hatalar oluyordu, örneğin "maksimum resim genişliği" özelliğinin düzgün çalışmaması gibi. Bu aksaklıklar, sayfalar arasında tutarlı bir stil sağlamayı zorlaştırıyordu.
2. Çok Fazla Yaratıcı Özgürlük, Tutarsızlığa Yol Açıyor : Elementor'un en önemli satış noktalarından biri her şeyi özelleştirebilme yeteneğidir. Ancak bu esneklik, özellikle sitede birden fazla editör çalıştığında iki ucu keskin bir kılıç olabilir. Profesyonel olmayanların istemeden tutarsız tasarımlara sahip sayfalar oluşturması kolaydır. Örneğin, editörlerin pembe düğmelerde pembe metin kullandığını veya arka plana uçan turuncu üçgenler eklediğini gördük; bu da karmaşık ve kafa karıştırıcı bir tasarımla sonuçlandı. Yerinde katı bir tasarım sistemi olmadan, tutarlı bir görsel kimliği korumak imkansız hale geldi.
3. Gelişmiş İşlevsellik için Sınırlı Özelleştirme : Elementor, metin ve resimlerle temel sayfa oluşturmada mükemmel olsa da, özel işlevsellik eklemeniz gerektiğinde daha zor hale geliyor. Genellikle kendimizi, daha karmaşık özellikler için özelleştirmesi zor olan yerleşik bloklarla sınırlı bulduk. İhtiyaçlarımız temel düzenlerin ötesine geçtikçe, Elementor'un sınırlamaları giderek daha belirgin hale geldi.
4. Şişkin Kod ve Performans Sorunları : Elementor'un sayfa oluşturma yöntemi, öğelerin aşırı iç içe geçmesine neden olur. Örneğin, Elementor otomatik olarak birden fazla
   diğerlerinin içindeki konteynerler

   her biri kendi stil kümesine sahip öğeler. Bu, yükleme hızını, sayfa performansını ve nihayetinde web sitesinin SEO sıralamasını olumsuz etkileyen şişkin bir yapıyla sonuçlanır. Hız testleri yaptığımızda, sonuçlar sürekli olarak zayıftı ve bunun büyük kısmı Elementor tarafından üretilen ağır koddan kaynaklanıyordu.
5. A/B Testi Yetenekleri Yok : Günümüzün dijital ortamında, kullanıcı deneyimini optimize etmek için A/B testi olmazsa olmazdır. Ancak, Elementor sitenin farklı sürümlerini farklı kullanıcılara gösterme yeteneği sunmaz. Herkes aynı siteyi görür, bu da renkler, düğme şekilleri ve arka plan görüntüleri gibi tasarım öğelerini test etme ve ince ayar yapma yeteneğimizi sınırlar. Bu işlevsellik olmadan, siteyi gerçek kullanıcı davranışına göre optimize edemezdik.
6. Veritabanı Şişkinliği : Elementor'un belki de en önemli dezavantajlarından biri stilleri ve içeriği nasıl ele aldığıdır. Elementor, stilleri, iç içe geçmiş yapıları ve diğer gereksiz etiketleri veritabanındaki içerikle karıştırılmış şekilde depolar. Bu, Elementor devre dışı bırakıldığında veya kaldırıldığında bile temizlenmeyen şişkin bir veritabanına yol açar. Sonuç olarak, yeni bir temaya veya çerçeveye geçmek sorunu çözmez - bu stiller sayfalara gömülü kalır ve sorunlara neden olmaya devam eder.

Tüm bu zorluklar aklımızdayken, daha sağlam bir çözüme ihtiyacımız olduğu açıkça ortaya çıktı. Elementor olmadan yeni, bağımsız bir web sitesi inşa etme kararı aldık ve daha sürdürülebilir ve esnek bir yaklaşım seçtik.

3) Yeni Sitede Sayfa Nasıl Oluşturulur

Yeni siteyi sıfırdan inşa etmek bize sayfalar oluşturmak için temiz ve akıcı bir süreç oluşturma fırsatı verdi. Yeni sistemde, bir sayfa oluşturmak basittir:

1. WordPress yönetici paneline giriş yapın ve Sayfalar -> Yeni Sayfa Ekle'ye tıklayın.
2. Karşınıza metin yazabileceğiniz veya yapıştırabileceğiniz, bağlantı ekleyebileceğiniz ve resim yükleyebileceğiniz standart WordPress düzenleyicisi çıkacak.

Bu süreç basit ama esnektir. Elementor'un karmaşık blok sistemine güvenmek yerine, WordPress'teki içerik düzenleyicisi çok daha temizdir ve hızlı güncellemeler ve kolay özelleştirmeye olanak tanır. Düzenleyicinin altında, tüm sitede tutarlılığı korumak için önceden yapılandırılmış Gelişmiş Özel Alanlar (ACF) için ayarlar bulunur.

ACF, sayfanın her bölümü için başlık, metin, resim ve düğme etiketlerini kolayca ayarlayabileceğiniz İçerik 1…İçerik 15 gibi bloklarla esnek içerik bölümleri oluşturmamızı sağlar. Bu bloklar, resimlerin ve metnin konumunu otomatik olarak değiştirerek düzenin manuel ayarlamalar gerektirmeden görsel olarak ilgi çekici kalmasını sağlar.

Görseller için, sitenin ana renklerine otomatik olarak bir degrade uygulayan bir renk eşleştirme sistemi uyguladık. Bu, tüm görsellerin genel estetikle uyumlu olmasını sağlar. Renklerin bozulmadan kalması gereken logolar veya ekran görüntüleri için, degradeyi geçersiz kılan bir "renkleri koru" seçeneği vardır.

Bu sistem, tüm sayfalarda tasarım tutarlılığını korurken içerik yönetimini basitleştirir.

4) Yeni Bir Gönderi Nasıl Oluşturulur

Yeni sitede gönderi oluşturma, sayfa oluşturmayla aynı basitleştirilmiş süreci takip ediyor; sadece birkaç önemli fark var:

• Yazılar, sayfalardan ayırt edilmelerini sağlayan ../blog/.. içeren URL'lere sahiptir.
• Sağ taraftaki kenar çubuğunda, otomatik olarak son üç makaleyi gösteren bir blok, blogun dinamik ve ilgi çekici kalmasına yardımcı oluyor.

Tüm gönderilerin şablonu, her blog gönderisinin yapısını ve düzenini yöneten template-parts/content/content-single.php dosyasında bulunur. Bu tutarlı şablon, kolay güncellemelere olanak tanır ve tüm gönderilerin aynı tasarım yönergelerine uymasını sağlar.

5) Gelişmiş Özel Alanlar (ACF)

ACF, yeni web sitemizin geliştirilmesinin önemli bir parçası oldu. WordPress yönetici paneli üzerinden kolayca yönetilebilen özel alanlar oluşturmamızı sağlıyor. content_1 gibi alanlar PHP kodunda referans alınarak her sayfa ve gönderi için doğru içeriği dinamik olarak çekmemizi sağlıyor.

Bu esneklik, siteyi etkin bir şekilde yönetebilmemizi ve güncelleyebilmemizi sağlarken, gerektiğinde özelleştirmeye yer bırakmamız açısından kritik öneme sahiptir.

6) A/B Testi

Yeni sitede yaptığımız en önemli iyileştirmelerden biri A/B testinin uygulanmasıydı. A/B testi, sitenin iki versiyonunu karşılaştırarak hangisinin kullanıcılarda daha iyi performans gösterdiğini görmemizi sağlar. Bu, farklı renkleri, düğme şekillerini, arka planları veya hatta düzenleri test etmeyi içerebilir.

Bu işlevselliği URL'deki GET parametrelerini kullanarak uyguladık. Örneğin, iki özdeş reklam kampanyası oluşturulabilir, ancak farklı URL'lerle:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Kullanıcılar bu bağlantılara tıkladığında, parametre bir çerezde kaydedilir. Parametrenin değerine bağlı olarak, site sayfanın farklı sürümlerini, örneğin farklı düğme renkleri veya arka plan görüntüleri gösterecektir. Bu, kullanıcı tercihleri ve davranışları hakkında değerli veriler toplamamızı sağlar.

Tüm olaylar bir.csvDosyada ve MySQL veritabanında saklanan veriler, verileri analiz etmemize ve site iyileştirmeleri hakkında bilinçli kararlar almamıza olanak tanır.

7) Functions.php Dosyası

8) SEO ve Site Hızının Yönetimi

Web sitesi yenilemesi sırasında en önemli odak noktası SEO'yu ve genel site performansını iyileştirmekti. Elementor kullanılarak oluşturulan orijinal site, şişkin kod ve optimize edilmemiş görseller nedeniyle yavaş yükleme süreleri ve yetersiz SEO uygulamalarıyla ilgili sorunlar yaşıyordu.

SEO'yu iyileştirme

Yeni sitemizin SEO dostu olmasını sağlamak için en başından itibaren birkaç iyi uygulamayı hayata geçirdik:

• Anlamsal HTML : Sitenin HTML'sini başlık etiketlerinin doğru kullanımıyla dikkatlice yapılandırdık (
  ,
  , vb.), arama motorlarının içerik hiyerarşisini kolayca ayrıştırıp anlayabilmesini sağlar. Bu, hem SEO sıralamaları hem de erişilebilirlik açısından özellikle önemlidir.
• Meta Etiketleri ve Açık Grafik Verileri : Sosyal paylaşım için meta başlıklarını, açıklamalarını ve Açık Grafik verilerini işlemek üzere Yoast SEO eklentisinden yararlandık. Yoast'ı kullanarak her sayfanın ve gönderinin arama motoru görünürlüğü ve sosyal medya platformlarından tıklama oranları için çok önemli olan optimize edilmiş meta verilere sahip olmasını sağladık.
• Şema İşaretlemesi : Functions.php dosyasını kullanarak yapılandırılmış veriler için özel şema işaretlemesi ekledik ve arama motorlarının sayfalarımızı arama sonuçlarında nasıl görüntülediğini iyileştirdik. Örneğin, makaleler, vaka çalışmaları ve ürünler için şema ekledik ve arama motorlarının içeriğimizi daha iyi kategorize etmesine yardımcı olduk.

fonksiyon add_schema_markup() {
yankı '
  {
"@context": "http://schema.org",
"@type": "Kuruluş",
"isim": "ConveyThis",
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );


Site Hızı Optimizasyonu

Performans yalnızca kullanıcı deneyimi için değil aynı zamanda SEO sıralamaları için de kritik bir faktördür. Site hızını iyileştirmek için birkaç adım attık:

• Görüntü Optimizasyonu : PNG ve JPEG gibi geleneksel biçimlerden daha iyi sıkıştırma oranları sunan WebP gibi modern görüntü biçimlerini kullandık. Tüm görüntüler kullanıcının ekran çözünürlüğüne göre uygun boyutta sunuldu ve mobil cihazlarda bile hızlı yükleme süreleri sağlandı.
• Tembel Yükleme : Görseller için tembel yüklemeyi uygulayarak, yalnızca kullanıcının ekranında görünen görsellerin başlangıçta yüklenmesini sağladık. Ek görseller, kullanıcı kaydırdıkça yüklenerek ilk sayfa yükleme süreleri azaltıldı.
• Önbelleğe Alma ve Küçültme : HTML, CSS ve JavaScript dosyalarının önbelleğe alınması, küçültülmesi ve sıkıştırılması için WP Rocket'ı kullandık. WP Rocket, genel dosya boyutunu azaltarak ve tekrar eden ziyaretçilere sayfaların statik önbelleğe alınmış sürümlerini sunarak daha hızlı yükleme sürelerine ulaşmamıza yardımcı oldu.

9) Veritabanı Optimizasyonu ve Temizliği

Eski web sitesi, Elementor'un şişkinliği ve verimsiz veritabanı yapısı nedeniyle önemli miktarda "çöp" veri biriktirmişti. Yeni sitenin sorunsuz çalışmasını sağlamak için kapsamlı bir veritabanı temizliği ve optimizasyonu gerçekleştirdik.

• Eski Elementor Verilerinin Kaldırılması

Daha önce de belirtildiği gibi, Elementor'u devre dışı bıraktıktan sonra bile stilleri ve ayarları hala veritabanına gömülüydü. Bu fazla veriyi silmek ve veritabanını temizlemek için özel sorgular kullandık. Ayrıca, zaman içinde biriken kullanılmayan medya dosyalarını, yayın revizyonlarını ve süresi dolmuş geçicileri kaldırdık.

• Veritabanı Dizinleme

Ayrıca, sık sorgulanan sütunlara dizinler ekleyerek veritabanını optimize ettik ve veritabanı sorgularının daha hızlı ve daha verimli olmasını sağladık. Örneğin, bir dizin eklemekgönderi_tarihiSütun, son yazılarla ilgili sorguları hızlandırdı ve blog sayfalarımızın performansını artırdı.

Çözüm

Sıfırdan yeni bir web sitesi oluşturma kararı, eski sitenin kısıtlamaları ve verimsizlikleri tarafından yönlendirildi. Tasarım tutarsızlıkları, şişkin stiller ve Elementor'un neden olduğu performans sorunları nedeniyle temayı değiştirmek uygulanabilir bir seçenek değildi. Özel geliştirme ve Gelişmiş Özel Alanlar ile yeni bir site oluşturarak, kullanıcı deneyimini geliştirirken akıcı güncellemeler ve A/B test işlevselliği sağlayan daha verimli, tutarlı ve profesyonel bir web sitesi elde ettik. Bu yeni site, gelecekteki büyüme ve iyileştirmeler için sağlam bir temel sağlıyor.