ساخت وب سایت چند زبانه در PHP با 2 روش ( ویدیو + سورس )
سایت چند زبانه در PHP – احتمالا سایت های زیادی را دیده اید که علاوه بر زبان رسمی که دارند زبان های بین المللی دیگری را هم پشتیبانی می کنند .
در این آموزش قصد داریم تا بدون هیچ کتابخانه و یا پکیجی سیستم ترجمه و نمایش وب سایت به زبان های مختلف را پیاده سازی کنیم .
هیچ محدودیتی در تعداد زبان ها وجود ندارد و هر تعداد که بخواهید می توانید زبان مورد نظر به وب سایت تان اضافه کنید .
دموی نهایی
ویدیوی آموزش وبسایت چند زبانه در PHP
روش اول ( استفاده از فایل json و تابع local__ جهت ترجمه )
همانطور که در ویدیو گفته شد فایل های ترجمه را پوشه lang و با نام iso شده زبان قرار می دهیم مثلا برای ایران می شود . fa یا برای آلمان de . البته از آنجایی که زبان پیشفرض سایت ایران ( fa ) می باشد نیازی به افزودن در پوشه نیست .
1- اسکریپت index.php
<?php require_once "inc/functions.php"; ?>
<!DOCTYPE html>
<html lang="<?= $GLOBALS['lang']['iso_code'] ?>" dir="<?= $GLOBALS['lang']['dir'] ?>" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rapidcode.ir - آموزش چند زبانه کردن سایت در php</title>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="demo/sody/dist/css/style.css">
<script src="/unpkg.com/animejs%403.0.1/lib/anime.min.js"></script>
<script src="/unpkg.com/scrollreveal%404.0.0/dist/scrollreveal.min.js"></script>
</head>
<body class="is-boxed has-animations">
<div class="body-wrap">
<header class="site-header">
<div class="container">
<div class="site-header-inner">
<div class="brand header-brand">
<h1 class="m-0">
<a href="#">
<img class="header-logo-image" src="demo/sody/dist/images/logo.svg" alt="Logo">
</a>
</h1>
</div>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-inner">
<div class="hero-copy">
<h1 class="hero-title mt-0"><?= __local("صفحه لندینگ") ?></h1>
<p class="hero-paragraph"><?= __local("در این صفحه می توانید توضیحاتی را در مورد محصول تان ارائه دهید") ?></p>
<div class="hero-cta"><a class="button button-primary" href="#"><?= __local("خرید محصول") ?></a><a class="button" href="#"><?= __local("پشتیبانی") ?></a></div>
</div>
<div class="hero-figure anime-element">
<svg class="placeholder" width="528" height="396" viewBox="0 0 528 396">
<rect width="528" height="396" style="fill:transparent;" />
</svg>
<div class="hero-figure-box hero-figure-box-01" data-rotation="45deg"></div>
<div class="hero-figure-box hero-figure-box-02" data-rotation="-45deg"></div>
<div class="hero-figure-box hero-figure-box-03" data-rotation="0deg"></div>
<div class="hero-figure-box hero-figure-box-04" data-rotation="-135deg"></div>
<div class="hero-figure-box hero-figure-box-05"></div>
<div class="hero-figure-box hero-figure-box-06"></div>
<div class="hero-figure-box hero-figure-box-07"></div>
<div class="hero-figure-box hero-figure-box-08" data-rotation="-22deg"></div>
<div class="hero-figure-box hero-figure-box-09" data-rotation="-52deg"></div>
<div class="hero-figure-box hero-figure-box-10" data-rotation="-50deg"></div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="site-footer-inner">
<div class="brand footer-brand">
<a href="#">
<img class="header-logo-image" src="demo/sody/dist/images/logo.svg" alt="Logo">
</a>
</div>
<ul class="footer-links list-reset">
<li>
<a href="#"><?= __local("ارتباط با ما") ?></a>
</li>
<li>
<a href="#"><?= __local("درباره ما") ?></a>
</li>
<li>
<a href="#"><?= __local("ارتباط با ما") ?></a>
</li>
<li>
<a href="#"><?= __local("سوالات متداول") ?></a>
</li>
</ul>
</div>
</div>
</footer>
</div>
<script src="demo/sody/dist/js/main.min.js"></script>
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-125021779-1'></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-125021779-1', { 'anonymize_ip': true });</script>
</body>
</html>
2- اسکریپت functions.php
<?php
define("LANGUAGE_DEFAULT", "fa");
getLanguageQuery();
$GLOBALS['language_list'] = [
"fa" => [
"iso_code" => "fa",
"dir" => "rtl"
],
"en" => [
"iso_code" => "en",
"dir" => "ltr"
],
"de" => [
"iso_code" => "de",
"dir" => "ltr"
]
];
setLanguage();
function getLanguageQuery()
{
$GLOBALS['language_query'] = $_GET['hl'] ?? LANGUAGE_DEFAULT; // default persian language
$GLOBALS['language_query'] = strtolower($GLOBALS['language_query']);
}
function setLanguage()
{
if (in_array($GLOBALS['language_query'], array_keys($GLOBALS['language_list']))) {
$GLOBALS['lang'] = $GLOBALS['language_list'][$GLOBALS['language_query']];
} else {
$GLOBALS['lang'] = $GLOBALS['language_list'][LANGUAGE_DEFAULT];
}
}
function getTranslateFilePath()
{
return $_SERVER['DOCUMENT_ROOT'] . "/lang/" . "{$GLOBALS['lang']['iso_code']}.json";
}
function __local_cached($label)
{
$list = $GLOBALS['cached_translate'];
$result_label = $list[$label] ?? $label;
return $result_label;
}
function __local($label)
{
$result_label = $label;
$json_path = getTranslateFilePath();
if (isset($GLOBALS['cached_translate'])) {
return __local_cached($label);
}
if (!file_exists($json_path)) {
$GLOBALS['cached_translate'] = [];
return $result_label;
}
$GLOBALS['cached_translate'] = json_decode(file_get_contents($json_path), true);
return __local_cached($label);
}
لیست زبان های موجود در متغیر language_list و زبان نهایی انتخاب شده جهت نمایش در متغیر lang ذخیره می شود .
تابع local__ ابتدا label های همان نوشته را دریافت کرده و فایل json به دنبال element با key برابر با label می گردد در صورت پیدا شدن معادل آن را بر می گرداند در غیر اینصورت همان label شده را بازگردانی می کند .
روش دوم استفاده از اسکریپت مخصوص برای هر زبان ( پیش نیاز : توابع و ساختار روش دوم )
در فایل functions.php تنها تابعی که اضافه می شود برای این روش تابع getTranslateScriptPath می باشد که مسیر اسکریپت زبان مورد نظر را بر می گرداند .
function getTranslateScriptPath()
{
return $_SERVER['DOCUMENT_ROOT'] . "/lang_script/" . "{$GLOBALS['lang']['iso_code']}/index.php";
}
و البته پوشه جدیدی با نام lang_script داریم که در داخل آن برای هر زبان اضافه یک پوشه دیگر اضافه می کنیم که در هر پوشه زبان یک فایل index.php می باشد که الگوی آن به شکل زیر است :
lang_script > lang_iso_name > index.php lang_script > fa > index.php lang_script > de > index.php lang_script > en > index.php
دقت داشته باشید که در روش قبل نیازی به fa.json نبود اما در این روش باید زبان پیشفرض هم یک فایل index.php داشته باشد .
و فایل index.php دقیقا عین همان index.php روش قبل است .
اکنون من اگر بخواهم قالب زبان فارسی به جای رنگ مشکی رنگ سفید داشته باشد می توانم تغییر دهم و این در حالی است که زبان های انگلیسی و آلمانی من همچنان مشکی خواهند . پس امکان شخصی سازی هر قالب زبان را در اینجا دارم با این روش .
لیست نظرات
سلام وقت بخیر برای اینکه اگر متن های داینامیک باشه و مثل بخش بلاگ ها برای ترجمه چه راه حلی پیشنهاد میکنید ممنونم
درود ، اگر منظورتون پست های بلاگ هست می تونید برای عنوان و توضیحات با توجه به زبان های قابل پشتیبانی در داخل وبسایت تون محتوا داشته باشید مثلا زبان های فارسی و انگلیسی باشه به شکل title_fa و title_en و برای توضیحات body_fa و body_en میشه و اگر آدرس پست example.com/post/123 بعد از دامنه نام زبان قرار می گیره example.com/en/post/123 و example.com/fa/post/123 و به این شکل سیستم متوجه میشه که محتوای کدام زبان رو نشون بده .