Deubrir error de validación W3C en plantilla WordPress.

[tranzorx]

Hola a todos.
Tengo un problema de errores de validación en la siguiente plantilla de Wordpress:
Ecommerce Theme.

Dichos errores sólo se presentan en dicha plantilla, pues he probado con la que viene genérica y me da cero.
He efectuado un rastreo de otras páginas con la misma plantilla.
Conclusión: la plantilla tiene un error de programación.

El error que me el validador y la zona del código fuente HTML son los siguientes:

LOS ERRORES

# Error Line 80, Column 4: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

<li>



The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
# Error Line 81, Column 6: end tag for "li" omitted, but OMITTAG NO was specified

</ul>


You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
# Info Line 80, Column 1: start tag was here

<li>

# Error Line 81, Column 6: end tag for "li" omitted, but OMITTAG NO was specified

</ul>


You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

EL CÓDIGO HTML CORRESPONDIENTE.

76 <div class="featureleft">
77 <ul>
78 <li>
79 <a href="#"><img src="http://localhost/wordpress/wp-content/themes/Ecommerce-Pink/images/featureproduct.jpg" alt="Feature Product" border="0" /></a>
80 <li>
81 </ul>
82 </div>

El propio WordPress lleva una utilidad para editar partes de código fuente, de hecho he ya he quitado algunos errores, pero esta parte no me aparece en ninguna de los apartados que trae para ello.
Probablemente tendré que editar a mano algunos de los archivos a través del "file manager".

Tengo Dreamweaver, Fireworks, y las extensiones Firebug y Web Developer.

Lo único que me faltan son conocimientos para emprender la tarea, pues estoy haciendo un curso de programación y todavía soy principiante en la materia.

Un último punto: estoy trabajando en localhost (127.0.0.1), ya que aunque el problema lo tengo igualmente en el hosting, los experimentos me gusta hacerlos en casa por aquello de la seguridad. Lo tengo instalado sobre WampServer.


Muchas gracias por la ayuda.

Un saludo afectuoso.

[sanxuan]

En principio parece que en la línea 80 debería aparecer </li> en lugar de <li>. Quizás sea la causa.

[tranzorx]

Sí, en cuanto a cual es el error estoy totalmente de acuerdo.
De hecho si sabes un poco de inglés te lo dice el propio validador.

El problema que tengo es cual de los tropecientos archivos php tengo que editar para cambiar la etiqueta de <listado>.

En definitiva, la cuestión es sabes cómo estructura WordPress sus archivos para llegar al HTML final que validamos con el W3C.

Sigo investigando...

[sanxuan]

Se suelen usar herramientas de búsqueda a lo largo de múltiples ficheros. Si no tienes algo parecido puedes hacer una búsqueda con Google en "find and replace" o "buscar texto en ficheros" o algo así. Tienen que aparecer herramientas gratuitas. Luego sería cuestión de hacer la búsqueda usando una parte significativa del texto, ( por ejemplo: alt="Feature Product" border="0" /></a> ) eso debe localizarte el archivo adecuado y hasta línea en que se encuentra lo que buscas.
Yo no tengo en estos momento ninguno que te pueda recomendar, pero no creo que te falten sugerencias. http://www.google.es/#hl=es&xhr=t&q=...9fd80be5b558e1

[IvanAsturS]

Hola, yo empezaría buscando en la carpeta de temas dentro de la carpeta que corresponda al tema que utilizas. No conozco ese tema, pero seguro que no encuentras muchos problemas para encontrarlo.

De todas maneras, comentas que utilizas el Dreamweaver, por lo que una solución rápida para encontrarlo pasaría por:
1) Crear un Sitio en Dreamweaver para tu página.
2) Hacer una búsqueda de código en el sitio completo. Por ejemplo podrías buscar la cadena: div class="featureleft" y te mostraría todas las páginas en las que aparece por lo que seguramente darías con el error ;)

Un saludo

[tranzorx]

Hola y muchas gracias por vuestras respuestas.
Finalmente lo he solucionado con el Linux openSUSE.
Ay... el linux siempre me saca de los atolladeros.

En el sistema del pingüino el soporte se llama LAMP, y el WordPress con su "Theme" está instalado en la siguiente ruta con los siguientes archivos y directorio (/images/ es un directorio).

/srv/www/htdocs/wordpress/wp-content/themes/Ecommerce-Pink

/images/
404.php
dropdown.css
footer.php
home_option.php
l_sidebar_ecommerce.php
lt-ie7.css
single.php
archive.php
dropdown.js
functions.php
l_sidebar.php
page.php
style.css
comments.php
feature_product.php
header.php
index.php
lte-ie7.css
screenshot.gif

En el archivo feature_product.php tengo la cadena que buscada con todo este contenido:

<div id="feature" class="clearfix">
<div class="featureleft">
<ul>
<li>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Feature Left') ) : else : ?>
<a href="#"><img src="<?php bloginfo('template_url'); ?>/images/featureproduct.jpg" alt="Feature Product" border="0" /></a>
<!--<li>-->
<?php endif; ?>
<!--</ul>-->
</div>

<div class="featureright">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Feature Right') ) : else : ?>
<li> <h2>Featured Product</h2>
<p>This featured product area is designed to put focus on certain products predominantly, highlighting the benefits of the product to your prospective customers. Also, you can edit this area through the WordPress Dashboard Widgets. </p>
<p>Put more text here that describes why they should purchase. </p>
<p><a href="#" >Click here for more information &raquo;</a></p>
</li>
<?php endif; ?>
</ul>
</div>
</div>

Como se puede ver ha y añadido algunas etiquetas de comentario "<--<comentario>-->" sobre otras etiquetas. De este modo evito borrar nada hasta no estar seguro de que el validador me la da como buena.
Este archivo parece que es un coladero de errores.

[tranzorx]

Hola.
He solucionado todos los errores de la plantilla principal salvo uno que no comprendo muy bien.
Yo la verdad es que no veo la anomalía por ninguna parte, pero os pongo aquí la documentación a ver si veo la luz y de paso aprendo.

Me gustaría saber si Dreamweaver lleva alguna funcionalidad que te diga los errores y cómo corregirlos.
Si es así, agradecería que se lo más explícita posible. Apenas llevo unos días con Dw y todavía no sé muy bien el manejo.

Saludos y muchas gracias por vuestra colaboración.

ERROR DEL VALIDADOR.

Validation Output: 1 Error

1. Error Line 110, Column 7: end tag for "ul" which is not finished

</ul>

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

CÓDIGO FUENTE DE LA PÁGINA QUE ARROJA EL ERROR.

106 <!--recent posts-->
107# <li>
108 <h2>Latest Products</h2>
109 <ul>
110 </ul>
111 </li>
112
113 <!--list of categories, order by name, without children categories, no number of articles per category-->
114 <li>-
115 <h2>By Category</h2>
116 <ul>
117 <li>No hay categorías</li> </ul>
118 </li>

CONTENIDO ARCHIVO I_SIDEBAR.PHP

106 <!--recent posts-->
107 <li>
108 <h2>Latest Products</h2>
109 <ul>
110 </ul>
111 </li>
112
113 <!--list of categories, order by name, without children categories, no number of articles per category-->
114 <li>-
115 <h2>By Category</h2>
116 <ul>
117 <li>No hay categorías</li> </ul>
118 </li>

[sanxuan]

De las dos líneas que tienes marcadas en rojo, elimina el comentario y sitúa una barra inclinada dentro de la etiqueta para que ponga </li>.
En la otra línea retira el comentario y deja </ul> tal y como estaba.
No creo que tenga otro error.
En Dreamweaver tienes una herramienta de validación incorporada. Selecciona el menú ventana y escoge Resultados. En la misma ventana aprece una pestaña de validación. Pulsando en la flecha verde que aparece al lado izquierdo se procede a validar el documento actual o todo el sitio.
Esta herramienta puede ser util para validar tu código localmente. A pesar de ello, una vez que tengas tu sitio subido a la red comprueba las páginas con el validador de w3c. http://validator.w3.org
Es lo más recomendable.

[IvanAsturS]

Hola,

Yo dejaría el contenido de I_SIDEBAR.PHP así:

Código HTML:

106 <!--recent posts-->
107 <li>
108 <h2>Latest Products</h2>
109 <!--<ul>
110 </ul>-->
111 </li>
112
113 <!--list of categories, order by name, without children categories, no number of articles per category-->
114 <li>
115 <h2>By Category</h2>
116 <ul>
117 <li>No hay categorías</li> </ul>
118 </li> 

He comentado las líneas 109 y 110, ya que creo que el error te está dando porque debe existir contenido dentro de cualquier lista, es decir que dentro del código <ul></ul> debería haber algún <li></li>

Espero te sirva, un saludo, Iván

[tranzorx]

Gracias por vuestra ayuda.
Pondré en práctica vuestros consejos.

Bye!!