De Indianopedia

Problemas con el plugin

Antes que nada presento el caso. Ahora mismo el plugin genera un html desordenado, que sólo tiene sentido al verlo con javascript activado (javascript arma el rompecabezas). Y también es un tanto impráctico de poner en la plantilla.

Objetivos

1. Generar un html accesible que tenga sentido por sí mismo (incluso sin js ni css).
2. Conseguir con css la mejor funcionalidad posible sin requerir javascript (actualmente los idiomas alternativos están escondidos con css y el menú no funciona).
3. Usar javascript para un funcionamiento como el actual pero no intrusivo (sin modificar más de lo necesario el html y usandolo en conjunto con css).
4. Lograr que sea más fácil de incorporar a la plantilla.

Ideas

1. y 4. Tomar algunos parámetros y usar el plugin para generar todo el post (como un bloque) y reproducirlo en los idiomas restantes. Por ejemplo, sería mejor poder usar algo así:

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
<?php apertium_the_title('h2', 'permalink', 'mi-clase'); ?>

<div class="entry">
<?php the content(); ?>
</div>

La idea es que tomando algunos parámetros opcionales (el nivel de titular, si irá enlazado o no, y si llevará una clase, con una implementación por defecto) se pueda generar un post así:

<div id="apertium"><!-- contenedor de todos los idiomas -->
<div id="es-postid" class="es"><!-- div que abarca menú, título y post de cada idioma con id y clase -->

<div class="languages-menu"><!-- menú con opciones de idioma antes del título, para poder leer de corrido título y post -->
<h3>Versiones latoc</h3><!-- Esto debe ser un titular de un nivel menos que el del post -->
<ul><!-- la forma correcta de presentar el menú es con una lista desordenada -->
<li><a href="#es-postid">es</a><li>
<li><a href="#pt-postid">pt</a></li>
<ul>
</div>

<h2 class="mi-clase"><a href="url-del-permalink">Título del post</a><h2><-- Título del post según los parámetros -->

<div class="entry">Contenido del post</div>

</div><!-- Cierra el div con el idioma -->

<div id="pt-postid" class="pt hidden"><!-- igual que el anterior pero con la clase hidden para que no se vea por defecto -->
Aquí se repite lo mismo (incluído el menu de lenguajes) pero con la traducción.
</div>

</div><!-- Cierra el contenedor apertium -->

Me parece que el html quedaría mejor estructurado e incluso más fácil de manipular (es cuestión de mostrar o esconder los divs, tanto con css como con js).

Pasando al punto 2, estoy haciendo unas pruebas y quiero profundizar un poco más, pero por ahora veo que se puede conseguir una funcionalidad bastante similar a la actual con js usando sólo css (un poco avanzado) que funciona en FF, Safari (webkit) y Opera. Una solución menos elegante quedará para IE, pero de cualquier forma será mejor o igual que no mostrar ninguna traducción.

3.Con el javascript por ahora se me ocurre que será cuestión de tomar la altura de cada div de idioma, luego esconderlos, y luego al cliquear los enlaces mostrar el adecuado y hacer que el contenedor tome su altura. Como todavía soy un pésimo programador y los navegadores (bah, IE...) tienen bastantes inconsistencias al interpretar js, se me ocurre que lo más práctico y rápido sería usar la librería jquery. Aunque puede ser que tener que descargar toda una librería (actualmente 19k) para tan poco código no sea lo más recomendable.

4. Aparte de lo escrito antes, se me ocurre que el plugin mismo podría apuntar al javascript desde el head usando el wp_head pero no tengo ni la más mínima idea de cómo se hace.

Aportes?