13 mayo 2015

Novedades en los Códigos Condicionales Blogger (que permiten Mostrar Contenido o Excluirlo )

Recientemente Blogger hizo unos cambios en su código condicional. Ahora, en muchos casos, podemos usar menos código al crear sentencias condicionales, así que pensé que sería bueno dar una repasadita al tema.

Los códigos condicionales de Blogger, resultan muy útiles al personalizar el blog, ya que permiten llevar a cabo determinadas acciones como por ejemplo, incluir o excluir elementos de la plantilla en determinada página.

¿Alguna vez te has preguntado porqué en la página principal los títulos del blog son enlaces que dirigen a una entrada, y una vez que accedes a la página individual, ya no lo son? Pues éso sucede gracias a este código.

Este código se ejecuta del lado del servidor, éso quiere decir que Blogger lo procesa y luego devuelve los resultados al navegador y éste los muestra en pantalla.

Usándolo, podemos por ejemplo optimizar el encabezado del título del blog haciendo que en la página principal el título tenga una etiqueta h2 y al ingresar al post una etiqueta h1 (así como lo tengo en mi blog), también podemos excluir elementos de una manera eficiente, mostrar elementos en páginas con determinada etiqueta, cerrar comentarios automáticamente y mucho más.

En resumen y dicho de una forma breve, los códigos condicionales son una serie de instrucciones que ejecuta Blogger y permiten incluir contenido en el blog o excluirlo. 


Cómo luce el código condicional


Formato
Una expresión condicional simple, que solo incluye una sola condición tiene el siguiente formato:
<b:if cond='condición'>
[contenido que se va mostrar]
</b:if>

Si se cumple la condición, entonces se mostrará el contenido que pusimos dentro de ésta.

Dicho código está compuesto de una etiqueta b:if, y debe llevar una etiqueta de cierre </b:if>.

En las condiciones se usan ciertos elementos que permite devolver un resultado.  Por ejemplo: <data:post.title/> devuelve el título de las entradas. Estos elementos tienen un formato: <data:name/>, en donde name es el nombre de la información que se va a utilizar.

Algunos datos pueden utilizarse en todo el blog, mientras que otros están reservados para usarse solo en un widget específico.

Puedes ver la lista maestra de todos los datos disponibles para los widgets de Blogger en su página.

Una novedad interesante, es que el código también puede incluir etiquetas b:elseif, además de la  b:else, aunque ambas son opcionales. La primera sirve para mostrar contenido si aún no se ha mostrado contenido usando b:if, por otro lado  b:else muestra contenido cuando no se cumplieron ninguna de las condiciones b:if o b:elseif previa (s).

Algo que ahora también resulta interesante, es que podemos simplificar las condiciones cuando usamos  b:if b:elseif si utilizamos: or y and dentro de la condición.

Con esta nueva posibilidad, nos estaremos ahorrando algunos caracteres (menos caracteres al final de cuentas es igual a un menor tamaño de nuestro documento/plantilla) y el código resultante es más legible.

Usando etiquetas b:if y b:elseif y b:else.

Formato 
<b:if cond='condition'>
  [contenido que se va mostrar si se cumple la condición]
<b:elseif cond='otra condition'>
  [contenido que se va mostrar si no se ha cumplido ninguna condición "if" ni "elseif"]
<b:else/>
  [contenido a mostrar si no se cumple ninguna condición "if" ni "elseif"]
</b:if>

Ejemplo de código condicional que usa las etiquetas b:if b:elseif y b:else  y que se usa en las plantillas para el título de los entradas.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

Antes de la actualización las plantillas usaban todo este código condicional para lograr lo mismo:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Los dos códigos arrojaran el mismo resultado, que es el título del post con una etiqueta h3 y que figura como enlace a la entrada, siempre y cuando no esté en la página individual. La diferencia es que el primero es más compacto, ya que con la nueva etiqueta b:elseif y el operador and se simplificó el código.


Lista de código condicional que resultan muy útil


Si la página actual es una página de Inicio

<b:if cond='data:blog.url == data:blog.homepageUrl'>[contenido]</b:if>

Si la página actual es una página estática

<b:if cond='data:blog.pageType == "static_page"'>[contenido]</b:if>

Si la página actual es una entrada individual

<b:if cond='data:blog.pageType == "item"'>[contenido]</b:if>

Si la página actual tiene determinada URL (especificamos la URL)

<b:if cond='data:blog.url == "URL_de_la_Página"'>[contenido]</b:if>

Si la página actual es una página no encontrada o de Error 404

<b:if cond='data:blog.pageType == "error_page"'>[contenido]</b:if>

Si la página actual en una página de archivo:

<b:if cond='data:blog.pageType de archivo == "archive"'>[contenido]</b:if>

Si la página actual es una página de inicio, o página de archivo o página de etiquetas o página de un búsqueda

<b:if cond='data:blog.pageType == "index"'>[contenido]</b:if>

Si la página actual es una entrada ó una página (una sola condicional para aplicar en dos tipos de página)

<b:if cond='data:blog.pageType in {"static_page", "item"}'>[contenido]</b:if>
que sería lo mismo que:

<b:if cond='{"static_page", "item"} contains data:blog.pageType'>[contenido]</b:if>

Así como usamos el operador: == que se significa: igual a, podemos usar != que significa lo contrario (no igual o desigual) para cambiar la condición.

Por ejemplo:
Si la página actual no es una página estática y no es una entrada individual (útil cuando usamos resúmenes automáticos en todas las páginas del blog, excepto por la página individual)

<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>[contenido]</b:if>


Ejemplos de Usos


Aplicar CSS. Por ejemplo, vamos a imaginar que quieres que el color de fondo del blog cambie al estar en las páginas estáticas  y en las entradas.

Para tal caso habrá de definir la regla de CSS para que ésto ocurra y ponerla dentro del código condicional, y lo haríamos así en las nuevas plantillas, y lo pondríamos después ]]></b:skin>

<b:if cond='data:blog.pageType in {"static_page", "item"}'><!--Si el tipo de página actual es una página estática, o una página individual-->
<style>body{background-color:green}<!--Se aplica un color verde al fondo--></style>
</b:if>


Para las viejas plantillas (de diseño como mínima, etc.) habrá que usar <style type="text/css"> en lugar de <style> para que valide según las especificaciones de la W3C.

Mostrar un elemento solo en la página principal. Imagina que quieres mostrar un elemento como un slideshow solo en la página principal. Para lograrlo creamos la condición y ponemos dentro el CSS y el script:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>...</style>
<script>...</script>
</b:if>


Luego creamos la condición para el HTML, por ejemplo, supongamos que lo pusimos en una sección debajo de la cabecera:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="seccion_slider">
...
</div>
</b:if>


De ese modo, tanto el CSS, el script como el HTML del slideshow se cargan solo en la página de inicio.

Ocultar/Excluir la columna lateral del blog en las páginas estáticas.
Si bien podemos ocultar la columna lateral del blog usando un display:none podemos hacerlo de forma más eficiente, si creamos una condición para que no se muestre en la página estática, y lo hacemos si envolvemos el código b:if en toda la estructura de la columna lateral.

Eso quiere decir que todos los elementos que estén en la columna lateral, no van a ser descargados por el navegador, a diferencia de usar display:none, en donde si se descargan  pero no se muestran porque lo evitamos con ese CSS.

<b:if cond='data:blog.pageType != "static_page"'><!--Si la página actual no es una página estática, entonces se muestra la columna lateral-->
<aside>
...
</aside>
</b:if>


Como puedes ver el código condicional te ofrece un montón de posibilidades en el diseño del blog y en su optimización ;)


Referencias
Etiquetas de Blogger para Diseño del centro de ayuda oficial Blogger
Códigos de información de "Diseños" del centro de ayuda oficial Blogger
Entradas relacionadas de terceros que te recomiendo:
Uso de condicionales en Blogger
Usar condiciones

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.