Neden Sıfırdan Yeni Bir Web Sitesi Oluşturduk: Gerekli Bir Evrim

Web Sitenizi 5 Dakikada Çok Dilli Hale Getirin

Başlayın

Daha fazla bilgi edinin

Kredi kartı gerekmez

Hiçbir taahhüt yok

18 Ekim 2024'te yayınlandı

Nestor Tepesi

Bu yazıyı şu şekilde özetleyin:

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ı.

bp3

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. İlk bakışta, hızlı ve kolay sayfa oluşturma olanağı sağlayan harika bir araç gibi görünse de, üzerinde uzun süre çalıştıktan sonra, Elementor'dan vazgeçip özel yapım bir web sitesi seçmemize neden olan bazı sınırlamalarla karşılaştık.

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

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.
Ç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.
Gelişmiş İşlevsellik için Sınırlı Özelleştirme: Elementor, metin ve resimlerle temel sayfa oluşturmada mükemmel olsa da, özel işlevler eklemeniz gerektiğinde daha zor hale gelir. Kendimizi genellikle daha karmaşık özellikler için özelleştirilmesi 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.
Ş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 fazladiğ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.
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.
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:

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.

BP1 1

Bu süreç basit ama esnektir. Elementor'un karmaşık blok sistemine güvenmek yerine, WordPress içindeki içerik düzenleyici çok daha temizdir ve hızlı güncellemeler ve kolay özelleştirme sağlar. Düzenleyicinin altında, tüm site genelinde tutarlılığı sağlamak üzere yapılandırılmış Gelişmiş Özel Alanları (ACF) 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.

bp2

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

bp4

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

bp5

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ı

WordPress'teki functions.php dosyası genellikle blogla ilgili görevlerle sınırlı olduğu şeklinde yanlış anlaşılır. Ancak bu dosya, gönderileri veya blog özelliklerini yönetmek için bir yardımcı programdan çok daha fazlasıdır; sitedeki tüm özel işlevlerin omurgasını oluşturur. Bizim durumumuzda, gelişmiş özellikler eklemek, performansı optimize etmek ve site genelindeki betikleri ve ayarları yönetmek için functions.php dosyasını kullandık.

İşte nasıl yapılacağına dair bir genel bakış fonksiyonlar.php dosya gelişimimizde hayati bir rol oynadı:

Ö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 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", "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ı.
Ö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 tekrarlayan ziyaretçilere sayfaların statik önbelleğe alınmış sürümlerini sunarak daha hızlı yükleme süreleri elde etmemize 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 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 oluşturma kararı, eski sitenin kısıtlamaları ve verimsizliklerinden kaynaklanıyordu. Tasarım tutarsızlıkları, şişkin stiller ve Elementor'un neden olduğu performans sorunları nedeniyle, temayı değiştirmek uygun 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 testi 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 oluşturuyor.