Archivo de septiembre, 2012

Cron Job WordPress

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

0
hace 11 años
by Mikel en

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:

[codesyntax lang=»php»]

<?php echo "Hola mundo"; ?>

[/codesyntax]

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.

[codesyntax lang=»php»]

<?php get_header(); ?>

<?php get_footer(); ?>

[/codesyntax]

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:

[codesyntax lang=»php»]

<!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]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'newtheme' ), max( $paged, $page ) );

	?></title>
<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]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>

[/codesyntax]

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:

[codesyntax lang=»php»]

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'newtheme' ), max( $paged, $page ) );

	?></title>

[/codesyntax]

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:

[codesyntax lang=»php»]

<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>

[/codesyntax]

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:

[codesyntax lang=»php»]

<div id="page" class="hfeed">
	<header id="branding" role="banner">
			<hgroup>
				<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>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>

			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						// We need to figure out what the minimum width should be for our featured image.
						// This result would be the suggested width if the theme were to implement flexible widths.
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					// The header image
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
						?>
					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>

			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>

			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'newtheme' ); ?></h3>
				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<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>
				<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>
				<?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. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
	</header><!-- #branding -->

	<div id="main">

[/codesyntax]

Explicaré el código paso a paso:

[codesyntax lang=»php»]

	<header id="branding" role="banner">
			<hgroup>
				<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>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>

[/codesyntax]

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.

[codesyntax lang=»php»]

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

[/codesyntax]

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.

[codesyntax lang=»php»]

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

[/codesyntax]

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.

[codesyntax lang=»php»]

			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>

[/codesyntax]

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.

[codesyntax lang=»php»]

			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'newtheme' ); ?></h3>
				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<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>
				<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>
				<?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. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->

[/codesyntax]

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

 

FOOTER.PHP

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

[codesyntax lang=»php»]

	</div><!-- #main -->

	<footer id="colophon" role="contentinfo">

			<?php
				/* A sidebar in the footer? Yep. You can can customize
				 * your footer with three columns of widgets.
				 */
				if ( ! is_404() )
					get_sidebar( 'footer' );
			?>

			<div id="site-generator">
				<?php do_action( 'newtheme_credits' ); ?>
				<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>
			</div>
	</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

[/codesyntax]

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.

Cron Job WordPress

WordPress 3.x para desarrolladores: Temas y plantillas, conceptos básicos.

0
hace 11 años
by Mikel en

Los temás en WordPress se alojan en la carpeta /wp-content/themes. En cada tema encontraremos los diferentes archivos que lo componen (archivos css, plantillas, archivo functions.php, imágenes y archivos javascript).

 

TEMAS HIJOS

En WordPress puedes crear temas que sean derivados o hijos de otros. Por ejemplo, si en /wp-content/themes un tema llamado twentyeleven, solo habría que crear otro con el mismo nombre pero añadiendo al final -child. Por tanto tendríamos /wp-content/themes/twentyeleven y /wp-content/themes/twentyeleven-child.

Como mínimo un tema hijo debe contener el archivo style.css, el resto de archivos son opcionales (plantillas, archivo functions.php, css, javascript, etc)

 

HOJAS DE ESTILO DE LOS TEMAS

Cada tema deberá tener un archivo css llamado style.css donde se añadirá información sobre el tema que se está utilizando. Ejemplo:

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:
License URI:

General comments (optional).
*/

 

DIRECTRICES DE LAS HOJAS DE ESTILO

  • Cumplir con las normas CSS durante la creación de tus CSS.
  • Usar CSS válido siempre que sea posible. Como excepción, el uso de prefijos específicos de los proveedores para tomar ventaja de las características de CSS3.
  • Minimizar hacks CSS. La excepción obvia es navegadores con soporte específico, por lo general las versiones de IE. Si es posible, hacks CSS separados en secciones separadas o archivos separados.
  • Todos los elementos HTML posibles deben ser estilizados por el tema, tanto el contenido de los post/páginas y en el contenido de los comentarios.
  • Tablas, títulos, imágenes, listas, bloques de citas, etcétera.
  • Añadir estilos para impresión es muy recomendable.
  • Puede incluir una hoja de estilos de impresión con media=»print» o añadir en un bloque de medios impresos en su hoja de estilo principal.

 

ARCHIVO DE FUNCIONES

Un tema puede opcionalmente usar un archivo de funciones, el cual residirá en el subdirectorio del tema y se nombrará como functions.php. Este archivo básicamente actua como un plugin, y si está presente en el tema que tu estás usando, será automáticamente cargado durante el inicio de WordPress. Algunos usos sugeridos para este archivo:

  • Habilitar las funciones de temas, tales como barras laterales, menús de navegación, miniaturas post, formatos de post, los encabezados personalizados, fondos personalizados, entre otros.
  • Definir las funciones utilizadas en varios archivos de plantilla del tema.
  • Crear un menú de opciones, dando a los propietarios del sitio opciones de colores, estilos y otros aspectos de su tema.

 

ARCHIVOS DE PLANTILLAS

Las plantillas son archivos de código PHP utilizadas para generar las páginas solicitadas por los visitantes. Echemos un vistazo a las distintas plantillas que se pueden definir como parte de un tema.

 

LISTA DE ARCHIVOS DE PLANTILLAS

Esta lista muestra los principales archivos de plantilla de WordPress para cada tema, aunque no tienen porqué crearse todos si no es necesario.

  • style.css: La hoja de estilos principal. Debe ser incluido en el tema y contener la información del encabezado.
  • rtl.css: La hoja de estilo RTL. Se incluirá de forma automática si la dirección del texto de la página web es de derecha a izquierda. El archivo puede ser generado usando el plugin RTLer.
  • index.php: La plantilla principal. Si el tema proporciona sus propias plantillas, index.php debe estar presente.
  • comments.php: La plantilla de comentarios.
  • front-page.php: La plantilla de la página principal. Usala solo si usas una página estática como página principal.
  • home.php: La plantilla de página de inicio, la cual es la página principal por defecto. Si utiliza una página estática esta es la plantilla para la página con los últimos mensajes.
  • single.php: La plantilla de post único. Se utiliza cuando se consulta un solo post.
  • single-<post-type>.php: Esta plantilla es utilizada para mostrar una plantilla concreta para cada tipo de entrada o post.
  • page.php: Usada cuando se consulta una página individual.
  • category.php: Usada cuando una categoría es consultada.
  • tag.php: Usada cuando se pide una lista de entradas relacionadas con una etiqueta o tag.
  • taxonomy.php: Usada cuando se pide una lista de entradas relacionadas con un término o term de una taxonomía
  • author.php: Usada cuando se pide una lista de entradas escritas por un autor.
  • date.php: Usada cuando se pide un listado de entradas por fecha.
  • archive.php: La plantilla de archivo. Se utiliza cuando una categoría, autor o fecha es consultada. Tenga en cuenta que esta plantilla va a ser reemplazada por category.php, author.php y date.php por sus respectivos tipos de consulta.
  • search.php: Usada cuando se realiza un búsqueda.
  • attachment.php: Se visualiza cuando se muestra un archivo adjunto.
  • image.php: Se utiliza cuando se visualiza un archivo adjunto de imagen único. Si no está presente, attachment.php se utilizará.
  • 404.php: Se utiliza cuando WordPress no puede encontrar una entrada o página para la consulta realizada.

 

PLANTILLAS BÁSICAS

Lo archivos mínimos que debe contener un tema de WordPress son:

  • style.css
  • index.php
Lo habitual es que un tema contenga, además, los siguientes archivos:
  • comments.php
  • comments-popup.php
  • footer.php
  • header.php
  • sidebar.php
Cron Job WordPress

WordPress 3.x para desarrolladores: Convenciones

0
hace 11 años
by Mikel en

Aunque es un tema cuanto menos, aburrido, es muy necesario a la hora de trabajar en grupo, o si vas a publicar tu plugin o plantilla en WordPress. Las convenciones son normas aplicadas al código para que todos los desarrolladores puedan interpretar el código sin muchos problemas. También por estética: queda más elegante un código con la misma tabulación (por ejemplo) en cada linea que, que cada programador ponga la tabulación que se le antoje. Sin más preámbulos vamos al tema:

 

COMILLAS SIMPLES Y DOBLES

[codesyntax lang=»php»]

<?php

echo '<a href="/static/link" title="Yeah yeah!">Link name</a>';
echo "<a href='$link' title='$linktitle'>$linkname</a>"

[/codesyntax]

Si no tienes nada que evaluar en la cadena, pon comillas simples, sino comillas dobles.

 

SANGRÍA

Usa tabulaciones y no espacios.

[codesyntax lang=»php»]

<?php

$foo   = 'somevalue';
$foo2  = 'somevalue2';
$foo34 = 'somevalue3';
$foo5  = 'somevalue4';

[/codesyntax]

Los arrays asociativos deberían empezar en una linea nueva.

[codesyntax lang=»php»]

<?php

$my_array = array(
'foo'   => 'somevalue',
'foo2'  => 'somevalue2',
'foo3'  => 'somevalue3',
'foo34' => 'somevalue3',
);

[/codesyntax]

 

LLAVES

En bloques multilinea se deben poner las llaves tal como sigue:

[codesyntax lang=»php»]

<?php

if ( condition ) {
    action1();
    action2();
} elseif ( condition2 && condition3 ) {
    action3();
    action4();
} else {
    defaultaction();
}

[/codesyntax]

Si solo hay una linea en cada bloque se pueden omitir por brevedad.

[codesyntax lang=»php»]

<?php

if ( condition )
    action1();
elseif ( condition2 )
    action2();
else
    action3();

[/codesyntax]

Si hay un bloque con más de una linea se deberán escribir con llaves:

[codesyntax lang=»php»]

<?php

if ( condition ) {
    action1();
} elseif ( condition2 ) {
    action2a();
    action2b();
}

[/codesyntax]

Los bucles deben contenerse siempre entre llaves:

[codesyntax lang=»php»]

<?php

foreach ( $items as $item ) {
    process_item( $item );
}

[/codesyntax]

 

NO UTILIZAR LA ETIQUETA DE INICIO CORTA DE PHP

La forma correcta sería:

<?php ... ?>

 

NO CERRAR EL SCRIPT DE PHP CON SU ETIQUETA

Es decir en vez de usar:

<?php ... ?>

Usaremos solo la inicial

<?php ...

 

USO DEL ESPACIO

Pon espacios siempre después de las comas y en ambos lados de los operadores lógicos, de comparación, de cadenas y de asignación.

x == 23
foo && bar
! foo
array( 1, 2, 3 )
$baz . '-5'
$term .= 'X'

Pon espacios a ambos lados de los paréntesis de apertura y cierre.

foreach ( $foo as $bar ) { ...

Cuando definas una función, hazlo así:

function my_function( $param1 = 'foo', $param2 = 'bar' ) { ...

Al realizar comparaciones lógicas:

if ( ! $foo ) { ...

Cuando hagas una conversión de tipos:

foreach ( (array) $foo as $bar ) { ...

$foo = (boolean) $bar;

Cuando se hace referencia a un elemento de un array, solo se incluyen espacios en blanco cuando es una variable:

$x = $foo['bar'];
$x = $foo[ $bar ];

 

FORMATEO DE SENTENCIAS SQL

Las partes de la sentencia que sean palabras de SQL deben ir en mayusculas, como SELECT o WHERE.

Es recomendable usar el método $wpdb->prepare() para formatear la sentencia SQL. Este método añadirá las comillas a los valores que lo necesiten.

$var = "dangerous'"; // Los datos en crudo podrían o no necesitar ser formateados
$id = some_foo_number(); // El dato que nosotros esperamos es un número, pero no estamos seguros

$wpdb->query( $wpdb->prepare( "UPDATE $wpdb->posts SET post_title = %s WHERE ID = %d", $var, $id ) );

%s se utiliza cuando el valor es una cadena (string) y %d cuando es un número. En el método prepare() se añaden las variables que se formatearán y añadirán a la consulta en orden.

 

CONVENCIONES DE NOMENCLATURAS

Usa letras minúsculas en variables y nombres de funciones. Separa las palabras con guiones bajos (_).

function some_name( $some_variable ) { [...] }

Los nombres de clases deben utilizar palabras capitalizadas separadas con guiones bajos. Las siglas deben estar en mayúsculas:

class Walker_Category extends Walker { [...] }
class WP_HTTP { [...] }

Los archivos deben ser nombrados descriptivamente con letras minúsculas y las palabras deben separarse con guiones.

my-plugin-name.php

Los nombres de archivos de clase se basarán en el nombre de la clase precedido de class- y los guiones bajos de la clase serán sustituidos por guiones, por ejemplo WP_Error pasa a ser:

class-wp-error.php

 

VALORES DE PARÁMETROS DE FUNCIONES AUTOEXPLICATIVOS

Se prefieren valores de cadena que solo true y false cuando se llama a las funciones.

// Correcto
function eat( $what, $speed = 'slowly' ) {
...
}
eat( 'mushrooms' );
eat( 'mushrooms', 'slowly' );
eat( 'dogfood', 'fast' );

 

OPERADOR TERNARIO

El operador ternario está bien, pero siempre que lo uses prueba que la sentencia sea verdad, no falsa. De la otra forma es confuso. En el caso de empty() se permite el uso de ! empty(), ya que es más legible.

// (si la sentencia es verdad) ? (hacer esto) : (sino, hacer esto);
$musictype = ( 'jazz' == $music ) ? 'cool' : 'blah';
// (si el campo no está vacío ) ? (hacer esto) : (sino, hacer esto);

 

CONDICIONES YODA

if( true == $the_force ){
  $victorious = you_will( $be );
}

Siempre que hagas comparaciones lógicas pon la variable en el lado derecho, la constante o el literal en el izquierdo.

Esto se utiliza para en el caso de que en vez de == pongas = (admítelo, más de una vez te habrá pasado), de esta manera saltará un error ya que no puedes asignar a una constante el valor de la variable.

Es un poco extraño, pero útil.

 

CÓDIGO LIMPIO

En general, la legibilidad es más importante que la limpieza o la brevedad.

isset( $var ) || $var = some_function();
if ( ! isset( $var ) )
    $var = some_function();

 

Cron Job WordPress

WordPress 3.x para desarrolladores: Introducción

0
hace 11 años
by Mikel en

Después de varias semanas buscando información sobre WordPress para un proyecto que tenía pendiente (ya acabado), he observado que hay cierta escasez de información sobre el desarrollo de WordPress, ya que la mayoría de tutoriales o manuales que rondan por internet están limitados a la creación básica de plugins o a lo más básico de la creación de plantillas.

Por ello voy a realizar un tutorial que, basandome en el tema Twenty Eleven de WordPress permita conocer el funcionamiento de los temas y las plantillas. Para desarrollar la parte de los plugins se creará uno de ejemplo.

Muchos ejemplos de código serán de la documentación principal de WordPress y es la que deberías consultar más habitualmente si vas a desarrollar para WordPress: http://codex.wordpress.org/Main_Page

Durante las próximas semanas publicaré un tema por semana hasta que se complete el tutorial.

Ir arriba