Creación de Vistas Personalizadas en WordPress con PHP

Clase 23 de 35 • Curso 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.

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; ?>

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.

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!

Beatriz Pérez Santana

student•

A mí me daba error al subir la imagen 😅 En concreto éste: "Is its parent directory writable by the server?" Investigando un poco encontré esta solución: Con la terminal entras en la carpeta del proyecto platzigifts y ejecutas el siguiente comando:

sudo chmod 777 wp-content/

Patrick Andree

student•

¡Gracias!

Jose L. Figueroa

student•

Me pasó también hace tiempo, se resuelve por permisos!

Axel David Espinosa Meneses

student•

Los diferentes tamaños que podemos pasarle como parámetro a la función

the_post_thumbnail()

son los siguientes: thumbnail ----- 150 x 150 PX medium -------- 300 x 300 PX large ------- 1024 x 1024 PX full ----- La resolución original de la imagen cuando la subimos

La documentación es la siguiente:

Julian David Vidal González

student•

Así pueden agregar atributos alt, title y class a la imagen ;)

<?php the_post_thumbnail('large', array(
            'title' => get_the_title(),
            'alt' => get_the_title(),
            'class' => 'img-fluid'
));?>

Franklin Peñafiel

student•

excelente dato, me servirá mucho en un futuro

Braulio Alberto Bueno Pabon

student•

Error 404 - Despues de cambiar el tipo de enlace permanente En mi caso, tuve que configurar el archico httpd.conf (/etc/httpd/conf/httpd.conf), change 'AllowOverride None' to 'AllowOverride All'

#It can be &quot;All&quot;, &quot;None&quot;, or any combination of the keywords:
#Options FileInfo AuthConfig Limit
AllowOverride All

Alvaro Andres Alfonso Rodriguez

student•

No entiendo como lo hiciste... tambien me aparece el mismo error, apenas cambio el enlace me aparece: Extaviado, la URL solicitada no se encontró en este servidor

Luis Alberto Silva Arellano

student•

Primero, tuve un problema de que no salia la opción para añadir "Imagen destacada" . Lo 'arregle' añadiendo a functions.php la línea: add_theme_support( 'post-thumbnails' ); Bingo !!! apareció la opción para agregar la dichos imagen, pero .... hmmm las preguntas al otro lado.. voy por allá.

Raul Lopez

student•

Iba a intentar esto pero ya veo que esta en la funcion init


    function init_templeate(){
        add_theme_support('post_thumbnails');
        add_theme_support( 'title-tag');

        register_nav_menus( 
            array(
                'top_menu' => 'Mi Menu'
            ) 
            );
    
}

David Velarde

student•

Hola yo tuve dos errores que me llevaron a la misma situacion quizas a alguno le pueda ayudar.

Primero que nada la respuesta de @Luissilvaa es la correcta, ya que de acuerdo a la doc de wordpress eso es lo que tienes que agregar (https://developer.wordpress.org/reference/functions/add_theme_support/)

En mi caso yo segui la clase y coloque post_thumnails

Esto no era correcto ya que es con "-" mas no con "_" pero aun asi no me funcionaba, asi que recurri a la documentacion nuevamente y tenia un typo, ya que es post-thumbnails y no post-thumnails como lo habia puesto inicialmente

Ramiro Contreras León

student•

Si no les aparece la opción de agregar imagen destacada, pongan el add_theme_support('post-thumbnails'); fuera de la función.

function init_template(){

    
    add_theme_support('title-tag');

    register_nav_menus(
        array(
            'top_menu' => 'Menú Principal'
        )
    );

}

add_theme_support('post-thumbnails');```

Jose Balmore Ramirez Medrano

student•

Muchas Gracias

Angel Tomas Escobar Torres

student•

Esta respuesta deberia estar mucho mas arriba, ya que leyendo comentarios esto le paso a muchas personas. Gracias

Education Mobility Solutions SAS

teacher•

Si estas en Ubuntu y al cambiar los enlaces permanentes te sale un 404 al ver la entrada, lo que me paso a mi :) la solución que me funciono es la siguiente:

1 paso: abres tu consola con Ctrl + Alt + T

2 paso: escribes esto en consola

cd /opt/lampp/htdocs/nombre-del-proyecto

3 paso: creas un archivo oculto que se llame .htaccess eso lo haces con el siguiente comando:

cat > .htaccess

4 paso: vas a tu panel de control de WordPress, después vas a la pestaña de Ajustes > Enlaces permanentes y seleccionas el que deses, después guardas los cambios y al final de la pagina vas a encontrar un campo de texto con unas configuraciones, le das copiar y pegar.

5 paso: por ultimo copias en la terminal esas configuraciones con Ctrl + Shift + C y por ultimo presionas Ctrl + D

Y listo ya no se sale el 404 al ver la entrada!! :)

Erik Cardenas Vicente

student•

Thanks

Percy Tejada

student•

single.php para nuestras entradas y postypes!

Andres Arias

student•

Tuve un problema con los permalinks al modificarlos usando Ubuntu 18.04 y apache2. Para resolverlo entré al archivo /etc/apache2/apache2.conf y modifique la entrada <Directory /var/www/> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> AllowOverride None a AllowOverride All

Carlos Perilla

student•

Para los que hayan revisado el código y aun así no les aparezca la imagen, recuerden que entradas es distinto de paginas. page.php se encarga de las paginas. single.php de las entradas.

Johann osorio

student•

Me salvaste la vida :)

María Isabela Vélez Bolivar

student•

Hola! en la pagina no me muestra la imagen destacada, no me aparece error ni nada solo que no se muestra, en la pagina en functions.php ya tengo agregado add_theme_support(“post-thumbnails”); no sé que hacer, espero vuestra valiosa ayuda

Erik Elyager

student•

¿No te da error? ¿tienes habilitado php para que te muestre todos los errores? Debe haber por ahí algún error que te de una pista.

Joel Marquez

student•

Intenta colocar esto en el functions.php

<?php
// Se activa la imagen destacada en el dashboard
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );
?>```

Cristhian Sebastian Bolaños Portilla

student•

Para los que tengan problema subiendo la imágen en MAC: Desde su terminal van a la ruta:

cd /Users/<username>/.bitnami/stackman/machines/xampp/volumes/root/htdocs/platzigifts

Luego habilitan permisos:

chmod a+rwx wp-content

Julian David Alzate Cuervo

student•

trabajando en localhost

Héctor Tello

student•

Si a alguno le aparece un error 404:

The requested URL was not found on this server.

Lo que hay que hacer para arreglar el error es buscar el archivo .htaccess, en la carpeta raíz de wordpress.

Ese archivo debería quedar aśi:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Alvaro Andres Alfonso Rodriguez

student•

ingreso el archivo.htaccess y no me aparecen las mismas lineas

Alvaro Andres Alfonso Rodriguez

student•

me puedes ayudar sobre que tengo que modificar.

Edgar Moises Valdez Faria

student•

Buenas. Al publicar una nueva entrada me sale el siguiente error:

Publishing failed. Error message: The response is not a valid JSON response.

Espero puedan ayudarme.

Cristian Ramanzin

teacher•

Cuando pasa esto, lo primero que tenes que intentar es actualizar los enlaces permanentes desde los ajustes, no hace falta que los cambies, solo con darle guardar, alcanza.

Beatriz Pérez Santana

student•

A mi me dio el mismo error! Lo solucioné entrando en ++Ajustes -> Enlaces permanentes++ y en esa página en la parte inferior aparece esto:

En la carpeta del proyecto platzigifts creé el archivo .htaccess y dentro de ese archivo copié el código ese que se muestra en la parte inferior.

Edgar Moises Valdez Faria

student•

Al cambiar el tipo de enlace permanente, Me tira el siguiente error:

¡Objeto no localizado!
No se ha localizado la URL solicitada en este servidor. La URL de la página que le ha remitido parece ser errónea o estar obsoleta. Por favor, informe del error al autor de esa página.

Si usted cree que esto es un error del servidor, por favor comuníqueselo al administrador del portal.

Error 404
localhost
Apache/2.4.41 (Unix) OpenSSL/1.1.1d PHP/7.4.2 mod_perl/2.0.8-dev Perl/v5.16.3

Aguardo comentarios en caso de que puedan ayudarme

Cristian Ramanzin

teacher•

Hola Edgar! Si ya actualizaste los enlaces permanentes desde el administrador, te recomiendo que te fijes si tu servicio de php tiene el modulo mod_rewrite activo.

Avisame si pudiste!

Silvia Eugenia Quispe Cespedes

student•

Tengo el mismo error, como lo resolviste.?

Luis Alejandro Vera Hernandez

student•

Crear archivo single.php

<?php get_header(); ?>

<!-- crear un loop basico -->

<main class="container my-3">
    <?php if(have_posts()) {
        while(have_posts()) {
            the_post();
        ?>

            <h1 class='my-3'>
                <?php the_title() ?>
            </h2>
            <div class="row">
            
                <div class="col-6">
                    <?php the_post_thumbnail( 'large');?>
                </div>
                <div class="col-6">
                    <?php the_content(); ?>
                </div>
            
            </div>
        <?php
        }
    } ?>

</main>

<?php get_footer (); ?>

Añadir una entrada > anadir title y añadir description>añadir imagen destacada> Deshabilitar comentarios y pingbacks> actualizar

Ir a enlaces permamentes y seleccionar la opcion nombre dela entrada> guardar>Refrescar entrada con nueva url amigable

Norman Carlos Cabrera

student•

![](

ayuda! hola no me pase para poner imagen destacada, donde lo puedo encontrar o activar.

Marco Antonio Leon Matias

student•

Revisa el archivo functions.php. La función init_template() debe estar así.

function init_template(){
    add_theme_support('title-tag');
    
    register_nav_menus([
        'top_menu' =>  'Menú principal de marco'
    ]);
    add_theme_support('post-thumbnails');
}

EL add_theme_support('post-thumbnails'), su parametro va en singular 'post-thumbnails'. Yo lo tenía en 'posts-thumbnails' y no me servía.

victor saumelli

student•

Buenas por alguna razon no se me muestra la pagina en la vista principal. no arroja ningun error ni nada, el codigo esta bien escrito y los nombres de los archivos correctos. alguna sugerencia?

David Ernesto Fernández Guevara

student•

Debes acceder a la entrada de Hola Mundo para poder ver los cambios. A mi tampoco me mostraba nada hasta que le di clic al enlace de Hola Mundo que se muestra en el header de la página principal. Espero te sirva.

Alvaro Andres Alfonso Rodriguez

student•

Tengo este error cuando cambio el enlace permanente:

en los comentarios hablan sobre ingresar al archivo: .htaccess y modificarlo pero no entendi que es lo que tengo que modifiacar... Dejo pantallazo de mi archivo .htaccess para que porfavor me digan lo que tengo que modificar:

Agradezco a las personas que me ayuden con ese problema