{"id":586,"date":"2021-11-25T14:36:58","date_gmt":"2021-11-25T13:36:58","guid":{"rendered":"https:\/\/blogs.ugr.es\/tutoriales\/?p=586"},"modified":"2021-12-10T09:06:35","modified_gmt":"2021-12-10T08:06:35","slug":"integrando-varios-idiomas-con-polylang","status":"publish","type":"post","link":"https:\/\/blogs.ugr.es\/tutoriales\/integrando-varios-idiomas-con-polylang\/","title":{"rendered":"Integrando varios idiomas con Polylang"},"content":{"rendered":"<h2>Blogs Multiidioma<\/h2>\n<p>Muchas veces podemos querer tener m\u00e1s de un idioma en nuestro blog. Puede que queramos tener alg\u00fan post traducido a otro u otros idiomas o incluso puede que queramos tener todo nuestro sitio en varios idiomas. WordPress por defecto no permite esto pero vamos a ver un Plugin con el que podremos tener nuestro blog en varios idiomas.<\/p>\n<h2>Plugin Polylang<\/h2>\n<p>El plugin Polylang te permite crear un sitio web de WordPress biling\u00fce o multiling\u00fce. Lo primero que haremos ser\u00e1 definir que idiomas queremos tener en nuestro blog (posteriormente podr\u00edamos a\u00f1adir m\u00e1s). Una vez los hayamos definido, escribiremos entradas, p\u00e1ginas y crearemos categor\u00edas y etiquetas como siempre, y luego definiremos el idioma para cada una de ellas. La traducci\u00f3n de una entrada, ya sea en el idioma predeterminado o no, es opcional.<\/p>\n<p>Se pueden usar tantos idiomas como quieras y Puedes traducir entradas, p\u00e1ginas, media, categor\u00edas, etiquetas, men\u00fas, widgets\u2026<\/p>\n<p>El plugin proporciona un selector de idioma personalizable como widget o en el men\u00fa de navegaci\u00f3n.<\/p>\n<h2>Configuraci\u00f3n Inicial<\/h2>\n<p>En primer lugar necesitamos configurar el plugin para que todo funcione correctamente. Para hacerlo disponemos de un asistente que nos guiar\u00e1 en unos sencillos pasos y que permitir\u00e1 la activaci\u00f3n de las opciones que Polylang nos ofrece.<\/p>\n<p>Para ejecutar este asistente debemos entrar en el escritorio de WordPress y, en el men\u00fa izquierdo, buscar la opci\u00f3n \u201cIdiomas\u201d y, dentro de esta, \u201cConfiguraci\u00f3n\u201d. Aparecer\u00e1 entonces el asistente de Polylang.<\/p>\n<p>En la primera p\u00e1gina del asistente tenemos que elegir los idiomas que habr\u00e1 en nuestro blog. Elegiremos para empezar el Espa\u00f1ol de Espa\u00f1a (Espa\u00f1ol \u2013 es_ES) y pulsaremos el bot\u00f3n \u201c+ A\u00f1adir nuevo Idioma\u201d.\u00a0 A continuaci\u00f3n vamos a a\u00f1adir un segundo idioma, el Ingl\u00e9s de Inglaterra (English \u2013 en_GB), lo elegimos en la lista y volvemos a pulsar el bot\u00f3n para a\u00f1adirlo. Vemos que debajo del selector desplegable aparecen ahora los dos idiomas elegidos. Pulsaremos el bot\u00f3n \u201cContinuar\u201d.<\/p>\n<p>En el siguiente paso decidimos si dejamos que Polylang permita la traducci\u00f3n de los t\u00edtulos, texto alternativo, leyenda, etc. De los medios (fotos, etc) que hayamos insertado. Por defecto aparece activada esta opci\u00f3n, la vamos a dejar as\u00ed y pulsaremos \u201cContinuar\u201d.<\/p>\n<p>El tercer paso del asistente permite definir el idioma del contenido ya presente en nuestro blog. En nuestro caso como este contenido est\u00e1 en Espa\u00f1ol, lo seleccionamos si no aparece ya seleccionado y pulsamos \u201cContinuar\u201d de nuevo.<\/p>\n<p>El cuarto paso nos pregunta si queremos crear\u00a0 una p\u00e1gina de inicio el resto de idiomas que hayamos definido. Estas p\u00e1ginas se crear\u00e1n vac\u00edas (no es problema, ya que la original tambi\u00e9n est\u00e1 vac\u00eda y se utiliza \u00fanicamente para poner widgets en ella). Avanzamos la siguiente paso del asistente pulsando el bot\u00f3n \u201cContinuar\u201d.<\/p>\n<p>Con esto termina el asistente de configuraci\u00f3n de Polylang. En la \u00faltima p\u00e1gina pulsamos el bot\u00f3n \u201cVolver al escritorio\u201d.<\/p>\n<h2>Traducci\u00f3n de una entrada<\/h2>\n<p>A continuaci\u00f3n vamos a ver como se traduce una entrada. Para empezar accederemos a la opci\u00f3n \u201cEntradas\u201d del escritorio de WordPress. Al hacerlo WordPress nos muestra la lista de entradas y en ella observamos ya una importante diferencia:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-590 size-full\" src=\"https:\/\/blogs.ugr.es\/tutoriales\/wp-content\/uploads\/sites\/23\/2021\/11\/Polylang1.png\" alt=\"\" width=\"1264\" height=\"702\" srcset=\"https:\/\/blogs.ugr.es\/tutoriales\/wp-content\/uploads\/sites\/23\/2021\/11\/Polylang1.png 1264w, https:\/\/blogs.ugr.es\/tutoriales\/wp-content\/uploads\/sites\/23\/2021\/11\/Polylang1-300x167.png 300w\" sizes=\"auto, (max-width: 1264px) 100vw, 1264px\" \/><\/p>\n<p>Podemos observar que han aparecido dos nuevas columnas, una con la bandera espa\u00f1ola y otra con la brit\u00e1nica. La primera columna presenta en todas las entradas la bandera espa\u00f1ola, indicando que ese es el idioma del post y en la columna de la bandera brit\u00e1nica vemos un s\u00edmbolo \u201c+\u201d que nos permitir\u00e1 a\u00f1adir la traducci\u00f3n de la entrada.<\/p>\n<p>Vamos a empezar traduciendo el Post \u2018Curso \u201cEcolog\u00eda para dummies\u201d\u2019. Pulsamos el bot\u00f3n + que vemos, en la fila de esa entrada, bajo la bandera brit\u00e1nica. WordPress nos muestra la pantalla habitual de edici\u00f3n de entradas pero en ella observamos un cambio: en la parte superior derecha aparece el siguiente recuadro:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-591 size-full alignleft\" src=\"https:\/\/blogs.ugr.es\/tutoriales\/wp-content\/uploads\/sites\/23\/2021\/11\/Polylang2.png\" alt=\"\" width=\"304\" height=\"227\" srcset=\"https:\/\/blogs.ugr.es\/tutoriales\/wp-content\/uploads\/sites\/23\/2021\/11\/Polylang2.png 304w, https:\/\/blogs.ugr.es\/tutoriales\/wp-content\/uploads\/sites\/23\/2021\/11\/Polylang2-300x224.png 300w\" sizes=\"auto, (max-width: 304px) 100vw, 304px\" \/><\/p>\n<p>\u00bfQu\u00e9 nos est\u00e1 indicando? El idioma de la entrada (English) y las p\u00e1ginas que son traducciones de la actual y el idioma en el que est\u00e1n.<\/p>\n<p>Vamos a crear la traducci\u00f3n. Ponemos el t\u00edtulo de la entrada en ingl\u00e9s (Course \u201cEcology for dummies\u201d) y a\u00f1adimos texto, varios p\u00e1rrafos para que se visualice bien en la p\u00e1gina inicial; podemos utilizar texto del fichero \u201cloremipsum.text\u201d que ya usamos en el Tema 1A. Para terminar podemos comprobar como no nos hace falta definir la imagen destacada: Polylang ya la ha copiado a la nueva entrada. Pulsamos \u201cPublicar\u201d y guardamos la entrada.<\/p>\n<p>Podemos ahora previsualizar la p\u00e1gina. Vemos que sale el t\u00edtulo en ingl\u00e9s, tal y como hemos puesto, su texto y si observamos ya aparecen algunos elementos autom\u00e1ticos traducidos: la fecha y hora de publicaci\u00f3n del post, algunos t\u00edtulos de widgets\u2026<\/p>\n<p>La entrada no tiene ninguna categor\u00eda asociada y adem\u00e1s\u2026 no las hemos traducido a\u00fan. El siguiente paso va a ser traducirlas para poder asign\u00e1rselas a la entrada en ingl\u00e9s que acabamos de crear.<\/p>\n<h2>Traducci\u00f3n de Categor\u00edas<\/h2>\n<p>A continuaci\u00f3n vamos a traducir las categor\u00edas, paso necesario para poder asignarlas a las entradas que vayamos traduciendo al ingl\u00e9s. Para hacerlo debemos entrar en el men\u00fa \u201cEntradas\u201d y dentro de \u00e9ste, \u201cCategor\u00edas\u201d, apareciendo la siguiente pantalla:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-592 size-full\" src=\"https:\/\/blogs.ugr.es\/tutoriales\/wp-content\/uploads\/sites\/23\/2021\/11\/Polylang3.png\" alt=\"\" width=\"1251\" height=\"783\" srcset=\"https:\/\/blogs.ugr.es\/tutoriales\/wp-content\/uploads\/sites\/23\/2021\/11\/Polylang3.png 1251w, https:\/\/blogs.ugr.es\/tutoriales\/wp-content\/uploads\/sites\/23\/2021\/11\/Polylang3-300x188.png 300w\" sizes=\"auto, (max-width: 1251px) 100vw, 1251px\" \/><\/p>\n<p>Vemos que esta pantalla se ha modificado de forma similar a como se modific\u00f3 la de entradas, con nuevas columnas para indicar el idioma de la categor\u00eda. Tambi\u00e9n podemos observar que Polylang ya ha a\u00f1adido por defecto la traducci\u00f3n de la categor\u00eda \u201cSin categor\u00eda\u201d , aunque el texto sigue apareciendo en espa\u00f1ol.<\/p>\n<p>Para a\u00f1adir una traducci\u00f3n lo \u00fanico que tenemos que hacer es pulsar el s\u00edmbolo m\u00e1s (+) de una de ellas, por ejemplo \u201cCursos\u201d y, en el editor\u00a0 que aparece, ponemos los siguientes valores en los campos:<\/p>\n<ul>\n<li>Nombre: Courses<\/li>\n<li>Slug: courses<\/li>\n<\/ul>\n<p>Observamos tambi\u00e9n que en la parte inferior tenemos dos campos que antes no aparec\u00edan: uno con el idioma de la categor\u00eda y otro indicando de qu\u00e9 palabra en espa\u00f1ol es traducci\u00f3n.<\/p>\n<p>Pulsamos el bot\u00f3n \u201cA\u00f1adir nueva categor\u00eda\u201d y creamos la traducci\u00f3n de la categor\u00eda \u201cCursos\u201d al ingl\u00e9s. <strong>IMPORTANTE<\/strong>: hay un bug en el sistema y al a\u00f1adir una nueva categor\u00eda a veces, al darle el bot\u00f3n, parece que no hace nada o que se queda esperando. No os preocup\u00e9s, si volv\u00e9is a pulsar la opci\u00f3n \u201cCategor\u00edas\u201d en el men\u00fa aparecer\u00e1 la categor\u00eda ya a\u00f1adida.<\/p>\n<p><strong>Ejercicio:<\/strong><\/p>\n<p>Traduce todas las categor\u00edas al ingl\u00e9s:<\/p>\n<table style=\"height: 215px;\" width=\"581\">\n<tbody>\n<tr>\n<td width=\"288\">Cursos<\/td>\n<td width=\"288\">Courses<\/td>\n<\/tr>\n<tr>\n<td width=\"288\">Conferencias<\/td>\n<td width=\"288\">Conferences<\/td>\n<\/tr>\n<tr>\n<td width=\"288\">Cursos y Conferencias<\/td>\n<td width=\"288\">Courses and Conferences<\/td>\n<\/tr>\n<tr>\n<td width=\"288\">Noticias<\/td>\n<td width=\"288\">News<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>Una vez las hayas traducido pon a la entrada \u2018Course \u201cEcology for dummies\u201d\u2019 las categor\u00edas \u201cCourses\u201d y \u201cCourses and Conferences\u201d.<\/p>\n<p><strong>Ejercicio:<\/strong><\/p>\n<p>Traduce el resto de entradas al ingl\u00e9s. No hace falta que pongas un texto real en ingl\u00e9s, puedes utilizar textos del fichero loremimpum.txt, basta con traducir los t\u00edtulos (y tampoco es necesaria una traducci\u00f3n perfecta J). Recordad poner las categor\u00edas a las traducciones. Observad que en la lista de entradas las que est\u00e1n sin traducir tienen un signo + bajo la bandera del idioma del que no hay traducci\u00f3n y las que est\u00e1n traducidas tienen un l\u00e1piz que permite editarlas.<\/p>\n<p>Podemos ver c\u00f3mo queda cada uno de los post pulsando en el bot\u00f3n \u201cVista previa de los cambios\u201d.<\/p>\n<h2>Widget Selector de Idioma<\/h2>\n<p>Hemos visto como traducir el contenido pero a\u00fan, si visitamos la p\u00e1gina principal de nuestro blog, no vemos c\u00f3mo podemos cambiar entre el blog en espa\u00f1ol y el blog en ingl\u00e9s. Para permitir esto Polylang a\u00f1ade a WordPress un widget que permitir\u00e1 a los visitantes de nuestro blog ver el contenido en el idioma deseado dentro de los disponibles.<\/p>\n<p>El widget se llama \u201cSelector de Idioma\u201d y tiene las siguientes opciones de configuraci\u00f3n:<\/p>\n<ul>\n<li>Se muestra como un men\u00fa desplegable: Muestra un desplegable con todos los idiomas disponibles<\/li>\n<li>Muestra los nombres de los idiomas: muestra en texto el idioma<\/li>\n<li>Muestra las banderas: muestra el idioma como una bandera<\/li>\n<li>Fuerza un enlace a la p\u00e1gina de inicio: Si est\u00e1 opci\u00f3n est\u00e1 marcada cuando el visitante pulse en el enlace para cambiar de idioma se abrir\u00e1 la p\u00e1gina de inicio del blog en el idioma seleccionado. Si no est\u00e1 marcado la p\u00e1gina que se abrir\u00e1 ser\u00e1 la actual traducida al idioma seleccionado.<\/li>\n<li>Oculta el idioma actual: En el widget no se muestra el idioma actual del blog<\/li>\n<li>Oculta los idiomas sin traducci\u00f3n: si la entrada que est\u00e1 visualizando el visitante de nuestro blog no est\u00e1 en todos los idiomas que hemos definido en el blog solo mostrar\u00e1 los idiomas a los que est\u00e1 traducida.<\/li>\n<\/ul>\n<p><strong>Ejercicio:<\/strong><\/p>\n<p>Pon el widget \u201cSelector de idioma\u201d en la parte superior de la barra lateral primaria, con la configuraci\u00f3n que desees. Una vez puesto ya podr\u00e1s cambiar entre ver el Blog en espa\u00f1ol o en ingl\u00e9s.<\/p>\n<h2>Traducir men\u00fas<\/h2>\n<p>Una vez hemos puesto el widget en nuestro blog podemos intercambiar entre la versi\u00f3n en espa\u00f1ol y la versi\u00f3n en ingl\u00e9s pero en esta \u00faltima podemos observar que no est\u00e1 todo traducido: faltan por traducir el t\u00edtulo del blog, el men\u00fa y el t\u00edtulo de algunos widgets.<\/p>\n<p>Vamos a empezar viendo c\u00f3mo podemos traducir el men\u00fa. Debemos ir al escritorio de WordPress, elegir la opci\u00f3n \u201cApariencia\u201d-&gt;Men\u00fas y en la pantalla que aparece buscamos el enlace que dice \u201ccrea un nuevo men\u00fa\u201d y lo pulsamos. Vamos a crear un nuevo men\u00fa en ingl\u00e9s.<\/p>\n<p>Debemos ahora dar nombre al men\u00fa, por ejemplo, \u201cmen\u00fa en ingl\u00e9s\u201d y marcar una opci\u00f3n que dice \u201cAfter header men\u00fa English\u201d, que indica que se pondr\u00e1 solo en las p\u00e1ginas en ingl\u00e9s. Una vez hagamos esto a\u00f1adimos pulsamos el bot\u00f3n \u201cCrear Men\u00fa\u201d<\/p>\n<p>Ahora lo que queda por hacer es a\u00f1adir una opci\u00f3n de men\u00fa por cada una de las opciones de men\u00fa que hay en nuestro blog. Como solo tenemos en ingl\u00e9s la opci\u00f3n Inicio que apunta a la p\u00e1gina de inicio de nuestro blog solo a\u00f1adiremos esta:<\/p>\n<ul>\n<li>En el recuadro \u201cA\u00f1adir elementos al men\u00fa\u201d seleccionamos P\u00e1ginas y marcamos la que pone \u201cInicio\u201d y pulsamos el bot\u00f3n \u201cA\u00f1adir al men\u00fa\u201d. El elemento queda a\u00f1adido al men\u00fa.<\/li>\n<li>Lo desplegamos y como etiqueta de Navegaci\u00f3n ponemos \u201cHome\u201d<\/li>\n<li>Pulsamos \u201cGuardar Men\u00fa\u201d y ya tenemos nuestro men\u00fa para las p\u00e1ginas en ingl\u00e9s.<\/li>\n<\/ul>\n<p>Ya podemos ver nuestra p\u00e1gina en ingl\u00e9s con su men\u00fa.<\/p>\n<h2>Traducir t\u00edtulo del blog\u00a0 y t\u00edtulos de los widgets<\/h2>\n<p>Ya tenemos nuestro blog traducido pr\u00e1cticamente terminado. Solo nos queda modificar los t\u00edtulos del blog y de los widgets. Para hacerlo en el escritorio elegimos la opci\u00f3n \u201cIdiomas\u201d-&gt;\u201dTraducciones de Cadenas\u201d<\/p>\n<p>\u00bfQu\u00e9 nos muestra esta opci\u00f3n? Todas las cadenas de texto que hay en el blog y que no se han podido traducir de otra manera y, para cada cadena, su opci\u00f3n en espa\u00f1ol y en ingl\u00e9s. Solo tenemos que traducirlas todas (o las que consideremos necesarias) para que nuestro blog quede perfectamente traducido.<\/p>\n<p>Hay cosas que no debemos traducir simplemente porque son cosas que no se muestra, como lo etiquetado como \u201cj F, Y\u201d. Nos resultar\u00e1 f\u00e1cil ver que tenemos que traducir y que no.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blogs Multiidioma Muchas veces podemos querer tener m\u00e1s de un idioma en nuestro blog. Puede que queramos tener alg\u00fan post traducido a otro u otros idiomas o incluso puede que queramos tener todo nuestro sitio en varios idiomas. WordPress por defecto no permite esto pero vamos a ver un Plugin con el que podremos tener [&hellip;]<\/p>\n","protected":false},"author":579,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[9,13],"tags":[],"class_list":{"0":"post-586","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-tutoriales","7":"category-widgets","8":"entry","9":"has-post-thumbnail"},"_links":{"self":[{"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/posts\/586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/users\/579"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/comments?post=586"}],"version-history":[{"count":3,"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/posts\/586\/revisions"}],"predecessor-version":[{"id":593,"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/posts\/586\/revisions\/593"}],"wp:attachment":[{"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/media?parent=586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/categories?post=586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ugr.es\/tutoriales\/wp-json\/wp\/v2\/tags?post=586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}