Advertisement
  1. Code
  2. WordPress

Creando archivos de inicio para tu framework de tema de WordPress

Scroll to top
Read Time: 7 min
This post is part of a series called How Theme Frameworks Actually Work.
Deciding How to Develop Your WordPress Theme Framework
Creating the Starting Files for Your WordPress Theme Framework

Spanish (Español) translation by Rolando Gonzalez (you can also view the original English article)

En las partes anteriores de esta serie, has aprendido cómo funcionan los framework de tema y has considerado su ventaja al framework que estás desarrollando.

¡Ahora es el momento de entrar en el código!

En este tutorial vas a tomar un tema básico y editar los archivos de plantilla para que estén listos para los ganchos y las funciones que se les añadirán para tu framework. El propósito de este tutorial es para ordenar el tema y así no se duplica el código, lo que significa que vas a crear include files (archivos para incluir)en el bucle.

Esto significa que no tendrás que crear bucles duplicados en su tema hijo cuando creas nuevos archivos de plantilla, y si necesitas editar el bucle sólo tendrás que hacerlo una vez.

Nota: los archivos de arranques se basan en el tema que he creado para mi serie sobre la creación de un tema de WordPress desde HTML, con algunos cambios. Puedes descargarlos desde el repositorio GitHub que acompaña esta serie.

Necesitarás

Para seguir este tutorial, necesitarás:

  • una instalación de desarrollo de WordPress
  • su propio tema de arranque o los archivos de temas de arranque en el repositorio GitHub para esta serie
  • un editor de código

Creando los Archivos que se incluyen para el bucle

Para mi framework Voy a crear tres bucles:

  • uno para los archivos (incluyendo la página principal del blog)
  • uno para los Artículos individuales
  • uno para páginas

Esto es porque quiero que cada uno de ellos se muestre un poco diferente a los demás.

A pesar de que habrá tres bucles, todavía será más eficiente que incluir un bucle en cada uno de los archivo de plantilla en tu framework.

El bucle principal

Copie lo siguiente dentro de él desde loop.php.

Copy the following into it from archive.php:

1
<?php
2
/* Cola el primer post, de esa manera podemos saber si se trata de un archivo de fecha para que podamos mostrar el título correcto.

3
 * Reiniciamos esto más tarde para que podamos ejecutar el bucle correctamente con una llamada a rewind_posts ().

4
 */
5
if ( have_posts() )
6
    the_post();
7
?>
8
9
  	<h2 class="page-title">
10
			<?php if ( is_day() ) { ?>
11
				Archive for <?php echo get_the_date();
12
			}
13
			elseif ( is_month() ) { ?>
14
				Archive for <?php echo get_the_date('F Y');
15
			}
16
			elseif ( is_year() ) { ?>
17
				Archive for <?php echo get_the_date('Y');
18
			}
19
			else {
20
				echo get_queried_object()->name; 
21
			} ?>
22
		</h2>
23
24
<?php rewind_posts(); ?>
25
			
26
			
27
<?php // start the loop ?> 

28
<?php while ( have_posts() ) : the_post(); ?>
29
30
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
31
32
	<h2 class="entry-title">
33
		<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
34
			<?php the_title(); ?>
35
		</a>
36
	</h2>
37
38
	<section class="left image quarter">
39
		
40
		<?php if ( has_post_thumbnail() ) { ?>
41
			<a href="<?php the_permalink(); ?>">
42
				<?php the_post_thumbnail( 'medium', array(
43
					'class' => 'left',
44
					'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
45
				) ); ?>
46
			</a>
47
		<?php } ?>
48
	</section><!-- .image -->
49
50
	<section class="entry-meta">
51
		<p>Posted on <?php the_date(); ?> by <?php the_author(); ?></p>
52
	</section><!-- .entry-meta -->
53
54
	<section class="entry-content">
55
		<?php the_content(); ?>
56
	</section><!-- .entry-content -->
57
58
	<section class="entry-meta">
59
		<?php if ( count( get_the_category() ) ) : ?>
60
			<span class="cat-links">
61
				Categories: <?php echo get_the_category_list( ', ' ); ?>
62
			</span>
63
		<?php endif; ?>	
64
	</section><!-- .entry-meta -->
65
	
66
</article><!-- #01-->
67
68
<?php endwhile; ?>
69
<?php // ends the loop ?> 

No necesitas mostrar un encabezado en la página principal del blog, por lo que añade una etiqueta condicional alrededor del primer bucle, para comprobar que no estamos en esa página:

1
if ( ! is_front_page() ) {
2
}

El primer bucle ahora leerá de la siguiente manera:

1
if ( ! is_front_page() ) {
2
 
3
    if ( have_posts() )
4
		the_post();
5
	?>
6
	
7
			<h2 class="page-title">
8
				<?php if ( is_day() ) { ?>
9
					Archive for <?php echo get_the_date();

10
				}

11
				elseif ( is_month() ) { ?>
12
					Archive for <?php echo get_the_date('F Y');

13
				}

14
				elseif ( is_year() ) { ?>
15
					Archive for <?php echo get_the_date('Y');

16
				}

17
				else {

18
					echo get_queried_object()->name; 

19
				} ?>
20
			</h2>
21
	
22
	<?php rewind_posts();
23
24
} ?>

Ahora tienes que incluir este bucle en los archivos de plantilla correspondientes. En archive.php e index.php, reemplaza el bucle existente con la etiqueta get_template_part()(), que incluye el archivo de bucle en el lugar correcto:

1
 <?php get_template_part( 'loop' ); ?>

Ahora tienes un bucle trabajando para los archivos.

Página Loop

A continuación, vamos a crear un archivo de bucle para páginas. Cree un archivo denominado loop-page.php.

Copia el bucle a él desde el existente page.php:

1
<?php
2
    // Ejecute el bucle de página para mostrar el contenido de la página

3
4
     if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
5
6
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
7
			
8
			<?php if ( ! is_front_page() ) { ?>
9
				<h2 class="entry-title"><?php the_title(); ?></h2>
10
			<?php } ?>
11
			
12
			<section class="entry-content">
13
				<?php the_content(); ?>
14
			</section><!-- .entry-content -->
15
		</article><!-- #post-## -->
16
17
	<?php endwhile; ?>

Ahora en todas las plantillas de página de tu tema (page.php y page-full-width.php), ), reemplaza el bucle con:

1
<?php get_template_part( 'loop' , 'page' ); ?>

Bucle para Artículo Individual

Por último, vamos a crear un archivo de bucle de artículos individuales, que trabajará para artículos normales y para cualquier tipo de artículos personalizados que crees en el futuro. Esto es similar al bucle principal, excepto que no incluye un enlace al artículo, y no hay bucle inicial para comprobar en que tipo de archivo estamos.

Cree un archivo denominado loop-single.php y otro llamado single.php.

Copie el contenido del archivo index.php en el single.php, y edita los comentarios al principio del archivo y la llamada para el bucle, para que lea:

1
<?php get_template_part( 'loop', 'single' ); ?>

Ahora en single-loop.php, copie el código en loop.php, sin incluir el primer bucle que busca los archivos. Edite la etiqueta de apertura de cabecera dentro del bucle para eliminar el enlace, por lo que el código se lee así:

1
<?php while ( have_posts() ) : the_post(); ?>
2
3
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
4
5
    <h2 class="entry-title">
6
		<?php the_title(); ?>
7
	</h2>
8
9
	<section class="left image quarter">
10
		
11
		<?php if ( has_post_thumbnail() ) { ?>
12
			<a href="<?php the_permalink(); ?>">
13
				<?php the_post_thumbnail( 'medium', array(
14
					'class' => 'left',
15
					'alt'	=> trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
16
				) ); ?>
17
			</a>
18
		<?php } ?>
19
	</section><!-- .image -->
20
21
	<section class="entry-meta">
22
		<p>Posted on <?php the_date(); ?> by <?php the_author(); ?></p>
23
	</section><!-- .entry-meta -->
24
25
	<section class="entry-content">
26
		<?php the_content(); ?>
27
	</section><!-- .entry-content -->
28
29
	<section class="entry-meta">
30
		<?php if ( count( get_the_category() ) ) : ?>
31
			<span class="cat-links">
32
				Categories: <?php echo get_the_category_list( ', ' ); ?>
33
			</span>
34
		<?php endif; ?>	
35
	</section><!-- .entry-meta -->
36
	
37
</article><!-- #01-->
38
39
<?php endwhile; ?>

Guarda estos dos archivos. Ahora tienes todos tus archivos de bucle listos.

Resumen

El orden de un tema y la reducción de código duplicado antes de usarlo como base de un framework de tema te ahorrarán horas de trabajo en el futuro.

A medida que creas temas hijos para trabajar con este tema padre, te encontrarás creando bucles a medida para simplemente crear el contenido en la forma adecuada para un proyecto determinado. Por tener sólo tres bucles discretos para trabajar, podrás evitar la necesidad de crear archivos de plantilla duplicados en tu tema hijos y sólo tendrás que crear archivos de bucle duplicados.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.