Armando los archivos de nuestro Theme

Clase 4 de 13 • Curso de Creación de Temas para WordPress

Juan Martinez

student•

existe una version abreviada echo

<?= get_template_directory_uri() ?>

Sebastián López Gallego

student•

oh que genial!!!

José Fabián Beltrán Meza

student•

Excelente aporte amigo. Te complemento un poco. Esto que nombras es la apertura de PHP abreviada pero solo esta disponible si activas short_open_tag en el fichero php.ini.

Te dejo el enlace a la documentación: https://www.php.net/manual/es/language.basic-syntax.phptags.php

Alvaro H. Ruiz V.

student•

no estudies PHP, decian... nada se hace con PHP, decian... ja! ^^! nota: con entender como se inserta php en una estructura HTML <?php /*codigoPHP*/ ?> y entender que muchas funciones utilizadas son propias de wordpress podes seguir este curso, no desanimes! igual pásate por un curso básico de PHP.

Mauricio Enrique Fernandez Lopez

student•

muchas personas subestiman a PHP

Jacob Gomez

student•

Los aue odian php son los que recien empiezan con pyhton. Porque su sintaxis es amigable. Cada lenguaje tiene su proposito y depende del programador que pueda hacer con ello. Si tienen duda en git hub esta un repositorio de un clon de spotify creado con php usando Laravel comop framework. Me lo he descargado y personalizado y corre bastante bien en cualquier servidor local.

Jesús Velázquez Jiménez

student•

Crear header.php y footer.php. Funciones que llaman al header y al footer. <?php get_header() ?> /* body-content */ <?php get_footer() ?> Obtener la ruta de nuestro directorio. "<?php echo get_template_directory_uri();?>/assets"

Ayoze Rodríguez Abreu

student•

Este tipo de videos son los que estropean el curso.

Si vas a hacer un video recolocando el código, lo ideal es tenerlo exactamente igual para seguir la clase, si no directamente puede explicar que es lo que hay en el código, por que todos esos pasos son innecesarios para el que lo ve.

Francisco Ezequiel Ferreyra

student•

Subieron directamente el PHP no el HTML. AHorraron 1 paso ejej

Frank GP

student•

estos archivos son para comparar, y ver en que nos hemos equivocado, siempre me pasa jeje

Jose Marchant

student•

el profesor es muy didactico para explicar, pero cae en los mismos problemas de todos los que somos informaticos, cree que todos saben y se salta pasos, pienso que si es un curso basico, es por que es basico y debe pensar que nadie sabe nada, aunque muchos ya sepamos como programar y hayamos estudiado. pero hay que pensar en los no tienen idea de nada, es mi opinion.

cristian david palomino porras

student•

les dejo un link con un monton de plantillas para que praciquen https://github.com/website-templates/webstudio_responsive-template

Jose Marchant

student•

les dejo el nombre de la extension para manejar diferentes proyectos con vscode Peacock https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Diana Carolina Torres Castaño

student•

Increible, he manejado Wordpress para realizar mas de 120 webs, y nunca hubiera imaginado que asi se hacia un theme, genial. 💚

Alvaro H. Ruiz V.

student•

Estoy encantado que permitan descargar los recursos, con la actualización de cada clase, me permite tomar apuntes, comentar códigos viejos y actualizados, centrarme en la lógica y estar seguro de la sintaxis! Son los mejores <3 gracias por pensar en ello.

Rodrigo Alles

student•

Armando los archivos de nuestro Theme: Segmentar el código

Al crear un tema personalizado de WordPress, es importante segmentar el código para mantenerlo organizado y fácil de mantener. Esto también ayuda a reutilizar el código en diferentes partes del tema.

Segmentar el código del tema

Para segmentar el código del tema, se pueden utilizar los siguientes métodos:

Crear archivos de plantilla separados para diferentes secciones del sitio web, como el encabezado, el pie de página, la barra lateral, etc.
Utilizar la función get_template_part() para llamar a los archivos de plantilla desde otros archivos.
Separar el código HTML del código PHP para hacer el código más legible y fácil de mantener.

Funciones principales para llamar el header.php y footer.php desde el index.php

Para llamar al archivo header.php en el index.php, se utiliza la función get_header(). Esta función busca el archivo header.php en la carpeta del tema y lo carga en la página.

<?php get_header(); ?>

Para llamar al archivo footer.php en el index.php, se utiliza la función get_footer(). Esta función busca el archivo footer.php en la carpeta del tema y lo carga en la página.

<?php get_footer(); ?>

Es importante tener en cuenta que estas funciones solo llaman a los archivos header.php y footer.php, y no a otros archivos de plantilla que se hayan creado para diferentes secciones del sitio web. Para llamar a estos archivos, se utiliza la función get_template_part().

Ejemplo de segmentación de código en el tema

A continuación, se muestra un ejemplo de cómo se puede segmentar el código en un tema personalizado de WordPress.

header.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title(); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
  <div class="logo"><?php bloginfo( 'name' ); ?></div>
  <?php if ( has_nav_menu( 'primary' ) ) : ?>
    <nav class="nav-menu">
      <?php
        wp_nav_menu( array(
          'theme_location' => 'primary',
        ) );
      ?>
    </nav>
  <?php endif; ?>
</header>

footer.php

<footer>
  <div class="contact-info">
    <h4>Contacto</h4>
    <p>Teléfono: 123-456-7890</p>
    <p>Correo electrónico: info@sitio.com</p>
  </div>
  <div class="social-links">
    <h4>Síguenos en las redes sociales</h4>
    <ul>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

index.php

<?php get_header(); ?>

<main>
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <article>
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
      </article>
    <?php endwhile; ?>
  <?php else : ?>
    <p><?php esc_html_e( 'Lo siento, no hay publicaciones que coincidan con su búsqueda.' ); ?></p>
  <?php endif; ?>
</main>

<?php get_footer(); ?>

En este ejemplo, el código se ha segmentado en tres archivos diferentes: header.php, footer.php e index.php. El archivo header.php contiene la cabecera del sitio web, el archivo footer.php contiene el pie de página y el archivo index.php contiene el contenido principal del sitio web.

Además, se ha utilizado la función get_template_part() para llamar a otros archivos de plantilla, como el archivo content.php que se utiliza para mostrar el contenido de las publicaciones. También se ha utilizado la función wp_head() en header.php y wp_footer() en footer.php para cargar los scripts y estilos necesarios para el tema.

Añadir archivos css o Assets

get_template_directory_uri() es una función de WordPress que devuelve la URL del directorio del tema activo. Esto es útil para enlazar archivos CSS, JavaScript, imágenes u otros recursos que se encuentran en el directorio del tema.

La función get_template_directory_uri() devuelve una cadena que representa la URL del directorio del tema activo. Por ejemplo:

echo get_template_directory_uri();

Esto devolverá la URL del directorio del tema activo, por ejemplo:

http://example.com/wp-content/themes/my-theme

La función get_template_directory_uri() se utiliza comúnmente para enlazar archivos CSS y JavaScript en el encabezado o pie de página del sitio web. Por ejemplo, para enlazar un archivo CSS llamado style.css que se encuentra en el directorio del tema, se puede utilizar el siguiente código:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

Esto generará una etiqueta link con el atributo href que apunta al archivo style.css en el directorio del tema activo.

En resumen, get_template_directory_uri() es una función útil que devuelve la URL del directorio del tema activo, lo que facilita la inclusión de archivos CSS, JavaScript, imágenes y otros recursos en el tema de WordPress.

Añadir directorio de assets

Para añadir un directorio de assets (como imágenes, archivos CSS o JavaScript) en WordPress utilizando la función get_template_directory_uri(), se puede seguir los siguientes pasos:

Crear una carpeta en el directorio del tema para los assets. Por ejemplo, se puede crear una carpeta llamada assets en el directorio del tema.
Colocar los archivos de assets en la carpeta recién creada. Por ejemplo, se pueden colocar archivos CSS en una subcarpeta llamada css y archivos JavaScript en una subcarpeta llamada js.
Utilizar la función get_template_directory_uri() para obtener la URL del directorio del tema activo y concatenarla con la ruta relativa del archivo de asset deseado. Por ejemplo, para enlazar un archivo CSS llamado style.css que se encuentra en la subcarpeta css de la carpeta de assets, se puede utilizar el siguiente código:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css">

Repetir el paso 3 para cada archivo de asset que se desee enlazar en el tema.

Es importante tener en cuenta que, si se utiliza un tema hijo (child theme) en lugar de un tema padre (parent theme), se debe utilizar la función get_stylesheet_directory_uri() en lugar de get_template_directory_uri(). Esto se debe a que get_template_directory_uri() devuelve la URL del directorio del tema padre, mientras que get_stylesheet_directory_uri() devuelve la URL del directorio del tema hijo activo.

En resumen, para añadir un directorio de assets en WordPress utilizando la función get_template_directory_uri(), se debe crear una carpeta para los assets en el directorio del tema, colocar los archivos de assets en ella, y utilizar la función get_template_directory_uri() para obtener la URL del directorio del tema y enlazar los archivos de assets en el tema.

En la clase se comenta que de no ver imágenes debemos usar echo antes de get_template_directory_uri().


`get_template_directory_uri()`. 

 echo `get_template_directory_uri()`;?>

Henry Jeffersson Salinas Arenas

student•

horrible, no se nota desde donde copia, horrible

Luis Gabriel Barrios Cuahuey

student•

Yo pence lo mismo. Pero no te preocupes.

Aldo Miguel Ortiz Parodi

student•

4. Armando los archivos de nuestro Theme

Cabe destacar que este sitio no solo está hecho con HTML y CSS sino con Bootstrap, y les sugiero mucho que lean sobre ello, es una librería de las más usadas por su practicidad y lo liviano que es:

Actualmente está en su versión 5.1.3.

En este clase usamos las siguientes funciones de WordPress dentro del archivo index.php que estaba en la carpeta de nuestro tema creado:

//Sirve para obtener lo que contenga el archivo header.php
<?php get_header() ?>

//Sirve para obtener lo que contenga el archivo footer.php
<?php get_footer() ?>

//Sirve para hacer referencia al lugar donde estamos parados
<?php echo get_template_directory_uri();?>/

//Esto se coloca antes de la ruta a utilizar:
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">

Recomienda no usarla para la ruta de la hoja de estilos, porque existe una mejor manera en WordPress, pero todavía no dice cuál es, esperemos verla pronto.

Y estoy súper emocionado porque veo que ya va tomando forma y estoy entendiendo mejor cómo funciona, aunque lo que me apena un poco es que no conozco Bootstrap, y por el momento solo hay curso de Bootstrap 4 (debería haber uno de Bootstrap 5, profe si ve este comentario sugiéralo por favor).

Jose Marchant

student•

Como estas aldo, ante que nada, espero que te encuentres bien. mira antes de usar framework como Bootstrap, te recomiendo aprender css, ve busca en youtube cursos de css o css3, y de esa manera comprenderas los que son las hojas de estilo, y ahi saltar a bootstrap, antes no te lo aconsejo. https://youtu.be/WfDqFArJnYA

Percy Flores

student•

Estoy sufriendo con este curso. Voy a regresar a los cursos báscos para aprender poco a poco. Nada que youtube , google y libros no puedan solucionar. :)

Aldis Uriel Leal Gonzalez

student•

Quizas estas dificultades que tuve y como solucionarlas les pueda guiar: -Los html estan en los recursos de la 1ra clase. -El profe esta trabajando en 2 ventanas de visual studio en una con los archivos html y la otra con el tema de yardsale creando los archivos php. (Que no tiene nada que ver con platzicommerce creado al inicio) -para la previsualización del sitio web: hay que activar el tema yardsales desde WP Admin de local Sites. -en la previsualizacion no sale el logo de YARDSale debido a que en la linea de codigo correspondiente esta escrito como logo.png y solo deben cambiarle por logo.svg

Miguel Angel Reyes Malvehy

student•

La extensión de Visual Studio Code que menciona el profesor se llama Peacock Que sirve para tener diferentes colores de Visual Studio Code para cada Workspace

Angel García

student•

el tema de colores para resaltar el código tambien está muy bueno. Sabes como se llama?

Julián Andrés Loaiza Ospina

student•

Composición de un Tema

Se pueden separar los archivos php en carpetas o en la raiz y llamarlos dentro del archivo principal index.php. (tener en cuenta la jerarquía de los tags y sintaxis.

scss: Syntactically Awesome Stylesheets » (definido como CSS con superpoderes).
index.php

<?php get_header() ?>
/* codigo php (html)*/
<?php get_footer() ?>

Obtener directorio

Para llamar a una imagen, video o multimedia dentro del directorio se debe tener en cuenta que para obtener el directorio raíz del tema es (php echo o = para traer el valor):

get_template_directory_uri()
/* por ejemplo para elegir una imagen dentro de assets */
<img src="<?= get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">

Usuario anónimo

user•

¿Cómo se llama la extensión para cambiar los colores de cada ventana?

Cristian Ramanzin

teacher•

¡Hola, Ángel! Se llama Peacock. Te dejo el link al market de VSC https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Sthefy Alegre

student•

no encuentro index.html falta agregar para descargaar???

Julia Gabriela Nieva Paredes

student•

¡Hola! No puedo aplicar el tema que estamos creando al sitio de YardSales, pues el WordPress local dice: "This theme doesn’t work with your version of PHP". ¿Qué debo hacer?

David Jeremias Vásquez Hernández

student•

Si generaste tu sitio con el software de localwp solo debes cambiar las configuración que realizamos la clase pasada en el archivo .css el la parte que dice Requieres PHP escribe 7.3.5 o la versión de php que estés usando.

Madelein Espinosa Ramírez

student•

A mí me pasó lo mismo, lo que hice fue abrir localwp, seleccioné el nombre del tema y donde dice PHP version, coloqué 8.0 y listo!

<!DOCTYPE html>
<html>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title(); ?></title>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
  <div class="logo"><?php bloginfo( 'name' ); ?></div>
  <?php if ( has_nav_menu( 'primary' ) ) : ?>
    <nav class="nav-menu">
      <?php
        wp_nav_menu( array(
          'theme_location' => 'primary',
        ) );
      ?>
    </nav>
  <?php endif; ?>
</header>

<footer>
  <div class="contact-info">
    <h4>Contacto</h4>
    <p>Teléfono: 123-456-7890</p>
    <p>Correo electrónico: info@sitio.com</p>
  </div>
  <div class="social-links">
    <h4>Síguenos en las redes sociales</h4>
    <ul>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
      <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

<?php get_header(); ?>

<main>
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <article>
        <h3><?php the_title(); ?></h3>
        <?php the_content(); ?>
      </article>
    <?php endwhile; ?>
  <?php else : ?>
    <p><?php esc_html_e( 'Lo siento, no hay publicaciones que coincidan con su búsqueda.' ); ?></p>
  <?php endif; ?>
</main>

<?php get_footer(); ?>

//Sirve para obtener lo que contenga el archivo header.php
<?php get_header() ?>

//Sirve para obtener lo que contenga el archivo footer.php
<?php get_footer() ?>

//Sirve para hacer referencia al lugar donde estamos parados
<?php echo get_template_directory_uri();?>/

//Esto se coloca antes de la ruta a utilizar:
<img src="<?php echo get_template_directory_uri();?>/assets/img/prod_1.png" alt="producto 1">

Armando los archivos de nuestro Theme

Comenzando nuestro theme

Conversión de Plantillas HTML a Temas de WordPress

Instalación de LocalWP en Windows para WordPress

Creación de un Tema de WordPress desde Cero

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