Crea tu primer complemento de Wordpress

1. Introducción (1): Hola chicos. Bienvenido a este tutorial. Mi nombre es Raimundo y voy a ser tu instructor en este tutorial Bueno, he sido desarrollador web en los últimos diez años. Y bueno, en los últimos diez años, he estado trabajando con diferentes tecnologías como JavaScript, HTML, CSS, React JS, no JS, y también Wordpress, por ejemplo. Tengo mucha experiencia en desarrollo web. Uno de mis temas favoritos es obviamente el desarrollo de WordPress. Bueno, en este tutorial, vas a crear tu primer plugin de wordpress. Vamos a cubrir varios temas, todos ellos muy interesantes. Por ejemplo, vas a entender cómo configurar un plugin básico de wordpress. Vas a ver cómo usar tipos de pose personalizados. Vas a entender para qué utilizan los tipos de pose personalizados. Vas a crear o configurar la interfaz de usuario para que puedas ingresar o introducir datos en la base de datos de Wpress Vas a poder entender cómo agregar dependencias o frameworks a la conexión de Wpress Vas a ver cómo crear una plantilla, una plantilla de Wordpress o plantilla HTML para que puedas mostrar datos al navegador web. Y también vas a entender otras cosas. Como puedes ver, este tutorial cubre una variedad de temas muy interesantes. Entonces te sugiero que tomes este tutorial porque es un tutorial muy, muy interesante y la duración de este tutorial es de solo 1.5 horas. Esencialmente, vas a cubrir todos estos temas en unos minutos. Bueno, espero que se inscriban en este tutorial. Y nos vemos muy pronto. Adiós. 2. Lección 1 - Creación de la carpeta raíz del proyecto: Bien, chicos, gracias por ver este video. Bueno, en esta lección, te voy a mostrar cómo crear la carpeta raíz de tu proyecto. En otras palabras, voy a crear la carpeta raíz para el plugin de WordPress. El primer paso que tengo que dar es dirigirme a la terminal, y luego tengo que navegar a la carpeta de instalación de WordPress. Voy a usar el comando City y después tengo que especificar el pad a la carpeta que contiene los archivos de instalación de WordPress. Entonces tengo que navegar por el plugin a la carpeta plugins. Y luego voy a crear voy a crear nuevo voy a crear una nueva carpeta o la carpeta raíz del proyecto. Entonces tengo que usar el comando para hacer querida y luego el nombre de la carpeta raíz va a ser el complemento Cars. Y luego tengo que moverme dentro de la carpeta recién creada. Así, tengo que ciudad y después tengo que especificar el nombre de la carpeta raíz. Y luego tengo que crear un nuevo archivo. Este archivo va a ser el archivo principal del plugin. Y el archivo principal del plugin tiene un nombre, y el nombre debe ser igual al nombre de la carpeta raíz. Así que voy a escribir Touch y luego autos plugin punto PHP. Este archivo es el archivo principal del plugin o el punto de entrada del plugin. Entonces como puedes ver, se ha creado el archivo principal del plugin. Y bueno, eso es todo para esta lección. Ahora ya sabes cómo crear la carpeta raíz del proyecto, así como el punto de entrada para el código fuente o el punto de entrada para el plugin de WordPress. Eso es todo para esta lección y nos vemos en la siguiente lección. 3. Lección 2 - Crear el comentario de encabezado: Hola chicos. Bienvenido a otra lección de este tutorial. Bueno, en esta lección, voy a crear el comentario de encabezado del plugin. El comentario de encabezado para el plugin es un comentario donde tengo que proporcionar metadatos sobre el plugin. Y este comentario es necesario porque este es el comentario que indica a WordPress que el programa actual es un plugin. ¿Bien? Entonces, para crear el comentario de encabezado del plugin, recuerda que el comentario de Bhador es el lugar donde vamos a proporcionar metadatos sobre el plugin ¿Bien? Bien, entonces ahora tengo que dirigirme al punto de entrada del plugin. En otras palabras, tengo que abrir el plugin cars dot archivo PHB Recuerda que este archivo fue creado anteriormente, y ahora mismo estoy dentro del plugin cars dot PHB file Entonces voy a ingresar al comentario de Bhador, como dije, primero, tengo que agregar una nueva sección de comentarios en la parte superior del archivo, y después tengo que escribir un nombre de plugin Y en este caso, el nombre del plugin va a ser el plugin cars. Tengo que proporcionar una descripción. Tengo que proporcionar una descripción para este plugin. Esta descripción aparece en la pantalla del enchufe. Entonces la descripción va a ser este plugin muestra datos sobre autos con disposición especial. Y luego tengo que especificar, tengo que proporcionar el exterior de este plugin. En este caso, voy a poner mi nombre como valor para el campo al aire libre. Y luego bueno, bueno, esto es todo lo que necesitas para crear un comentario de encabezado para el plug in. También tienes otros campos disponibles, pero esos campos se describen en la documentación de Wordpress. Pero en general, en general, si quieres crear un comentario de encabezado, entonces estos son los campos que necesitas proporcionar para que el comentario de encabezado esté en funcionamiento. ¿Bien? Entonces estos son los campos mínimos o los datos mínimos que tienes que proporcionar para crear un comentario de encabezado. Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 4. Lección 3 - Activar un complemento: Hola, chicos. Bienvenido a otra lección de este tutorial. Bueno, en este tutorial, en esta lección, lo siento, voy a activar el plugin que estamos creando. Bueno, para activar el plugin, tengo que dirigirme al panel de WordPress. Como puedes ver ahora mismo, estoy dentro del panel de WordPress. Ahora tengo que dirigirme a la pantalla de plugins. Como puedes ver, esta es la pantalla del plugin, y tengo que buscar el plugin con el que estoy trabajando. ¿Bien? Entonces como puedes ver, aquí aparece el plugin de autos que aparece en la pantalla. Y como puedes ver, este es el plugin que acabamos de crear. Como puedes ver, aquí aparece una descripción del plugin que dice, estos plugin muestran datos sobre autos con disposición especial. Entonces para activar este plugin, tengo que presionar el enlace activar o tengo que presionar el enlace activar. Entonces presiono el enlace activar. Y como puedes ver, se carga la página y aparece un mensaje de confirmación en la parte superior, en la parte superior de la pantalla que dice, enchufar activado. Y bueno, eso es todo para esta lección. Ahora ya sabes cómo ahora sabes cómo activar un plugin. 5. Lección 4 - Añadir un nuevo archivo al proyecto: Hola, chicos. Bienvenido a otra lección de este tutorial. Bueno, en esta lección, voy a crear un nuevo subdirectorio, así como un nuevo archivo PHP para el proyecto. Tengo que dirigirme a la carpeta raíz del proyecto. Y como acabo de decir, voy a crear un nuevo subdirectorio El nombre del nuevo subdirectorio va a ser back end y luego dentro del subdirectorio recién creado, voy a agregar un nuevo archivo PHP El nombre del nuevo archivo PHP va a ser autos post tipo dot PHB Ese va a ser el nombre, el nombre del nuevo archivo PHP. Bueno bien y luego voy a incluir el archivo PHP recién creado en el proyecto. Entonces voy a llamar a las funciones requeridas, y luego voy a usar el constante complemento de WordPress querido. Esta constante contiene la ruta a la carpeta plugins. Y luego voy a especificar el pad al archivo PHP recién creado. Tengo que escribir el nombre de la carpeta raíz. En este caso, el nombre de la carpeta raíz es automóviles tapando Entonces tengo que especificar el nombre del subdirectorio. En este caso, es back end. Y luego tengo que especificar el nombre del archivo PHP. En este caso, los autos tipo poste. PHP de punto. Bueno, como pueden ver, acabo agregar un nuevo archivo PHP al proyecto, y luego incluí el contenido del archivo en el proyecto. ¿Bien? Entonces agrego creé un nuevo archivo PHP, y luego incluyo el contenido del nuevo archivo PHP en el proyecto llamando a la función requerida una vez. Y bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 6. Lección 5: gancho de acción de inicio: Hola, chicos. Bienvenido a otra lección de este tutorial. Bueno, en esta lección, estoy dentro de los autos postype dot archivo PhB Bueno, esencialmente, vamos a agregar este código SNIP al archivo Entonces como puedes ver, voy a agregar este código SNIP y como te presento el código, te voy a explicar lo que está haciendo el código ¿Bien? Entonces primero, hay que entrar. Tienes que llamar a la función ad action. La función add action se llama para implementar hooks, y los hooks se utilizan para ejecutar un código específico para momentos específicos o ubicaciones específicas del sitio. El gancho de acción publicitaria se llama para ejecutar o ejecutar un código específico en momentos específicos. Esta función requiere de dos parámetros. El primer parámetro es el nombre del gancho. En este caso, voy a usar el gancho de acción init. El gancho de acción de inicio me permite ejecutar código cuando la página web se está cargando ¿Bien? Entonces el gancho de acción init es útil para ejecutar código cuando la página web se está cargando, ¿ok? Entonces el segundo parámetro es el nombre de la función. Que queremos correr. En este caso, el nombre de la función debe ser prefijo para evitar colisiones con otras funciones Entonces en este caso, el nombre de la función va a ser registrar autos tipo host. Y luego tengo que declarar la función. Entonces tecleo el nombre de la función, registrar autos posan tipo. Y bueno, esta es la función que va a correr. Esta es la función que se va a ejecutar para el gancho de acción imit En otras palabras, esta función se ejecutará cada vez que se cargue una página web. Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 7. Lección 6 - Registra un tipo de publicación personalizada: Hola, chicos. Bienvenido a otra lección de este tutorial. Bueno, en esta lección, quiero analizar el código SNIP que aparece en la pantalla ahora mismo Bueno, te voy a explicar este código SNIP ya que vuelvo a introducir el código Entonces voy a hablar contigo. Quiero hablarte sobre los tipos de pose personalizados. Primero, tengo que hablarte sobre los tipos de pose personalizados. Y bueno, tengo que decir que los tipos de post personalizados son los medios que proporciona Wordpress para que puedas guardar información en la base de datos con un formato específico. ¿Bien? Entonces, si quieres guardar información en la base de datos con un formato específico, entonces tienes que crear un nuevo tipo de post personalizado. Por defecto, Wordpress proporciona tres tipos de pose diferentes. Uno es el archivo adjunto para los archivos de imagen o imágenes o incluso videos. Otro tipo de pose son las páginas para las páginas web del sitio. Y por último, otro tipo de pose por defecto es post, que se utiliza para guardar los diferentes pósters en la base de datos. Entonces Wordpress proporciona tres tipos de Post predeterminados. Pero Wordpress también permite a los desarrolladores crear tipos de Custom Post para que los desarrolladores puedan guardar datos personalizados en la base de datos. En otras palabras, Wordpress permite a los desarrolladores guardar datos en la base de datos con un formato específico. En este caso, vamos a utilizar un tipo de publicación personalizado para guardar datos relativos a los autos. ¿Bien? Porque este plugin es para guardar para guardar datos relacionados con los autos en la base de datos. Entonces voy a crear para poder crear mi tipo de post personalizado, tengo que llamar a la función registrar post type. Esta función requiere dos parámetros. El primer parámetro es el nombre del tipo de pose personalizada. En este caso, el nombre del tipo de pose personalizada es mis autos. Mis autos. Y después tengo que especificar un segundo parámetro. El segundo parámetro es una matriz de argumentos o ajustes. Entonces en este caso, la matriz de ajustes está representada por los arcos variables, encima de la llamada de función de tipo pose de registro, voy a declarar los arcos variables y voy a establecer esta variable en una matriz vacía ¿Bien? Entonces como pueden ver, estoy llamando a la función de tipo pose de registro. Para crear un nuevo tipo de pose personalizado llamado Mis autos. Este tipo de correo personalizado de aduanas se utilizará para guardar los datos de Autos en la base de datos. Y luego la variable del ARC contiene una matriz vacía. Esta matriz contendrá todos los ajustes para el tipo de pose personalizado. Y bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 8. Lección 7: configurar etiquetas de la UI: Chicos, gracias por ver este video. En este video, voy a cubrir cómo configurar las etiquetas para la interfaz de usuario. Y bueno, cuando se crea un tipo de pose personalizado, entonces Wordpress genera una interfaz de usuario correspondiente. La interfaz de usuario es utilizada por el usuario para introducir información, y luego la información se guarda en la base de datos. Entonces, esencialmente, una interfaz de usuario se compone de diferentes elementos como Botones, campos de texto lista desplegable y cadenas de textos que se conocen como etiquetas. Entonces en este video, voy a cubrir cómo configurar las etiquetas, ¿bien? Entonces, si me desplazo hacia arriba, puedes ver que aquí tengo un código de muestra que demuestra cómo configurar las etiquetas. Entonces, esencialmente, tengo que declarar una constante, y luego la constante, lo siento, tengo que declarar una variable, y la variable debe incluir debe establecerse en una matriz, ¿de acuerdo? Entonces voy a declarar las etiquetas variables. Y voy a establecer esta variable en una matriz vacía. Entonces dentro de esta matriz, tengo que colocar las diferentes etiquetas. Por ejemplo, Wordpress requiere una etiqueta llamada name. Y el nombre de la etiqueta contiene la versión plural de la información. El nombre de la etiqueta contiene la versión plural del nombre de la información que se guardará en la base de datos. La versión plural de la información que se guardará en la base de datos. En este caso, la versión plural de la información serán autos, ¿bien? Entonces tengo que usar la etiqueta singular subrayado nombre. Nombre de subrayado singular. Esta variable se utiliza para indicar la versión singular de la información que se guardará en la base de datos. En este caso, la versión singular será auto. Entonces tengo que usar el nombre del menú de la etiqueta. Nombre del menú es el nombre del menú es la etiqueta que se utilizará en el elemento de menú para este tipo de publicación personalizada. En otras palabras, en el menú se utilizará la etiqueta del nombre del menú para mostrar el texto del elemento de menú correspondiente a la interfaz de usuario para este tipo de pose personalizada. Por lo que la etiqueta del nombre del menú será igual a los autos, también. Bueno, Wordpress proporciona más etiquetas, muchas etiquetas. Pero en este caso, solo quiero implementar tres de ellos, pero hay más etiquetas disponibles. Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 9. Lección 8: ajustes de la UI: Hola, chicos. Gracias por ver este video. Bueno, en esta lección, voy a cubrir cómo configurar el registro, cómo configurar un nuevo tipo de pos personalizado. Recuerda que para configurar un nuevo tipo de pose personalizado, tienes que llamar a la función registrar post type. El tipo de publicación de registro de función requiere varios parámetros o ajustes, y esos ajustes deben ubicarse dentro de la variable de arcos Entonces aquí tengo un código de muestra, y este código de muestra contiene todos los ajustes para la variable de arcos Como puede ver, los ajustes se encuentran dentro de una matriz. Entonces voy a explicarte los ajustes a medida que introduzco estos ajustes, ¿de acuerdo? Entonces el primer ajuste serán las etiquetas. Recuerda que en la lección anterior, creé las etiquetas, y esas etiquetas se guardan en la variable labels. Entonces tengo que usar esta configuración pública, y voy a establecer esta opción en true. Y quiero que esta opción se establezca en true porque la información de los autos estará disponible para todos los que visiten el sitio web. Esa es la razón por la que puse la opción pública en verdadera. Entonces tengo el set en un Archiv set a true también. Entonces tecleo en un Archiv. Y voy a establecer esta opción en true. La opción Archivo H se utiliza para generar una página web donde se mostrarán todos los autos como listado. Entonces la opción H Archiv establecida en true se utiliza para generar una página web donde el usuario pueda acceder a todos los autos disponibles, como un listado, como un listado de autos, ¿ok? Entonces tengo la opción show in rest set to falls show in rest set to falls, show in rest set to fails, okay? Y bueno, es importante mencionar que Wordpress proporciona API rSt En otras palabras, podemos consumir la formación del sitio mediante el uso de una API rSt Si configuro la opción, mostrar en reposo a caídas, eso significa que la información de los autos no estará disponible. No estará disponible en el resto API. En otras palabras, no podremos consumir la información de los autos usando la API REST. ¿Bien? Por lo que esta opción deshabilita la API RST para la información de los autos Y después tengo que usar el icono de menú de configuración, icono de menú. Icono de menú. Voy a configurar esta información a los íconos de dash. Coche. Bueno, el icono del menú de opciones se utiliza para mostrar un icono para el elemento del menú. En este caso, la palabra clave dash icons car se usa para mostrar un auto minúsculo como icono para el elemento del menú. Y luego tengo que incluir la opción soporta soportes y la opción supports se usa para especificar los elementos de la interfaz de usuario que queremos incluir en la interfaz de usuario. La opción de soportes se utiliza para indicar los elementos que se van a mostrar dentro de la interfaz de usuario. Entonces en este caso, los elementos serán un campo de texto para que el evaluador de títulos introduzca la descripción completa del protector un clavo dental un clavo de tumba se utilizará para mostrar una sección dentro la interfaz de usuario donde el usuario puede subir una imagen del caché Y la opción de campos personalizados se utiliza para mostrar una sección dentro de la interfaz de usuario donde el usuario podrá introducir datos técnicos relacionados con la caché, como el fabricante, Sí, la opción de campos personalizados se utilizará para mostrar una sección dentro la interfaz de usuario donde el usuario pueda introducir datos técnicos relacionados con el automóvil. Por ejemplo, el fabricante, la fecha en que se creó el automóvil, la marca del automóvil y otros datos técnicos. Y bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 10. Lección 9: descripción general de la UI: Hola chicos. Bienvenido a otra lección de este tutorial. Bueno, en esta lección, quiero mostrarte la interfaz de usuario generada por Wordpress. Recuerda que en la lección anterior, configuramos un nuevo tipo de pose personalizado, cuando se configura un tipo de pose personalizado, luego Wordpress genera una interfaz de usuario para que el usuario pueda ingresar la información. Esta es la interfaz de usuario resultante generada por Wordpress. Bueno, como puedes ver, aquí aparece la pantalla at post. Este es el lugar donde el usuario va a introducir la información relacionada con los autos. utilizará el primer campo de texto para introducir el modelo del automóvil. El textor a continuación se utilizará para introducir una descripción completa del automóvil Y debajo del texto o aparece cuadrado que dice campos personalizados. Este es el lugar donde el usuario va a introducir detalles técnicos relacionados con la caché. Y luego en el lado derecho de la pantalla aparece un rectángulo que dice fturedimage Este pequeño rectángulo es el lugar donde el usuario va a subir una foto del auto. Y si me dirijo hacia el lado izquierdo, bueno, en el lado izquierdo de la pantalla, se puede ver que se ha agregado un nuevo elemento de menú al tablero. El elemento del menú dice autos, y también contiene un pequeño icono de un automóvil. Debajo del, el elemento del menú aparecen dos elementos, dos subelementos. Uno dice autos, y el otro dice en el puesto. Entonces si presiono la opción autos, puedes ver que esta pantalla se muestra. Esta es la pantalla de los autos. Esta es la pantalla donde se mostrará un listado de todos los autos. Por supuesto, el listado está vacío porque todavía no hay autos guardados en la base de datos. Pero tan pronto como nosotros cuando comencemos a guardar datos en la base de datos, entonces los autos se enumerarán aquí. Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 11. Lección 10: publicación de muestra: Hola, chicos. Bienvenido a otra lección de este tutorial. Bueno, en esta lección, quiero mostrarte una publicación de muestra para el tipo de publicación personalizada, que fue creada anteriormente. Bueno, como dije, esta es una publicación de muestra. Ahora mismo, estoy dentro la pantalla de edición de post como pueden ver, el primer campo de texto contiene el modelo del auto luego debajo del campo de texto aparece en text iter donde he introducido una descripción completa del auto. En este caso, la descripción completa del automóvil consiste en texto aleatorio, pero hay que introducir una descripción completa del automóvil en este campo de texto. Bien. En mi caso, usé texto aleatorio. Pero claro, hay que introducir una información sobre el auto, la descripción completa del auto. Después debajo del texto o aparecen los campos personalizados cuadrados o sección. Y este es el lugar donde se introducirán los datos técnicos relacionados con el auto. Por ejemplo, presento el tipo de carrocería del auto. El tipo de carrocería está configurado en Sedán. Introduje el país de origen, que es España. Presenté al fabricante, que está configurado para Toyota. Introdujo el modelo, que se establece en esta cadena de texto. Introduje la fecha de producción, y también introduje el Bin que es un identificador numérico para el automóvil, y también el año se creó o fabricó el automóvil. Y también en el lado derecho de la pantalla, se puede ver que aquí aparece el rectángulo de imagen característica. Recuerda que este es el lugar donde el usuario puede subir una foto del auto. En este caso, esta es la imagen del auto. Entonces, como puedes ver, esta es la forma en que puedes introducir datos relacionados con los autos usando esta interfaz de usuario. Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 12. Lección 11: agregar archivo php al proyecto: Hola, chicos. Bienvenido a otra lección de este tutorial. Bueno, en esta lección, quiero crear un nuevo subdirectorio así como un nuevo archivo PHP. Y una vez que haya creado bien, después de crear el archivo, voy a incluir el contenido del archivo en el proyecto. Entonces primero, voy a dirigirme a la carpeta raíz, y como dije, quiero crear un nuevo subdirectorio En este caso, el nombre del nuevo subdirectorio va a ser Front end Y luego dentro del subdirectorio recién creado, quiero crear un archivo PHP adicional El nombre del archivo PHP va a ser incluir plantilla punto PHP. Bueno, y luego tengo que dirigirme al archivo principal del plugin o al punto de entrada. Y como dije, quiero incluir el proyecto los contenidos del archivo recién creado. Entonces para poder incluir los contenidos, tengo que llamar a la función requerir una vez, requerir una vez. Tengo que incluir la función requerir una vez. Lo siento, tengo que llamar a la función require una vez. Entonces tengo que usar el plugin sin palabras constante querida. Recuerda que esta constante contiene el pad a la carpeta plugins. Entonces tengo que escribir el nombre del directorio raíz, que es caso plugin. Y luego tengo que escribir. Tengo que ingresar el nombre del subdirectorio, en este caso, front end Frontal. Frente tienden. Bien. Y después tengo que especificar el nombre del archivo. En este caso, el archivo es incluir plantilla punto PHP. Y bueno, como pueden ver, acabo de crear un nuevo subdirectorio así como un nuevo archivo PHP, y luego incluí el contenido del archivo recién creado en el proyecto llamando a la función requerida Y bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 13. Lección 12: la plantilla incluye filtro: Hola chicos. Bienvenido a otra lección del Tutorial. Bueno, en esta lección, quiero cubrir quiero cubrir la plantilla incluir filtro antes de empezar a explicar el filtro de inclusión de plantilla, tengo que decir que ahora mismo estoy dentro de la plantilla include dot archivo PHb Recuerda que este archivo fue creado en la lección anterior, bueno, De nuevo, te voy a hablar sobre la plantilla incluir filtro. Bueno, en nuestro proyecto en este proyecto, tenemos que recopilar información relacionada con los autos, y luego tenemos que mostrar la información relacionada con los autos al visitante. Para poder mostrar al visitante la información relacionada con los autos, tenemos que generar una página web. Y para generar dicha página web, tenemos que crear una plantilla. Una plantilla es simplemente un archivo que contiene el marcado HTML. Vamos a utilizar dicha plantilla para mostrar la información de las tarjetas al usuario o al visitante. Bien. Y bueno, para poder configurar la plantilla o para poder agregar la plantilla, tenemos que usar el subrayado de plantilla incluir filtro, ¿de acuerdo? Y para poder agregar el filtro, tenemos que llamar a la función en filter. Y entonces el primer parámetro es el nombre del filtro. En este caso, el nombre del filtro es template include. Entonces tenemos que especificar el nombre de la función que va a contener toda la lógica para configurar la plantilla. En este caso, la función estará en plantilla de tipo post personalizado. Ese es el nombre de la función donde vamos a colocar toda la lógica necesaria para configurar la plantilla. Entonces tenemos que declarar la función. Bien. Como puedes ver ahora mismo en la pantalla. Entonces, en esencia, en pocas palabras, la plantilla include filter se utilizará para incluir una plantilla en el proyecto, y la plantilla es el lugar es el archivo que contiene el marcado HTML para generar la página web donde se mostrarán los datos de los autos ¿Bien? Y, bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 14. Lección 13: creación de un archivo de plantilla: Hola, chicos. Gracias por ver este video. Bueno, en esta lección, quiero crear un nuevo archivo para mi proyecto. Bueno, tengo que dirigirme al subdirectorio front-end. Y dentro del subdirectorio front-end, voy a agregar un nuevo archivo PHP Selecciono el subdirectorio front-end, y después voy a agregar un nuevo archivo El nombre del archivo es Carstemplate. Plantilla Autos. Punto PHB. Ahora le pegué a Enter. Y como pueden ver, acabo crear un nuevo archivo para mi proyecto. Y bueno, este es el archivo que va a tener todo el marcado HTML para la página web Donde se mostrarán los datos relacionados con los autos. Este es el archivo donde ubicará todo el marcado HTML, y este archivo se utilizará para generar la página web donde mostrará la información de los autos Nosotros eso es todo para esta lección y nos vemos en la siguiente lección. 15. Lección 14: marcado HTML de la plantilla mínima: Hola, chicos. Bienvenido a otra lección de este tutorial. Y bueno, en esta lección, voy a agregar algo de marcado HTML a la plantilla de autos dot archivo PHP. Bien. Así que voy a agregar un poco de marcado HTML básico a este archivo. Y, um, bueno, como pueden ver, estoy agregando algunas marcas a este archivo al archivo PHP de punto de plantilla de autos La primera etiqueta, recuerda que debe ser la etiqueta doctype. Y entonces la segunda etiqueta debe ser la etiqueta HTML, la etiqueta HTML así. Y luego dentro de la etiqueta HTML, tengo que colocar el atributo language, y voy a establecer el idioma de esta página al inglés. Y después tengo que añadir el encabezamiento del documento. El apartado principal de este documento. Y luego tengo que agregar la sección de cuerpo de este documento, recuerda que dentro de la sección head, tengo que crear algunas metaetiquetas dentro de la sección head. El primero es una meta tachueta, metaetiqueta descargada. Y el valor de esta metatag será UTF ocho. Bien. Y luego tengo que agregar la metaetiqueta de viewport también. Entonces tengo que especificar el nombre del atributo. El nombre de este nombre el valor para el atributo name será viewport, viewport Y el contenido para la metaetiqueta de la ventana gráfica será lo que equivale a dispositivo, escala inicial de coma de trigo equivale a uno ¿Bien? Y luego tengo que agregar la etiqueta title dentro de la sección head de la página HTML. La etiqueta de título contiene el título que aparece en la pestaña del navegador. El título va a ser una sola página de auto, luego dentro de la sección de carrocería, voy a agregar un encabezado una etiqueta que diga, uh un solo auto. Página de un solo auto. Bueno, esto es solo un muy básico Esto es solo un código HTML de muestra para que puedas tener una idea sobre el marcado HTML que tienes que colocar dentro de este archivo ¿Bien? Este es el marcado HTML básico que tienes que colocar dentro de este archivo, dentro del archivo autos plantilla punto PHB Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 16. Lección 15: plantilla incluye lógica de filtro: Hola, chicos. Gracias por ver este video. En esta lección, voy a seguir trabajando con la plantilla include filter. Recuerda que en una lección anterior, te expliqué que la plantilla include filter se utiliza para configurar una nueva plantilla para el proyecto. Y también dije que se requiere una plantilla para mostrar los datos de la tarjeta al navegador web. Entonces en este caso, quiero configurar la plantilla. Y bueno, como pueden ver aquí, tengo el código de muestra. Y primero, tengo que especificar los parámetros de la plantilla. Los parámetros de plantilla representan o contienen el pad, el pad al archivo de plantilla. Y luego tengo que primero, tengo que devolver la plantilla, la plantilla pad. Es importante decir que cada vez que usamos un filtro, tenemos que devolver un valor. ¿Bien? Así que cada vez que usamos un filtro, tenemos que devolver un valor. En este caso, vamos a devolver el pad de plantilla por defecto, ¿de acuerdo? Y luego tengo que buscar una manera de encontrar la página web, que muestra la información de los autos. Tengo que encontrar una manera de encontrar la página web que muestra los datos de los autos al navegador. Para encontrar una página web específica, tengo que usar el bloque If así. Y entonces tengo que llamar a la función I singular. La función es singular se utiliza para encontrar una página web específica. Y vamos a localizar. Vamos a localizar la página web usando el identificador de tipo de publicación personalizado. ¿Bien? Entonces la función singular se utiliza para localizar una página web, una página web específica, y tenemos que pasar el nombre del tipo de post personalizado. En este caso, el nombre del tipo de poste personalizado es M autos. Al usar el bloque If solo con la función singular, estamos localizando la página web, que muestra datos relacionados con el tipo de publicación personalizada de MCR Una vez localizada la página web, se ejecutará el bloque If. Y el bloque If como puedes ver aquí en el código de muestra, dentro del bloque If, tenemos que declarar una función. Lo sentimos, tenemos que declarar una variable, y la variable debe contener el pad a la plantilla que queremos usar para generar la página web, ¿de acuerdo? Entonces tengo que especificar el pad a la plantilla. Entonces tengo que declarar el pad de plantilla variable. Voy a usar el plugin de prensa guerra constante ciervos. Recuerda que esta constante contiene la ruta a la carpeta plugins. Después tengo que especificar el nombre de la carpeta raíz. En este caso, los autos plugin. Entonces tengo que especificar el subdirectorio, en este caso, carpa frontal, de TNT Entonces tengo que especificar el nombre de la plantilla. En este caso, autos plantilla punto PHP. Bien. Entonces como pueden ver, estoy especificando soy estoy especificando la ruta al archivo de plantilla, que se utilizará para generar la página web. Entonces tengo que como pueden ver aquí en el código de muestra, tengo que uh tengo que usar el archivo de función existe para determinar si la plantilla está disponible o no. ¿Bien? Entonces voy a escribir en archivo I existe, yo archivo existe, y luego tengo que especificar la ruta a la y luego tengo que especificar el pozo, como dije, tengo que llamar al archivo de función existe. Esta función verifica si la plantilla está disponible o no, pero tengo que pasar el pad a la plantilla, y el pad a la plantilla se encuentra se guarda en el pad en la variable pad de plantilla, ¿de acuerdo? Entonces, en general, este código se utiliza para determinar si la plantilla está disponible o no. Una vez que la plantilla es el archivo de plantilla está disponible, entonces vamos a devolver el pad de plantilla como resultado de esta función. ¿Bien? Entonces, como puedes ver, esta es la forma en que podemos configurar un nuevo archivo de plantilla para el proyecto. Recuerda que esta plantilla se utilizará para generar la página web donde se mostrará la información de los autos. Eso es todo para esta lección y nos vemos en la siguiente lección. 17. Lección 16: archivo de plantilla de prueba: Hola, chicos. Gracias por ver este video. Bueno, en esta lección, quiero mostrarte los archivos de plantilla o el archivo de plantilla que creamos en acción. Quiero mostrarte el archivo de plantilla en acción. Recuerda que los archivos de plantilla se utilizan para generar la página HTML o la página web donde se mostrará la información de los autos. ¿Bien? Entonces ahora mismo estoy dentro del tablero, y tengo que dirigirme al elemento del menú del auto. Y como pueden ver, esta es la pantalla del auto. Y luego como pueden ver, tengo una publicación para el tipo de pose personalizada que hemos creado. Entonces voy a presionar el enlace. Voy a presionar el enlace que dice avance. Como puedes ver, este es el resultado. Entonces, como puedes ver, este es el archivo de plantilla en acción, lo que significa que el archivo de plantilla está funcionando. Como puedes ver, este es el encabezado que dice plantilla de tarjeta única. Y bueno, como pueden ver el archivo de plantilla está funcionando, y eso es todo para esta lección y nos vemos en la siguiente lección. 18. Lección 17: explicación de la plantilla sobre la cabeza: Hola, chicos. Gracias por ver este video. En este video, te voy a mostrar cómo crear una plantilla completa para el proyecto. En las lecciones anteriores, creamos solo una plantilla de muestra. Porque solo quería mostrarte cómo funcionan las plantillas. Entonces, la plantilla anterior que creamos antes era solo una plantilla de muestra solo para mostrar cómo funcionan las plantillas en WordPress. Pero ahora mismo quiero crear una plantilla completa, con todo el código PHP necesario. Entonces ahora mismo estoy en la página o sitio de recursos para desarrolladores de WordPress. Y aquí mismo, tengo una página de muestra, un código de muestra. Para una plantilla. Entonces voy a agarrar este código de muestra, y tengo que pegar el código dentro de la plantilla de autos dot phB file Entonces como puedes ver, ahora la plantilla tiene un completo ahora este archivo contiene un código de plantilla completo. Pero como pueden ver, el código es bastante complejo, así que quiero que sea lo más sencillo posible. Voy a quitar mucho. Bueno, voy a quitar algún código para que esta plantilla sea lo más clara posible. Entonces como pueden ver, ahora mismo, solo tengo la sección head de la plantilla, y quiero explicarles esta sección de la plantilla. Bien. Entonces, esencialmente, esta es la sección head, como dije, de la plantilla. Y para obtener el valor de la metaetiqueta charset, tengo que llamar a la función block info con el parámetro charset. ¿Bien? Entonces para obtener el título de la página web de forma dinámica, dinámica, tengo que llamar a la función Wordpress title. Esto es muy útil porque al hacer esto, puedo obtener el título de la página web dinámicamente. De lo contrario, debo ingresar el título de la página manualmente. Pero al llamar a esta función, puedo obtener el título de la página dinámicamente. Entonces entonces tengo un enlace, una etiqueta de enlace. Y esta etiqueta de enlace, como puedes ver, es contiene una llamada a la función get style sheet. RI u obtener hoja de estilo, URI o Ui. Esta función es llamada para obtener la hoja de estilo predeterminada de Wordpress. ¿Bien? Entonces, la función UI se utiliza para obtener la hoja de estilo predeterminada de Wordpress. ¿Bien? Y luego tengo debajo de la etiqueta de enlace aparece una llamada a la función de cabeza de Wordpress. Y esta función, la cabeza de Wordpress la función de cabeza de Wordpress se utiliza para mostrar. Todas las etiquetas de enlace o etiquetas de script, porque también podemos agregar etiqueta script a la plantilla. ¿Bien? Para poder recuperar la etiqueta script, tenemos que llamar a la función cabeza de Wordpress. Entonces, esencialmente, la función head de Wordpress recupera la etiqueta script así como la etiqueta de enlace para esta página web o plantilla Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 19. Lección 18: explicación del cuerpo de la plantilla: Hola, chicos. Gracias por ver este video. En este video, quiero seguir trabajando con el archivo de plantilla. Bueno, en la lección anterior, discutimos cómo agregar algo de marcado PHP Lo sentimos, cómo agregar algo de código PHP a la sección head de la plantilla o a la sección head del archivo HDML En esta lección, quiero seguir agregando más código PHP a la plantilla para que la plantilla se vuelva dinámica y pueda renderizar el contenido de cualquier auto, publicado en el sitio web. ¿Bien? En otras palabras, también quiero agregar algo de código PHP a una plantilla para que la plantilla pueda mostrar datos relacionados con los autos. Bien, entonces ahora mismo estoy en el en el repositorio. Y aquí he creado aquí tengo el código de muestra que voy a explicar, y voy a agarrar este código, y luego voy a explicarte este código. Entonces como pueden ver, vuelvo a la plantilla, y aquí voy a pegar el código, el PHP, el código PHP, ¿bien? Como puedes ver, bueno, voy a borrar una parte del código para que sea para que el código te quede claro. Entonces en sentido, solo agrego un código PHP SNIP. Y como puedes ver, este código PHP este código PHP contiene un bloque IF, ¿de acuerdo? Y esto bloqueo es llamar a la función Half Posters. Tienen carteles se llama a la función de medias publicaciones para determinar si hay publicaciones disponibles o no. En este caso, se llamará a la función Half posters para determinar si existe una publicación relacionada con autos disponibles o no. En caso de que no haya aplicación disponible, entonces se ejecutará el bloque ls Y como pueden ver, el bloque s imprime un encabezado una etiqueta que dice, No se encuentra ninguna publicación. ¿Bien? Entonces, en esencia, esto es solo un bloque I para determinar si hay contenido disponible para mostrar o no. Y luego, bien, tengo que dirigirme otra vez al código de muestra, y voy a agarrar este bucle de Wil. Bien. Y luego voy a pegar el wild loop aquí mismo. Bien. Y luego se utilizará el bucle Wi. El Wiloop se utilizará para imprimir el contenido de la publicación en la página web, ¿de acuerdo El bucle salvaje está llamando a la publicación la función llamada la publicación de guión bajo Esta función es esencial porque configura todos los datos de publicación para que podamos acceder a la información y mostrarla y mostrarla al navegador. ¿Bien? Entonces la función de post guión bajo es necesaria siempre para configurar el acceso a los datos de publicación, ¿de acuerdo? Entonces voy a envolver alguna cala adicional. Bien. Este código, voy a agarrar este código nuevo y voy a pegar el código debajo del código anterior. Y como pueden ver aquí, estoy llamando a la función llamada el título. Obviamente, esta función es mostrar el título de la publicación. El título se incrustará dentro de las etiquetas de encabezado tres. Entonces tenemos que mostrar la imagen de los autos. Para mostrar la imagen del auto, tengo que llamar a la función el clavo post tumba. Entonces imprimo bien, llamo a la función entonces se llama a la función echo para imprimir salto de línea o algún espacio vacío. Entonces se llama a la función al contenido para imprimir la descripción del auto. De nuevo, entonces algo de espacio en blanco está en ello. Y por último, estamos llamando a la función get post meta. La función get post meta se implementa para recuperar los datos técnicos relacionados con el automóvil. En otras palabras, la función GetPosMeta se implementa o se utiliza para recuperar los campos personalizados ¿Bien? El primer parámetro es la idea de la publicación. El segundo parámetro es el nombre del campo personalizado que queremos recuperar de la base de datos. Y el tercer parámetro es un verdadero booleano, ¿de acuerdo? Y bueno, a en la parte inferior, en la parte inferior del código PHP, puedes ver que llamé a la función WP footer. ¿Bien? Llamé a la función WP footer. Esta función es necesaria para imprimir las etiquetas de script. En la parte inferior del archivo. Porque recuerda que también podemos agregar etiquetas de script en la parte inferior de un archivo HDML Entonces, para poder imprimir la etiqueta script en la parte inferior del archivo, tengo que llamar a la función WWPFooter Y bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 20. Lección 19: plantilla en acción: Hola, chicos. Gracias por ver este video. En este video, quiero mostrarte el archivo de plantilla en acción. Recuerda que en la lección anterior, agregamos algo de código PHP a la plantilla para que la plantilla sea dinámica y pueda mostrar las publicaciones relacionadas con el tipo de pose personalizada. Pero en este caso, quiero mostrarte la plantilla en acción. Tengo que dirigirme al elemento del menú del auto. Y como pueden ver, aquí tengo una publicación de muestra. Entonces voy a presionar el enlace que dice avance. Y ahora como puedes ver, esta es la página web resultante generada por el archivo de plantilla que creamos en la lección anterior. En la parte superior aparece el modelo del auto, luego aparece una imagen del auto. Debajo de la imagen del auto aparece la descripción completa del auto. En este caso, la descripción completa del automóvil es solo un párrafo de texto aleatorio. Y debajo o debajo del párrafo de texto aparece el fabricante. En este caso, el fabricante del automóvil es Toyota. Lo que demuestra que tenemos acceso a la información de campos personalizados. ¿Bien? Y bueno, este es el archivo de plantilla en acción, y eso es todo para esta lección y nos vemos en la siguiente lección. 21. Lección 20: agregar archivo DEPS: Hola, chicos. Gracias por ver este video. En este video, voy a crear nuevo voy a crear un nuevo archivo PHP para el proyecto. Entonces tengo que dirigirme al subdirectorio front-end. Y dentro del subdirectorio front-end, voy a crear el archivo deeps dot PHP Entonces tengo que dirigirme al archivo principal del proyecto, y voy a incluir el archivo PHP recién creado. Entonces tengo que llamar a la función require una vez. Entonces tengo que usar el constante plugin de prensa Cor ahí. Y luego tengo que especificar el pad al archivo recién creado. Primero, tengo que ingresar el nombre de la carpeta raíz, en este caso, cars plugin luego el nombre del subdirectorio, en este caso, front end Y por último, tengo que añadir el nombre del archivo Debs o dips dot Dips significa dependencias. Dips significa dependencias. Bueno, como pueden ver, acabo de agregar un nuevo archivo al proyecto llamado dips dot PHP, y luego incluí el contenido del archivo dentro del proyecto llamando a la función required ones. Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 22. Lección 21: gancho de acción wp_enqueue_scripts: Hola, chicos. Bienvenido a otra lección de este tutorial. Y bueno, en esta lección, quiero implementar un nuevo gancho de acción. En esta lección, estoy en esta lección, voy a implementar el gancho de acción llamado Wordpress y guiones QI. Este gancho de acción se utiliza cuando quieres agregar dependencias a tu proyecto En este caso, voy a agregar bootstrap al proyecto. Entonces para agregar una dependencia al proyecto, tengo que implementar el gancho de acción del script Wordpress y Qi. Ahora mismo, como pueden ver, estoy en el repositorio de Git en el repositorio de mi proyecto, y voy a agarrar este código aquí mismo. Voy a copiar este código, y luego voy a dirigirme al proyecto. En concreto, voy a abrir el archivo deps dot PHb, y aquí voy a pegar el código Y luego, como pueden ver, este es el gancho de acción del script Wordpresen QE Como puedes ver, para poder usar este gancho de acción, tienes que llamar a la función en action. Después hay que especificar el primer parámetro, que es el nombre del gancho de acción. En este caso, presentamos Q scripts. Y el segundo parámetro es el nombre de la función que se ejecuta para este gancho de acción específico. Como dije, este gancho de acción es para agregar dependencias al proyecto, dependencias como archivos JavaScript o hojas de estilo CSS Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 23. Lección 22: la función wp_enqueue_style: Hola, chicos. Gracias por ver este video. Bueno, en este video, quiero seguir agregando dependencias al proyecto Como dije en la lección anterior, voy a agregar bootstrap al proyecto. Bootstrap es un framework CSS, que se puede utilizar para diseñar el sitio web o aplicar estilos al sitio web. Entonces como pueden ver ahora mismo, estoy en el repositorio para el proyecto. Y voy a envolver aquí esta primera línea de código. Y entonces, bueno, voy a borrar. Voy a eliminar este código porque quiero explicarte todo este paso de código. Quiero explicarte este código paso a paso, ¿de acuerdo? Entonces primero, hay que agregar If block, ¿bien? Entonces, como pueden ver ahora mismo, estoy en el archivo pHB de puntos de inmersiones Y primero, hay que agregar un bloque I. Como pueden ver, el bloque I está llamando es llamar a la función es singular con el parámetro, mis autos. El bloque If, junto con la función singular, se utilizan para determinar si la página web actual muestra información relacionada con las tarjetas o no. ¿Bien? Este bloque If se utiliza para determinar si la página web actual muestra datos relacionados con el tipo de pose personalizada o no. En caso de que la página web muestre datos relacionados con el tipo de pose personalizada, entonces se ejecutará este bloque If. Bien, entonces tengo que dirigirme al repositorio, y voy a agarrar este código aquí mismo. Vuelvo al archivo PHP de parada profunda y voy a pegar esta porción de código. Como puedes ver, esta es una llamada a la función WP y estilo Q. Esta función se implementa para incluir hoja de estilo en el proyecto. Y requiere de varios parámetros. El primer parámetro es un identificador aleatorio para la dependencia. El segundo parámetro es la dirección URL del archivo CSS. En este caso, esta es la dirección URL del bootstrap para la hoja de estilo bootstraps En caso de que te estés preguntando dónde saqué la dirección URL. Y bueno, la dirección URL fue tomada del sitio web de bootstrap. Como pueden ver ahora mismo, estoy dentro del sitio web de bootstraps. Y específicamente, estoy empezando en la sección de inicio que dice kickstart Y en esta sección, puedes encontrar un código de muestra. Y este es el lugar donde puedes encontrar la dirección URL de la hoja de estilo. ¿Bien? Para que puedas tomar la dirección URL de la hoja de estilo. A partir de esto, puedes tomar la dirección URL de esta página web, ¿de acuerdo? Y luego hay que pegar la dirección URL como segundo parámetro para la función. Entonces el tercer parámetro es una matriz de dependencias. En este caso, no estamos usando dependencias. El siguiente parámetro es la versión de la hoja de estilo. En este caso, la versión se establece en null. Porque estamos desarrollando el plugin. Y cuando estamos desarrollando un plugin, no necesitamos establecer el número de versión d. Y el último parámetro dice. El parámetro O significa que la hoja de estilo se aplicará a todos los dispositivos. Eso son teléfonos inteligentes, tabletas y pantallas blancas o pantallas más grandes. ¿Bien? Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 24. Lección 23: la función wp_enqueue_script: Hola, chicos. Gracias por ver este video. En este video, quiero seguir agregando dependencias al proyecto Bueno, en la última lección, te muestro cómo agregar hojas de estilo CSS al proyecto. Pero en este caso, quiero mostrarte cómo agregar archivos JavaScript al proyecto. Como recordarás, como recordarás, en la lección anterior, agregué la hoja de estilo CSS bootstraps Pero en este caso, quiero agregar el archivo JavaScript bootstraps o bien, sí, quiero agregar el archivo JavaScript bootstraps. Entonces ahora mismo estoy en el repositorio, y voy a agarrar este pedazo de código aquí mismo. Voy a copiar este código, y luego voy a dirigirme al profundo archivo Stop PHP. Y voy a pegar el abrigo así. Ahora como pueden ver, ahora mismo, me llamo Bueno, como pueden ver, esta es una llamada a la función de script Wordpress y QI, y esta función requiere de varios parámetros. El primer parámetro es la etiqueta o el identificador del archivo JavaScript. Este identificador puede ser lo que quieras. El segundo parámetro es la dirección URL del archivo JavaScript. Si vuelvo al sitio web de bootstraps, se puede ver que en la sección kickstart, aparece un código Y este código recortado contiene la dirección URL del archivo JavaScript bootstraps. ¿Bien? Entonces desde aquí, puedes tomar la dirección URL del archivo JavaScript desde esta página web. ¿Bien? Tienes que dirigirte a la documentación de bootstrap en la sección de inicio, ¿de acuerdo? Y una vez que tomes la dirección URL del archivo JavaScript, entonces puedes usarla como segundo parámetro para la función. Entonces el tercer parámetro es una matriz de dependencias. En este caso, no estamos usando dependencias. El cuarto parámetro es el número de versión del archivo JavaScript. Ya que estamos desarrollando el plugin, no necesitamos establecer el número de versión. ¿Bien? Entonces el valor para este parámetro será nulo, y luego tenemos una matriz que se usa para especificar o indicar que el archivo JavaScript debe estar en él en la parte inferior de la página web, ¿de acuerdo? Y bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 25. Lección 24: cuadrícula básica con Bootstrap: Hola, chicos. Bienvenido a otra lección de este tutorial. Y bueno, en esta lección, quiero seguir agregando el marcado HTML a la plantilla Y bueno, en las lecciones anteriores, creamos una plantilla muy básica. Pero entonces y después agregamos bootstrap al proyecto. Entonces en esta lección, quiero usar el markup, markup HTML, como bootstrap, así como las clases bootstrap para crear una grilla que vamos a usar para organizar el contenido Bien. Entonces como dije, en una lección anterior, creamos una plantilla básica. Después agregamos bootstrap al proyecto. Y ahora voy a usar algún marcado HTML, así como algunas clases de bootstrap para generar una guirnita para organizar el contenido de la página web Entonces ahora mismo estoy en el repositorio. Y como pueden ver, este es el código de muestra que vamos a usar. Entonces, um voy a ir a agarrar esta porción de código aquí mismo. Voy a copiar esta porción de código. Y luego me voy a encabezar. Tengo que dirigirme al archivo PHP de punto de plantilla del auto, y voy a pegar el código recortado así Ahora como puedes ver el contenido parece bien, el marcado HTML parece un poco confuso, obviamente Entonces voy a eliminar parte de este marcado para que este marcado sea más simple y hacerlo más comprensible ¿Bien? Entonces como pueden ver, acabo de quitar parte del marcado como pueden ver ahora mismo, estoy dentro del bucle Wil Entonces tengo una llamada a la función depost entonces tengo algunas etiquetas HTML La primera etiqueta es un if con el contenedor de clase, así como algunas clases adicionales para agregar algo de espacio, verticalmente. Y también para centrar el contenido, bien. Entonces como dije, queremos crear una grilla, ¿de acuerdo? Una grilla donde podemos colocar el contenido. Y la grilla va a tener dos secciones distintas. ¿Bien? Entonces el primer elemento if contiene el recipiente de vidrio. Luego dentro del elemento if, he colocado un elemento diff adicional con la fila de clase, y luego dentro del elemento div con la fila de clase con la fila de clase, agregué dos elementos div adicionales con la llamada a la clase. Y la primera sección dice, primera sección. Mientras que la segunda sección de la grilla dice segunda sección. Ahora guardo los cambios, y luego me dirijo al sitio web. Refresco la plantilla. Y como puedes ver, ahora la página web está dividida o dividida en dos secciones distintas. Uno dice primera sección o primera sección, y el otro dice segunda sección, lo que significa que la cuadrícula bootstrap está funcionando. Bueno, eso es todo por esta lección y nos vemos en la siguiente lección. 26. Lección 25: mostrar una imagen y algunos metadatos: Hola, chicos. Gracias por ver este video. En este video, quiero seguir agregando marcado. Quiero seguir agregando el marcado HTML a la plantilla. Bueno, en la lección anterior, creamos una grilla usando las clases bootstraps. En este caso, quiero seguir usando clases de bootstraps estilo al sitio web para darle estilo a la página web Entonces como pueden ver, ahora mismo, estoy en el repositorio, y voy a agarrar este marcado HTML que tengo aquí Voy a copiar este marcado HTML, y luego voy a dirigirme a la plantilla, y voy a eliminar el texto que dice primera sección, y luego voy a pegar el marcado HTML dentro de esta primera sección de la cuadrícula En esencia, el marcado HTML muestra una imagen del auto, y debajo de la imagen del auto aparece el modelo del auto, ¿de acuerdo? Entonces primero, agrego un elemento adicional con la tarjeta de clase. La tarjeta de clase se usa para exhibir un contenedor, ¿de acuerdo? Y dentro del elemento DIF con la tarjeta de clase, agrego una etiqueta de imagen, como pueden ver, el atributo source para la etiqueta de imagen contiene un script PHP o código de snip PHP SNIP Como pueden ver, estoy llamando a la función, la función get the post tomb nail URL se llama. Y esta función, la función get the postnail URL se utiliza para obtener la dirección URL de la imagen del auto Bien. Y luego usamos la dirección URL como valor para el atributo source. Entonces tenemos un elemento div con el cuerpo de la tarjeta de clase. Y en el interior, tenemos una etiqueta de cabecera cinco con el título de la tarjeta de clase. Este es el lugar donde queremos este es el elemento HTML donde queremos colocar el modelo del auto. ¿Bien? Vamos a conseguir el modelo del auto llamando a la función el título, obtener el título, para que podamos obtener el modelo del auto. Después guardamos los cambios, y luego nos dirigimos al al al lado a la página web y actualizamos. Y como pueden ver, ahora mismo, tenemos el como puede ver, se muestra la imagen del auto, y debajo de la imagen del auto aparece el modelo del auto. Y bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 27. Lección 26: Modificaciones hechas a la plantilla: Hola chicos, bienvenidos otra lección de este tutorial. Y bueno, en esta lección, quiero seguir mejorando la primera sección de la grilla. En la última lección, creé una cuadrícula con dos secciones diferentes. Y bueno, hice algunas modificaciones a la primera sección. Entonces en este video, quiero seguir haciendo modificaciones a la primera sección. Y bueno, como pueden ver, tengo justo como pueden ver, esta es la primera sección de la con, y acabo de agregar un elemento de párrafo con el título de la tarjeta de cristal. Y dentro del elemento de párrafo, agregué otro elemento de párrafo con los datos técnicos del texto. Y luego debajo del párrafo, agregué un listado. Este listado se utilizará para mostrar todos los detalles técnicos relacionados con el automóvil. Entonces el primer elemento de la lista contiene el tipo de texto y también contiene un código PHP SNIP Y este código PHP SNIP hace eco del resultado de la función get post meta La función depose meta se utilizará para obtener los detalles técnicos del automóvil de la base de Esta función requiere tres parámetros. El primer parámetro es la idea de la publicación. El segundo parámetro es el identificador del campo personalizado. En este caso, el identificador del campo personalizado es body type y el tercer parámetro es un booleano true Bueno, eso es todo para este video para esta lección y nos vemos en la siguiente lección. 28. Lección 27 - Mejoras de plantillas: Hola, chicos. Bienvenido a otra lección de este tutorial. En esta lección, quiero seguir mejorando la plantilla. Y bueno, último en la lección anterior, estaba haciendo modificaciones a la plantilla. Entonces en este caso, voy a agregar algunos elementos de la lista al listado. Y bueno, voy a agregar otro ítem de lista que diga país de origen. Entonces tengo que llamar. Entonces tengo que llamar a la función G post meta. Recuerda que esta es la función necesaria para obtener los datos de la base de datos. Es decir, para obtener los detalles técnicos. Esta función requiere de tres parámetros. El primero es el ID del puesto. El segundo es el identificador del campo personalizado. En este caso es país de origen. Y el tercer y tercer parámetro es el verdadero booleano Entonces tengo que repetir estos pasos. Tengo que añadir otro elemento de la lista. En este caso, el ítem de la lista contiene el texto, fabricante. Como pueden ver, estoy llamando estoy llamando a la función meta get post. La única diferencia es que el segundo parámetro dice fabricante, ¿bien? Entonces tengo que agregar otro elemento de lista que diga modelo. Nuevamente, estoy llamando a la función get pose meta y el segundo parámetro en este caso es igual a model. Entonces tengo que agregar otro ítem de lista que diga fecha de producción. Nuevamente, llamo meta a la función getPos. Pero en este caso, el segundo parámetro va a ser la fecha de producción. Entonces tengo que agregar otro elemento de lista que diga Bin nuevamente, tengo que llamar a la meta función get Pose, y el segundo parámetro es igual a Bin. Y luego finalmente, tengo que agregar otro ítem de lista que diga exactamente G, y en este caso, el segundo parámetro es igual a g. Bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 29. Lección 28 - Resultado final: Hola, chicos. Bienvenido a otra lección de este tutorial. Y bueno, en esta lección, quiero seguir haciendo mejoras a la plantilla. Y bueno, específicamente, quiero hacer algunas modificaciones a la segunda sección de la grilla. En este momento estoy seleccionando la segunda sección de la grilla. Y la sección de la cuadrícula contiene un texto en la parte superior que dice descripción general. Y como pueden ver, estoy usando clases bootstrap para dar formato al texto descripción general. Y después he añadido un pequeño código PHP SNIP que está llamando a la función, el contenido La función de contenido se utiliza para mostrar la descripción completa del automóvil al navegador web. Y luego después de todas estas modificaciones, después de todas estas modificaciones hechas a la plantilla, puedo dirigirme al navegador, y este es el layout. Este es el diseño resultante. Como puedes ver, aquí aparece la imagen del auto, a continuación aparece el modelo, luego un listado de detalles técnicos. Y por último, tenemos una sección donde se muestra la descripción completa del auto. Y bueno, eso es todo para esta lección. Y ahora, como puedes ver, la plantilla está funcionando. El diseño está funcionando. Y bueno, eso es todo para esta lección y nos vemos en la siguiente lección. 30. Conclusión: Hola, chicos. Bueno, como puedes ver, acabamos de completar el tutorial. Y como puedes ver, hemos aprendido muchos temas relacionados con el desarrollo de Wordpress. Este es solo el punto de partida para desarrolladores web, para desarrolladores de Wordpress. Porque hay muchos temas que cubrir respecto al desarrollo de Wordpress. El ecosistema o WordPress es muy vasto. Este es sólo el punto de partida. Pero creo que estas son la base para el desarrollo de wordpress. Voy a recapitular algunos de los temas que hemos estado cubriendo en este tutorial Por ejemplo, al principio, creamos una carpeta raíz para el proyecto. Luego editamos el comentario de encabezado o el comentario de encabezado, que proporciona metadatos, que describe el complemento Worps Entonces vimos cómo entendíamos cómo incluir archivos externos o cómo incluir archivos adicionales en el proyecto. Al usar la función requerida en también usamos el complemento WP subrayado WP subrayado la constante Como recordarás. Y luego también usamos un gancho muy importante, el gancho de acción init Recuerda que este gancho se ejecuta cada vez que se carga una página web. Entonces usamos ese gancho para declarar un nuevo tipo de pose personalizado, que es el medio que tenemos para guardar datos en la base de datos con formato específico. Después también configuramos una interfaz de usuario para que podamos ingresar información en la base de datos. Luego también hicimos uso de un filtro para que podamos introducir una plantilla en el proyecto. Vimos cómo agregar algo de contenido HTML aleatorio a la plantilla. También entendimos que las plantillas son los medios utilizados por Wordpress para mostrar datos al navegador web. También entendimos cómo agregar un framework al proyecto como bootstrap y creamos un diseño simple para mostrar los datos. Entonces como puedes ver, este tutorial fue muy interesante. Te da una visión general de lo que se trata el desarrollo web o el desarrollo de WordPress. Espero que tengas ahora el entendimiento básico necesario para desarrollar palabras Blue ins. Recuerda que el ecosistema de Wordpress es muy vasto, muy grande. Por lo que sugiero que se dirija a la documentación y lea más sobre y lea más sobre este tema, lo cual es muy interesante. Bueno, chicos, eso es todo para este tutorial y nos vemos en el siguiente tutorial. Adiós.