php
April 16, 2023
Cómo implementar el soporte de sitios web multilingües usando PHP
Los sitios web son útiles para comunicar a sus usuarios algo de su interés.
Por eso existen páginas web que ofrecen servicios en todo el mundo, algunos de habla inglesa, otros española y también en alemán o polaco y en tales sitios hay una necesidad de contenido en varios idiomas.
Una de las soluciones seria de crear diferentes sitios para cada idioma, pero esto pronto puede llegar a ser incontrolable e inconsistente.
Si estas interesado en proporcionar a tu sitio web la funcionalidad de cambiar de idioma fácilmente haciendo uso de PHP, vamos a hacer un pequeño resumen de lo que hice para poner el práctica esto.
Lo primero que debemos tener el cuenta es crear archivos que contengan el texto de cada idioma que soportará nuestro sitio web. Para este ejemplo trabajaremos con los idiomas alemán, español, inglés y polaco.
Ejemplo
En el directorio raíz crearemos un nuevo directorio y lo llamaremos "lang" en el que guardaremos los nuevos archivos de idioma con los siguientes nombres: es_lang.php, en_lang.php, pl_lang.php y de_lang.php.
El archivo es_lang.php para almacenar los valores del idioma español:
<?php
/*
------------------
Language: Español
------------------
*/
$lang = array(
// META TAG
'meta_lang' => 'es',
'meta_title' => 'Implementación de soporte multilingüe para el sitio utilizado PHP',
'meta_description' => 'Cómo implementar el soporte de sitios web multilingües usando PHP',
'title' => 'Soporte multilingüe usando PHP',
'description' => 'Esta es una demostración de cómo implementar el soporte de sitios web multilingües usando PHP.',
// LANGUAGE
'language' => array(
'es'=>'Español',
'de' =>'Alemán',
'en'=>'Inglés',
'pl'=>'Polaco'
),
// ARTICLE
'demo_article_title' => 'Sitio web con soporte para múltiples idiomas con PHP',
'demo_article' => array(
'Los sitios web son útiles para comunicar a sus usuarios algo de su interés.',
'Por eso existen páginas web que ofrecen servicios en todo el mundo, algunos de habla inglesa, otros española y también en alemán o polaco y en tales sitios hay una necesidad de contenido en varios idiomas.',
'Una de las soluciones seria de crear diferentes sitios para cada idioma, pero esto pronto puede llegar a ser incontrolable e inconsistente.',
'Si estas interesado en proporcionar a tu sitio web la funcionalidad de cambiar de idioma fácilmente haciendo uso de <strong class="nl">PHP</strong>, entonces este artículo puede interesarte.'
),
'demo_article_link' => 'Cómo implementar el soporte de sitios web multilingües usando PHP',
// FOOTER
'demo_footer' => 'Copyright © 2023 por Sebastian Żarowski. Todos los derechos reservados'
);
?>El archivo en_lang.php para almacenar los valores del idioma inglés:
<?php
/*
------------------
Language: English
------------------
*/
$lang = array(
// META TAG
'meta_lang' => 'en',
'meta_title' => 'Implementation of multilingual support for the site used PHP',
'meta_description' => 'How to implement multilingual website support using PHP',
'title' => 'Multilingual support using PHP',
'description' => 'This is a demonstration of how to implement multilingual website support using PHP.',
// LANGUAGE
'language' => array(
'en' => 'English',
'de' => 'German',
'pl' => 'Polish',
'es' => 'Spanish'
),
// ARTICLE
'demo_article_title' => 'Website with support for multiple languages with PHP',
'demo_article' => array(
'Websites are useful for communicating to their users something of interest.',
'That is why there are web pages that offer services all over the world, some in English, others in Spanish and also in German or Polish and on such sites there is a need for content in multiple languages.',
'One of the solutions would be to create different sites for each language, but this can soon become uncontrollable and inconsistent.',
'If you are interested in providing your website with easy language switching functionality using <strong class="nl">PHP</strong>, then this article may be of interest to you.'
),
'demo_article_link' => 'How to implement multilingual website support using PHP',
// FOOTER
'demo_footer' => 'Copyright © 2023 by Sebastian Żarowski. All rights reserved'
);
?>El archivo pl_lang.php para almacenar los valores del idioma polaco:
<?php
/*
------------------
Language: Polski
------------------
*/
$lang = array(
// META TAG
'meta_lang' => 'pl',
'meta_title' => 'Wdrożenie obsługi wielu języków dla serwisu z wykorzystaniem PHP',
'meta_description' => 'Jak zaimplementować obsługę wielojęzycznej strony internetowej za pomocą PHP',
'title' => 'Obsługa wielu języków przy użyciu PHP',
'description' => 'To jest demonstracja, jak zaimplementować obsługę wielojęzycznej strony internetowej przy użyciu PHP.',
// LANGUAGE
'language' => array(
'pl' => 'Polski',
'en' => 'Angielski',
'es' => 'Hiszpański',
'de' => 'Niemiecki'
),
// ARTICLE
'demo_article_title' => 'Strona internetowa z obsługą wielu języków z PHP',
'demo_article' => array(
'Strony internetowe są przydatne do komunikowania użytkownikom czegoś, co ich interesuje.',
'Dlatego istnieją strony internetowe oferujące usługi na całym świecie, niektóre w języku angielskim, inne w języku hiszpańskim, a także w języku niemieckim lub polskim i na takich stronach istnieje zapotrzebowanie na treści w wielu językach.',
'Jednym z rozwiązań byłoby tworzenie różnych witryn dla każdego języka, ale może to wkrótce stać się niekontrolowane i niespójne.',
'Jeśli jesteś zainteresowany udostępnieniem swojej stronie internetowej funkcji łatwego przełączania języków przy użyciu <strong class="nl">PHP</strong>, ten artykuł może Cię zainteresować.'
),
'demo_article_link' => 'Jak zaimplementować obsługę wielojęzycznej strony internetowej za pomocą PHP',
// FOOTER
'demo_footer' => 'Copyright © 2023 Sebastian Żarowski. Wszelkie prawa zastrzeżone'
);
?>El archivo de_lang.php para almacenar los valores del idioma alemán:
<?php
/*
------------------
Language: Deutsch
------------------
*/
$lang = array(
// META TAG
'meta_lang' => 'de',
'meta_title' => 'Implementierung der mehrsprachigen Unterstützung für die Site verwendet PHP',
'meta_description' => 'So implementieren Sie mehrsprachige Website-Unterstützung mit PHP',
'title' => 'Mehrsprachige Unterstützung mit PHP',
'description' => 'Dies ist eine Demonstration, wie die Unterstützung mehrsprachiger Websites mit PHP implementiert wird.',
// LANGUAGE
'language' => array(
'de' =>'Deutsch',
'en'=>'Englisch',
'pl'=>'Polnisch',
'es'=>'Spanisch'
),
// ARTICLE
'demo_article_title' => 'Website mit Unterstützung für mehrere Sprachen mit PHP',
'demo_article' => array(
'Websites sind nützlich, um ihren Benutzern etwas Interessantes mitzuteilen.',
'Deshalb gibt es Webseiten, die Dienste auf der ganzen Welt anbieten, einige auf Englisch, andere auf Spanisch und auch auf Deutsch oder Polnisch, und auf solchen Seiten besteht Bedarf an Inhalten in mehreren Sprachen.',
'Eine der Lösungen wäre, für jede Sprache unterschiedliche Seiten zu erstellen, aber das kann schnell unkontrollierbar und inkonsistent werden.',
'Wenn Sie daran interessiert sind, Ihrer Website mit <strong class="nl">PHP</strong> eine einfache Sprachumschaltfunktion bereitzustellen, dann könnte dieser Artikel für Sie von Interesse sein.'
),
'demo_article_link' => 'Wie implementieren die Unterstützung mehrsprachiger Websites mit PHP',
// FOOTER
'demo_footer' => 'Copyright © 2023 Sebastian Żarowski. Alle Rechte vorbehalten'
);
?>En cada uno de los archivos de idioma usamos un Array, que en realidad es un mapa ordenado que asocia valores con claves. En cada uno de los archivos se ha definido un Array con las mismas claves, pero valores diferentes.
Arrays
Un Array en PHP es en realidad un mapa ordenado. Un mapa es un tipo de datos que asocia valores con claves. Este tipo se optimiza para varios usos diferentes; se puede emplear como un diccionario, colección, pila, cola, y posiblemente más. Aquí puede leer más sobre Arrays en PHP.
El archivo lang_conf.php detectará el idioma del navegador pero también realizará el proceso para seleccionar el idioma deseado por el usuario y además guardará la elección en variables de sesión. El idioma por defecto es el español.
En el directorio raíz crearemos un nuevo archivo y lo llamaremos "lang_conf.php":
<?php
session_start();
$lang = !empty($_SERVER['HTTP_ACCEPT_LANGUAGE']) ? strtok(strip_tags($_SERVER['HTTP_ACCEPT_LANGUAGE']), ',') : '';
$lang = substr($lang, 0, 2);
$accepting = ['de','es','en','pl'];
$lang = in_array($lang, $accepting) ? $lang : 'es';
$_SESSION['lang'] = $lang;
setcookie('lang', $lang, 0);
include("lang/".$_SESSION['lang']."_lang.php");
if (isset($_GET['lang'])&& preg_match('/^[a-z]{2}$/', $_GET['lang'])) {
$_SESSION['lang'] = $_GET['lang'];
setcookie('lang', $_SESSION['lang'], 0);
}
if(isset($_SESSION['lang'])) {
include("lang/".$_SESSION['lang']."_lang.php");
}
?>En nuestro archivo principal llamamos lang_conf.php:
<?php
require_once('lang_conf.php');
?>
La etiqueta HTML <select> se utiliza para crear menús desplegables para que los usuarios puedan seleccionar el valor que deseen. Es una función instrumental para recopilar datos que se envían a un servidor.
La etiqueta <select> normalmente va dentro de un elemento de formulario form, con las opciones a elegir codificados dentro de otra etiqueta, <option>. También puede ser un elemento independiente que seguiría asociado a un formulario con uno de sus atributos especiales, form.
El formulario que usaremos para este ejemplo posee una etiqueta tipo SELECT y a esta etiqueta le agregaremos un atributo tipo ONCHANGE en el cual albergara una función JavaScript.
En el directorio raíz crearemos un nuevo directorio y lo llamaremos "js" y luego crearemos un nuevo archivo select_lang.js con el siguiente código:
function languageChange() {
document.getElementById('select-language').submit();
}Es hora de integrar nuestra matriz con idiomas en el archivo index.php. Como resultado, cada vez que llamemos a un archivo de idioma diferente, veremos un texto diferente.
En el directorio raíz crearemos un nuevo archivo y lo llamaremos "index.php":
<?php require_once('lang_conf.php'); ?>
<!DOCTYPE html>
<html lang="<?php echo $lang['meta_lang']; ?>">
<head>
<title><?php echo $lang['meta_title']; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="<?php echo $lang['meta_description']; ?>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="icon/favicon.ico">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<header class="wrapper bg1">
<nav class="language-nav">
<form method="get" action="" id="select-language">
<select name="lang" id="language" onchange="languageChange();">
<?php
foreach($lang['language'] as $row[] => $language[]);
foreach($language as $k => $v) {
echo "<option value=\"$row[$k]\" data-style=\"background-image:url('flags/$row[$k].png');\"";
if(empty($_GET['lang'])) {
if($row[$k] == $_SESSION['lang']) {
echo " selected";
}
} else {
if($row[$k] == $_GET['lang']) {
echo " selected";
}
}
echo ">". $v ."</option>";
}
?>
</select>
</form>
</nav>
<h1>
<?php echo $lang['title']; ?>
</h1>
<p>
<?php echo $lang['description']; ?>
</p>
</header>
<article class="wrapper demo-article">
<div class="container mt-3">
<h2>
<?php echo $lang['demo_article_title']; ?>
</h2>
<div class="row">
<div class="col-xl-5 col-lg-5 col-md-12 mt-5">
<div class="row justify-content-center">
<img src="images/mundo.png" alt="<?php echo $lang['meta_title']; ?>" class="image drop-shadow" />
</div>
</div>
<div class="col-xl-7 col-lg-7 col-md-12">
<?php
foreach($lang['demo_article'] as $value) {
echo '<p>'. $value . '</p>';
}
?>
<p>
<a href="https://zarowski.es/article.php?article-topic=cómo-implementar-el-soporte-de-sitios-web-multilingües-usando-php" target="_blank">
<?php echo $lang['demo_article_link']; ?>
</a>
</p>
</div>
</div>
</div>
</article>
<footer>
<p>
<?php echo $lang['demo_footer']; ?>
</p>
</footer>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<!-- Country List -->
<script src="js/select_lang.js"></script>
</body>
</html>
Para este punto, nuestro sitio multilingüe debe estar funcional. Puede ver una demostración en vivo usando el botón Demostración, al final del artículo.
Como probablemente notó en esta demostración, elegí usar la lista de nombres de idiomas con banderas.
No es posible poner una etiqueta img dentro de una opción. Para conseguir algo así, habría que utilizar algún "truco", de modo que se genere una lista similar a un select utilizando otros elementos.
Para conseguir esto usaremos JavaScript, sin usar ningún marco o biblioteca externa.
Vamos a nuestro archivo select_lang.js y debajo de la function languageChange() agregaremos el siguiente código:
function languageChange() {
document.getElementById('select-language').submit();
}
window.addEventListener('load',function(){
let selUpdate = function(item) {
item.classList.add('selected');
select.value = item.innerText;
span.innerText = item.innerText;
span.style.backgroundImage = item.style.backgroundImage;
ul.style.display = 'none';
}
// obtener select
let select = document.querySelector('#language');
// crear boton, asignar clase y agregar despues del select
let span = document.createElement('span');
span.className = 'btn-select';
select.parentNode.insertBefore(span, select.nextsibling);
// posicionsobre el select
span.style.top = select.setTop + 'px';
span.style.width = select.setWidth + 'px';
// Mostrar ocultar lista al hacer clic en boton
span.addEventListener('click', function(){
ul.style.display = (ul.style.display == 'none')? 'block' : 'none';
});
// Crear lista y agregar clase
let ul = document.createElement('ul');
ul.style.width = span.offsetWidth + 'px';
ul.className = 'ul-select';
// recorrer opciones de select
for(let i = 0; i < select.options.length; i++) {
//create elemento de lista y agregar clase
let li = document.createElement('li');
li.className = 'li-option';
// Ageega contendido y estilo desde opcion
li.innerText = select.options[i].innerText;
li.style = select.options[i].dataset.style;
li.id = select.options[i].value;
// actualuzar valor de select al hacer clic en elemanto de lista
li.addEventListener('click', function(e) {
langSelected = select.options[i].value;
option = select.options[i];
if(langSelected == li.id) {
// Remover clase seleccionada de opción anterior
ul.querySelector('.selected').classList.remove('selected');
// Seleccionar opción actual
this.classList.add('selected');
option.setAttribute('selected','');
languageChange();
}
});
// ls opcion actual esta seleccionada? aplicar al elemento de lista
if(select.options[i].selected){
li.classList.add('selected');
// asignar valor inicial al boton
selUpdate(li);
}
// Agregar elemento a lista
ul.appendChild(li);
}
// Agregar lista, justo despuest del boton
select.parentNode.insertBefore(ul, span.nextSibling);
//Posicionar lista bajo el buton
ul.style.top = (span.offsetTop + span.offsetHeight) + 'px';
ul.style.left = span.offsetLeft + 'px';
// Ocultar select
select.style.display = 'none';
// ocultar lista si se hace click fuera
document.addEventListener('click', function(e){
// solo si el clic no fue sobre la lista o el boton
if(e.target != ul && e.target != span) {
ul.style.display = 'none';
}
});
});
Para darle nuestro sitio multilingüe un aspecto agradable, en el directorio raíz crearemos un nuevo directorio y lo llamaremos "css". Luego crearemos un nuevo archivo style.css con el siguiente código:
@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic");
/***************************************/
/* BASIC */
/***************************************/
article, aside, figure, footer, header, menu, nav, section { display: block; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { font-family: -apple-system,BlinkMacSystemFont, Lato, "Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-weight: 300; text-rendering: optimizeLegibility; line-height: 1.5; word-spacing: 1px; letter-spacing: normal; background-color: #fafafa; margin: 0;}
a { color: #228896; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-decoration: none; }
a:hover, a:active, a:focus { color: rgba(2, 42, 63, 1); outline: none; text-decoration: none; }
.nl { font-weight: 500; color: #228896; }
h1, h2, h3 { letter-spacing: 1px; }
h1 { margin-top: 0; margin-bottom: 20px; font-size: 240%; word-spacing: 4px; }
h2 { font-size: 180%; word-spacing: 1px; text-align: left; text-transform: uppercase; }
h2:after { display: block; height: 1px; content: " "; width: 100px; margin: 0 auto; }
/*---------------------------------------------------*/
/* WRAPPERS */
/*---------------------------------------------------*/
.wrapper { padding: 4em 1em 4em 1em; text-align: center; }
.wrapper.bg1 { background: linear-gradient(180deg, rgba(2, 42, 63, 1), rgba(2, 42, 63, 0.7)), transparent; background-color: rgb(2, 42, 63); background-size: cover; background-position: top; height: auto; clip-path:polygon(0 0, 100% 0, 100% 83%, 0 100%); color: #fff; }
.wrapper.bg2 { background: linear-gradient(180deg, rgba(250, 250, 250, 0.9), rgba(255,255,255,1), transparent); }
/***************************************/
/* LANGUAGE NAV */
/***************************************/
.language-nav { position: absolute; right: 10px; top: 10px; height: 50px; margin-bottom: 10px; }
/***************************************/
/* UL SELECT LIST */
/***************************************/
.btn-select {
display:block;
width: 120px;
background: rgba(2, 42, 63, 1);
background-size:32px 32px;
background-repeat:no-repeat;
background-position: 10px;
margin:0;
padding:4px 5px 2px 50px;
cursor:pointer;
color:#fff;
font-weight: 400;
text-align: left;
}
.ul-select {
list-style-type:none;
position:absolute;
background: rgba(2, 42, 63, 0.9);
margin:0;
padding:0;
border-left:1px rgba(34, 136, 150, 0.4) solid;
border-right: 1px rgba(34, 136, 150, 0.4) solid;
border-bottom: 1px rgba(34, 136, 150, 0.4) solid;
height: auto;
overflow-y: auto;
color: #fff;
text-align: left;
}
.li-option {
width: 100%;
color:#fff;
margin:0;
padding:2px 10px 2px 40px;
cursor:pointer;
background-size: 32px 32px;
background-repeat: no-repeat;
display: inline-block;
-webkit-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s;
}
.li-option.selected {
background-color: rgba(34, 136, 150, 1);
font-weight: 400;
}
.li-option:hover {
color:#fff;
background-color: rgba(34, 136, 150, 1);
font-weight: 400;
}
/* Select */
select, select:focus {
width: 120px;
display: none;
top: 30px;
left: 0px;
}
/* end Select */
/***************************************/
/* ARTICLE */
/***************************************/
.demo-article { padding: 10px 25px 10px 25px; }
.demo-article h2 { color: rgba(26, 115, 132, 1); text-transform: uppercase; width: auto; font-weight: 600; font-family: 'Titillium Web'; line-height: 30px; font-size: 115%; word-spacing: 2px; text-align: center; margin-bottom: 30px; letter-spacing: 1px; }
.demo-article h2:after { display: block; height: 2px; background-color: rgba(26, 115, 132, 0.6); content: " "; width: 100px; margin: 0 auto; margin-top: 10px; }
.demo-article p { padding: 25px; text-align: left !important; }
.demo-article p:last-child{ margin-top: -65px; }
/*---------------------------------------------------*/
/* Images */
/*---------------------------------------------------*/
.image { display: block; max-width: 371px; max-height: 371px; height: 100%; width: 100%; }
.drop-shadow { filter: drop-shadow(1px 2px 4px #585858); }
/***************************************/
/* Footer */
/***************************************/
footer { background-color: #022A3F; padding: 5px; text-align: center; width: 100%; position: relative; bottom: 0; }
footer p { color: #fff; font-weight: 300; font-size: 15px; margin-top: 10px; }
/*---------------------------------------------------*/
/* Media Query */
/*---------------------------------------------------*/
@media screen and (max-width: 576px) {
.demo-article { padding: 0; }
}
En este artículo aprendimos cómo implementar fácilmente el soporte para sitios web multilingües usando PHP. Puede ver una demostración en vivo usando el enlace Demostración a continuación.
