jueves, 22 de marzo de 2012

Los archivos en las plantillas (templates) de wordpress

A continuación presentamos un listado de los archivos que se pueden encontrar dentro de las plantillas (template), de wordPress, no son los únicos, según nuestro diseño puede contener más archivos de estilo, carpeta de imagenes:




Como guía vamos a utilizar los archivos de la plantilla “twentyten”.
style.css

Hojas de estilo principal de nuestra plantilla, incluye en un comentario inicial los detalles de nuestra plantilla que son leídos por wordpress para registrar la plantilla en el administrador, si este comentario coincide con otro en una plantilla diferente o no se encuentra, nuestra plantilla no estará disponible para uso en nuestro sitio. 

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.
Author: the WordPress team
Version: 1.3
License: GNU General Public License
License URI: license.txt
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
*/


/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal;
}
.
.
.



rtl.css

Este archivo es incluido automáticamente por wordpress y modifica el estilo de tu sitio, si la dirección de lectura del idioma establecido, es de derecha a izquierda, en caso de sitios multilenguaje que incluyen árabe. Se puede generar automáticamente con el plugin RTLer.


/*
Theme Name: Twenty Ten
*/


/*
RTL Basics
*/


body {
direction:rtl;
unicode-bidi:embed;
}


/*
LAYOUT: Two-Column (Right)
DESCRIPTION: Two-column fixed layout with one sidebar right of content
*/

#container {
float: right;
margin: 0 0 0 -240px;
}
#content {
margin: 0 20px 36px 280px;
}
#primary,
#secondary {
float: left;
}
#secondary {
clear: left;
}


/* =Fonts
-------------------------------------------------------------- */
body,
input,
textarea,
.page-title span,
.pingback a.url,
h3#comments-title,
h3#reply-title,
#access .menu,
#access div.menu ul,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#site-title,
#wp-calendar,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.pingback p,
.reply,
.widget-title,
input[type=submit] {
font-family: Arial, Tahoma, sans-serif;
}

/* =Structure
-------------------------------------------------------------- */

/* The main theme structure */
#footer-widget-area .widget-area {
float: right;
margin-left: 20px;
margin-right: 0;
}
#footer-widget-area #fourth {
margin-left: 0;
}
#site-info {
float: right;
}
#site-generator {
float: left;
}


/* =Global Elements
-------------------------------------------------------------- */

/* Text elements */
ul, ol {
margin: 0 1.5em 18px 0;
}
blockquote {
font-style: normal;
}

/* Text meant only for screen readers */
.screen-reader-text {
left: auto;
text-indent:-9000px;
overflow:hidden;
}


/* =Header
-------------------------------------------------------------- */

#site-title {
float: right;
}
#site-description {
clear: left;
float: left;
font-style: normal;
}
#branding img {
float: right;
}

/* =Menu
-------------------------------------------------------------- */

#access {
float:right;
}

#access .menu-header,
div.menu {
    margin-right: 12px;
    margin-left: 0;
}

#access .menu-header li,
div.menu li{
float:right;
}

#access ul ul {
left:auto;
right:0;
float:right;
}
#access ul ul ul {
left:auto;
right:100%;
}

/* =Content
-------------------------------------------------------------- */

#content table {
text-align: right;
margin: 0 0 24px -1px;
}
.page-title span {
font-style:normal;
}
.entry-title,
.entry-meta {
clear: right;
float: right;
margin-left: 68px;
margin-right: 0;
}

.entry-content input.file,
.entry-content input.button {
margin-left: 24px;
margin-right:0;
}
.entry-content blockquote.left {
float: right;
margin-right: 0;
margin-left: 24px;
text-align: left;
}
.entry-content blockquote.right {
float: left;
margin-right: 24px;
margin-left: 0;
text-align: right;
}
#entry-author-info #author-avatar {
float: right;
margin: 0 0 0 -104px;
}
#entry-author-info #author-description {
float: right;
margin: 0 104px 0 0;
}

/* Gallery listing
-------------------------------------------------------------- */

.category-gallery .gallery-thumb {
float: right;
  margin-left:20px;
margin-right:0;
}


/* Images
-------------------------------------------------------------- */

#content .gallery .gallery-caption {
margin-right: 0;
}

#content .gallery .gallery-item {
float: right;
}

/* =Navigation
-------------------------------------------------------------- */
.nav-previous {
float: right;
}
.nav-next {
float: left;
text-align:left;
}

/* =Comments
-------------------------------------------------------------- */

.commentlist li.comment {
padding: 0 56px 0 0;
}
.commentlist .avatar {
right: 0;
left: auto;
}
.comment-author .says, #comments .pingback .url  {
font-style: normal;
}

/* Comments form */
.children #respond {
margin: 0 0 0 48px;
}

/* =Widget Areas
-------------------------------------------------------------- */

.widget-area ul {
margin-right: 0;
}
.widget-area ul ul {
margin-right: 1.3em;
margin-left: 0;
}
#wp-calendar caption {
text-align: right;
}
#wp-calendar tfoot #next {
text-align: left;
}

/* Main sidebars */
#main .widget-area ul {
margin-right: 0;
padding: 0 0 0 20px;
}
#main .widget-area ul ul {
margin-right: 1.3em;
margin-left: 0;
}

/* =Footer
-------------------------------------------------------------- */
#site-generator {
font-style:normal;
}
#site-generator a {
background-position: right center;
padding-right: 20px;
padding-left: 0;
}




index.php


Archivo principal de la plantilla, cumple dos funciones básicamente:


  • Incluir o llamar los otros archivos de la estructura de nuestra plantilla 
  • Incluir el bucle de WordPress para obtener la información de la base de datos y mostrarla en nuestro sitio ( mensajes, páginas, categorías etc ) 



<?php
/
**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

<div id="container">
<div id="content" role="main">

<?php
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( 'loop', 'index' );
?>
</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?> 



comments.php

Manejo de los comentarios de wordpress, los comentarios son la parte del blog donde interactúan con el sitio.   Este archivo contiene código html, php con el cual imprimimos los comentarios, se pinta el formulario dependiendo si están habilitados o no, etc.   

<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains both current comments
 * and the comment form.  The actual display of comments is
 * handled by a callback to twentyten_comment which is
 * located in the functions.php file.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
<div id="comments">
<?php if ( post_password_required() ) : ?>
<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyten' ); ?></p>
</div><!-- #comments -->
<?php
/* Stop the rest of comments.php from being processed,
* but don't kill the script entirely -- we still have
* to fully load the template.
*/
return;
endif;
?>
<?php
// You can start editing here -- including this comment!
?>
<?php if ( have_comments() ) : ?>
<h3 id="comments-title"><?php
printf( _n( 'One Response to %2$s', '%1$s Responses to %2$s', get_comments_number(), 'twentyten' ),
number_format_i18n( get_comments_number() ), '<em>' . get_the_title() . '</em>' );
?></h3>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
<div class="navigation">
<div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Older Comments', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
</div> <!-- .navigation -->
<?php endif; // check for comment navigation ?>
<ol class="commentlist">
<?php
/* Loop through and list the comments. Tell wp_list_comments()
* to use twentyten_comment() to format the comments.
* If you want to overload this in a child theme then you can
* define twentyten_comment() and that will be used instead.
* See twentyten_comment() in twentyten/functions.php for more.
*/
wp_list_comments( array( 'callback' => 'twentyten_comment' ) );
?>
</ol>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
<div class="navigation">
<div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Older Comments', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
</div><!-- .navigation -->
<?php endif; // check for comment navigation ?>
<?php else : // or, if we don't have comments:
/* If there are no comments and comments are closed,
* let's leave a little note, shall we?
*/
if ( ! comments_open() ) :
?>
<p class="nocomments"><?php _e( 'Comments are closed.', 'twentyten' ); ?></p>
<?php endif; // end ! comments_open() ?>
<?php endif; // end have_comments() ?>
<?php comment_form(); ?>
</div><!-- #comments -->


front-page.php


Solamente se utiliza en caso de tener una estática front-page, pero que es una estática front-page? Por defecto wordpress muestra los post, empezando por el más reciente,  pero muchos usuarios desean no tener esta apariencia de blog en su sitio y crean una estática front-page  logrando que su sitio se vea más como un CMS.

Cuando se crea esta página estática para el sitio, es aconsejable crear la forma de mostrar los post más recientes en un “directorio virtual”  que puede llamar blog, noticias que podrá llamar para mantener un interés con nuevas noticias dentro de su sitio web. 

La plantilla twentyten no tiene está opción por lo tanto no contiene el archivo 



home.php

Es la página de inicio predeterminada.

La plantilla twentyten no tiene está opción por lo tanto no contiene el archivo 

single.php

Se utiliza cuando se llama un post tiene el código html y php necesarios para imprimirla. Si este archivo no está presente se utiliza index.php

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php
/* Run the loop to output the post.
* If you want to overload this in a child theme then include a file
* called loop-single.php and that will be used instead.
*/
get_template_part( 'loop', 'single' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>


page.php

Se utiliza cuando se llama un pagina tiene el código html y php necesarios para imprimirla.  Si este archivo no está presente se utiliza index.php.


<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php
/* Run the loop to output the page.
* If you want to overload this in a child theme then include a file
* called loop-page.php and that will be used instead.
*/
get_template_part( 'loop', 'page' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>



category.php

Se utiliza cuando se llama un categoría tiene el código html y php necesarios para imprimirla.  Si este archivo no está presente se utiliza index.php.


<?php
/**
 * The template for displaying Category Archive pages.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>
<div id="container">
<div id="content" role="main">
<h1 class="page-title"><?php
printf( __( 'Category Archives: %s', 'twentyten' ), '<span>' . single_cat_title( '', false ) . '</span>' );
?></h1>
<?php
$category_description = category_description();
if ( ! empty( $category_description ) )
echo '<div class="archive-meta">' . $category_description . '</div>';
/* Run the loop for the category page to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-category.php and that will be used instead.
*/
get_template_part( 'loop', 'category' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>


tag.php

Se utiliza cuando se llama un categoría tiene el código html y php necesarios para imprimirla.  Si este archivo no está presente se utiliza index.php.


<?php
/**
 * The template for displaying Tag Archive pages.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>
<div id="container">
<div id="content" role="main">
<h1 class="page-title"><?php
printf( __( 'Tag Archives: %s', 'twentyten' ), '<span>' . single_tag_title( '', false ) . '</span>' );
?></h1>
<?php
/* Run the loop for the tag archive to output the posts
 * If you want to overload this in a child theme then include a file
 * called loop-tag.php and that will be used instead.
 */
 get_template_part( 'loop', 'tag' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>



taxonomy.php


La taxonomía es una de esas palabras que las personas generalmente no escuchan, ni usan, básicamente es la manera de agrupar cosas.   Se podría tener un grupo de diferentes animales. Si se agrupan acorde a varias características y se le asigna un nombre a cada grupo en Biología esto es conocido como Taxonomía de Linneo.  

En Wordpress es la agrupación mecánica de algunos artículos (o link).  En este caso este archivo se utiliza para mostrar estas agrupaciones cuando son llamadas. 


author.php

Define los datos de autor para cada articulo, este archivo el código html y php necesarios para imprimirla.    El básico imprime el autor ó un lista de autores, pero desde aquí también puedes imprimir información personalizada. 


<?php
/**
 * The template for displaying Author Archive pages.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php
/* Queue the first post, that way we know who
* the author is when we try to get their name,
* URL, description, avatar, etc.
*
* We reset this later so we can run the loop
* properly with a call to rewind_posts().
*/
if ( have_posts() )
the_post();
?>
<h1 class="page-title author"><?php printf( __( 'Author Archives: %s', 'twentyten' ), "<span class='vcard'><a class='url fn n' href='" . get_author_posts_url( get_the_author_meta( 'ID' ) ) . "' title='" . esc_attr( get_the_author() ) . "' rel='me'>" . get_the_author() . "</a></span>" ); ?></h1>
<?php
// If a user has filled out their description, show a bio on their entries.
if ( get_the_author_meta( 'description' ) ) : ?>
<div id="entry-author-info">
<div id="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>
</div><!-- #author-avatar -->
<div id="author-description">
<h2><?php printf( __( 'About %s', 'twentyten' ), get_the_author() ); ?></h2>
<?php the_author_meta( 'description' ); ?>
</div><!-- #author-description -->
</div><!-- #entry-author-info -->
<?php endif; ?>
<?php
/* Since we called the_post() above, we need to
* rewind the loop back to the beginning that way
* we can run the loop properly, in full.
*/
rewind_posts();
/* Run the loop for the author archive page to output the authors posts
* If you want to overload this in a child theme then include a file
* called loop-author.php and that will be used instead.
*/
get_template_part( 'loop', 'author' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>



date.php

Se utiliza para dar formato a la impresión de fechas en el sitio.

archive.php

Se utiliza cuando una categoría, autor o fecha son consultados.   Tenga en cuenta que si existen los archivos category.php, autor.php y date.php, estos son los que se muestran en su respectiva consulta. 


<?php
/**
 * The template for displaying Archive pages.
 *
 * Used to display archive-type pages if nothing more specific matches a query.
 * For example, puts together date-based pages if no date.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php
/* Queue the first post, that way we know
* what date we're dealing with (if that is the case).
*
* We reset this later so we can run the loop
* properly with a call to rewind_posts().
*/
if ( have_posts() )
the_post();
?>
<h1 class="page-title">
<?php if ( is_day() ) : ?>
<?php printf( __( 'Daily Archives: <span>%s</span>', 'twentyten' ), get_the_date() ); ?>
<?php elseif ( is_month() ) : ?>
<?php printf( __( 'Monthly Archives: <span>%s</span>', 'twentyten' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'twentyten' ) ) ); ?>
<?php elseif ( is_year() ) : ?>
<?php printf( __( 'Yearly Archives: <span>%s</span>', 'twentyten' ), get_the_date( _x( 'Y', 'yearly archives date format', 'twentyten' ) ) ); ?>
<?php else : ?>
<?php _e( 'Blog Archives', 'twentyten' ); ?>
<?php endif; ?>
</h1>
<?php
/* Since we called the_post() above, we need to
* rewind the loop back to the beginning that way
* we can run the loop properly, in full.
*/
rewind_posts();
/* Run the loop for the archives page to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-archive.php and that will be used instead.
*/
get_template_part( 'loop', 'archive' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>


search.php

Se utiliza para mostrar el resultado de un búsqueda.


<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php if ( have_posts() ) : ?>
<h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'twentyten' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
<?php
/* Run the loop for the search to output the results.
* If you want to overload this in a child theme then include a file
* called loop-search.php and that will be used instead.
*/
get_template_part( 'loop', 'search' );
?>
<?php else : ?>
<div id="post-0" class="post no-results not-found">
<h2 class="entry-title"><?php _e( 'Nothing Found', 'twentyten' ); ?></h2>
<div class="entry-content">
<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'twentyten' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div><!-- #post-0 -->
<?php endif; ?>
</div><!-- #content -->
</div><!-- #container -->



attachment.php

Para visualizar archivos adjuntos en los artículos.


<?php
/**
 * The template for displaying attachments.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header(); ?>
<div id="container" class="single-attachment">
<div id="content" role="main">
<?php
/* Run the loop to output the attachment.
* If you want to overload this in a child theme then include a file
* called loop-attachment.php and that will be used instead.
*/
get_template_part( 'loop', 'attachment' );
?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_footer(); ?>


image.php

Es usada cuando se muestra una simple imagen como adjunto, siempre y cuando no este presente el archivo attachment.php, si este existe se imprime ahí.

404.php

Usado cuando wordpress no encuentra un articulo o página


<?php
/**
 * The template for displaying 404 pages (Not Found).
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header(); ?>
<div id="container">
<div id="content" role="main">
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
<div class="entry-content">
<p><?php _e( 'Apologies, but the page you requested could not be found. Perhaps searching will help.', 'twentyten' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div><!-- #post-0 -->
</div><!-- #content -->
</div><!-- #container -->
<script type="text/javascript">
// focus on search field after it has loaded
document.getElementById('s') && document.getElementById('s').focus();
</script>
<?php get_footer(); ?>


Estos archivos sustituyen el index cuando están presentes, de acuerdo con la jerarquía de plantillas, y cuando la etiqueta condicional devuelve “verdadero” por ejemplo si se realiza un llamado is_single() retorna verdadero si existe un archivo single.php en nuestra plantila, entonces es este archivo el que se utiliza para genera la página remplazando el index.php. 

Template básico:

Realmente wordpress solo requeríria de dos archivos para hacer una plantilla, el index.php y el styles.css, con tan solo estos dos archivos en el directorio de la plantilla, y teniendo en cuenta que el estyles.css tenga los comentarios de detalles, wordpress reconocerá la plantilla y se podrá poner activa. 

El index.php es muy flexible y puede ser usado para mostrar todas las referencias a encabezado, barra lateral (sidebar), pie de página, contenido, categorías, archivos, búsquedas, página de error etc. 

O todo se puede dividir en módulos usando archivos para cada referencia.    Cada uno toma parte del trabajo dependiendo de las llamadas que se realicen desde el WordPress.  Si no ofrecemos estos archivos WordPress usará una versión predeterminada para cada llamada.  Por ejemplo si no tenemos el archivo comments.php, wordpress, usará automáticamente los archivos de plantilla wp-coments.php con la jerarquía de plantillas.  (Es recomendable tener estos archivos porque para la versión 3.0, no se garantiza que existan)


Si desea ayuda profesional para la creación de plantillas para wordpress visite nuestro sitio oficial y cotice:  www.creandoweb.co 

Si te ha servido está guía, puedes invitarme un café !



No hay comentarios:

Publicar un comentario

Desea contactar con nosotros, deje un comentario y pronto le daremos respuesta.