Çoklu dil site nasıl yapılır?

mertjr · 3 Nisan 2024

Selam, HTML CSS JS kullanarak bir internet sitesi yaptım. 2 adet de dil seçeneği butonu var. Nasıl tıkladığımda o dile çevrili halde gösterebilirim? Çeviriyi kendim yapacağım.

fatih · 17 Nisan 2024

PHP Multi Language araştır. Çok basit şekilde yapabilirsin.

alican · 2 Haziran 2025

brkdnmz dedi:
Bu yaklaşımın beğenmediğim birçok yanı var fakat ilk aklıma gelen çözümlerden biri oldu, buyurun:

Jsfiddle ön izlemesi gelmiş Sosyal'e, vay! Bayağı iyi.

Yoksa başından beri var mıydı?

Mantık şu şekilde:

Metin yazan her yerde aynı metnin alt alta Türkçe ve İngilizce versiyonlarını barındıran elementler bulunuyor, sırasıyla tr ve en sınıflarına sahip. Ben bu iki dilin olacağını varsaydım.

Script kısmında şu anki dili tutuyoruz curLang değişkeninde.

Dil değiştirme butonu ve bu butona atanmış bir onclick etkinliği var. Butona basıldığı zaman changeLanguage fonksiyonu çağrılıyor ki bu fonksiyon yine script kısmında tanımlı.

Fonksiyon şu şekilde çalışıyor: Şu anki dile sahip elementlere hidden sınıfı ekle, diğer dile sahip elementlerden hidden sınıfını kaldır. hidden sınıfı da sadece display: none; özelliğini kapsıyor.

En azından fikir olsun.

Merhaba,
Bu çözümü çok beğendim, pratik ve sadece iki dil ise kullanışlı. Bir sorum olacaktı navigasyon ile alakalı. Navigasyon linkleri nasıl olmalı sizce? Mesela başka bir sayfaya atlandığında aynı dil kalsın.

brkdnmz · 3 Haziran 2025

alican dedi:
Merhaba,
Bu çözümü çok beğendim, pratik ve sadece iki dil ise kullanışlı. Bir sorum olacaktı navigasyon ile alakalı. Navigasyon linkleri nasıl olmalı sizce? Mesela başka bir sayfaya atlandığında aynı dil kalsın.

Merhaba, yorumunuz için sağ olun.

Bu çözümün beğenmediğim yanlarından biri, sayfa yüklenirken kısa süreliğine iki dildeki elementlerin de görülmesi. Sayfa yüklendikten sonra JavaScript'in devreye girmesi gerekiyor ki tercih edilmeyen dildeki elementler gizlenebilsin. Bunun üstesinden gelmek için mesela bir dildeki elementlerin tümüne HTML'de hidden sınıfını da eklemeyi düşündüm ama pek sıcak bakmadım. Aslında şu ankinden daha güzel bir sonuç verir gibi geliyor ama o tercih sizin olsun. (Alternatif çözüm olarak bunu da sona ekledim.)

Her ne kadar ben de sizin gibi kullanışlı olduğunu düşünsem de söz konusu sayfa dili olunca daha oturaklı çözümler kesin mevcuttur, ben araştırmadığım için bilmiyorum, yalnızca i18n kavramından söz edebilirim. Size önerim, bu çözüme pek bel bağlamamanız. Günü kurtarabilir ama proje büyüdükçe ne kadar sağlıklı kalır bilmiyorum. Fikir olsun diye sundum.

Navigasyon desteği için birtakım düzenlemeler yaptım (Umarım destekliyordur şimdi, test etmedim.), bir de kodu genel olarak biraz düzenlemeye çalıştım. Tercih edilen dilin hatırlanması adına localStorage'ı kullandım, "tarayıcı hafızası" olarak düşünebilirsiniz bunu. Site içinde başka sayfaya geçseniz de oraya kaydettiğiniz bilgiler korunuyor. Umarım işinize yarar:

İlk paragrafta bahsettiğim alternatif çözüm, İngilizce elementlere tek tek hidden sınıfını ekledim:

6191 · 6 Haziran 2025

brkdnmz dedi:
Merhaba, yorumunuz için sağ olun.

Bu çözümün beğenmediğim yanlarından biri, sayfa yüklenirken kısa süreliğine iki dildeki elementlerin de görülmesi. Sayfa yüklendikten sonra JavaScript'in devreye girmesi gerekiyor ki tercih edilmeyen dildeki elementler gizlenebilsin. Bunun üstesinden gelmek için mesela bir dildeki elementlerin tümüne HTML'de hidden sınıfını da eklemeyi düşündüm ama pek sıcak bakmadım. Aslında şu ankinden daha güzel bir sonuç verir gibi geliyor ama o tercih sizin olsun. (Alternatif çözüm olarak bunu da sona ekledim.)

Her ne kadar ben de sizin gibi kullanışlı olduğunu düşünsem de söz konusu sayfa dili olunca daha oturaklı çözümler kesin mevcuttur, ben araştırmadığım için bilmiyorum, yalnızca i18n kavramından söz edebilirim. Size önerim, bu çözüme pek bel bağlamamanız. Günü kurtarabilir ama proje büyüdükçe ne kadar sağlıklı kalır bilmiyorum. Fikir olsun diye sundum.

Navigasyon desteği için birtakım düzenlemeler yaptım (Umarım destekliyordur şimdi, test etmedim.), bir de kodu genel olarak biraz düzenlemeye çalıştım. Tercih edilen dilin hatırlanması adına localStorage'ı kullandım, "tarayıcı hafızası" olarak düşünebilirsiniz bunu. Site içinde başka sayfaya geçseniz de oraya kaydettiğiniz bilgiler korunuyor. Umarım işinize yarar:

İlk paragrafta bahsettiğim alternatif çözüm, İngilizce elementlere tek tek hidden sınıfını ekledim:

Kullanışsız ve hantal bir kod. Stabil çözüm için dil içeriğini JSON olarak depolayıp seçilen dile göre elementlere yazdırmanız gerekiyor. Her dil için aynı elementten birden fazla kez oluşturduğunuz için DOM gereksiz büyüyor. Bu da ram kullanımı ve yüklenme süresini olumsuz yönde etkiliyor.

Fatalis · 6 Haziran 2025

Stringlerin her birini farklı dil dosyalarında tutup kullanıcı hangi dili seçtiyse o dil dosyasını çağırmak ve stringlerin o dil dosyalarından okunmasını sağlamak mantıklı bir çözüm olabilir. Örnek bir structure:

/languages/
-> en.php
-> tr.php
-> de.php

tr.php içeriği:

PHP:

<?php

return array(
    "homepage"    =>    "Ana Sayfa",
    "about"    =>    "Hakkımızda",
    "error"    =>    "Hata",
    ...
);

Daha sonra template üzerinden çağırılabilir

PHP:

<?php
    // Kullanıcının seçtiği dil, session veya cookie'de tutulabilir
    $selected_lang = "tr";

    // Seçilen dili çağır
    $lang = include __DIR__ . '/languages/'. $selected_lang .'.php';
?>
<html>
<head>
    <title>Techolay için dil desteği örneği</title>
</head>
<body>
    <div id="app">
        <?=$lang['homepage']?>
        // Dil TR ise "Ana Sayfa" yazar, dil İngilizce ise en.php içerisinde tanımlanan veriyi yazar
    </div>
</body>
</html>

xares · 10 Eylül 2025

brkdnmz dedi:
Keşke daha iyi çözümler düşünebilsem de onları paylaşsam. : D
Ne düşünebildiysem onu paylaştım. Kötü yanlarını görebilmekle birlikte nasıl iyileştirebileceğimi bilemedim.

React gibi bir kütüphaneyle yapmak rahatıma gelirdi.

React kütüphanesinde i18n kullanıyorum bu gibi durumlar için müthiş kolaylık sağlıyor. Türkçe dosyasını yapay zeka ile istediğim dile çevirip siteye tek seferde istediğim dili ekliyorum. Buna geçmeden önce conditional rendering ile yapıyordum işkenceydi

Çoklu dil site nasıl yapılır?

Detaylar

mertjr

Başarılı

fatih

Yetkin

alican

Üyecik

brkdnmz

Üstün

6191

Uzman

Fatalis

Yetkin

xares

Üyecik

Benzer konular

Çoklu dil site nasıl yapılır?

mertjr

Başarılı

fatih

Yetkin

alican

Üyecik

brkdnmz

Üstün

6191

Uzman

Fatalis

Yetkin

xares

Üyecik

Benzer konular

Privacy & Transparency

Privacy & Transparency