Hoy en AyudaWordPress.com

Posted: 26 Feb 2012 04:05 PM PST

Si quieres convertir tu tema WordPress de XHTML a HTML5 vamos a ver paso a paso como hacerlo. Las ventajas de usar HTML5 tienen sobre todo que ver con una web más humana y fácil de leer, para los navegadores y también para los buscadores.

De hecho, Google te agradecerá que uses las ya estándar etiquetas HTML5.

En este tutorial vamos a convertir los siguientes archivos:

header.php
index.php
sidebar.php
footer.php
single.php
style.css

Estos archivos son los básicos de todo tema WordPress, el resto los puedes adaptar partiendo de las premisas de estos, que son los fundamentales.

1. Plantilla base HTML5

La estructura básica de HTML5 se basa en etiquetas como header, footer, nav, section y article que, en inglés, son mucho más autoexplicativas que la estructura mediante “div” de XHTML.

Un ejemplo completo sería este:

<!DOCTYPE html> <html lang="es"> <head> 	<title>TÍTULO | Descripción!</title> </head> <body> 	<nav role="navigation"></nav> <!--Fin de header.php--> <!--Empieza  index.php--> 	<section id="content"> 		<article role="main"> 			<h1>Título del artículo</h1> 			<time datetime="DD-MM-YYYY"></time> 			<p>El text de tus entradas irá aquí.</p> 			<p>Aquí termini el text de tu artículo.</p> 		</article>  		<aside role="sidebar"> 			<h2>Algún Widget en la barra lateral</h2> 		</aside> 	</section> <!--Fin de index.php--> <!--Empieza  footer.php--> 	<footer role="foottext"> 		<small>Algo de Copyright</small> 	</footer> </body> </html>

2. Convertir header.php a HTML5

Un fichero header.php tipo sería así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mi Web</title> <?php wp_head(); ?> </head> <body> <!-- Header  --> <div class="header"> 	<div class="container"> 		<h1><a href="<?php bloginfo('url');?>">Mi sitio web molón.</a></h1> 	</div><!-- End  Container --> </div><!-- End  Header -->  <!-- Navigation Bar Starts --> <div class="navbar"> 	<div class="container"> 		<ul class="grid nav_bar"> 			<?php wp_list_categories('navs_li='); ?> 	     </ul> 	</div> </div> <!-- Navigation Bar Ends --> <div class="container">

Si lo convertimos a HTML5 queda de este modo:

<!doctype html> <html> <head> <title>Mi Web</title> <?php wp_head(); ?> </head> <body> <!-- Header --> <header>     <div class="container">         <h1 class="grid"><a href="<?php bloginfo('url');?>">Mi sitio web molón.</a></h1>     </div> </header> <!-- End Header  -->  <!-- Navigation Bar Starts--> <nav>     <div class="navbar">         <ul class="grid nav_bar">             <?php wp_list_categories('title_li='); ?>          </ul>     </div> </nav> <!-- Navigation Bar Ends --> <section class="container">

El único elemento mantenido en la conversión sería la etiqueta div, que puedes sustituir por la nueva section si así lo deseas.

Otro cambio posible sería que en HTML5 se usan las etiquetas script y link. Así que puedes quitar type="text/javascript" Ya que cualquier navegador considerará la etiqueta script como JavaScript a menos que especifiques el tipo. Igualmente, puedes quitar type="text/css" de tu etiqueta link para la hoja de estilos.

3. Convertir index.php a HTML5

Para no poner todo el código posible, nos remitimos a las etiquetas básicas a modificar en un fichero index.php base, que sería así:

<div id="container"> <div id="content"> <div id="entries"> <div id="post">...</div>  </div><!--Fin de entries (loop)--> <?php get_sidebar(); ?> </div><!--Fin del content--> </div><!--Fin del container--> <?php get_footer(); ?>

Para pasarlo a HTML5 debemos cambiarlas por esto otro:

<div id="container"> 	<div id="content"> 		<section id="entries"> 			<article id="post">...</article> 		</section><!--fin entries--> 		<?php get_sidebar(); ?> 	</div><!--fin content--> </div><!--fin wrap--> <?php get_footer(); ?>

Llegados a este punto lo que hay que apuntarse es que en HTML5 section remplaza al div entries, que article sustituye el div posts y que aside es lo que se usa para nuestra barra lateral (sidebar).

Un index.php completo sería algo así:

<section class="entries">   <?php if (have_posts()) : while (have_posts()) : the_post();  <article class="post" id="post-<?php the_ID(); ?>">     <aside class="post_image">         <?php         if ( has_post_thumbnail() ) {             the_post_thumbnail();         } else { ?>             <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/imagen.gif" title="<?php the_title(); ?>" /></a>         <?php }?>     </aside>     <section class="post_content">         <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>         <p><?php echo get_the_excerpt(); ?></p>         <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more ">Sigue leyendo</a>     </section>     <section class="meta">      <p> <?php the_category(',') ?></p>      <p><?php the_tags(""); ?></p>      </section> </article>   <?php endwhile; else: ?>   <p>     <?php _e('Lo siento, no hay entraps relacionadas con lo que buscas.'); ?>   </p>   <?php endif; ?>    <?php posts_nav_link(' ⏼ ', __('« Entradas siguientes'), __('Entradas anteriores »')); ?> </section>

4. Convertir sidebar.php a HTML5

Un simple sidebar.php de este estilo:

<div id="sidebar">...</div>

Pasa a ser así en HTML5:

<aside id="sidebar">...</aside>

Como ves lo importante es cambiar el div por aside, que lo identifica como tal.

5. Convertir footer.php a HTML5

De nuevo, esto es sencillito, pasando de algo así:

<div id="footer"> <div id="foot_widgets">...</div> <div id="copyright">...</div> </div> <?php wp_footer(); ?> </body> </html>

a esto otro en HTML5:

<footer id="footer"> <section id="foot_widgets">...</section> <section id="foot_widgets">...</section> <section id="foot_widgets">...</section> <div id="copyright">...</div> </footer> <?php wp_footer(); ?> </body> </html>

6. Convertir single.php a HTML5

Aquí, partiendo de un fichero tipo single.php en XHTML como este:

<?php get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  <div class="container"> <div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>     <div class="content">         <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>          <div id="entry-content-single">           <?php the_content('<p >Read More</p>'); ?>         </div>         <div class="meta"> Posted by:           <?php the_author() ?>           <?php edit_post_link(__('Edit This')); ?>             <p><?php the_tags(""); ?></p>         </div>         <div class="clearfix"></div>     </div>    <!-- End of post --> </div></div>  <?php get_footer(); ?>

Pasamos a su versión HTML5 de este modo:

<?php get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  <section class="content"> <div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>     <article class="box">         <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>          <section id="entry-content-single">           <?php the_content('<p>Read More</p>'); ?>         </section>         <section class="meta"> Posted by:           <?php the_author() ?>           <?php edit_post_link(__('Edit This')); ?>             <p><?php the_tags(""); ?></p>         </section>         <div class="clearfix"></div>     </article>   <!-- end post --> </section></div>  <?php get_footer(); ?>

7. Convertir style.css (la hoja de estilos) a HTML5

Para asegurarnos la compatibilidad con navegadores antiguos debemos asegurarnos de que los elementos HTML5 se muestren como bloques, usando display: block style. Lo único que tenemos que hacer es añadir la siguiente línea al principio de nuestra hoja de estilos, del fichero style.css del tema:

header, nav, section, article, aside, figure, footer { display: block; }

Y con esto ya tenemos un tema WordPress casi completo en HTML5. A partir de aquí podemos usar las etiquetas HTML5 como hemos visto en los archivos anteriores sobre el resto de los que use tu tema. Por ejemplo, el fichero page.php usará la misma estructura que single.php, para archive.php nos basaremos en index.php y así sucesivamente.

Aquí te dejo unos interesantes enlaces para aprender más sobre HTML5:

Plugins WordPress HTML5
WordPress en HTML5
Manual HTML5 en español (pdf)
Artículos sobre HTML5 de Javier Casares (muy buenos)
HTML5 W3C
HTML5 test, para comprobar si tu navegador soporta HTML5

Esta guía es una adaptación del tutorial creado por WP tuts

Usa .htaccess como Firewall

Posted: 26 Feb 2012 05:10 AM PST

El fichero .htaccess es la primera línea de entrada de cualquier sistema web montado sobre Apache, así que también puede convertirse en la primera línea de defensa frente a ataques de hackers, inyecciones de código o intrusiones.

Además, como su construcción es ya veterana está muy documentada y fácil de configurar. Si usas WordPress y has cambiado la estructura de enlaces permanentes, ya tendrás (por lo menos) un fichero .htaccess en la carpeta raíz de tu instalación.

Las cadenas que añade WordPress suelen ser estas:

# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress

Y uno de los mejores, y más simples métodos de proteger tu WordPress es añadir reglas que bloqueen automáticamente peticiones basadas en cadenas en la URL.

Por ejemplo, no hay razón alguna (al menos buena) para que una URL empiece con un corchete “[". Solo hay dos motivos "normales", uno que sea un error de tecleo, y el otro que esté buscando agujeros de seguridad. Así que una primera regla a aplicar para evitar esto sería añadir una regla que provoque una página de error "403 Forbidden" a todo aquel que llegue a tu sitio con la URL comenzando con un corchete.

Añades esto al principio del archivo .htaccess y guardas los cambios:

RedirectMatch 403 \[

¿Quieres más?, pues estamos de suerte porque en Perishable Press han creado algo que han llamado el 5G Firewall, que viene a ser una lista de reglas para .htaccess que bloquea una buena cantidad de posibles atacantes que, en su versión actual, nos ofrece esto:

# 5G FIREWALL from PerishablePress.com  # 5G:[QUERY STRINGS] <IfModule mod_rewrite.c>  RewriteEngine On  RewriteBase /  RewriteCond %{QUERY_STRING} (environ|localhost|mosconfig|scanner) [NC,OR]  RewriteCond %{QUERY_STRING} (menu|mod|path|tag)\=\.?/? [NC,OR]  RewriteCond %{QUERY_STRING} boot\.ini  [NC,OR]  RewriteCond %{QUERY_STRING} echo.*kae  [NC,OR]  RewriteCond %{QUERY_STRING} etc/passwd [NC,OR]  RewriteCond %{QUERY_STRING} \=\\%27$   [NC,OR]  RewriteCond %{QUERY_STRING} \=\\\’$    [NC,OR]  RewriteCond %{QUERY_STRING} \.\./      [NC,OR]  RewriteCond %{QUERY_STRING} \:         [NC,OR]  RewriteCond %{QUERY_STRING} \[         [NC,OR]  RewriteCond %{QUERY_STRING} \]         [NC]  RewriteRule .* – [F] </IfModule>  # 5G:[USER AGENTS] <IfModule mod_setenvif.c>  SetEnvIfNoCase User-Agent ^$ keep_out  SetEnvIfNoCase User-Agent (casper|cmsworldmap|diavol|dotbot)   keep_out  SetEnvIfNoCase User-Agent (flicky|ia_archiver|jakarta|kmccrew) keep_out  SetEnvIfNoCase User-Agent (libwww|planetwork|pycurl|skygrid)   keep_out  <Limit GET POST PUT>   Order Allow,Deny   Allow from all   Deny from env=keep_out  </Limit> </IfModule>  # 5G:[REQUEST STRINGS] <IfModule mod_alias.c>  RedirectMatch 403 (https?|ftp|php)\://  RedirectMatch 403 /(cgi|https?|ima|ucp)/  RedirectMatch 403 (\=\\\’|\=\\%27|/\\\’/?|\)\.css\()$  RedirectMatch 403 (\,|//|\)\+|/\,/|\{0\}|\(/\(|\.\.\.|\+\+\+|\|)  RedirectMatch 403 \.(cgi|asp|aspx|cfg|dll|exe|jsp|mdb|sql|ini|rar)$  RedirectMatch 403 /(contac|fpw|install|pingserver|register)\.php  RedirectMatch 403 (base64|crossdomain|localhost|wwwroot)  RedirectMatch 403 (eval\(|\_vti\_|\(null\)|echo.*kae)  RedirectMatch 403 \.well\-known/host\-meta  RedirectMatch 403 /function\.array\-rand  RedirectMatch 403 \)\;\$\(this\)\.html\(  RedirectMatch 403 proc/self/environ  RedirectMatch 403 msnbot\.htm\)\.\_  RedirectMatch 403 /ref\.outcontrol  RedirectMatch 403 com\_cropimage  RedirectMatch 403 indonesia\.htm  RedirectMatch 403 \{\$itemURL\}  RedirectMatch 403 function\(\)  RedirectMatch 403 labels\.rdf </IfModule>

Estas reglas incluyen la protección contra URLs con corchetes y, como puedes ver, muchísimo más.

AYUDA WORDPRESS

domingo, 26 de febrero de 2012