Comprender las bases y el punto de partida

1

Bienvenida y recomendaciones

2

¿Cómo es un entorno de desarrollo profesional en WordPress?

3

Presentación del proyecto y repaso del curso de fundamentos

Crear Post Types y Archivos

4

¿Cómo se crea y se personaliza una categoría en WordPress?

5

Creemos la UI de un archivo en la web

6

¿Por qué es importante la navegabilidad de la web y cómo se mejora?

7

¿Qué es un Post Type y cómo se pueden personalizar los diferentes tipos?

8

¿Cómo creamos la UI de un Post Type personalizado?

9

Construyamos un loop personalizado

10

¿Qué es una taxonomía y cómo se registra una nueva?

11

¿Qué es un page template y cómo se utiliza?

Utilizar AJAX

12

¿Cómo funcionan los emails en WordPress?

13

¿Cómo utilizar AJAX dentro de WordPress?

14

Empecemos a construir un filtro dinámico para la web

15

Completemos la función AJAX para darle vida a nuestro filtro

La REST-API de WordPress

16

¿Cómo se utiliza la REST-API de WordPress?

17

¿Qué son y cómo funcionan los endpoints?

18

Hagamos el primer llamado a la API

Utilizar Bloques

19

¿Qué es un bloque de Gutenberg?

20

Creando un bloque nativo con React

21

Optimicemos el bloque con componentes de WordPress

22

Creemos el primer bloque dinámico

23

Mejorando la experiencia del usuario en Gutenberg con SSR (Server Side Render)

24

Creando bloques con ACF Pro

25

Crea un bloque igual al de ACF pero de forma nativa

Deployment

26

¿Cómo se lleva un sitio a producción?

27

¿Cómo podemos optimizar la indexación y el SEO de nuestro sitio?

28

¿Cómo defiendo a mi sitio de ataques externos y lo hago más seguro?

Finalizar el Curso

29

Conclusiones

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Qué es un page template y cómo se utiliza?

11/29
Recursos

¿Cómo personalizar la interfaz de las páginas en WordPress?

A través de esta guía te sumergirás en el proceso paso a paso para personalizar la interfaz de las páginas en WordPress utilizando Blade y Advanced Custom Fields. Con estas herramientas, podrás crear experiencias digitales únicas y potenciar la personalización de tu sitio web.

¿Cómo se crea una nueva página institucional?

Para comenzar, debemos crear una nueva página en el área de administración de WordPress. Esta será nuestra página institucional. Introduce un texto de referencia para identificar claramente el contenido que estás visualizando.

  1. Crea una nueva página desde la administración de WordPress.
  2. Introduce un título relevante, como "Página Institucional".
  3. Adjunta un texto de referencia.
  4. Guarda los cambios para ver cómo se refleja en el front-end del sitio.

¿Cómo se genera una plantilla en Blade?

Si buscamos personalizar la interfaz de una página en particular, Blade ofrece un camino eficiente. Recuerda que cada estructura diferente en tu sitio debería tener su propio archivo de plantilla.

  1. Duplica y renombra el archivo page.php a template-institutional.blade.php.
  2. Asegúrate de incluir un comentario al inicio del archivo: {{!-- Template Name: Página Institucional --}}.
  3. Vuelve a tu área de administración, selecciona la plantilla desde los atributos de la página y actualiza.

¿Cómo usar Advanced Custom Fields para personalizar?

Advanced Custom Fields es una potente herramienta en WordPress para crear campos personalizados y mejorar la interactividad de tu sitio.

  1. Instala y activa el plugin Advanced Custom Fields.
  2. Crea un nuevo grupo de campos y asócialo a la plantilla de "Página Institucional".
  3. Añade dos campos nuevos: un campo de texto para el título personalizado y un campo de imagen para la portada.
$fields = get_fields();
echo $fields['custom_title']; // Muestra el título personalizado
echo '<img src="' . $fields['custom_image'] . '" alt="Imagen de portada">';

¿Cómo integrar ACF en el código de la página?

Es esencial aprender a mostrar la información almacenada en los campos personalizados en el front-end de tu sitio.

  1. Declara una variable $fields que capture todos los datos almacenados.
  2. Usa echo para integrar el título personalizado en el lugar adecuado dentro del HTML.
  3. Añade una etiqueta <img> para desplegar la imagen de portada, utilizando la URL del campo personalizado.

¿Qué mejoras estéticas se pueden incluir?

La estética de tu página puede marcar la diferencia en la experiencia del usuario. Considera estos sencillos pasos para mejorar:

  • Añade una barra horizontal utilizando <hr> para separar la imagen del contenido.
  • Asegúrate de que los elementos multimedia y los textos estén correctamente alineados y sean responsivos.

Con la implementación de estas técnicas, has transformado tu página utilizando personalización avanzada en WordPress. A medida que continúes explorando y aplicando estos métodos, podrás maximizar el potencial de tu sitio web, ofreciendo experiencias únicas a tus usuarios. ¡Sigue adelante, cada paso te acerca a ser un verdadero experto en WordPress!

Aportes 26

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Esta clase me encantó! es justo lo que necesitaba. Ahora, si quieren que su page template tenga sus propios estilos, lo que hice yo fue crear una nueva carpeta css en /assets/css y ahí cree un archivo "example.css" o como lo quieran llamar.

Luego para poder incluir ese archivo en los estilos de nuestro theme lo que tenemos que hacer es dirigirnos al archivo functions.php y ahí incluimos el archivo escribiendo lo siguiente en la función assets que creamos en el curso práctico de WordPress:

(Yo incluyo la fuente montserrat porque la necesito para mis estilos entonces la paso como argumento indicando que ya la registre)

function assets() {
    ...
    wp_register_style('montserrat', 'https://fonts.googleapis.com/css2?family=Montserrat&display=swap', '', '1.0.0', 'all');
    wp_enqueue_style('example_style', get_template_directory_uri().'/assets/css/example.css', array('montserrat'), wp_get_theme()->get('Version'), 'all');
    ...
}

add_action('wp_enqueue_scripts', 'assets');

Y con eso queda, saludos!

Actualmente este plugin cambio su “creador” y su nombre y foto.
Lo encuentran como: “Advanced Custom Fields” Foto verde y creador “Delicious Brains” (que si entran a su web aparece Eliot Condon como colaborador.)
https://wordpress.org/plugins/advanced-custom-fields/#description

Genial el contenido. Esta es una serie donde pueden profundizar sobre ACF, es un plugin muy poderoso!

¿Qué es un page template y cómo se utiliza?


Hay varias formas de crear una vista personalizada para una página, pero también podemos crear varios templates. Para esto creamos un archivo PHP con el nombre que queramos, ejemplo:

  • template-institucional.php

Y al principio del archivo, comentamos una línea y colocamos:

<?php 
// Template Name: pagina institucional
get_header();

Y en Gutenberg aparecerá una nueva sección en la barra lateral que se llama Atributos de página, aquí podemos elegir la plantilla que creamos y otras cositas.

Para extraer datos de ACF en nuestros templates, lo hacemos así:

<?php
$fields = get_fields();
?>
<main class="container my-5">
    <h1 class='my-3'>Página: <?php _e( $fields['titulo'] );?></h1>

Hola,
Actualmente el plugin se llama “Advanced Custom Fields" y si están utilizando Docker, y al momento de instalar el plugin tienen problemas con el tamaño:

Es porque en la version de WP(del curso) el tamaño es de 2MB y el plugin tiene tamaño de 2.1MB

Para solucionarlo, se debe especificar el tamaño en el achivo .httacces, para lo cual ingresamos a docker para poder modificarlo:


docker ps
docker exec -it ead6f72abe2a bash
Una vez en el bash, se ejecuta la sentencia -> sed -i "11i php_value upload_max_filesize 256M" .htaccess &amp;&amp; sed -i "12i php_value post_max_size 256M" .htaccess

Listo, ahora podemos verificar que el tamaño configurado incremento:

Finalmente, subir y bajar docker y ya se puede instalar el plugin (pegando el contenido del zip dentro de plugins, y activarlo)

Ya podemos continuar

Espero les sirva si lo necesitan,
Chaolin.

Hasta este punto. Todo esto esta bravazooo!!!. Increíble Wordpress

También puedes utilizar la funcíon the_field() para acceder a un campo personalizado
EJ:

<?php the_field('nombre_campo_personalizado'); ?>

deben actualizar las clases estan muy viejas

En las nuevas versiones de wordpress, la opcion de Plantilla ya no se encuentra en la seccion Atributo de Página, sino en la seccion Resúmen

esto si que es algo nuevo para mi.

Un compañero del trabajo me enseñó a usar parcialmente el template. Fue la mejor solución que tuve en ese momento, luego lo hice como páginas personalizadas. Ahora estoy aprendiendo que el crear la plantilla tiene más beneficios del que pensé

Las cosas se vuelven un poco más simples ahora con estos dos últimos tipos de páginas de WordPress. Primero tenemos los resultados de búsqueda, que en la mayoría de los casos son extremadamente simples en lo que respecta a su diseño. Esa simplicidad se refleja en su jerarquía:

search.php
index.php

Usos para plantillas de página #Usos para plantillas de página

Las plantillas de página muestran el contenido dinámico de su sitio en una página, por ejemplo, publicaciones, actualizaciones de noticias, eventos de calendario, archivos multimedia, etc. Usted puede decidir que desea que su página de inicio se vea de una manera específica, que es bastante diferente a otras partes de su sitio. O bien, es posible que desee mostrar una imagen destacada que enlace a una publicación en una parte de la página, tenga una lista de publicaciones más recientes en otro lugar y utilice una navegación personalizada. Puedes usar plantillas de página para lograr estas cosas.

Hasta el momento me a gustado mucho tu clase, muy tranquila y organizada 😃 super por este excelente trabajo. saludos desde colombia

Si alguno les pido credenciales de FTP al instalar puglins :

Abrir el archivo en:

/htdocs/platzigifts/wp-config.php

y agregar :

define('FS_METHOD','direct');

Quizas tambien sea necesario dar acceso a la carpeta de plugins para su instalación.

Clarísimo todo. Gracias

Excelente clase con el uso de campos personalizados @whoisnegrello !!!

Genial! tambien hay una herramienta se llama pod lo use un tiempo y me pareció muy potente, que diferencia habrá contra el Advanced Custom Fields

Excelente, yo lo que hacía era crear subcategorias dentro del index.php. Pero me gustó mejor este enfoque haciendo uso del page.php

Las plantillas de página
son un tipo específico de
archivo que permite
definir su interfaz

Excelente Curso,!

Ya no es gratis ese plugin :(
![]()Holaa alguien me explica como busco la plantilla por defecto con la version de wordpress 6.6.1 , para que asi me para aparezca la Pagina Institucional para definir una nueva plantilla !!
Son estas clases las que te abren los ojos, Increible :)

SI NO LES SALES EN EDITAR REVISEN QUICK EDIT O EDICION RAPIDA EN TEMPLATE DEBERIAN ACTUALIZAR EL CODIGO

ACF! El mejor plugin de WordPress!!!