Creación de Vistas Personalizadas en WordPress con PHP

Clase 23 de 35Curso de WordPress Práctico

Resumen

¿Cómo configurar la vista de las entradas en WordPress?

Para mejorar la presentación de las entradas en tu sitio WordPress, es fundamental personalizar la vista de las mismas. Aquí exploraremos cómo utilizar un archivo single.php para crear vistas personalizadas que incluyan tanto la funcionalidad del encabezado y el pie de página ya inicializados, como también elementos propios de cada entrada.

¿Qué es el archivo single.php y para qué sirve?

El archivo single.php es esencial para las vistas de las entradas de tu blog en WordPress. No solo define cómo se mostrarán las entradas individuales en su totalidad, sino que también actúa como respaldo en caso de que no haya plantillas específicas para tipos personalizados de publicaciones.

  • Cabeza y pie de página: Ya inicializados en tu tema, aseguran la coherencia visual.
  • Utilidad general: Funciona como plantilla estándar y base para la presentación de cada post.

¿Cómo personalizar el contenido dentro de single.php?

Ahora que ya sabemos dónde crear nuestra vista de entrada, podemos avanzar a personalizar su contenido. Primero, asegurémonos de que tenemos el entorno adecuado mediante funciones de WordPress para mostrar nuestros posts.

  1. Etiqueta PHP para condicional y loop básico:

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <!-- Contenido de cada post irá aquí -->
    <?php endwhile; else: ?>
        <p><?php _e('No posts were found.'); ?></p>
    <?php endif; ?>
    
  2. Mostrar Título, Imagen Destacada y Contenido:

    • Título: Utiliza get_the_title() para obtener y mostrar el título de la entrada.
    • Imagen Destacada: Usa the_post_thumbnail('size') para mostrar la imagen prominente. Puedes elegir diferentes tamaños como 'medium' o 'large' dependiendo del diseño que prefieras.
    • Contenido: La función the_content() mostrará el texto completo de la entrada.
  3. Uso de columnas usando Bootstrap para diseño:

    • Fila y columnas para diseño responsivo:
      <div class="row">
          <div class="col-md-6">
              <?php the_post_thumbnail('medium'); ?>
          </div>
          <div class="col-md-6">
              <?php the_content(); ?>
          </div>
      </div>
      

¿Cómo optimizar la URL para SEO amigable?

Una URL significativa es crucial para la optimización de motores de búsqueda (SEO). Ajustar los enlaces permanentes puede mejorar tanto la estética como la eficacia de la URL.

  • Ajuste de enlaces permanentes: Ve a la sección de configuración y selecciona "nombre de la entrada" para una URL limpia que refleja de qué trata el contenido.

¿Qué consecuencias tiene estos cambios en el sitio?

Al implementar estas adaptaciones, notarás cambios significativos en la personalización y presentación de las entradas. Tendrás:

  • Vista más atractiva y profesional: Gracias a la combinación de Bootstrap y los componentes de WordPress para mostrar imágenes, títulos y contenido de manera ordenada.
  • Optimización SEO: A través de URLs amigables que facilitan la indexación y mejoran la elegibilidad y búsqueda gracias a una estructura clara y descriptiva.

Al dominar estas técnicas, abrirás las puertas para desarrollar un sitio más estilizado y funcional, aprovechando al máximo las capacidades de WordPress. ¡Adelante en tu camino de aprendizaje!