Comenzando nuestro theme
Presentación del curso
Instalando WordPress de forma local
Estructura de Theme de WordPress
Armar estructura del Theme
Armando los archivos de nuestro Theme
Hooks
Agregando de funcionalidades de WordPress a nuestro theme
Asignando theme supports
Registrar y mostrar menúes
Registrando sidebars para nuestros Widgets
Personalizar el Loop de WordPress
Creando un Custom Post Type
Listando nuestros productos
Refactorizando nuestro código
Cierre del curso
Cierre del curso
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 10
Preguntas 4
Excelente!
No soy experto en php pero es muy enredado que se abran y se cierren el llamado en cada línea de la siguiente manera:
<?php if(have_posts()){ ?>
<?php while(have_posts()){ the_post(); ?>
<?php the_content(); ?>
<?php } ?>
<?php } ?>
Experimentando con el source perfectamente se puede escribir de la siguiente manera:
<?php
if(have_posts()){
while(have_posts()){ the_post();
the_content();
}
} ?>
Configuración del idoma y charset sea igual a la configuración en wordpress.
language_attributes();
bioginfo(“charset”);
wp_body_open();
Agrega un hook llamado body_open. Nos permite agregar contenido en el body.
Homepage link.
href = “<?php echo home_url(); ?>”
Ejecutar el contenido del posts.
index.php
if (have_posts()){
while(have_posts()){
the_post();
the_content();
}
}
Muy enrredado abrir y cerrar llaves adjunto mi codigo.
<?php if (have_posts()) : ?>
<?php while (have_posts()) : ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
Para que al hacer click en el logo vaya al home hay que colocarla la funcion home_url en a que esta en encabezado__logo, no en el de encabezado hamburguesa.
<body>
<?php wp_body_open( ); ?>
<header class="encabezado">
<div class="container-fluid gx-5 py-3">
<div class="row">
<div class="encabezado__hamburguesa col-2">
<a href="#">
<img src="<?php echo get_template_directory_uri();?>/assets/img/icon-menu.svg" alt="menu icon">
</a>
</div>
<div class="enbezado__logo col-5 col-md-2 px-2 px-md-4">
<a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri();?>/assets/img/logo.svg" width="100%" alt="Yard Sales">
</a>
</div>
<div class="encabezado__menu col-6 col-md-5">
Quisiera saber cómo crear y usar metabox que yo mismo vaya creando en wordpress. Un temario de eso estaría excelente!
Para agregar un fragmento de código al inicio de la ejecución como Hotjar o Analytics se puede enganchar justo después de la etiqueta body:
<body>
<?php wp_body_open(); ?>
y en functions.php
function plz_analytics(){
?>
<h1> ANALYTICS </h1>
<?php
}
add_action("wp_body_open","plz_analytics");
Es importante también la establecer configuración del lenguaje y caracteres del tema que se agregan mediante funciones preestablecidas de WordPress.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo("charset"); ?>">
Enlace: https://vegibit.com/the-top-100-most-commonly-used-wordpress-functions/
Wordpress tiene una función que retorna la homepage, útil para la imagen del encabezado
<a href="<?= home_url() ?>">
Para agregar el contenido de una página de inicio (creada a partir de bloques gutenberg) a nuestro tema se utiliza:
<?php
if(have_posts()){
while(have_posts()){ the_post();
the_content();
}
}?>
Clase 6: Agregando funcionalidades de WordPress a nuestro theme
En esta clase aprenderemos a modificar cosas escritas en código que son estáticas pero que con funciones de wordpress podemos hacer que sean automáticas.
Etiqueta lang
En primer lugar tenemos a la etiqueta de lenguaje de la página, lo que haremos es quitar el lenguaje y agregar una función de wordpress llamada language_attributes() de esta manera podremos tener el lenguaje de nuestra página según el lenguaje configurado en nuestro wp, es decir, si en nuestro wordpress el idioma esta configurado al español entonces nuestra página también lo estará, pero si en algún momento decidimos cambiarlo, este se cambiara en automático en la página.
Etiqueta charset
Otra funcionalidad que agregaremos es el Encoder, ocurre lo mismo que con el lenguaje y el nombre de su función es bloginfo(‘charset’).
**
Hook wp_body_open
Tenemos una función llamada wp_body_open() la cual es colocada justo después de la etiqueta que abre el body. Esta función nos sirve para agregar algo al body cuando se abra, esto por medio de nuestro archivo de functions.
En esta clase lo que hicimos fue crear una función llamada analitics y agregamos un h1, después de ello agregamos la función a un action con el hook utilizado el cual es wp_body_open.
Función para ir al home
Wp tiene una función llamada home_url() para que nos devuelva la ruta del home de la página la cual en este caso la utilizamos en el href del logo de la página para que nos devuelva al home (es importante agregar echo antes de la función para que imprima la ruta y funcione).
Configurando el admin de WP para establecer una página de inicio
Lo primero que debemos hacer es crear una página desde el administrador de wp y darle a publish, luego accedemos en settings>reading>homepage y establecemos la página que acabamos de crear para nuestro inicio.
Para poder ver cambios debemos agregar una función en nuestro index al inicio, esta función es have_posts() y lo que hace es que nos permite saber en que página nos encontramos y dependiendo de la página nos dice si tiene posts o no, entonces lo que hacemos es que la metemos en un if, dentro del cual crearemos un while donde pondremos esta misma función dentro para que siempre que haya un post este mostrándolo, para que lo muestre lo que tenemos que agregar en el while es otra función llamada the_post(), y por útlimo también dentro del while agregamos otra función llamada the_content que lo que hace es poner todo el otro contenido de la página además del post, de esta manera lo que hacemos es decirle si en esta página hay posts entonces mientras estén ahí muéstralos y si ya no están deja de mostrarlos. En código quedaría algo así:
<?php
if(have_posts()) {
while(have_posts()) {
the_post();
the_content();
}
}
?>
También se puede omitir la sentencia condicional ya que no se entrara en el bucle si have_posts() retorna false dentro de la condición del bucle desde la primera vez que se llama a dicha función.
<?php
while(have_posts()) {
the_post();
the_content();
}
?>
En esta clase aprendimos a usar funcionas propias de WordPress para seguir personalizando nuestro tema, comparto código de la clase:
index.php
<?php get_header() ?>
<?php if(have_posts()){ ?>
<?php while(have_posts()){ the_post();?>
<?php the_content();?>
<?php }?>
<?php }?>
<div class="productos__container">
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a class="producto__link" href="#">
<h4 class="productos__titulo">Retro refrigerato</h4>
</a>
</div>
</div>
</div>
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_2.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a class="producto__link" href="#">
<h4 class="productos__titulo">Retro refrigerato</h4>
</a>
</div>
</div>
</div>
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a class="producto__link" href="#">
<h4 class="productos__titulo">Round Shelf</h4>
</a>
</div>
</div>
</div>
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_2.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a href="">
<h4 class="productos__titulo">Retro refrigerato</h4>
</a>
</div>
</div>
</div>
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a class="producto__link" href="#">
<h4 class="productos__titulo">Retro refrigerato</h4>
</a>
</div>
</div>
</div>
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_2.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a href="">
<h4 class="productos__titulo">Retro refrigerato</h4>
</a>
</div>
</div>
</div>
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a class="producto__link" href="#">
<h4 class="productos__titulo">Retro refrigerato</h4>
</a>
</div>
</div>
</div>
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_2.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a href="">
<h4 class="productos__titulo">Retro refrigerato</h4>
</a>
</div>
</div>
</div>
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a class="producto__link" href="#">
<h4 class="productos__titulo">Retro refrigerato</h4>
</a>
</div>
</div>
</div>
<div class="productos__card">
<figure>
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_2.png" alt="producto 1">
</figure>
<div class="producto__caption">
<div class="productos__desc">
<a href="">
<h4 class="productos__titulo">Retro refrigerato</h4>
</a>
</div>
</div>
</div>
</div>
<?php get_footer() ?>
.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.