Recientemente he estado trabajando en unos pequeños sitios, realmente solo contienen algunos datos dinámicos en PHP y el resto es HTML, JS Y CSS. La parte dinámica la he estado trabajando para manejar varios idiomas dentro de un mismo sitio web.
En base a que estoy utilizando varias veces el mismo código, he decidido compartir la fuente para que las personas interesadas en saber cómo hacer un sitio multi-idioma con PHP puedan realizarlo de manera sencilla y sin tanto esfuerzo, bueno, si, un poco ya que al final tendrás que traducir manualmente la web para servir los archivos.
Requisitos
- Hosting con PHP 5.1+
- Dominio propio
- Hacer git del repositorio
Como puedes ver, los requisitos son mínimos, no necesitas ser un experto en PHP para comenzar a tener tu pagina web en varios idiomas.
Funcionamiento
El script es bastante sencillo y la velocidad que se alcanza es tan rápida que no se siente que está siendo modificada en tiempo real, aunque esto dependerá mucho del servidor en donde alojes el contenido de tu pagina web.
Lo que se hace es colocar un formulario con HTML el cual tendrá campos select para navegar entre los lenguajes disponibles, a manera de prueba yo he colocado el Inglés y el Español aunque tu puedes agregar todos los que tu quieras.
Enviaremos los datos por POST para que PHP nos cree una sesión y en base a la sesión determinamos con una condición el lenguaje seleccionado, para determinar cada texto utilizaremos un solo array en un archivo independiente para cada lenguaje.
Nuestro proyecto se debería de ver algo así:
lenguaje/
├── lang/
│ ├── en.php
│ ├── es.php
├── index.php
Creando nuestro sitio multi-idioma con PHP
Primeramente tendremos que crear nuestro index.php
y dentro colocar un HTML básico, recordemos que PHP y HTML se mezcla mediante fragmentos entonces tendremos que definir nuestra configuración en la parte superior del documento. Tal como se muestra en el siguiente ejemplo:
<?php // iniciamos una sesion session_start(); //verificamos si hay cambios de lenguaje mediante POST if(isset($_POST["lang"])){ $lang = $_POST["lang"]; if(!empty($lang)){ $_SESSION["lang"] = $lang; } } // verificamos la sesion creada if(isset($_SESSION['lang'])){ // si es true, se crea el require y la variable lang $lang = $_SESSION["lang"]; require "lang/".$lang.".php"; // si no hay sesion por default se carga el lenguaje espanol }else{ require "lang/es.php"; } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title><?php echo $lang["titulo"]; ?></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> </head> <body> <header> <nav class="navbar navbar-light bg-light justify-content-between"> <a class="navbar-brand"><?php echo $lang["logo"]; ?></a> <form class="form-inline" method="POST"> <label class="mr-sm-2" for="inlineFormCustomSelectPref"><?php echo $lang["cambiar_idioma"]; ?></label> <select class="custom-select mb-2 mr-sm-2 mb-sm-0" name="lang"> <option selected><?php echo $lang["opcion_1"]; ?></option> <option value="es"><?php echo $lang["opcion_2"]; ?></option> <option value="en"><?php echo $lang["opcion_3"]; ?></option> </select> <button type="submit" class="btn btn-primary"><?php echo $lang["cambiar"]; ?></button> </form> </nav> </header> <div class="container"> <div class="row"> <div class="col-sm-8"> <h3><?php echo $lang["descripcion"]; ?></h3> </div> <div class="col-sm-4"> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </body> </html>
El ejemplo es realmente sencillo y te muestra las bases necesarias para que puedas escalar a otras funciones interesantes, a manera de demostración he decidido montar un HTML con Bootstrap para ahorrar tiempo en los estilos.
No quiero hacer muy largo este artículo explicando linea por linea, así que me he dado la tarea de comentar el código, así entenderás con mejor precisión lo que hace cada linea de código.
Te pongo el ejemplo que he publicado en Github:
<?php // Definimos todas las palabras en ingles un array $lang = array( "titulo" => "Multilingual system", "logo" => "Multilingual system", "cambiar_idioma" => "Language", "cambiar" => "Change", "opcion_1" => "Select", "opcion_2" => "Spanish", "opcion_3" => "English", "descripcion" => "Hello, this is a title in Spanish", );
Definimos con un array la variable lenguaje, posteriormente definimos el identificador con una función de flecha la palabra que aparecerá para dicho id.
Listo, con estas bases podrás comenzar para crear tu sitio multi-idioma con PHP fácilmente, no hace falta ser un experto en programación para poder realizar esta función, solo tienes que tener un poco de paciencia y listo.
Si te ha gustado este articulo por favor compártelo en redes sociales o deja un comentario abajo, de esta manera me ayudaras a seguir trayendo contenido de calidad al blog, un abrazo virtual! 😀
Obtén beneficios exclusivos
Suscríbete al boletín y obtén beneficios exclusivos directo en tu correo.
Gracias por suscribirte...
Algo salió mal...
Muy buen post!
Hola muy bueno todo, yo ya hice un sitio web en inglés y necesito traducirlo a español con multilingüe con selector de idiomas. Cómo haría en ese caso?
Excelente post!! y muy sencillo de implementar
Es bueno saber que te gustó Cisrael, pronto estaré trayendo una actualización para este artículo que incluye mejoras 😉