Web Sitemizi Neden Sıfırdan Yeniden Oluşturduk
Gerekli evrimimize ve yeniden tasarım sürecinde öğrenilen derslere içeriden bir bakış.
Kredi kartı gerekmez
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.
Siteyi Elementor gibi bir araç kullanarak 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ı gözden geçirmemiz ve her bloğu manuel olarak güncellememiz gerekirdi, bu da zaman alıcı ve verimsiz olurdu. Bunu akılda tutarak, tek çözümümüzün sıfırdan yeni bir web sitesi oluşturmak olduğu ortaya çıktı. Bu, aynı URL'leri korurken ancak yeni, tutarlı ve kolayca güncellenebilir bir tasarımla tüm içeriği aktarmamıza olanak tanır.
2) Neden Elementor Kullanmamaya Karar Verdik
Elementor için en popüler sayfa oluşturuculardan biridir WordPress. Yüzeyde, hızlı ve kolay sayfa oluşturmaya izin veren harika bir araç gibi görünüyor. Bununla birlikte, üzerinde yoğun bir şekilde çalıştıktan sonra, Elementor'den uzaklaşmaya ve bunun yerine özel olarak oluşturulmuş bir web sitesini tercih etmeye karar vermemize neden olan çeşitli sınırlamalarla karşılaştık.
Elementor’s Sınırlamalar ve Zorluklar:
- Hatalar ve Aksaklıklar: Elementor birçok yararlı özellik sunarken, teknik sorunları da vardır. Örneğin, bir sayfayı kopyalayıp düzenlemeye çalıştığımızda, yeni sayfa, herhangi bir değişiklik yapmadan önce bile genellikle orijinalinden farklı görünüyordu. “maksimum görüntü genişliği” özelliğinin düzgün çalışmaması gibi öğelerin görüntülenme şekliyle ilgili sık sık hatalar vardı. Bu aksaklıklar sayfalar arasında tutarlı bir stil sağlamayı zorlaştırdı.
- Tutarsızlığa Yol Açan Çok Fazla Yaratıcı Özgürlük: Elementor’'in önemli satış noktalarından biri her şeyi kişiselleştirme yeteneğidir. Ancak bu esneklik, özellikle sitede birden fazla editörün çalıştığı durumlarda iki ucu keskin bir kılıç olabilir. Profesyonel olmayanlar için istemeden tutarsız tasarımlara sahip sayfalar oluşturmak kolaydır. Örneğin, editörlerin pembe düğmelerde pembe metin kullandığını veya arka planda uçan turuncu üçgenler eklediğini, bunun da karmaşık ve kafa karıştırıcı bir tasarıma yol açtığını gördük. Sıkı bir tasarım sistemi olmadan tutarlı bir görsel kimliği korumak imkansız hale geldi.
- Gelişmiş İşlevsellik için Sınırlı Özelleştirme: Elementor, metin ve resimlerle temel sayfa oluşturmada üstün olsa da, özel işlevsellik eklemeniz gerektiğinde daha zorlayıcı hale gelir. Kendimizi genellikle 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’'in sınırlamaları giderek daha belirgin hale geldi.
- Şişirilmiş Kod ve Performans Sorunları: Elementor’s sayfa oluşturma yöntemi, öğelerin aşırı iç içe geçmesini sağlar. Örneğin, Elementor otomatik olarak çoklu üretir
diğer içindeki konteynerlerher biri kendi stil setine sahip öğeler. Bu, yükleme hızını, sayfa performansını ve nihayetinde web sitesinin SEO sıralamasını olumsuz yönde etkileyen şişirilmiş bir yapıya neden olur. Hız testleri yaptığımızda sonuçlar sürekli olarak zayıftı ve bunun sorumlusu büyük ölçüde Elementor tarafından oluşturulan ağır koddu. - A/B Test Yeteneği Yok: Günümüzün dijital ortamında, kullanıcı deneyimini optimize etmek için A/B testi şarttır. Ancak Elementor, sitenin farklı sürümlerini farklı kullanıcılara gösterme olanağı sunmaz. Herkes aynı siteyi görüyor, 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ırlıyor. Bu işlevsellik olmadan, siteyi gerçek kullanıcı davranışına göre optimize edemezdik.
- Veritabanı Bloat: Elementor'in belki de en önemli dezavantajlarından biri stilleri ve içeriği nasıl ele aldığıdır. Elementor veritabanındaki içeriğe karıştırılmış stilleri, iç içe geçmiş yapıları ve diğer gereksiz etiketleri saklar. Bu, Elementor devre dışı bırakıldığında veya kaldırıldığında bile temizlenmeyen şişirilmiş bir veritabanına yol açar. Sonuç olarak, yeni bir temaya veya çerçeveye geçmek sorunu çözmez – bu stiller sayfalarda gömülü kalır ve sorunlara neden olmaya devam eder.
Tüm bu zorluklar göz önünde bulundurulduğunda daha sağlam bir çözüme ihtiyacımız olduğu ortaya çıktı. Daha sürdürülebilir ve esnek bir yaklaşımı tercih ederek, Elementor olmadan yeni, bağımsız bir web sitesi kurma kararı aldık.
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:
- WordPress yönetici paneline giriş yapın ve Sayfalar -> Yeni Sayfa Ekle'ye tıklayın.
- 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 işlem basit ama esnektir. Elementor’s karmaşık blok sistemine güvenmek yerine, WordPress'teki içerik düzenleyici çok daha temizdir ve hızlı güncellemelere ve kolay özelleştirmeye olanak tanır. Editörün altında, için ayarlar vardır Gelişmiş Özel Alanlar (ACF), tüm site genelinde tutarlılığı koruyacak şekilde zaten yapılandırılmıştır.
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 .csv Dosyada 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ı
- Özel Gönderi Türleri ve Taksonomiler
Functions.php dosyasının temel kullanımlarından biri, içeriği daha etkili bir şekilde düzenlememize olanak tanıyan özel gönderi türleri ve taksonomiler oluşturmaktı.
Örneğin, vaka çalışmaları için özel bir gönderi türü oluşturmak amacıyla functions.php dosyasına aşağıdaki kodu ekledik:
fonksiyon create_case_study_post_type() {
register_post_type( 'vaka_çalışmaları',
sıralamak(
'etiketler' =>sıralamak(
'name' => __( 'Vaka Çalışmaları' ),
'tekil_ad' => __( 'Vaka Çalışması' )
),'genel' => doğru,
'arşiv_var' => doğru,
'yeniden yaz' => dizi('slug' => 'vaka çalışmaları'),
)
);
}
add_action( 'init', 'case_study_post_type' oluştur);
Bu, normal gönderilere benzer şekilde davranan ancak kendi arşivi ve taksonomi yapısı olan "Vaka Çalışmaları" adı verilen yeni bir gönderi türü yarattı.
- Harici Komut Dosyaları ve Stilleri Yükleme
Functions.php'nin bir diğer kritik kullanımı, harici betikleri ve stilleri yüklemek ve web sitemizin tüm gerekli kütüphanelere ve çerçevelere sahip olmasını sağlamaktı. Örneğin, kaydırıcılar için Slick.js ve akıcı animasyonlar için AOS (Animate on Scroll) gibi kütüphaneleri entegre ettik. Bu varlıkları yalnızca ihtiyaç duyulduğunda (örneğin, belirli sayfalarda veya şablonlarda) seçici olarak yükleyerek gereksiz şişkinliği azalttık ve sayfa yükleme hızlarını iyileştirdik.
Stillerin ve betiklerin yüklenmesini şu şekilde hallettik:
işlev load_custom_scripts() {
// Belirli şablonlar için Slick kaydırıcısını yükle
eğer( sayfa_şablonu('şablon-slider.php') ) {
wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );
wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );
} // AOS animasyonlarını site genelinde yükle
wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script( 'aos-js', get_template_directory_uri() . '/js/aos.js', dizi('jquery'), '', doğru );
}
add_action( 'wp_enqueue_scripts', 'özel_scripts'i_yükle' );
Koşullu kontrolleri kullanarak (örneğin, sayfa_şablonu_mu()), gereksiz scriptlerin site genelinde yüklenmemesini sağlayarak performansı optimize ettik.
- Özel Kısa Kodları
Site içeriğini yöneten teknik olmayan kullanıcılar için esnekliği artırmak amacıyla, functions.php aracılığıyla özel kısayollar ekledik. Bu kısayollar, kullanıcıların koda dokunmadan karmaşık işlevler veya biçimlendirilmiş öğeler eklemesine olanak sağladı. Örneğin, sitenin herhangi bir yerine özel düğmeler eklemek için bir kısayol oluşturduk:
[SANSÜRLENDİ]
Bu kısa kod, editörlerin özel metin ve URL'ler içeren düğmeler eklemesini kolaylaştırarak, tasarımı bozmadan hızlı ayarlamalar yapılmasına olanak sağladı.
8) SEO ve Site Hızının Yönetimi
Web sitesi revizyonu sırasında ana odak noktası SEO'yu ve genel site performansını iyileştirmekti. Elementor kullanılarak inşa edilen orijinal site, şişirilmiş kod ve optimize edilmemiş görüntüler nedeniyle yavaş yükleme süreleri ve optimal olmayan SEO uygulamalarıyla ilgili sorunlar yaşadı.
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",
"aynı": [
"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ı.
- Önbellekleme ve Minnetleştirme: WP Rocket'ı HTML, CSS ve JavaScript dosyalarının önbellekleme, küçültme ve sıkıştırılması için kullandık. WP Rocket, genel dosya boyutunu azaltarak ve tekrar eden ziyaretçilere statik önbelleklenmiş sayfa sürümleri sunarak daha hızlı yükleme süreleri elde etmemize yardımcı oldu.
9) Veritabanı Optimizasyonu ve Temizliği
Eski web sitesi, “1”s şişkinliği ve verimsiz veritabanı yapısı nedeniyle önemli miktarda 《junk》’ verisi 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 devre dışı bırakıldıktan sonra bile stilleri ve ayarları hâlâ veritabanına gömülüydü. Bu fazla veriyi silmek ve veritabanını temizlemek için özel sorgular kullandık. Ayrıca, kullanılmayan medya dosyalarını, post revizyonlarını ve zaman içinde biriken süresi dolmuş geçici olayları 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 eklemek gönderi_tarihi Sü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 kurma kararı, eski sitenin sınırlamaları ve verimsizliklerinden kaynaklandı. Tasarım tutarsızlıkları, şişirilmiş stiller ve Elementor'in neden olduğu performans sorunları nedeniyle temayı basitçe değiştirmek geçerli bir seçenek değildi. Özel geliştirme ve Gelişmiş Özel Alanları ile yeni bir site oluşturarak, kolaylaştırılmış güncellemeleri ve A/B test işlevselliğini etkinleştirirken kullanıcı deneyimini geliştiren daha verimli, uyumlu 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.
Bu yazıyı şu şekilde özetleyin:
Başlamaya Hazır Mısınız?
Çeviri, sadece dilleri bilmenin çok ötesinde, karmaşık bir süreçtir.
İpuçlarımızı takip ederek ve kullanarak ConveyThis, çevrilmiş sayfalarınız hedef kitlenizde yankı uyandıracak ve hedef dilin anadili olduğunu hissedecektir.
Çaba gerektirse de sonuç ödüllendiricidir. Bir web sitesini çeviriyorsanız, ConveyThis otomatik makine çevirisiyle size saatlerce zaman kazandırabilir.
ConveyThis'i 3 gün boyunca ücretsiz deneyin!
CONVEYTHIS