Crear una galería de imágenes de WordPress: codificar el complemento

A la gente le gustan las imágenes. Les gusta mirarlos, les gusta hacer clic en ellos. Por lo tanto, tiene sentido utilizarlos en la navegación de su sitio.

Es posible que ya utilices imágenes destacadas en tus páginas de archivo, lo que permite a los usuarios tener una mejor idea de lo que es una publicación y hacer que tus páginas de archivo se vean mejor. La bonita imagen en la que se puede hacer clic también hace que el proceso de navegación a través de una página o publicación sea más intuitivo.

Pero hay otros lugares donde puede usar imágenes destacadas para facilitar la navegación a partes de su sitio de WordPress. En este tutorial de dos partes, le mostraremos cómo crear una cuadrícula de imágenes que enlaza con las páginas secundarias de una página determinada en su sitio o las páginas secundarias de la página actual.

En esta primera parte, demostraré cómo escribir el PHP para obtener las páginas y generar sus títulos e imágenes destacadas, dentro de los enlaces. Y en la segunda parte, Ian Yates le mostrará cómo agregar CSS para convertir su lista en una grilla de gran apariencia.

Lo que necesitarás

Para seguir este tutorial, necesitarás lo siguiente:

• Una instalación de desarrollo de WordPress: no agregue esto a su sitio en vivo hasta que lo haya probado.
• Un tema que tiene ganchos de acción para que agregues contenido o que puedes editar. Si es un tema de terceros sin enlaces, cree un tema secundario y edítelo.
• Un editor de código.

Decidir sobre su enfoque

Lo primero que debe hacer es decidir qué páginas desea imprimir. En este tutorial, demostraré dos opciones:

• Una lista de las páginas secundarias de la página actual, con imágenes.
• Una lista de las páginas secundarias de una página específica, con imágenes. Esto puede mostrarse en cualquier parte de su sitio, no solo en la página principal.

Empezando

El punto de partida es el mismo para ambos enfoques.

Comience creando un complemento en su carpeta wp-content / plugins. Necesitará crear una carpeta para su complemento, como en la segunda parte de este tutorial, agregará una hoja de estilo, así como el archivo principal del complemento.

Una vez que tenga su carpeta, cree un archivo PHP para su código. Estoy llamando a la mía tutsplus-child-pages.php.

Ahora configure su archivo de complemento con el texto comentado en la parte superior:

1

/**

2

 * Plugin Name:  Tutsplus List Child Pages

3

 * Plugin URI:   https://github.com/rachelmccollin/tutsplus-list-child-pages

4

 * Description:  Output a list of children of the current page or a specific page with featured images.

5

 * Author:       Rachel McCollin

6

 * Author URI:   https://rachelmccollin.com

7

 * Version:      1.0

8

 * Text Domain:  tutsplus

9

 * License:      GPLv2.0+

10

 */

Esto le dice a WordPress qué es tu plugin y qué hace.

Ahora si aún no lo has hecho, ve y crea algunas páginas. Crearé algunas páginas con páginas secundarias, incluida una Página de ubicaciones como principal para mi lista de páginas específicas.

Aquí están mis páginas en el administrador:

Ahora es el momento de escribir la función para generar la lista.

Salida de una lista de hijos de la página actual

Vamos a empezar con esta opción. Esto generará una lista de todos los elementos secundarios de la página actual, con imágenes, enlaces y el título.

Este es un enfoque útil si su sitio tiene una estructura de página jerárquica y desea alentar a las personas que visitan páginas de nivel superior (o páginas de nivel medio, si las tiene) a visitar las páginas que se encuentran debajo de ellos en la estructura.

Comience por crear una función en su archivo de complemento:

1

function tutpslus_list_current_child_pages() {

2

3

}

Ahora dentro de esa función, verifica si estamos en una página. Todo lo demás irá dentro de esa etiqueta condicional:

1

if ( is_page() ) {

2

3

}

A continuación, configure la variable global $ post y defina la página principal:

1

global $post;

2

3

// define the page they need to be children of

4

$parentpage = get_the_ID();

Después de eso, define los argumentos para la función get_pages ():

1

// define args

2

$args = array(

3

    'parent' => $parentpage,

4

  'sort_order' => 'ASC',

5

	'sort_column' => 'menu_order',

6

);

7

8

$children = get_pages( $args );

Es posible que desee cambiar algunos de esos argumentos. He usado menu_order para ordenar, así que puedo ajustar esto manualmente, pero puedes usar la fecha, el título o cualquier otro parámetro que se pueda ordenar.

La siguiente tarea es configurar un bucle foreach utilizando los resultados de esa función get_pages ():

1

if ( $children ) { ?>

2

3

    <div class="child-page-listing">

4

5

		<h2><?php _e( 'Learn More', 'tutsplus' ); ?></h2>

6

7

		<?php //foreach loop to output

8

		foreach ( $children as $post ) {

9

10

			setup_postdata( $post ); ?>

11

12

			<article id="<?php the_ID(); ?>" class="child-listing" <?php post_class(); ?>>

13

14

				<?php if ( has_post_thumbnail() ) { ?>

15

16

					<a class="child-post-title" href="<?php the_permalink(); ?>">

17

						<?php the_title(); ?>

18

					</a>

19

20

					<div class="child-post-image">	

21

						<a href="<?php the_permalink(); ?>">

22

							<?php the_post_thumbnail( 'medium' ); ?>

23

						</a>

24

					</div>	

25

26

				<?php }	?>

27

28

			</article>	

29

30

		<?php } ?>

31

32

	</div>

33

34

<?php }

Vamos a correr a través de ese código:

1. Primero verificamos si la función get_pages () ha generado algún resultado, es decir, si se completó $ children.
2. Luego comenzamos un bucle foreach para cada página secundaria como la variable $ post,
3. Dentro de ese bucle, abrimos un elemento de artículo.
4. Verificamos si hay una imagen destacada (o publicación en miniatura) y la publicamos dentro de un enlace a la página.
5. Luego sacamos el título de la página dentro de un enlace a la misma.
6. Finalmente cerramos nuestros elementos y controles condicionales y el propio bucle foreach.

He agregado clases de CSS a cada elemento para que podamos diseñarlas en la segunda parte de este tutorial.

Agregando el código al tema

Ahora tienes tu función. El siguiente paso es agregarlo a su tema, para que se pueda imprimir en el lugar correcto.

Si su tema tiene ganchos de acción, puede enlazar su función a uno de esos. Entonces, si el mío tenía un gancho after_content, podría agregar este código en mi complemento, fuera de la función:

1

add_action( 'after_content', 'tutpslus_list_current_child_pages' );

Sin embargo, estoy usando el tema Twenty Sixteen para esta demostración, que no tiene ganchos de acción como este. Así que, en lugar de eso, necesitaré agregar mi función directamente en un archivo de plantilla.

Si está trabajando con su propio tema, puede agregar esto al archivo page.php en el punto donde desea que se muestre la lista.

Pero si está utilizando un tema de terceros, no debe editarlo, ya que todos los cambios se perderán la próxima vez que actualice el tema. En su lugar, crear un tema hijo. Cree una copia del archivo page.php desde su tema principal (o una copia del archivo de bucle para page.php) en el nuevo tema de cild y edítelo en su lugar.

Identifique en qué parte de su página desea que se genere la lista y agregue esto a su archivo de plantilla de tema:

1

tutpslus_list_current_child_pages();

Lo he agregado después del bucle en el archivo page.php del tema de mi hijo.

Ahora echemos un vistazo al sitio. Aquí está mi página Acerca de nosotros con sus páginas secundarias:

Así es como se agregan enlaces a las páginas secundarias de la página actual. ¿Pero qué sucede si desea agregar enlaces a los hijos de una página específica? Vamos a abordar eso a continuación.

Salida de una lista de hijos de una página específica

El código para esto es casi idéntico al código para los hijos de la página actual. La diferencia está en la definición de la página principal que utilizará al ejecutar get_pages ().

Haga una copia de la primera función en su archivo de complemento y edite el nombre de la función para que sean diferentes.

Encuentre la verificación condicional para estar en una página y elimínela. No te olvides de borrar también los frenos de cierre de esa comprobación.

Ahora encuentra la línea que dice:

1

$parentpage = get_the_ID();

Reemplázalo con esto:

1

$page = get_page_by_path( 'locations', OBJECT, 'page' );

2

3

$parentpage = $page->ID;

Verá que esto utiliza la función get_page_by_path (), con su primer parámetro como la barra de la página de destino. Edite esto para que use la barra de la página que desea orientar en su sitio.

También es una buena práctica editar las clases CSS en esta función para que sean distintas de las de la primera función. De esa forma, si usa ambos, puede usar un estilo diferente para cada uno.

Aquí está la función completa después de hacer estas ediciones:

1

function tutpslus_list_locations_child_pages() {

2

3

	global $post;

4

5

	// define the page they need to be children of

6

	$page = get_page_by_path( 'locations', OBJECT, 'page' );

7

8

    $parentpage = $page->ID;

9

10

    // define args

11

	$args = array(

12

		'parent' => $parentpage,

13

		'sort_order' => 'ASC',

14

		'sort_column' => 'menu_order',

15

	);

16

17

	//run get_posts

18

	$children = get_pages( $args );

19

20

	if ( $children ) { ?>

21

22

		<div class="child-page-listing">

23

24

			<h2><?php _e( 'Our Locations', 'tutsplus' ); ?></h2>

25

26

			<?php //foreach loop to output

27

			foreach ( $children as $post ) {

28

29

				setup_postdata( $post ); ?>

30

31

				<article id="<?php the_ID(); ?>" class="location-listing" <?php post_class(); ?>>

32

33

					<?php if ( has_post_thumbnail() ) { ?>

34

35

						<a class="location-title" href="<?php the_permalink(); ?>">

36

							<?php the_title(); ?>

37

						</a>

38

39

						<div class="location-image">	

40

							<a href="<?php the_permalink(); ?>">

41

								<?php the_post_thumbnail( 'medium' ); ?>

42

							</a>

43

						</div>	

44

45

					<?php }	?>

46

47

				</article>	

48

49

			<?php } ?>

50

51

		</div>

52

53

	<?php }

54

55

}

Agregando el código al tema

Una vez más, deberás agregar tu código a tu tema. En este caso, no solo querrá que su lista se imprima en páginas estáticas y que desee ubicarla en un lugar diferente.

Si su tema tiene enlaces de acción, puede usar uno de esos en su archivo de complemento, de manera similar a como lo hizo antes:

1

add_action( 'before_footer', 'tutpslus_list_locations_child_pages' );

Lo agregaré al pie de página de mi tema, de nuevo creando un duplicado de footer.php en el tema de mi hijo y lo editaré.

Aquí hay un código en mi archivo footer.php, inmediatamente dentro de la apertura del elemento footer:

1

<?php tutpslus_list_locations_child_pages(); // list locations pages ?>

Y aquí está la salida de la lista en mi pie de página. Esto está al final de una sola publicación:

Sugerencia: es posible que desee evitar la salida de esta lista en su página de Ubicaciones si tiene ambas funciones en ejecución, para evitar la duplicación. Intenta agregar una etiqueta condicional usando la ID de página para lograrlo.

Próximos pasos

Ahora tienes dos listas de páginas. Una de las páginas secundarias de la página actual y otra de las páginas secundarias de una página específica.

En este momento, las imágenes se colocan en un lado de la página y los títulos no se ven tan bien. En la siguiente parte de este tutorial de dos partes, aprenderá cómo diseñar las imágenes para crear una cuadrícula con un diseño de cuadrícula CSS, y cómo integrar el texto del título en esa cuadrícula.