Estas en: Home > cabecera

Entradas etiquetadas con cabecera

Cron Job WordPress

WordPress 3.x para desarrolladores: Temas y plantillas, primeros pasos

0

Una vez que conocemos los conceptos básicos de WordPress y la estructura de archivos que tienen los temas, vamos a empezar a crear nuestro propio tema. Para ello vamos a utilizar el tema Twenty Elevencomo modelo, iré extrayendo partes del código de este tema y pegándolas en el nuestro, de tal forma que pueda explicar el funcionamiento del código y así poder aprender a crear un tema desde cero.

 

EL TEMA MÁS BÁSICO

Como vimos en el post anterior, el tema más básico que se puede crear en WordPress es el que disponga de los archivos style.css e index.php (en caso de un tema hijo solo sería necesario el archivo style.css, pero eso lo explicaré más adelante). Por tanto vamos a crearlos. Doy por hecho que ya tienes instalado y configurado WordPress en tu entorno de desarrollo, lo único que vamos hacer es activar la muestra de avisos de WordPress durante el desarrollo. Abre el archivo wp-config.php, busca la constante WP_DEBUG y ponla a true.

define('WP_DEBUG', true);

Una vez hecho esto creamos la carpeta de nuestro tema el cual llamaremos newtheme: wp-content/themes/newtheme. A continuación creamos el archivo style.css y añadimos los datos que WordPressnecesita para mostrar el tema en el listado de temas.

/*
Theme Name: New Theme
Theme URI: http://localhost/newtheme
Author: Interadictos.es
Author URI: http://interadictos.es
Description: Primer desarrollo de un tema
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: basic, white
Text Domain: newtheme
*/

Ahora creamos el archivo index.phpy le añadiremos una única linea de código:

  1. <?php echo "Hola mundo"; ?>

Nos vamos a la administración de nuestro WordPressy activamos nuestro tema. Si se ha hecho correctamente nos aparecerá el siguiente texto cuando accedamos a la página principal del blog:

Hola mundo

Ya sé, ya sé, este tema no muestra nada, en realidad acabamos de conocer como crear el tema y hacer que se muestre en la administración para poder activarlo. Podríamos seguir añadiendo código al archivo index.php, pero estaríamos creando algo que a la larga nos resultaría difícil de mantener. Por tanto vamos a dividir nuestro tema en partes para poder trabajar mejor con él.

 

CREANDO PLANTILLAS

Habitualmente una página web podemos separarla en tres partes: cabecera, cuerpo y pie. En WordPress ocurre lo mismo, de hecho, WordPressnos va a facilitar la tarea de dividir una página ya que dispone de varios métodos creados exclusivamente para ello.

  • get_header(): Devuelve la plantilla de la cabecera ya procesada.
  • get_footer(): Devuelve la plantilla del pie ya procesada.

Como verás no hay un método como tal para devolver la plantilla del contenido, pero esto lo veremos un poquito más adelante. Vamos a modificar el archivo index.phppara añadir estos dos métodos.

  1. <?php get_header(); ?>
  2.  
  3. <?php get_footer(); ?>

Ahora vamos a crear dos plantillas nuevas que se corresponderán con la cabecera de la página y el pie. Lo llamaremos header.php y footer.php.

 

HEADER.PHP

En header.phpañadimos el siguiente código:

  1. <!DOCTYPE html>
  2. <!--[if IE 6]>
  3. <html id="ie6" <?php language_attributes(); ?>>
  4. <![endif]-->
  5. <!--[if IE 7]>
  6. <html id="ie7" <?php language_attributes(); ?>>
  7. <![endif]-->
  8. <!--[if IE 8]>
  9. <html id="ie8" <?php language_attributes(); ?>>
  10. <![endif]-->
  11. <!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
  12. <html <?php language_attributes(); ?>>
  13. <!--<![endif]-->
  14. <head>
  15. <meta charset="<?php bloginfo( 'charset' ); ?>" />
  16. <meta name="viewport" content="width=device-width" />
  17. <title><?php
  18. /*
  19. * Print the <title> tag based on what is being viewed.
  20. */
  21. global $page, $paged;
  22.  
  23. wp_title( '|', true, 'right' );
  24.  
  25. // Add the blog name.
  26. bloginfo( 'name' );
  27.  
  28. // Add the blog description for the home/front page.
  29. $site_description = get_bloginfo( 'description', 'display' );
  30. if ( $site_description && ( is_home() || is_front_page() ) )
  31. echo " | $site_description";
  32.  
  33. // Add a page number if necessary:
  34. if ( $paged >= 2 || $page >= 2 )
  35. echo ' | ' . sprintf( __( 'Page %s', 'newtheme' ), max( $paged, $page ) );
  36.  
  37. ?></title>
  38. <link rel="profile" href="http://gmpg.org/xfn/11" />
  39. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  40. <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
  41. <!--[if lt IE 9]>
  42. <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
  43. <![endif]-->
  44. <?php
  45. /* We add some JavaScript to pages with the comment form
  46. * to support sites with threaded comments (when in use).
  47. */
  48. if ( is_singular() && get_option( 'thread_comments' ) )
  49. wp_enqueue_script( 'comment-reply' );
  50.  
  51. /* Always have wp_head() just before the closing </head>
  52. * tag of your theme, or you will break many plugins, which
  53. * generally use this hook to add elements to <head> such
  54. * as styles, scripts, and meta tags.
  55. */
  56. wp_head();
  57. ?>
  58. </head>
  59.  
  60. <body <?php body_class(); ?>>

Antes de seguir explicaré un poco el código. Este código es un extracto del archivo header.php del tema twentyeleven que viene incluido con WordPress y que me ha parecido muy bueno para poder utilizarlo como ejemplo. En primer lugar nos encontramos con esto:

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

language_attributes() devuelve varios atributos de la etiqueta html, más concretamente el idioma y la dirección del texto. En este caso, además, se cuadriplica para poder diferenciar cada versión de Internet Explorer y del resto de navegadores. A continuación tenemos el inicio de la cabecera propiamente dicha y las etiquetas meta:

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />

WordPress nos provee de muchos métodos para poder hacernos la vida más fácil. Entre esos métodos se encuentra bloginfo() que nos devolverá varios datos referentes al blog que estamos creando. Ver más sobre bloginfo()http://codex.wordpress.org/Function_Reference/bloginfo La metaetiqueta llamada viewport es utiliza para indicarle a los navegadores móviles el tamaño de la página. Más info en: http://www.htmlcinco.com/etiqueta-meta-viewport-web-movil/Seguidamente tenemos el título de la página:

  1. <title><?php
  2. /*
  3. * Print the <title> tag based on what is being viewed.
  4. */
  5. global $page, $paged;
  6.  
  7. wp_title( '|', true, 'right' );
  8.  
  9. // Add the blog name.
  10. bloginfo( 'name' );
  11.  
  12. // Add the blog description for the home/front page.
  13. $site_description = get_bloginfo( 'description', 'display' );
  14. if ( $site_description && ( is_home() || is_front_page() ) )
  15. echo " | $site_description";
  16.  
  17. // Add a page number if necessary:
  18. if ( $paged >= 2 || $page >= 2 )
  19. echo ' | ' . sprintf( __( 'Page %s', 'newtheme' ), max( $paged, $page ) );
  20.  
  21. ?></title>

Primero recupera dos variables globales $page y $paged, que se refieren a la página y el número de páginas en que esté dividido el contenido. Después utiliza el método wp_title() para mostrar el título de la página o post. Esto le indica a WordPress que muestre el título del post o la página y añada un separador «|» al final (derecha) del título.

A continuación se añade el nombre del blog con bloginfo( ‘name’ ). Se recupera la descripción del sitio utilizando get_bloginfo(), se comprueba si existe esa descripción y si la página que se va a mostrar es el homeo la página principal, y se muestra la descripción. Acto seguido se comprueba el número de página en el que se encuentra el usuario y se muestra. Una vez que se procesa el título tenemos las siguientes etiquetas:

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

La primera línea si no recuerdo mal está relacionado con el SEO para los buscadores, a la hora de desarrollar no nos afectará.

La segunda linea nos indica el archivo css para la página, en este caso se utiliza bloginfo( ‘stylesheet_url’ ) para recuperar la url del archivo de estilo style.css.

La tercera línea indica al navegador la ruta para el archivo de pingback, es decir el archivo que se dedicará a recibir las notificaciones de otros autores cuando linken a una página de tu blog.

Las últimas lineas son exclusivas para IE9, que como todas las versiones de Internet Explorer siempre hay algo especial que ponerle a cada uno. En este caso es un pequeño código js para HTML5. Recuerda que este archivo aun no está en nuestro tema. Tendrás que crear una carpeta llamada js, y copiar el archivo desde el tema twentyeleven hasta tu tema dentro de la carpeta que acabas de crear. Por último en nuestro archivo header.phpnos encontramos con lo siguiente:

  1. <?php
  2. /* We add some JavaScript to pages with the comment form
  3. * to support sites with threaded comments (when in use).
  4. */
  5. if ( is_singular() && get_option( 'thread_comments' ) )
  6. wp_enqueue_script( 'comment-reply' );
  7.  
  8. /* Always have wp_head() just before the closing </head>
  9. * tag of your theme, or you will break many plugins, which
  10. * generally use this hook to add elements to <head> such
  11. * as styles, scripts, and meta tags.
  12. */
  13. wp_head();
  14. ?>
  15. </head>
  16.  
  17. <body <?php body_class(); ?>>

El pequeño script de php tiene un condicional que lo que hace es añadir un pequeño JavaScript en el caso de que los comentarios estén configurados como hilos. Utilizando wp_enqueue_script( ‘comment-reply’ ) le estamos diciendo a WordPress que carge ahí el archivo wp-include/js/comment-reply.js. Como puedes observar, se llama a la función wp_head(). Esto permite a los plugins poder añadir las cabeceras que ellos consideren oportuno.

Por último cerramos la etiqueta head y abrimos body en la que añadiremos las clases correspondientes a través de la función body_class.

Añadimos el siguiente código justo debajo de la etiqueta body:

  1. <div id="page" class="hfeed">
  2. <header id="branding" role="banner">
  3. <hgroup>
  4. <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
  5. <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
  6. </hgroup>
  7.  
  8. <?php
  9. // Check to see if the header image has been removed
  10. $header_image = get_header_image();
  11. if ( $header_image ) :
  12. // Compatibility with versions of WordPress prior to 3.4.
  13. if ( function_exists( 'get_custom_header' ) ) {
  14. // We need to figure out what the minimum width should be for our featured image.
  15. // This result would be the suggested width if the theme were to implement flexible widths.
  16. $header_image_width = get_theme_support( 'custom-header', 'width' );
  17. } else {
  18. $header_image_width = HEADER_IMAGE_WIDTH;
  19. }
  20. ?>
  21. <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
  22. <?php
  23. // The header image
  24. // Check if this is a post or page, if it has a thumbnail, and if it's a big one
  25. if ( is_singular() && has_post_thumbnail( $post->ID ) &&
  26. ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
  27. $image[1] >= $header_image_width ) :
  28. // Houston, we have a new header image!
  29. echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
  30. else :
  31. // Compatibility with versions of WordPress prior to 3.4.
  32. if ( function_exists( 'get_custom_header' ) ) {
  33. $header_image_width = get_custom_header()->width;
  34. $header_image_height = get_custom_header()->height;
  35. } else {
  36. $header_image_width = HEADER_IMAGE_WIDTH;
  37. $header_image_height = HEADER_IMAGE_HEIGHT;
  38. }
  39. ?>
  40. <img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
  41. <?php endif; // end check for featured image or standard header ?>
  42. </a>
  43. <?php endif; // end check for removed header image ?>
  44.  
  45. <?php
  46. // Has the text been hidden?
  47. if ( 'blank' == get_header_textcolor() ) :
  48. ?>
  49. <div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
  50. <?php get_search_form(); ?>
  51. </div>
  52. <?php
  53. else :
  54. ?>
  55. <?php get_search_form(); ?>
  56. <?php endif; ?>
  57.  
  58. <nav id="access" role="navigation">
  59. <h3 class="assistive-text"><?php _e( 'Main menu', 'newtheme' ); ?></h3>
  60. <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
  61. <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'newtheme' ); ?>"><?php _e( 'Skip to primary content', 'newtheme' ); ?></a></div>
  62. <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'newtheme' ); ?>"><?php _e( 'Skip to secondary content', 'newtheme' ); ?></a></div>
  63. <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
  64. <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
  65. </nav><!-- #access -->
  66. </header><!-- #branding -->
  67.  
  68. <div id="main">

Explicaré el código paso a paso:

  1. <header id="branding" role="banner">
  2. <hgroup>
  3. <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
  4. <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
  5. </hgroup>

En primer lugar se abre una etiqueta header y dentro de hgroupse añade el título y la descripción de la página.

  1. <?php
  2. // Check to see if the header image has been removed
  3. $header_image = get_header_image();
  4. if ( $header_image ) :
  5. // Compatibility with versions of WordPress prior to 3.4.
  6. if ( function_exists( 'get_custom_header' ) ) {
  7. // We need to figure out what the minimum width should be for our featured image.
  8. // This result would be the suggested width if the theme were to implement flexible widths.
  9. $header_image_width = get_theme_support( 'custom-header', 'width' );
  10. } else {
  11. $header_image_width = HEADER_IMAGE_WIDTH;
  12. }
  13. ?>

Esta parte comprueba que existe una imagen para la cabecera. Si es que sí se crea un condicional para comprobar que la función get_custom_header existe para que el tema sea compatible con versiones de WordPress anterior a la 3.4. En el caso de que existe se utilizará la función get_theme_support para obtener el ancho para la imagen, sino se utilizará la constante HEADER_IMAGE_WIDTH.

Tanto la constante como el ancho se crean en el archivo functions.php que veremos más adelante.

  1. <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
  2. <?php
  3. // The header image
  4. // Check if this is a post or page, if it has a thumbnail, and if it's a big one
  5. if ( is_singular() && has_post_thumbnail( $post->ID ) &&
  6. ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
  7. $image[1] >= $header_image_width ) :
  8. // Houston, we have a new header image!
  9. echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
  10. else :
  11. // Compatibility with versions of WordPress prior to 3.4.
  12. if ( function_exists( 'get_custom_header' ) ) {
  13. $header_image_width = get_custom_header()->width;
  14. $header_image_height = get_custom_header()->height;
  15. } else {
  16. $header_image_width = HEADER_IMAGE_WIDTH;
  17. $header_image_height = HEADER_IMAGE_HEIGHT;
  18. }
  19. ?>
  20. <img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
  21. <?php endif; // end check for featured image or standard header ?>
  22. </a>

Creamos el vínculo con la url de la página principal, el condicional permite tener compatibilidad con  versiones anteriores a la versión 3.4 de WordPress. Con get_the_post_thumbnailcreamos la imagen en caso de que sea un post o una página, sino obtenemos el ancho y alto de la imagen y creamos la etiqueta correspondiente.

  1. <?php
  2. // Has the text been hidden?
  3. if ( 'blank' == get_header_textcolor() ) :
  4. ?>
  5. <div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
  6. <?php get_search_form(); ?>
  7. </div>
  8. <?php
  9. else :
  10. ?>
  11. <?php get_search_form(); ?>
  12. <?php endif; ?>

Aquí se comprueba el color de texto de la cabecera, si es blanco (blank) se crea una capa con el formulario de búsqueda dentro, si no solo se añade el formulario de búsqueda. El color de texto de la cabecera se configura en functions.php.

  1. <nav id="access" role="navigation">
  2. <h3 class="assistive-text"><?php _e( 'Main menu', 'newtheme' ); ?></h3>
  3. <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
  4. <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'newtheme' ); ?>"><?php _e( 'Skip to primary content', 'newtheme' ); ?></a></div>
  5. <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'newtheme' ); ?>"><?php _e( 'Skip to secondary content', 'newtheme' ); ?></a></div>
  6. <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
  7. <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
  8. </nav><!-- #access -->

Por último se añade el menú superior de las páginas.

 

FOOTER.PHP

Añadimos el siguiente código al archivo footer.php: 

  1. </div><!-- #main -->
  2.  
  3. <footer id="colophon" role="contentinfo">
  4.  
  5. <?php
  6. /* A sidebar in the footer? Yep. You can can customize
  7. * your footer with three columns of widgets.
  8. */
  9. if ( ! is_404() )
  10. get_sidebar( 'footer' );
  11. ?>
  12.  
  13. <div id="site-generator">
  14. <?php do_action( 'newtheme_credits' ); ?>
  15. <a href="<?php echo esc_url( __( 'http://interadictos.es/', 'newtheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'newtheme' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'newtheme' ), 'interadictos.es' ); ?></a>
  16. </div>
  17. </footer><!-- #colophon -->
  18. </div><!-- #page -->
  19.  
  20. <?php wp_footer(); ?>
  21.  
  22. </body>
  23. </html>

En este archivo se cierran las etiquetas que contienen la mayor parte del contenido de la página, se añaden los sidebar (que veremos más adelante) del pie, siempre y cuando no sea una página 404, y se añade el copyright y la información del tema. Por último se añade la función wp_footer que permitirá a los plugins mostrar su propio contenido en el pie de página.

Symfony: La vista (III), configuración de la vista

0

La vista en Symfony está dividida en dos partas:

  • Las plantillas (fragmentos de código): donde se recoge el resultado de la acción.
  • El resto: etiquetas meta, título de la página, archivos js y css, acciones que necesitan un layout personalizado (ventanas emergentes, publi) y las acciones que no necesitan layout alguno como las acciones para ajax.

Para modificar todo lo del segundo punto, que en general, podríamos considerar las cabeceras de la página, Symfony utiliza dos formas: a través del archivo de configuración view.yml o a través del objeto sfResponse para poder modificar las cabeceras de forma dinámica desde las acciones.

Si un mismo parámetro de configuración se establece mediante el objeto sfResponse y mediante el archivo view.yml, tiene preferencia el valor establecido mediante el objeto sfResponse.

EL ARCHIVO view.yml

editSuccess:
metas:
title: Edita tu perfil

editError:
metas:
title: Error en la edición del perfil

all:
stylesheets: [mi_estilo]
metas:
title: Mi sitio web

Esto anterior es la configuración de la vista de un módulo. Por defecto el archivo no existe y tendrías que crearlo y guardarlo dentro de la carpeta del módulo así: mimodulo/config/view.yml. Como puedes ver hay tres apartados:

  • editSuccess: Esta configuración se utilizará cuando la acción edit devuelva una respuesta igual a sfView::SUCCESS (o no devuelve nada, ya que es el valor devuelto por defecto).
  • editError: Esta configuración se utilizará cuando la acción edit devulva una respuesta igual a sfView::ERROR.
  • all: Esta es la configuración por defecto del módulo.

Para que veas la configuración en cascada de una aplicación en Symfony mira esto:

  • En apps/miaplicacion/modules/mimodulo/config/view.yml, las definiciones de cada vista solo se aplican a una vista y además sus valores tienen preferencia sobre las opciones generales del módulo.
  • En apps/miaplicacion/modules/mimodulo/config/view.yml, las definiciones bajo all: se aplican a todas las acciones del módulo y tienen preferencia sobre las definiciones de la aplicación.
  • En apps/miaplicacion/config/view.yml, las definiciones bajo default: se aplican a todos los módulos y todas las acciones de la aplicación.

Supongo que te estarás preguntando dónde se definen las cabeceras de la página, pues bien, estás se defienen en el archivo view.yml de la aplicación.

default:
http_metas:
content-type: text/html
metas:
title: symfony project
robots: index, follow
description: symfony project
keywords: symfony, project
language: en
stylesheets: [main]
javascripts: [ ]

has_layout: on
layout: layout

Más adelante explico las distintas opciones de la configuración de la vista. Antes veamos la segunda forma de configurar la vista.

EL OBJETO sfResponse

Aunque el objeto sfResponse pertenece a la vista, se puede acceder a él a través de la acción mediante el método getResponse. Algunos métodos que se utilizan habitualmente:

class mimoduloActions extends sfActions
{
public function executeIndex()
{
$respuesta = $this->getResponse();

// Cabeceras HTTP
$respuesta->setContentType(‘text/xml’);
$respuesta->setHttpHeader(‘Content-Language’, ‘en’);
$respuesta->setStatusCode(403);
$respuesta->addVaryHttpHeader(‘Accept-Language’);
$respuesta->addCacheControlHttpHeader(‘no-cache’);

// Cookies
$respuesta->setCookie($nombre, $contenido, $expiracion, $ruta, $dominio);

// Atributos Meta y cabecera de la página
$respuesta->addMeta(‘robots’, ‘NONE’);
$respuesta->addMeta(‘keywords’, ‘palabra1 palabra2’);
$respuesta->setTitle(‘Mi Página de Ejemplo’);
$respuesta->addStyleSheet(‘mi_archivo_css’);
$respuesta->addJavaScript(‘mi_archivo_javascript’); } }

Los métodos setter mostrados anteriormente que permiten dar un valor a la propiedad, también disponen de un método getter que devuelven el valor de la propiedad.

OPCIONES DE CONFIGURACIÓN DE LA VISTA

Copypasteo la introducción de esta sección del libro de Symfony:

Puede que hayas observador que existen 2 tipos diferentes de opciones para la configuración de la vista:

  • Las opciones que tienen un único valor (el valor es una cadena de texto en el archivo view.yml y el objeto respuesta utiliza un método set para ellas)
  • Las opciones que tienen múltiples valores (el archivo view.yml utiliza arrays para almacenar los valores y el objeto respuesta utiliza métodos de tipo add)

Hay que tener en cuenta por tanto que la configuración en cascada va sobrescribiendo los valores de las opciones de un solo valor y va añadiendo valores a las opciones que permiten valores múltiples. Este comportamiento se entiende mejor a medida que se avanza en este capítulo.

ETIQUETAS META

Las etiquetas <meta> se pueden definir dentro de las claves http_metas: y metas: en el archivo view.yml, o utilizando los métodos addHttpMeta() y addMeta() del objeto sfResponse dentro de la acción:

http_metas:
cache-control: public
metas:
description: Página sobre economía en Francia
keywords: economía, Francia

$this->getResponse()->addHttpMeta(‘cache-control’, ‘public’);
$this->getResponse()->addMeta(‘description’, ‘Página sobre economía en Francia’);
$this->getResponse()->addMeta(‘keywords’, ‘economía, Francia’);

Para las etiquetas <meta>, se puede añadir al método addHttpMeta() (y también a setHttpHeader()) un tercer parámetro con un valor de false para que añadan el valor indicado al valor que ya existía y así no lo reemplacen.

$this->getResponse()->addHttpMeta(‘accept-language’, ‘en’);
$this->getResponse()->addHttpMeta(‘accept-language’, ‘fr’, false);
echo $this->getResponse()->getHttpHeader(‘accept-language’);
=> ‘en, fr’

Para añadir las etiquetas <meta> en la página que se envía al usuario, se deben utilizar los helpers include_http_metas() e include_metas() dentro de la sección <head>.

EL TÍTULO DE LA PÁGINA

indexSuccess:
metas:
title: Los tres cerditos

$this->getResponse()->setTitle(sprintf(‘Los %d cerditos’, $numero));

El título de la página se puede incluir en el layout a través del método include_metas(), a través de include_title() o ambos, ya que es totalmente válido tener una etiqueta <meta name=»title»> o una etiqueta <title>.

INCLUIR ARCHIVOS

indexSuccess:
stylesheets: [miestilo1, miestilo2]
javascripts: [miscript]

$this->getResponse()->addStylesheet(‘miestilo1’);
$this->getResponse()->addStylesheet(‘miestilo2’);
$this->getResponse()->addJavascript(‘miscript’);

La extensión de los archivos no es necesario ponerla, a no ser que tengan una extensión diferente a la habitual (.css para archivos de estilos, .js para archivos javascript).

La inclusión de los archivos en la cabecera de la página es automática, no se necesita ningún método para añadirlos.

Recuerda que se sigue aplicando la configuración en cascada, por tanto los archivos que añadas a view.yml de la aplicación se mostrarán en todas las páginas de la aplicación.

view.yml de la aplicación:

default:
stylesheets: [principal]

view.yml del módulo:

indexSuccess:
stylesheets: [especial]

all:
stylesheets: [otra]

Si no se quiere incluir un archivo definido en alguno de los niveles de configuración superiores, se puede añadir un signo – delante del nombre del archivo en la configuración de más bajo nivel.

Ejemplo de archivo view.yml en el módulo y que evita incluir algunos de los archivos incluidos desde el nivel de configuración de la aplicación:

indexSuccess:
stylesheets: [-principal, especial]

all:
stylesheets: [otra]

Para eliminar todas las hojas de estilos o todos los archivos de JavaScript, se puede utilizar la siguiente sintaxis:

indexSuccess:
stylesheets: [-*]
javascripts: [-*]

Se puede ser todavía más preciso al incluir los archivos, ya que se puede utilizar un parámetro adicional para indicar la posición en la que se debe incluir el archivo (sólo se puede indicar la posición primera o la última):

# En el archivo view.yml
indexSuccess:
stylesheets: [especial: { position: first }]

// En la acción
$this->getResponse()->addStylesheet(‘especial’, ‘first’);

Para modificar el atributo media de la hoja de estilos incluida, se pueden modificar las opciones por defecto de Symfony:

indexSuccess:
stylesheets: [principal, impresora: { media: print }]

$this->getResponse()->addStylesheet(‘impresora’, », array(‘media’ => ‘print’));

Html devuelto por Symfony:

$this->getResponse()->addStylesheet(‘impresora’, », array(‘media’ => ‘print’));

CONFIGURACIÓN DEL LAYOUT

Normalmente Symfony, por defecto, utilizará la plantilla guardada en la carpeta /templates de la aplicación llamada layout.php, pero podemos indicarle cualquier otro layout:

indexSuccess:
layout: mi_layout

$this->setLayout(‘mi_layout’);

Si no se necesita ningún layout, se puede eliminar:

indexSuccess:
has_layout: false

$this->setLayout(false);

Ir arriba