Codifica un tema de WordPress | Introducción al desarrollo de WordPress

1. Introducción al curso: Hola a todos. Mi nombre es Kyle y soy desarrollador web con sede en Ohio. He sido desarrollador web de tiempo completo desde hace unos cinco años. Y hoy te voy a enseñar a empezar a construir tu propio tema personalizado de WordPress desde cero. Tocaremos todos los elementos de un sitio de WordPress a partir de la configuración inicial de sitios locales, que estaré usando lámpara en Mac. Y resolviendo los archivos principales utilizando una plantilla de inicio, integrando marcos HTML y CSS como Bootstrap, así como un par de plug-ins centrales para usar a lo largo de todo el proceso. Este curso estará orientado hacia principiantes absolutos, pero espero que todos los que tomen esta clase puedan aprender algo en el camino. Gracias de nuevo por tomar el curso y espero que estés tan emocionado como yo por empezar. 2. Configuración del entorno del desarrollo local - MAMP: De acuerdo, así que el primer paso para obtener nuestra configuración de entorno local de WordPress es instalar realmente un software llamado mapa. Por lo que estaré usando la versión MAMP Pro. su página web hay una versión gratuita de hombre, que estará completamente bien por lo que tenemos que hacer aquí. Entonces MAP es realmente agradable. Hace que sea realmente, realmente fácil de descargar, instalar y configurar sitios web de WordPress en su máquina local. Se encarga de toda la configuración del servidor con Apache, MySQL y cosas así. En realidad es solo una descarga de un clic en una estrella de un solo clic y luego tienes tu sitio funcionando básicamente. Así que adelante y dirígete a MAMP dot info y, y descarga la versión gratuita o si quieres seguir adelante y comprar la versión pro, siéntete libre. Hay algunos ajustes que puedes personalizar con la versión pro que no puedes con la versión gratuita. Creo que la versión gratuita solo te permite tener una configuración de sitio. Podría estar mal con eso. Conozco la versión pro, puedes tener configuración múltiple así como un montón de otras cosas, pero está bien, así que aquí realmente estoy descargando la versión gratuita de MAMP, llevándoles un ejemplo de cómo se ve eso. Por lo que puedes utilizar eso a lo largo del curso. Así que adelante y dar click en Descargar gratis una vez que ustedes chicos aquí. Y eso te va a llevar a esta página y sólo tienes que seguir adelante y descargar la versión adecuada para tu máquina. Y la instalación en sí es en realidad bastante sencilla. Simplemente voy a seguir adelante y pausar la grabación y volver cuando menos configuración. De acuerdo, así que mi descarga está lista y voy a seguir adelante y abrir eso. Es caminar a través de él realmente rápido. Y una vez hecho esto, volveré. Muy bien, así que mi descarga e instalación fue exitosa. Entonces ahora acabo de abrir MAMP y esta es la pantalla que ustedes verán. Entonces como dije, solo adelante y deja todo igual. Adelante y haz clic en Inicio. Está bien, y esta es la pantalla que se les presentará esto chicos. Y como inicia un servidor. Y esto, se ve muy similar a las herramientas de dashboard de versiones Pro aquí arriba tiene PHP, mi administrador. Esto será importante más adelante en el curso. Digamos localhost colon 8888, inclinada hacia adelante, inclinada hacia adelante. interrogación, el idioma es igual al inglés. Podría, puede o no tener eso. Si ustedes siguen adelante y en realidad eliminan todo después de la 8888 y luego hacen clic en Entrar. Se te presentará esta pantalla. Y esto significa que se instalan fue exitoso. Si puedes ver esta página mapa se ha configurado y lanzado correctamente y está listo para funcionar. Aquí se puede ver alguna información solo general, raíz del documento. Este HT docs es donde vamos a almacenar nuestros archivos de sitio web, versión PHP, y luego hay un archivo ahí actualmente que es index.php. Tan genial, esta fue la versión gratuita, muy similar a la configuración de la versión pro. Espero que esto les resulte útil. 3. Descarga e instalación de WordPress: De acuerdo, Entonces en esta sección, estaremos configurando el entorno real de WordPress dentro de señora. Entonces lo que realmente voy a estar haciendo ya que tengo múltiples webs ya configuradas y he trabajado en el pasado. En realidad voy a estar creando un nuevo host dentro de MAMP Pro. Si estás usando la versión gratuita, solo siéntete libre de saltar por delante unos 30, 45 segundos. Si estás usando la versión pro, quédate. Es un proceso muy sencillo. Entonces solo quieres bajar al signo más aquí mismo. Siempre lo dejo como vacío. Continuar. Sólo voy a nombrar este curso web y luego documentar root. Voy a elegir y mantenerlo dentro de mi propia carpeta. En realidad voy a seleccionar aquí la carpeta del curso web, abrir. Y luego voy a dejar eso sin control y luego crear el anfitrión. Y eso es más o menos. Entonces todo lo que tienes que hacer desde aquí, si estás usando la versión pro es asegurarte de que tienes a tu anfitrión seleccionado aquí. Dale un segundo para que tipo de generar lo que necesita para generar en el backend. Una vez que esté listo, este botón Abrir de aquí debería aparecer. Para aquellos de ustedes usando la versión gratuita. Puedes seguir adelante y simplemente iniciar el servidor y eso abrirá tu URL de host local dentro de tu navegador. Y podemos ir a partir de ahí. De acuerdo, así que la mía está lista para salir, así que solo voy a seguir adelante y hacer clic en Abrir. Como dije, la versión gratuita se abrirá automáticamente cuando se inicie el servidor. Por lo que voy a dar clic en Abrir. Y esto mostrará una página muy similar a la que mostré en la última sección. Entonces esto es sólo decir que la raíz del documento está configurada en la carpeta que creé la versión de PHP y así sucesivamente. Por lo que el siguiente paso aquí en realidad va a conseguir los archivos de WordPress. Para hacer eso, quieres ir a wordpress.org. Una vez cargada esa página, hay un botón azul en la parte superior derecha que dice Get WordPress. Adelante y haz click en eso. Y entonces eso te llevará a esta página aquí. Entonces en este primer párrafo hay un enlace que dice descargar e instalar. Adelante y haz click en eso. Y lo bajará más a la página. Y luego puedes dar click en Descargar WordPress 5.8. Al momento de ver este video, esa versión, podría ser diferente, pero adelante y basta con hacer click en eso e instalar. Y espere a que eso se descargue. Voy a seguir adelante y hacer una pausa y volver cuando esté listo. De acuerdo, mi descarga estaba lista. Entonces lo que eso hace es descargar en realidad el archivo zip que contiene todos los archivos básicos de WordPress. Adelante y abre ese archivo zip. Y luego dentro de esa carpeta verás todos estos archivos aquí, index.php licenciado dot TXT. Léame cualquier cosa que empiece con WP dash es un archivo core de WordPress. Entonces esos son lo que en realidad construye backend de WordPress. Entonces lo que quieres hacer es realmente tener esta carpeta levantada y luego la carpeta de documentos HT. Lo que vas a hacer es simplemente eliminar lo que esté dentro de esa carpeta, solo debería ser un archivo index.php. Adelante y borra eso. Y luego a partir de ahí, en realidad puedes arrastrar sobre todos los archivos de WordPress desde esa descarga. Van a ir a hacer eso. Dragon on on over. Y luego simplemente lo limpio por nombre. Y entonces eso es más o menos. Por lo que sigue adelante y cierra esas dos ventanas de buscador. Cierra este pop-up. Y entonces ahora si vuelves a tu navegador y te refrescas, deberías conseguir una página de WordPress. Básicamente algo así como una página de configuración, siendo un poco caminar por eso. Entonces una vez que estén listos y sigan adelante y seleccionen su idioma, voy a seleccionar Inglés, Continuar. Y luego aquí dice, Bienvenido a WordPress. Antes de empezar, necesitamos algo de información sobre la base de datos. Deberá conocer los siguientes rubros antes de proceder. Nombre de la base de datos, nombre de usuario la base de datos, su contraseña, el host de la base de datos, y luego el prefijo Entonces aquí es donde realmente vamos a entrar en PHP, mi administrador, y en realidad crear la base de datos. Entonces para hacer eso, vamos a saltar de nuevo al MAMP y vas a hacer clic en este botón Inicio Web. Y luego una vez que esto se haya cargado, vamos a ir al menú desplegable Herramientas PHP, mi administrador. Genial. Entonces ahora dentro de PHP mi admin, lo que necesitamos hacer es realmente crear la base de datos. Por lo que en la barra lateral izquierda aquí, adelante y dar click en Nuevo. Dale un nombre. Yo sólo voy a nombrar mi curso web. Siéntete libre de ponerle el nombre que quieras. Puedes dejar esto solo y seguir adelante y hacer clic en Crear. Entonces lo que esto hizo fue crear una nueva base de datos llamada curso web. Y no tiene mesas en este momento. En realidad va a crear cualquier mesa. Vamos a dejar que la configuración de instalación de WordPress realmente haga todo eso por nosotros. Pero lo que necesitamos hacer es configurar un usuario para esto, esta base de datos. Por lo que en la parte superior de este bar de aquí, adelante y haga clic en privilegios. Agregar usuario. Y aquí voy a nombrar el mío usuario de la web. Deja la contraseña sola del host. Yo sólo voy a hacer la prueba 123 y luego volverlo a escribir. Prueba 1, 2, 3. Cuando realmente estás haciendo esto para un sitio de producción, eventualmente, o quieres usar algo más seguro en este momento, definitivamente encontrar, probablemente siempre deberías usar algo más seguro. Este es un sitio local, por lo que la seguridad no es un tema enorme. Pero si tuvieras que poner esto en un sitio beta, en un servidor Beta en algún lugar o simplemente moverlo directamente a la producción. Eso puede ser un tema. Tener una contraseña muy fácil, extremadamente débil. Sólo algo de lo que estar al tanto ahí. Una vez que todo esté configurado, nombre de usuario y contraseña, desplácese hacia abajo y haga clic en este botón Ir. Cualquiera de los que suban y luego simplemente haga clic de nuevo en ir. Y ahora estamos todos listos. Así que equilibra de nuevo a la pestaña de configuración de WordPress. Ahora que tenemos toda esta información que quieran, podemos dar click en, vamos. Y ahora este es el nombre de la base de datos. Entonces esto es lo que creamos en PHP, mi administrador, nombré mi curso web. Asegúrate de escribir exactamente lo que hiciste el nombre. Curso web. El uso de nombre es usuario web. Y prueba 1, 2, 3. Deja en paz el host de la base de datos, está bien. Prefijo de tabla así como encontrar WP underscore estándar para sitio web WordPress. Así que adelante y haga clic en Enviar. Dice que estamos todos listos. Se puede comunicar con la base de datos y vamos a seguir adelante y ejecutar la instalación. Aquí. Esta es alguna información general del sitio. Podemos dar el nombre de nuestro sitio, el nombre de usuario y la contraseña aquí, o lo que realmente vamos a estar usando para iniciar sesión en el backend de WordPress. Entonces, una vez que el sitio esté realmente configurado, necesitarás recordar realmente el nombre de usuario y la contraseña que configuraste aquí. Esto fue algo que vas a estar usando y referenciando con bastante frecuencia, tu email, y puedes usar tu email real. Visibilidad del motor de búsqueda. Siempre reviso eso cuando estoy desarrollando. Puedes dejarlo sin control. Nuevamente, es un sitio local, nadie puede acceder a él. Entonces una vez que todo esto esté configurado, adelante y haga clic en Instalar WordPress. De acuerdo, parece que todo estuvo bien. Adelante y haga clic en Iniciar sesión. Y aquí es donde escribiremos nuestro nombre de usuario y contraseña. Y haga clic en iniciar sesión. Genial. Por lo que ahora estamos dentro de nuestro backend de WordPress. Aquí es donde en realidad iremos a crear entradas de blog, nuevas páginas, comentarios gestionados. Se puede administrar usuarios, instalar temas, temas infantiles, enlace permanente controlado, que es la estructura de URL de las páginas de WordPress. Y muchas otras cosas. Vas a estar pasando mucho tiempo en su back-end una vez que lleguemos más adelante en el curso. Pero este es un gran lugar para estar. Entonces, hasta ahora hemos configurado el MAMP, hemos configurado un sitio de WordPress localmente. Y en la siguiente sección realmente instalaremos un editor de código. Y luego nos pondremos en empezar, construyendo un tema real dentro de WordPress. 4. Instalación de un editor de código: Muy bien, Entonces en esta sección vamos a estar configurando un editor de código. Entonces esto es lo que realmente vamos a estar usando para realmente construir páginas, plantillas de página, editar cualquier otro archivo de configuración que necesitemos y así sucesivamente. Por lo que uso Visual Studio Code. Si ustedes están tomando esta clase, es más que probable que ya tengan una instalada. Yo sí recomiendo Visual Studio Code. Es realmente genial una vez que te acostumbras. En realidad solía usar uno llamado Atom. Sé que hay algunos otros por ahí como corchetes y otros como ese. Siéntase libre de usar lo que sea con lo que ustedes chicos se sientan cómodos. Utilizo Visual Studio Code. Viene con un montón de extensiones que puedes descargar e instalar que un poco ayudan a tu código a medida que lo escribes IntelliSense y cosas por el estilo. Por lo que definitivamente una gran cantidad de beneficios para usar Visual Studio Code. Creo que Adam también tiene extensiones y cosas así también. Así que adelante e instala lo que quieras. Supongo que uso código de Visual Studio, así que voy a estar tirando de eso ahora mismo. De acuerdo, entonces cuando abras Visual Studio Code por primera vez, obtendrás una, básicamente una ventana en blanco. Entonces, lo que en realidad puedes hacer es ir a File Open y solo abrir esa carpeta de 80 docs. Tengo el mío dentro de documentos sitios MAMP con curso, y abrir eso. Por lo que una vez que esto se abra, puedes ver todos los archivos aquí. Por lo que empezando por la parte superior, administrador de WP casi nunca toca nada dentro de ahí. Lo mismo con WP incluye. Esos son realmente archivos core a WordPress. Por lo general si te metes con algo dentro de ahí, Va a provocar un error en algún lugar del sitio y provocar que no funcione correctamente. Básicamente, todo lo que vas a estar editando o agregando o haciendo cualquier cosa va a estar dentro de la carpeta de contenido del dash WP, acceso HT. Probablemente te meterás en un poco cuando estés configurando esto para un sitio de producción. Y luego otro archivo aquí abajo es WP config. Y abre eso. Por lo que este archivo básicamente le dice a WordPress qué base de datos buscar. Por lo que en realidad se puede ver que aquí, nombre de la base de datos, curso web, usuario de la base de datos, usuario web y así sucesivamente. Esta es en realidad la información que proporcionamos durante la configuración de instalación del sitio web. Algunas llave fuera de la llave, llave segura cosas así, realmente no meten mucho en nada de eso. Depuración Wp. Esto es útil cuando se intenta depurar el sitio web de WordPress. Podemos convertir esto en verdad si nos metemos en algún tema por el camino. Esto se deja típicamente en falso. Hay algunas otras cosas que puedes agregar a este archivo de configuración. Algunos plugins de almacenamiento en caché, agregan algunas líneas a esto. Algunas sobrescriben a las subidas de archivos a veces pueden entrar aquí y cosas por el estilo. Realmente lo único de lo que preocuparse en este archivo es la información de la base de datos. Si vas a estar cambiando servidores, estás cambiando servidores de base de datos o algo por el estilo. Tan solo querrás asegurarte de que toda esa información esté actualizada correctamente para que puedas seguir trabajando en tu página web. Ya veo ir adelante y cerrar eso. Si ingresas a la carpeta WP Content, verás un par de carpetas dentro de sus plug-ins, temas y subidas. Subir autoexplicativa. Aquí es donde se almacenarán todos tus archivos de WordPress que subas. Eso es cualquier cosa dentro de los medios de comunicación. Dashboard de Wordpress. Entonces aquí es donde todas las imágenes de tu blog o imágenes de página, pancartas, cualquier cosa por el estilo, PDF. Por lo que puedes pensar en ahí es donde subirás esos y luego se almacenan en catálogo dentro de esta carpeta de cargas. Plugins, lo mismo ahí. Cualquier plug-in que instale se alojará en esa carpeta. Temas. Aquí es en realidad donde estaremos trabajando la mayor parte del tiempo en este curso ahora mismo estamos prensa viene estándar con tres temas predeterminados, los temas 2019, 2020, y 2021. Estos son geniales para blogs muy básicos como sitios web. Ese no es nuestro objetivo para este curso, nuestro núcleo, este curso va a ser todo sobre crear un tema personalizado para permitirte construir exactamente lo que quieres, cómo quieres. Vamos a estar básicamente empezando desde cero con una plantilla de huesos desnudos y construyéndola a partir de ahí. Por lo que en realidad puedes eliminar a todos estos ganador. No vamos a hacer eso ahora mismo hasta que tengamos instalado nuestro otro tema. Pero eso es lo que es. Y luego también verás cualquier tema infantil que tengas dentro de esta carpeta también. Por lo que puedes ver si te expandes en uno de estos, puedes ver todo tipo de archivos dentro de aquí. más importantes para enfocarse realmente en footer.html, functions.php, punto de encabezado PHP, index.php, y PHP de punto único. Bueno, en realidad todos son importantes, pero esos van a ser los principales. Punto de encabezado y pie de página PHP. Eso es bastante estándar para mantener todo en el archivo de encabezado que pertenece ahí, como etiquetas Meta, títulos de sitios, cualquier cosa por el estilo. navegación a veces puede ir a su pie de página, lo mismo. Los elementos típicos del pie de página pueden entrar en el archivo PHP de punto de pie de página y luego en el archivo functions.php. Aquí es en realidad donde estaremos agregando en archivos CSE o CSS, archivos JavaScript, cualquier cosa por el estilo que realmente necesitamos usar en el sitio web. Vamos a estar cargándolos dentro del archivo functions.php. Tocaré eso en una sección posterior. Pero para eso se utiliza ese archivo, además de agregar funciones personalizadas y cosas así. Página. Esta es una plantilla de página predeterminada dentro de WordPress. Una cosa importante aquí a saber es la función get header. Por lo que toco en el encabezado dot archivo PHP. Esta función aquí mismo realmente llama a ese archivo a la página. Entonces, lo que realmente es genial de WordPress es utilizar partes de plantillas. Considero el encabezado una parte de plantilla. Lo que eso significa es que creas un archivo que puedes usar en múltiples páginas diferentes simplemente llamándolo en una función. Por lo que el encabezado get header es una función específica que llama al encabezado dot archivo PHP. Esta función aquí mismo en la línea 17 en realidad llama a una parte de plantilla diferente. Por lo que puedes ver la función get template part call template dash parts página de contenido de contenido. Por lo que está tirando de un archivo bajo contenido de partes típicas, página de contenido. Cualquier cosa dentro de ese archivo se cargará en esta página con una línea de código, lo cual es realmente genial. Y luego en la línea 25, misma cosa, conseguir pie de página. Eso va a ser llamando al archivo PHP de punto de pie de página a este archivo, nuevo con una línea de código. Entonces eso es lo que realmente genial ahí tocará más de estos archivos a medida que nos adentremos más profundamente en el curso. Buscar. Esta es la plantilla de archivo de página de resultados de búsqueda específica. Entonces si estás en un sitio web y lo ves, quieres buscar cualquier cosa relacionada con el deporte. Simplemente buscarías deportes y luego realmente puedes personalizar esa plantilla que muestra los resultados. Formulario de búsqueda es el formulario de búsqueda real único. Por lo que por defecto esto es para un solo post. Estas cosas justo aquí arriba. Entonces, cada vez que creas una nueva publicación, esa es la plantilla predeterminada que se va a usar. Y eso también podemos ajustarlo. Entonces esa es más o menos la visión general de la estructura de archivos de WordPress. En la siguiente sección, en realidad vamos a estar instalando nuestro tema de inicio. Es un tema de huesos desnudos, te da todos los archivos centrales que necesitas para crear realmente un tema de WordPress para que no tengamos ningún error con el que nos topemos de inmediato. Y a partir de ahí como que lo ramificamos, lo construimos como un lo quieren, y vamos de ahí. Por lo que esperando con ansias eso. 5. Selección de un tema principiante: En esta sección, vamos a estar instalando nuestro tema de inicio, que nos permitirá hacer un tema infantil y ramificarlo desde ahí y construirlo en nuestro tema personalizado. Entonces lo que quieres hacer es asegurarte de que estás conectado al sitio web de WordPress que creamos en las secciones anteriores y dirigirte a la apariencia y luego temas. A partir de aquí, adelante y dar click en Agregar Nuevo. Y luego por el lado derecho, vamos a estar buscando un tema llamado pizarra en blanco. Y es este muy primero aquí. Al hacer clic en Instalar y activar. Entonces al mismo tiempo es, es un tema muy, muy en blanco, sin juego de palabras. No hay estilos, no hay formato, realmente no hay estructura para ello en absoluto. Pero lo que realmente es agradable es que te da todos los archivos centrales que vas a necesitar para construir realmente el tema. Por defecto, cuando creas un tema dentro de WordPress , busca archivos específicos. Si solo entráramos en esta carpeta Temas por aquí y solo hacemos una nueva carpeta y lo llamamos el tema de Kyle. Con ese ser pestañear, pestañear carpeta. Si entramos en WordPress y tratamos de activar ese tema, va a lanzar un error diciendo que nos falta un par de archivos. Lo bonito de pizarra en blanco es B, lo expandes. Se puede ver que en realidad viene cargado con todos estos archivos que vamos a necesitar. Índice de encabezado de la función Footer y así sucesivamente. Todos esos están ahí listos para salir. Y entonces realmente podemos crear un tema infantil basado en este tema de padres, lo que nos permitirá hacer todas nuestras ediciones y construir el sitio exactamente como queremos sin depender de los desarrolladores de pizarra en blanco y potencialmente arruinando nuestro sitio por el camino. Si ustedes no sabían que el propósito de un tema infantil dentro de WordPress es separar sus ediciones en su personalización del tema del tema principal o del tema principal. Motivo de eso, digamos, construimos nuestro sitio, lo lanzamos en un servidor de producción. El tráfico va a ello. Todo es genial. De acuerdo, así que digamos al mismo tiempo que los desarrolladores, una pizarra en blanco lanzaron una actualización que arregla el parche de seguridad o algo así. Si entráramos a nuestro sitio de producción y actualizáramos el tema The Blank Slate, básicamente borraría todo lo que hicimos dentro de ese tema si no lo hiciéramos en un tema infantil. Entonces digamos que acabamos de entrar a este pie de página y dijimos, Hola, Esta es una prueba desde el pie de página. Y lo guardamos. Y volvemos aquí y refrescamos. Se puede ver que es justo aquí. Entonces digamos que este era nuestro sitio en vivo y seguimos adelante y actualizamos el tema de pizarra en blanco del desarrollador. Y esta línea aquí mismo, ya que se hizo dentro del tema de los padres, esto se borraría por completo. No habría manera de recuperarlo. Entonces por eso es realmente, realmente importante usar como tema infantil. Incluso si compraste un tema del bosque temático o en cualquier otro lugar, siempre, siempre, siempre, siempre quieres asegurarte de que usen un tema infantil. No quieres que todo tu arduo trabajo se lave de una sencilla actualización. Por lo que siempre ten eso en cuenta. Y te estaré mostrando cómo crear un tema infantil también en la siguiente sección. Pero lo que hicimos aquí es un gran comienzo. Se puede dar un poco de click alrededor. Sé que no está formateado, pero puedes ver publicaciones recientes, Hola Mundo. Y así es como se vería aquí una sola publicación. Puedes ver bienvenida a WordPress es que tu primera publicación, editarla o eliminarla y empezar a escribir. Ahí hay un comentario de prueba. Y se puede ver que nuestra línea de pie de página sigue aquí ya que la ponemos en el footer.html actual. Entonces esa es una instalación temática. Para empezar en la siguiente sección, vamos a repasar cómo crear un tema infantil. Entraremos un poco a la documentación de WordPress y luego iremos a partir de ahí. 6. Crear un tema infantil personalizado: Muy bien, espero que ustedes estén disfrutando de la clase hasta ahora. En esta sección, vamos a estar creando nuestro tema infantil. Así que adelante y salta a tu editor de texto. Y lo que vamos a hacer ahora es en realidad sólo eliminar los temas de 2019, 2020, y 2021. En realidad no necesitamos esos. Entonces por y sólo borrar esos. Y luego en tu carpeta de pizarra en blanco, lo que queremos hacer es en realidad ejecutar una búsqueda y reemplazar la palabra pizarra en blanco y reemplazarla por lo que quieras nombrar tu tema. Entonces lo que voy a hacer es reemplazar el nombre pizarra en blanco por curso web. Y voy a reemplazar todo lo que hay ahí dentro. Ahora una vez hecho eso, solo voy a renombrar la carpeta también a curso web. Y ahora si volvemos al tablero y vamos a Aspecto Temas, va a mostrar una pizarra en blanco inactiva sólo porque cambiamos todos los nombres de pizarra en blanco a lo que sea que lo llames, ese tema en realidad no existe ya. Entonces todo lo que tienes que hacer es simplemente activar tu nueva. Y estamos bien para ir. Por lo que se puede ver el tema actual, versión del cuerpo web 2019 0.3. Por cosas ordenadas, por favor lee etiquetas y cosas así para que podamos editar toda esta información. Este es nuestro tema ahora, así que en realidad no necesitamos tener nada de esto ahí dentro. Podemos, por supuesto, guardarlo para el tema de los padres, pero para nuestro tema infantil, podemos deshacernos de eso, limpiarlo un poco. Así que rebota de nuevo sobre el código de Visual Studio o tu editor de texto. Y lo que queremos hacer ahora es crear una nueva subcarpeta dentro de la carpeta de temas. Entonces, solo adelante y haz eso. Lo que quieres hacer es ponerle exactamente lo mismo, niña de guión. Una vez que tengas esa carpeta, el primer archivo que vamos a crear dentro de esta nueva carpeta de tema infantil se llama style.css. Y entonces el siguiente archivo que queremos crear se va a llamar funciones PHP. Y entonces lo que tenemos que hacer es empezar a editar el archivo style.css, CSS. Entonces, para asociar realmente este tema infantil con el tema principal, solo necesitamos agregar un par de líneas de código para que los dos se reconozcan entre sí. Entonces lo que vamos a hacer aquí es empezar un comentario. Y luego vamos a decir nombre del tema, niño curso web. Y luego vamos a decir tema, URI. Y en realidad voy a saltar al tema de los padres del curso web y simplemente agarrar eso aquí mismo. Y luego descripción. Podemos decir curso web, niño siendo autor. Puedes decir tu nombre, autor, tu, podemos decir si tienes un sitio web de cartera, puedes hacerlo. Si estás construyendo esto muy acompañar, puedes poner eso ya que puedes ponerlo ahí también. En realidad me voy a deshacer de eso. No es necesario. Plantilla, esta es la línea más importante aquí. Necesitamos que esto coincida exactamente con el nombre del tema principal, que es mi caso, una versión de curso web. Podemos hacer 1. Y el dominio de texto puede ser niño curso web. Y luego vamos a cerrar ese comentario. Por lo que la línea más importante aquí es plantilla de curso web. Este será el nombre de tu tema. Esto es en realidad lo que vincula este tema hijo con el tema de los padres. Así que asegúrate de que coincida correctamente. Adelante y guarde eso. Si quieres saltar de nuevo a los temas de WordPress. Ya deberías ver la palabra, el tema infantil que creamos. Se puede ver que este es el tema infantil de las webcasts, tan genial. Esto es exactamente lo que necesitamos hasta ahora. Ahora lo que vamos a hacer es editar el archivo functions.php para empezar a tirar en hojas de estilo. Entonces nuestra primera hoja de estilo y vamos a tirar en realidad está mirando la hoja de estilo del tema de los padres de pizarra en blanco. Por lo que un renovado cambio hacia el archivo functions.php dentro de la viga secundaria. Y lo que vamos a hacer es simplemente empezar con una etiqueta de apertura PHP y luego cerrarla. Y lo que vamos a hacer es empezar a escribir en la función para básicamente tirar de esas hojas de estilo. Entonces vamos a hacer Add Action, WP, enqueue, script, curso, estilo enqueue, punto y coma, función, web por supuesto. Y este es el nombre de tu tema. Estilos. Puede ser tema infantil estilo P y Q, hoja de estilo, BRI sobre un número. Vamos a decir mango de padres, WP, tema, versión de Git. Esto, solo funcionará si tienes la versión establecida y el encabezado de estilo. Y entonces sólo vamos a cerrar eso y guardarlo. Por lo que ahora podemos voltear a WordPress y activar nuestro tema infantil. Y luego si realmente vemos la página, se verá un poco diferente. En realidad estamos tirando de estilos del tema de los padres, que formatean las cosas un poco mejor para nosotros. Por lo que este es un gran comienzo. En realidad estaremos usando esta función aquí para incluir recursos adicionales como hojas de estilo personalizadas, cualquier biblioteca o frameworks que necesitemos agregar. Aquí es en realidad donde vamos a estar cargando esos archivos. En realidad no queremos poner enlaces a recursos externos y al encabezado, al pie de página, justo de la forma en que WordPress carga los recursos. Esta es en realidad una forma más eficiente de hacerlo. Entonces a partir de aquí, realmente tenemos todo configurado que necesitamos para poder empezar a construir nuestro tema personalizado, que es genial. Entonces en el siguiente capítulo o en el siguiente apartado nos meteremos en eso. Estaré usando Bootstrap para construir el tema para que ustedes chicos puedan seguir junto con eso. O usa el marco que quieras. 7. Trabajar en el tema: Muy bien, En esta sección realmente vamos a empezar a construir nuestro tema. Entonces una cosa que sí olvidé mencionar en la sección del editor de código fueron extensiones que en realidad puedes agregar al Código de Visual Studio. Además de Adam, creo que es solo un poco de un proceso diferente en Adam u otros luego Visual Studio Code. Pero uno realmente importante que uso mucho se llama embellecer. Tu idea de lo que esto está haciendo. Cuando lo llames. En realidad formatea tu archivo de código y de una manera mucho más legible. Entonces volteando al tema de los padres y voy a abrir el archivo de encabezado. Se puede ver que el tema Pizarra en blanco que instalamos Originalmente tiene todos los archivos que necesitamos. No obstante, no están formateados bien ni nada por el estilo. Pero lo bueno de esta extensión es que puedes embellecer el archivo, decir que es HTML y luego da formato a todo correctamente. Es mucho más fácil de leer y simplemente se ve más bonito, más fácil de trabajar con. Entonces eso es una cosa que sí recomiendo es instalar extensiones sí ayuda formatear el código, embellece lo que uso para Visual Studio Code. No estoy seguro si tienen uno para átomo, pero vale la pena investigarlo. Entonces ahora que, eso está fuera del camino, lo que vamos a empezar haciendo con nuestro tema es crear un menú de navegación en la parte superior. Queremos un logotipo por aquí, tal vez un par de enlaces por la parte superior. Y como dije anteriormente, voy a estar usando Bootstrap para esto, y voy a estar usando Bootstrap versión cinco. Entonces el primer paso para eso es conectar realmente Bootstrap con el tema. Entonces vamos a saltar al tema infantil, al archivo functions.php. Y luego vamos a hacer una nueva línea. Y cuando digo WP estilo encola, y cuando digo Bootstrap core, y luego vamos a hacer coma y luego abrir comillas. Y vamos a saltar al sitio web de Bootstrap. Y lo que vamos a hacer es saltar a los docs y empezar. Y puedes ver aquí mismo, copiar pega el enlace de la hoja de estilo en tu cabeza antes de todo esto, nuestras hojas para cargar nuestro CSS. Esto es grandioso pajarito no lo va a poner en la sección de cabeza. Lo vamos a poner en el archivo functions.php. Así que adelante y copia ese enlace. Cambie a su editor de código y luego péguelo ahí y guárdelo. Y luego vuelve a la página web de Bootstrap. Y luego vamos a hacer lo mismo con estas botas o con esta de JavaScript. Después copie eso y luego vuelva al editor. Vamos a hacer una nueva línea, WP enqueue script. Y esto puede ser Bootstrap core script. Y luego pegarlo ahí también. Y seguro. Entonces, con solo hacer esto, si vamos a refrescar nuestro sitio web, el formato debería verse un poco diferente otra vez. Esta vez en realidad estamos incluyendo estilos Bootstrap. Entonces sigamos adelante y cambiemos a eso y veamos qué hizo eso. Por lo que puedes ver nuestros enlaces ahora son azules que familias de fuentes un poco diferentes espaciamientos, poco diferentes. Entonces esta es una buena señal. Esto significa que tenemos estilos y scripts de Bootstrap conectados correctamente a nuestro tema. Y podemos empezar a construir la navegación real. Así que adelante y vuelve al editor de códigos. Podemos cerrar functions.php por ahora. Y lo que queremos hacer es crear el encabezado ese archivo PHP dentro de nuestro tema infantil. Y lo que podemos hacer para facilitarnos las cosas es abrir el tema de los padres, ir al archivo PHP de punto de encabezado, abrirlo y luego simplemente copiarlo y pegarlo en nuestro encabezado de tema infantil y luego cerrar ese. Genial. Entonces este es nuestro encabezado para nuestro tema infantil. Un poco nos ayuda a lo largo solo copiar y pegar de esa manera obtenemos toda la estructura requerida de un documento HTML. Todo lo que vamos a estar haciendo aquí hoy en este curso en realidad va a ser mucho HTML, CSS, y JavaScript. Eso es realmente todos los sitios de WordPress son. Es solo una forma de construir un sitio y conectarse a la base de datos para sacar información del uso de PHP dentro de HTML. Y luego formateamos todo su CSS. Entonces vas a ver mucha estructura familiar a medida que pasamos por este curso cuando construimos páginas y cosas así. Por lo que tenemos el código HTML estándar aquí arriba, cuerpo, clase corporal. Esta es una función específica de WordPress. Lo mismo con esto. Y entonces aquí es en realidad donde nos metemos en construir nuestro encabezado real. Por lo que puedes ver tenemos el encabezado con el ID de cabecera. Podemos deshacernos realmente de todo esto. Y entonces podemos empezar a poner en nuestra navegación bootstrap. Entonces voy a empezar con esto y decir que la clase nav es igual a navbar. Navbar expande una barra de navegación grande. Luz. Bg, como Y voy a cerrar eso. Y luego dentro de este NADH, vamos a abrir un contenedor. Fluido. Cerraremos eso. Está bien. Y luego dentro de este contenedor hará la clase de marca navbar igual a marca de navbar HRF, o simplemente dejar eso ahí por ahora. Y sólo diremos Navbar. De acuerdo, adelante y guarde eso y podemos cambiar de nuevo a nuestro sitio y ver cómo se ve eso. Genial. Entonces tenemos navbar y la izquierda, que es la marca. Y podemos seguir adelante e inspeccionarlo. Podemos ver que tenemos nuestra barra de navegación, que abarca todo el ancho. Dentro de eso tenemos un contenedor. Marca Navbar, genial. Y tenemos el estilo es jalando de Bootstrap, tan perfecto. A continuación vamos a crear el botón para alternar el menú en las pantallas móviles. Entonces haremos un salto de línea aquí y diremos clase de botón, niño pequeño navbar. Tipo igual botón. Interruptor de datos colapso cerrado. El objetivo es el contenido soportado por la barra de navegación . Controles de área. compatible con Navbar Área de contenidocompatible con Navbar. Ampliado, etiqueta de área falsa, toggle, navegación. Cerraremos eso. Y luego dentro de este botón, agregaremos un span con un icono de desenfoque de corbata barra de navegación clase. Podemos seguir adelante y refrescar nuestra página. Y luego si encogemos esto, hazlo desde este lado. Deberíamos ver nuestro botón de menú pop ahí arriba. En realidad no tenemos el contenido editado la página para mostrar realmente un menú, pero el botón está ahí y se muestra y se esconde de acuerdo al ancho de pantalla. Tan genial. Ahora todo lo que necesitamos hacer es simplemente agregar el contenido real que se mostrará y el colapsado cuando se presione ese botón, así como mostrar. Soy carpeta pantallas más anchas. Entonces justo debajo del botón hará colapso de la barra de navegación Hola clase. Y le daremos un ID de contenido soportado por navbar. Cierra el div. Y luego vamos a abrir un poco una lista desordenada y un elemento de lista. Y entonces esto tendrá una clase de artículo de navegación. Y que dentro de esto tendremos un nuevo enlace con la clase nav link y activo, y luego le daremos área, página actual y H ref. Podemos simplemente dejar en blanco por ahora y solo diremos: Oh, me olvidé de agregar la clase de la lista. Entonces diremos Navbar, Nav y auto y B para ser grandes aquí, y esas son solo clases espaciadas. Esas son, todas estas son las clases específicas de Bootstrap, bootstrap. Sigamos adelante y guardemos esto, cambiemos de nuevo al sitio y actualicemos. Genial, Así vemos a casa. Y entonces podemos derrumbarlo y luego vemos a casa allí también. Por lo que el niño está trabajando y el menú funciona como se pretendía en pantallas pequeñas y grandes. Tan genial. Una última cosa en esta sección, en lugar de la palabra navbar para la marca, en realidad queremos tener una imagen ahí. Entonces lo que podemos hacer es deshacernos de eso. Y entonces podemos simplemente poner una imagen aquí y decir el placeholder.com. Y sólo diremos un 140 por 70. Y esto es sólo una imagen de portador de lugar para mostrar cómo se vería si hubiera un logotipo real ahí. Bueno, eso y refresca eso y puedes ver si se trataba de un verdadero logotipo de marca. Ahí irá y se verá genial. Entonces eso es todo para esta sección. Y en la siguiente sección pasaremos por la mitad de la página, el contenido real. Podemos conseguir algunas imágenes y filas y cosas así ahí dentro. Y realmente conseguir este sitio construido. 8. Crear una plantilla de página: Muy bien, En esta sección realmente vamos a estar repasando las plantillas de página, cómo asignar plantillas de página, y en realidad construyendo contenido para esa página específica dentro del editor de código. Entonces solo saltaremos a la derecha. Lo que queremos hacer ahora es en nuestra página de inicio, en realidad queremos hacer un par de cosas. Una, queremos crear una página de inicio. Después vamos a crear un archivo de plantilla de página. Vamos a asignar esa plantilla de página a la página de inicio. Y luego vamos a cargar solo algún contenido básico de héroe desde bootstrap solo para meter algo ahí para que la página se vea un poco más bonita. Entonces sigamos adelante y empecemos. Vamos a volver al tablero y a WordPress. Y vamos a navegar hacia las páginas. Y entonces lo que queremos hacer es añadir una nueva página. Y sólo vamos a llamar a este al título y vamos a llamarlo la página de inicio. Y luego lo vamos a publicar. Una vez que eso esté publicado, va a dar click en Ver página. Y luego a partir de aquí, lo que queremos hacer es en realidad hacer click en personalizar. Y vamos a ir a la configuración de la página de inicio. Y luego vamos a cambiar esto a una página estática y luego a la página de inicio vamos a establecer a la página de inicio y luego publicar. Entonces lo que esto hace es cada vez que se cargan las páginas web o el sitio web, va a cargar esa página de inicio como la página principal. Genial, Así que ahora lo que podemos hacer es saltar al editor de código. Y dentro de nuestro tema infantil creará una nueva carpeta y vamos a llamar a esa página plantillas. Y luego dentro de esa carpeta, vamos a crear un nuevo archivo y vamos a llamar a esa página de inicio en PHP. Dentro de aquí, vamos a empezar con las etiquetas PHP y vamos a decir plantilla nombre homepage. Este comentario aquí mismo básicamente solo le dice a WordPress en el back-end que este es un archivo de plantilla de página y permiten que sea seleccionado de la lista de plantillas de página para elegir al editar la página. Llegaremos en tan solo un segundo después de esta línea. Lo que queremos hacer a continuación es incluir el encabezado. Entonces sí conseguiremos paréntesis de encabezado de subrayado, cerraremos eso, y luego haremos lo mismo para el pie de página. Y luego adelante y guarde eso. Y podemos voltear de nuevo a nuestra página web y refrescar. Y ahí vamos. Nada cambia, todo está bien. Lo que tenemos que hacer ahora es dar click en editar página. Recuerda configuramos la página de la página de inicio que acabamos de crear como la página de inicio del sitio web. Entonces por eso lo estamos viendo aquí ir y dar clic en editar página. Por encima del lado derecho. Amplía la plantilla acordeón, plantilla predeterminada, haz clic en eso y luego cámbiala a página de inicio. Y luego vamos a seguir adelante y dar clic en Actualizar. Y luego Ver Página. De acuerdo, entonces esta página se ve diferente ahora, en realidad no tenemos nada entre el encabezado y el pie de página como lo hizo la plantilla predeterminada. Entonces en este momento todo lo que tenemos es la navegación que agregamos y luego el pie de página, que es sólo el copyright con el nombre. Y luego algunos textos que agregamos antes en el curso. Genial. Entonces lo que podemos hacer ahora es volver a la plantilla del archivo de la página de inicio y empezar a agregar algún contenido de héroe de Bootstrap. Entonces vamos a decir div. Daremos a esto una clase. Px, PY cinco y cinco textos centro irá dentro de ese div y diremos H1. Yo quiero decir que este es un título. Vamos a darle una clase a éste. Pantalla cinco, F, W negrita. Y luego por debajo de ese H1. Y vamos a decir div con la clase de col, grande seis y auto. Y luego diremos dentro de ahí, solo vamos a decir un párrafo con la clase de plomo y MB. Y sólo pondremos un poco de Lorem Ipsum ahí dentro. Y luego debajo de ese párrafo le dará un div más. Vamos a poner algunos botones aquí. Entonces diremos un div con la clase de brecha de cuadrícula D al flex, justificar contenidos centro pequeño. Y luego dentro de este div dirá un botón. Sólo diremos primaria. Y luego escriba igual botón, clase. Botón, botón, primario. Y de nuevo, estas son todas las clases por defecto de Bootstrap, digamos botón dash large, AX4, obtener tres. Y luego para que sea más fácil, solo copiaremos esta línea de botones, pegaremos justo debajo, cambiaremos el texto es secundario. Secundaria. Y luego cambiaremos. La clase es sólo un poco en lugar de botón primario dirá contorno de botón. Secundaria, botón grande podemos mantener y luego diremos p de x. y eso lo ahorraremos. Y podemos volver a poner a la página web y refrescar. Y tenemos esta bonita sección de encabezado, esta sección de héroe aquí, otra vez con solo un contenido de marcador de posición, pero luciendo mucho, mucho mejor. Y definitivamente en llegar a lo que queremos ver en un tema personalizado. Genial. A continuación podemos agregar una fila con algunas tarjetas, algunas tarjetas Bootstrap solo para algún contenido más en la página. Entonces lo que queremos hacer aquí es volver a meternos en el editor de textos. Y justo debajo aquí, div con la clase de fila. Y empezaremos una columna, seis pequeños. Y luego dentro de ahí pondremos la tarjeta. Y luego dentro de eso tendremos otro div con cuerpo de tablero de cartas. Y luego aquí diremos H5 con una clase de título de tarjeta. Diremos que se trata de un título de tarjeta. Y luego justo debajo eso pondrá un párrafo con una clase de texto de tarjeta. Y sólo diremos que esto es algunos textos va por debajo. Y luego justo debajo de eso solo lanzaremos otro botón. Entonces diremos un botón, botón primario. Un H ref es solo uno por ahora. Y diremos esto, solo diremos enlace. Y eso lo guardaré. Y entonces ahora solo podemos copiar toda esta columna y pegarla de esa manera tenemos dos columnas con una tarjeta en cada una. Adelante y guarde eso, voltea de nuevo al sitio web y refresca. Y se puede ver que tenemos dos cartas ahí dentro. Una cosa que sí olvidamos de hacer fue solo poner esto en un contenedor para que tengamos algo de espaciado en el lateral. Entonces solo voy a subir hasta aquí contenedor y luego simplemente envolver todo esto dentro de un contenedor. Genial. Por lo que ahora estamos un poco más contenidos, tener algo de espaciado incorporado. Ahora, todo se ve bien. Tan genial. Siguiente sección pasaremos a ajustar el pie de página, limpiando eso un poco e iremos a partir de ahí. 9. Piel y conectar CSS personalizado: Por lo que en esta sección, vamos a estar trabajando en el pie de página. Nuevamente, lo que vamos a estar usando algunos elementos Bootstrap para tipo de formatear esto un poco más rápido. Pero sólo les voy a mostrar cómo hacer eso. Vamos a hacer nuestro camino hacia el sitio web de Bootstrap, getbootstrap.com. Y luego iremos a los docs y solo buscaremos en Twitter. Doy click en este primer resultado aquí. Y todo lo que vamos a estar buscando aquí es sólo un ejemplo de algo que queremos hacer. Por lo que sí podemos ver este aquí mismo. Parece que en ese adelanto fue un poco diferente. Parece que fueron cuatro columnas. Entonces solo vamos a seguir adelante y hacer eso. Esto parece que tiene scrunch hasta un poquito, pero vamos a seguir adelante y hacer que sean cuatro columnas. Entonces podemos hacer eso volviendo al editor de código. Y ahora mismo tenemos abierto el archivo de la página de inicio. Pero lo que queremos abrir ahora, en realidad lo que queremos crear ahora es el archivo footer.html. Entonces dentro del curso web, o como sea que llames tu tema, el tema infantil aquí vamos a hacer nuevo archivo, footer.html, IPC. Y en este archivo solo podemos seguir adelante y empezar a escribir lo que queramos en el pie de página. Sólo vamos a hacer algo sencillo. Vamos a hacer un div con una clase de contenedor. Dentro de ese div hará una fila. Y luego haremos 43 columnas de ancho. Entra en eso. Y entonces podemos decir 1, 2, 3, y 4. Eso lo ahorraremos. Y podemos seguir adelante y volver a poner a la página de inicio I archivo PHP. Y sin embargo sí tenemos incluido el pie de página. Entonces volvamos al navegador. Acude a nuestra página web, refresca la página. Y se puede ver aquí tenemos nuestras cuatro columnas. El motivo por el que se deshizo de lo que teníamos antes es porque lo que teníamos antes estaba en el tema de los padres. Entonces vamos a volver a ese pie de página PHP. Por lo que este es el archivo padre Themes Footer. Todo aquí solo se reemplaza instantáneamente tan pronto como creamos el archivo PHP de punto de pie de página en nuestro tema infantil, cual hicimos aquí mismo con nuestras cuatro columnas. Entonces esa es la razón que sucedió. Genial. Entonces ahora podemos volver a ese ejemplo de bootstrap. Y parece que tienen un logo y luego tres menús. Entonces podemos seguir adelante y hacer algo parecido a eso. Entonces podemos hacer, Hagamos un enlace con una imagen. Y solo usaré la misma imagen que usamos en el encabezado aquí mismo. ¿ Está eso dentro? Y luego ven a, sólo haremos una lista desordenada, simple elemento de lista. Y vamos a hacer otro ahí dentro también. Y luego solo copiaremos esto, lo pondremos en las otras dos columnas, se refrescará. Y ahí vamos. Entonces ahora mismo está un poco cerca. Podemos agregar algunos estilos aquí. Te puedo mostrar cómo conectar realmente tu propia hoja de estilo personalizada al sitio web. Entonces volvamos al editor de códigos. Y luego dentro del tema infantil, entra y crea una nueva carpeta. Sólo vamos a llamar a esto CSS. Entonces dentro de eso, vamos a decir styles.css. Genial. Y entonces esta será nuestra hoja de estilo personalizado. Y luego lo que tenemos que hacer ahora para conectarlo realmente al sitio web. Si recuerdas anteriormente, mencioné que en realidad no agregamos estas hojas de estilo personalizadas directamente al encabezado del sitio web. Pero lo que queremos hacer es agregarlos en el archivo functions.php. Abre eso. Y para hacer las cosas un poco más fáciles, solo podemos copiar este Bootstrap uno que hicimos. Y yo solo quiero poner esto ahí mismo, cambia un poco. Podemos decir CSS personalizado. Y luego lo que queremos hacer en lugar de este enlace, queremos hacer obtener hojas de estilo, directorio, URI, punto, comillas abiertas, y diremos estilos CSS que CSS al guardar eso. Y luego si queremos asegurarnos de que nuestros estilos estén funcionando, podemos volver a nuestra hoja de estilo recién hecha. Y podemos decir, digamos que las H son rojas. Guarda eso. Y podemos volver al pie de página. Y solo para probar esto, agregaremos un elemento aquí. Esto es una prueba, guárdelo. Y luego volveremos a cambiar al navegador y refrescaremos. Y ahora se puede ver que ya había un H1, así que éste es rojo y así es éste, para que sea genial. Eso significa que nuestra hoja de estilo está conectada y funcionando. Entonces lo que podemos hacer ahora es en realidad simplemente ajustar parte del espaciado aquí. Vamos a deshacernos de esto y vamos a decir div con ni que podamos seguir adelante y simplemente hacer. El pie de página clase, tiene una parte superior acolchada de 50. Guarde eso, vaya al pie de página y a la clase de pie de página al contenedor general. Y entonces esto debería darnos un poco de espacio. Análisis perfecto. Yo me desharé de esto. Un tenedor de lugar ahí. Está bien, luce bien. Entonces está el pie de página y también cómo conectar una hoja de estilo personalizada a la cosa. 10. Contenido dinámico: Entonces en esta sección realmente vamos a repasar cómo sacar datos o contenido del backend o del editor de WordPress y en realidad mostrar ese contenido en el front end del sitio web al visitante, en realidad visitando la página. Entonces lo que queremos hacer es seguir adelante y volver a iniciar sesión en el Dashboard si lo estás si no lo estás ya. Está bien. Está bien. Entonces ahora que estoy de vuelta en el Dashboard, vamos a seguir adelante y hacer nuestro camino de regreso a la página principal. Algunas páginas en la página de inicio de la izquierda. Y sólo voy a ajustar las opciones de pantalla aquí. En realidad no prefieras estar en el modo de pantalla completa. Simplemente me gusta el modo por defecto en la barra lateral. este momento estamos mirando el nombre de la página y luego esto apretado a dos o elegir un bloque. Este es el contenido real de la página. Entonces por defecto esto como el editor de WordPress Gutenberg. Eso está completamente bien. Podemos mantenerlo como está. Y todo lo que voy a hacer aquí es decir que esto es contenido de prueba. Esto se mostrará en la página. Y solo voy a seguir adelante y dar clic en Actualizar. Entonces sólo una simple frase, 12 frases aquí, por propósitos de ejemplo. Así que adelante y ver la página. En este momento esto no va a mostrar nada en nuestro archivo de plantilla. En realidad no tenemos nada configurado para sacar esos datos. Entonces lo que queremos hacer es volver al editor de código y queremos abrir nuestra plantilla de página de inicio. Y en lugar de esta frase aquí mismo, en realidad vamos a querer que este sea nuestro contenido que acabamos de poner al editor de páginas. Entonces para hacer eso, necesitamos usar lo que se llama el WordPress a loop. En buen ejemplo de esto está en el tema principal en el archivo PHP punto de página. Así que adelante y encuentra eso, abre eso. Y solo voy a embellecer este archivo para que sea un poco más fácil de leer. ¿ De acuerdo? Por lo que a partir de la línea 3, esto es en realidad lo que comienza el bucle de WordPress. Por lo que dice si tienen posts, mientras que tienen posts, obtén el contenido de post. Estas son todas las funciones por defecto de WordPress. Esto no es nada de costumbre. Esto es justo con lo que tenemos que trabajar. Entonces lo que queremos hacer es en realidad sólo agarrar esta línea. Copia eso y vamos a volver a cambiar a nuestra plantilla de página de inicio. Y en realidad podemos poner esa línea justo aquí. Entonces diremos pasta de línea tres. Y luego justo debajo del pie de página, en realidad podemos simplemente cerrar esas declaraciones if y while. Entonces sigamos adelante y terminemos el qué. Adelante y abre primero los corchetes PHP y luego diremos final mientras guarde eso. Entonces en este momento todo esto está diciendo es si hay un post y mientras tenemos el post, obtenemos los post-datos, estamos viendo una página, así que vamos a tener un post para mostrar. Ahora mismo. Todavía va a mostrar todo lo que hemos codificado. Pero solo para mostrarte que nada se romperá, vamos a seguir adelante y refrescar la página. Se ve exactamente igual. Genial. Así que vamos a volver muy rápido. Y entonces aquí, en lugar de este párrafo, sólo podemos decir, abramos aquí nuestros corchetes PHP y diremos el contenido de subrayado. Y de nuevo, esta es una función específica de WordPress. Esto no es nada que tuviéramos que hacer por nuestra cuenta. Sigamos adelante y guardemos eso. Y lo que esto está haciendo, esto en realidad es tirar cualquier contenido que esté dentro del editor. Esto debería darnos una sentencia a nuestro titular del lugar. Justo ahí está, y esto es algunos contenidos de prueba, contenido, esto se mostrará en la página. Entonces eso es solo un ejemplo realmente breve de cómo sacar contenido a la página desde el editor. En la siguiente sección, en realidad repasaremos un plug-in que uso en casi todos mis sitios web de WordPress que tipo de expandir esta funcionalidad en una tonelada de diferentes opciones de campo, imágenes, cualquier cosa que se te ocurra. En realidad es una herramienta realmente, realmente genial para usar cuando estás construyendo en sitios web de clientes. Es mucho más eficiente que usar un plugin de Page Builder. Entonces estoy muy emocionado de mostrarles eso en la siguiente sección. 11. Configuración avanzada de campos personalizados: Muy bien, Así que en la última sección pasamos por encima de cómo sacar sólo una frase simple o dos del editor de páginas a nuestra plantilla de página para mostrar realmente en el front end de nuestro sitio web. En esta sección, en realidad les voy a mostrar un plug-in que uso casi en cada uno de los sitios web de WordPress que construí para clientes. Es una herramienta realmente genial para tipo de tomar esa funcionalidad que acabamos de aprender y expandirla en un montón de elementos diferentes de los que sacar. Por lo que tenemos imágenes, tenemos códigos de color, tenemos elementos repetitivos, tenemos tablas. Hay una variedad ilimitada de elementos para realmente tirar de usar este plugin. Por lo que los polígonos en realidad lo llaman campos personalizados avanzados. Dejaré un enlace a esto en la descripción del curso. Este plug-in sí tiene una versión gratuita y una versión pro. En mi opinión vale la pena la versión pro. Y te da algunos elementos más que son realmente, realmente poderosos para los sitios web. Sin meterte demasiado en ello, puedes ver todo tipo de páginas de opciones, galerías, clonar campos, y así sucesivamente. Sólo un montón de cosas que obtienes con este plugin realmente, realmente genial. En fin, la versión gratuita es más que suficiente para lo que necesitamos aprender aquí. Entonces, lo que puedes hacer es volver a entrar en tu panel de WordPress. Y vamos a ir a Plugins y luego Add New. Y en realidad podemos simplemente buscar esto. Por lo que diremos campos personalizados avanzados. Y es ésta de aquí, 1 millón de instalaciones. Y puedes ver que hay un montón de otros plug-ins y tipo de expandirse en las ya masivas listas de campos en las que han incorporado. Para que puedas ver que hay una Gravity Forms, agregar en Font, Awesome, agregar en Table sentir que en extendido y así sucesivamente. Entonces una vez que eso esté descargado, adelante y haga clic en Activar. Y ahora podemos ir a campos personalizados y a la barra lateral. Y una visión rápida de esto, este plugin aquí. Entonces lo que queremos hacer, Volvamos a eso. Por lo que este dashboard aquí, la página de inicio de los campos personalizados avanzados, si se quiere. Aquí es donde vas a administrar todos tus campos personalizados que usan, han configurado para lo que sea. Páginas publican tipos de publicaciones personalizados, lo que sea que se te ocurra, páginas de categorías y así sucesivamente. Esto es que vamos a manejar todo eso. Entonces lo que me gusta hacer es hacer clic en Agregar Nuevo, y dividirlos en diferentes grupos basados en la página. Entonces para este grupo, solo le voy a nombrar la página de inicio y las reglas de ubicación. Aquí es donde en realidad vas a designar este grupo de campos para mostrar únicamente la publicación específica o la página específica que quieres que se haga. Entonces lo que tenemos que hacer es decir, podemos hacerlo de un par de maneras diferentes. Si quisiéramos que solo estuviera en cualquier página, podríamos simplemente cambiar de publicar una página. Y ahora en cualquier momento que creemos una nueva página, estos campos se mostrarán ahí arriba, pero queremos ser un poco más específicos. Por lo que en realidad queremos apuntar a la plantilla de página. Y si es igual a la plantilla de la página de inicio que creamos, queremos que aparezcan estos campos. Genial, Así podemos seguir adelante y dejar eso y podemos hacer clic en Agregar campo. Entonces lo que voy a hacer es en lugar de usar ese editor predeterminado de Gutenberg WordPress para nuestra frase, solo voy a decir frase de héroe. Y luego Tad, eso realmente crea el nombre del campo por defecto con un subrayado. Sustituye los espacios por guiones bajos. También puedes cambiar esto si quieres que sea un poco diferente. Podemos dejar este conjunto al texto. Normalmente lo pongo a un editor wysiwyg si voy a estar construyendo toda la sección. Entonces en realidad voy a hacer eso aquí. Voy a cambiar esto por contenido de héroe y contratenor de héroe. Tan solo sé un poco más específico. No me gusta set nada se requiere a menos que sea absolutamente necesario. Esto se pone un poco complicado si regresaras una vez que tengas tu sitio web construido un poco más. Y quieres volver atrás y ajustar algunos ajustes o hacer páginas nuevas, deshacerte de páginas, cosas así. Si alguna vez requieres campos, se pone un poco complicado. Simplemente asegurándome de que todo coincida. Por lo que me gusta dejar todo como no se requiere. Y podemos dejar el resto como está. Genial. Entonces sigamos adelante y publicemos esto. Y lo que esto hace es simplemente guardar nuestra configuración aquí. Podemos volver a nuestra página de inicio de páginas. Y ahora como nuestra plantilla está configurada en la plantilla de la página de inicio, ahora podemos ver nuestro grupo personalizado aquí, que acaba de etiquetar homepage en con el contenido del héroe con un editor wysiwyg. Entonces, lo que podemos hacer en realidad es simplemente copiar esa frase y luego simplemente pegarla aquí. Y voy a ver la página muy rápido antes de guardar nada. Y en realidad sólo voy a agarrar este. Y ponlo aquí también. Genial, Así que tenemos un H1, déjame tener sólo un párrafo debajo de él. Estoy dando clic en Actualizar y luego ver la página. Está bien, así que nos deshicimos de esa sentencia, así que eso se ha ido y entonces el título sigue ahí. Entonces esto es lo que tenemos que hacer ahora es volver a nuestro editor de código. Y podemos deshacernos de este alinear aquí, este elemento H1. Y podemos deshacernos de este párrafo aquí mismo. Y todo lo que tenemos que hacer en este momento es decir, se ha abierto nuestros corchetes PHP y decir el contenido del héroe de campo. Entonces este es el nombre del campo que acabamos de crear. Y el campo, esto es un, esto es una función avanzada de campos personalizados por defecto que en realidad llama a este campo desde la base de datos. Entonces sigamos adelante y guardemos eso y actualicemos nuestra página. Y ahora vemos aquí nuestros elementos H1. Nuestro texto de párrafo está aquí, y luego los botones estuvieron ahí todo el tiempo. Genial. Y así se puede ver que aquí no tenemos texto codificado. Simplemente está sacando esto de la base de datos. Y podemos cambiar este contenido. Podemos simplemente copiar esto un par de veces más sólo para que tengamos un poco más de texto ahí dentro. Está bien. Perfecto. Entonces todo está funcionando exactamente como lo queremos. Podemos hacer lo mismo aquí por estas tarjetas. En realidad podemos utilizar campos personalizados avanzados para eso también. Podemos incluso hacerlo para el pie de página. Por lo que en realidad les mostraré cómo hacer estas dos cartas en esta sección. Entonces lo que queremos hacer es, lo siento, volver al panel de control, los campos personalizados avanzados son los dashboards y agregar nuevos. Queremos saltar de nuevo a la página principal y añadir un campo. Entonces para hacer las cosas un poco simplificadas aquí, sólo vamos a decir izquierda, tarjeta izquierda. Y entonces realmente vamos a hacer de éste un grupo. Y luego dentro del grupo tenemos subcampos. Entonces si volvemos a nuestra página de inicio, podemos hacer el título y el subtítulo. En realidad, vamos a cambiar de nuevo. Entonces tenemos un H5 y está bien, genial, Sí, podemos hacer esto como un solo editor wysiwyg y en realidad podemos agregar un elemento para hacer este enlace, lo hará tanto por el lado izquierdo como por el lado derecho. Volvamos al editor de campo aquí vamos a añadir un campo. Sólo diremos título y subtítulo. Y solo para limpiar eso un poco, diremos título subrayado subtítulo, cambie esto a editor wysiwyg. Y eso es todo lo que tenemos que hacer para eso. Y luego aquí diremos botón, botón, y luego podremos cambiar esto para ver qué queremos solo para esto. Queremos un enlace. Y bueno, entonces ahora lo que podemos hacer aquí tenemos la tarjeta izquierda. Los campos personalizados avanzados lo hacen realmente fácil. Podemos simplemente duplicar y luego cambiar esto para decir o escribir tarjeta, tarjeta derecha. Y entonces podemos mantener estos iguales. Y luego podemos actualizar esto y saltar de nuevo al editor de la página de inicio. Y ahora se puede ver dónde está la tarjeta de la izquierda y la de la derecha. Y lo que voy a hacer es simplemente copiar este contenido, pegarlo aquí, y creer que es lo mismo para ese. Lo es, voy a guardar eso. Y luego el botón podemos seleccionar un enlace. Sólo voy a hacer un enlace de marcador de posición. Yo creo. Lo mismo aquí abajo. De acuerdo, estamos todos arreglados aquí. Se va a actualizar. Será la página otra vez, nada va a cambiar. Pero lo que sí quiero mostrarles chicos es la documentación avanzada de campos personalizados. Es realmente, realmente genial. Muestra muchos ejemplos sobre cómo utilizar prácticamente todos los campos con algunos ejemplos diferentes para cada uno. Entonces, lo que puedes hacer es en realidad sólo buscar, que se hace clic en la capa incorrecta. Vamos a la documentación. Y entonces sólo vamos a decir grupo. Desplazémonos hacia abajo. Para que puedas ver el uso de plantillas. Hay contenidos de visualización, ahí está el ejemplo de bucle, cómo mostrar el mismo grupo usando la función de tener filas. Y sólo vamos a ir simple y sólo copiar este ejemplo de contenido de pantalla. Entonces lo que queremos hacer aquí es que no se han puesto a héroe, conseguir subrayado héroe de campo. Esto se ve muy parecido a lo que ya hemos utilizado en nuestra plantilla, el campo. Entonces la diferencia aquí es si vamos a estar guardando el valor de nuestro campo personalizado dentro de una variable. Queríamos conseguir campo de subrayado. Esto en realidad no muestra el campo y lo establece, simplemente lo tira y luego lo almacena en la variable. Si dijéramos el campo aquí, esto realmente se erroraría. No funcionaría. Entonces esa es la diferencia entre los dos. Si solo quieres mostrar el campo exactamente cómo es, adelante y solo hazlo aunque campo y guárdalo en una variable fui a conseguir campo. Entonces esto es lo que estaremos haciendo. Aquí solo hay un simple cheque para ver si eso realmente tiene algo y luego simplemente lo exhibes como normalmente lo harías. Parece que agregaron algunos estilos aquí. Y acabas de cerrar la declaración if. Genial, así que sigamos adelante y hagamos eso. Podemos hacer justo aquí en la línea 16, solo diremos que carta izquierda es igual y obtenemos campo carta izquierda. Y luego a PHP si tarjeta hendida. Y luego justo después de la tarjeta sólo cerrará esa declaración if. Entonces no lo olvidamos. Y ahora mismo, ya que ese valor está establecido en el editor, si actualizamos la página y aún deberíamos ver el mismo contenido ya que no hemos cambiado nada. Perfecto, así que sigue ahí. Y entonces ahora sólo podemos ajustar esto como necesitamos. Entonces en lugar de codificar el H5 y el párrafo, sólo vamos a decir el campo. Ya olvidé cómo lo llamábamos. Sólo salta de vuelta aquí. Le nombramos subtítulo de título. De acuerdo, voy a copiar eso y luego simplemente pegarlo ahí. Y ahora sólo lo guardaré y refrescaré la página. Y no está ahí. Entonces vamos a ver qué tenemos mal aquí. Bueno, eso es correcto. Ya que estamos usando el campo de grupo, en realidad necesitamos hacer referencia a la variable de campos de grupo y luego decir qué campo quieres dentro de él. Entonces sigamos adelante y cambiemos eso un poco. Pero decía el campo que vamos a decir, está bien, ve a la izquierda tarjeta, y luego vamos a decir subtítulo de título. Perfecto, ahí está. Y notarás que en realidad uso los corchetes en lugar de los paréntesis. Esto es justo lo que usas cuando realmente estás haciendo referencia a un valor o a un campo que está dentro de un grupo. Entonces esa es la diferencia entre los paréntesis getfield y luego el campo de eco desde dentro de un grupo. Por lo que podemos hacer lo mismo por el enlace. Entonces en lugar de sólo el enlace de la palabra, vamos a decir PHP que van botón de la tarjeta izquierda. Y luego como este es un campo de enlace, vamos a decir título. Y luego vamos a copiar esto, exactamente lo mismo aquí y trasladarlo a donde está el HRF. Y luego esto en lugar de título, diremos URL. Entonces guardaremos esa actualización. Y se puede ver nuestro título cambiar el enlace de prueba, que es lo que ponemos en el editor. Y si lo inspeccionamos, se puede ver que el HRF también se cambia a lo que tenemos en el editor. Genial, Así que para hacer el lado correcto, podemos simplemente copiar y pegar, descubriremos es enorme si declaración aquí y simplemente reemplazarlo aquí y cambiar los valores. Entonces en lugar de tarjeta izquierda, sólo queremos derecha, derecha. Y entonces tenemos que cambiarlo aquí también. Y si actualizamos, se puede ver que ese título cambia el enlace de prueba a y luego también se cambia la URL. Perfecto. Por lo que esto es sólo una visión general rápida de muy alto nivel de campos personalizados avanzados y cómo utilizar eso para sacar contenido del editor y en realidad mostrarlo al visitante del sitio web. En la siguiente sección, estaré repasando post en la página o post en la página web. Y en realidad cómo hacer que esos editen la plantilla y en realidad exhiban eso ya sea en formato de blog o simplemente en esta página de inicio en algo así como un diseño de tres columnas. Por lo que esa será la siguiente sección. 12. Publicación de blog: crear, mostrar y estilo: Espero que ustedes estén disfrutando de la clase hasta ahora. En esta sección, vamos a estar repasando las publicaciones del blog y cómo hacerlas editar la plantilla y en realidad conseguir que esos aparezcan en la página web. Entonces, solo saltemos a la derecha en eso. Haz tu camino hacia el panel de WordPress y haz clic en las publicaciones. Por lo que por defecto, WordPress te da el post, tipo post. Esto es típicamente lo que vas a usar cuando estás creando un blog en tu sitio web? Hay tipos de postes personalizados. No estoy seguro si voy a meterme en eso en este curso o no. Es un poco más de un tema de alto nivel. Esto es más por solo los conceptos básicos de crear un tema de WordPress. Pero de todos modos, así que para crear un post wordpress te da este por defecto. Yo sólo voy a seguir adelante y basura eso y sólo añadir uno nuevo. Y diremos título de prueba uno y solo contenido aquí para nuestro post de prueba. Y sólo voy a copiar eso un par de veces para llenarlo. Y lo voy a publicar y luego ver el post. Por lo que esto en realidad está usando una plantilla de página sin estilo, esencialmente acaba de mostrar esta publicación. Está muy sin formato. No hay estilos y aún tiene nuestra vieja barra lateral, pero está usando el encabezado y pie de página que creamos. Entonces eso es bueno. Entonces, vamos a entrar en cómo ajustar realmente esta plantilla aquí. Así que salta de nuevo al editor de códigos. Y se puede ver en el tema de los padres, hay un archivo llamado single.php. Php. Entonces este es en realidad el archivo que WordPress está usando para mostrar esta entrada de blog. Entonces sólo vamos a robarle un poco de código y hacer el nuestro propio. Así que salta al tema infantil y haz un nuevo archivo. Y vamos a llamar a ese punto único PHP. Y en realidad vamos a copiar todo desde el tema padre de un solo punto PHP, y simplemente pegarlo en nuestro archivo de tema infantil. Y vamos a deshacernos de esto. Nos vamos a deshacer de los comentarios. No queremos eso por el momento. Y luego el pie de página principal y vamos a deshacernos de la barra lateral también. También esta principal. Genial. Entonces en este momento tenemos el encabezado, tenemos nuestro bucle de WordPress, y luego tenemos el pie de página. Entonces sigamos adelante y guardemos eso y actualicemos la página ahora mismo no debería mostrar nada. Está bien, Ahora no debe mostrar nada más que el encabezado y el pie de página, que es exactamente lo que queremos. Y entonces ahora sólo vamos a cambiar de nuevo a nuestro editor y en realidad construir esta página. Entonces solo voy a hacer un diseño de dos columnas muy sencillo. Entonces, para empezar, solo vamos a decir contenedor div con una fila, y luego solo vamos a usarlas clases de Bootstrap aquí para hacer el lado del contenido. Y entonces solo haremos una barra lateral aquí. Y diremos cuatro. Perfecto. Entonces diremos grupos del lado izquierdo. Y genial, Así que sigamos adelante y actualicemos eso y solo asegurémonos de que tenemos nuestra configuración de formato y disposición perfecta. Y luego podemos usar algunas funciones predeterminadas de WordPress, un poco de código y en realidad tirar algún contenido de post en esta plantilla. Entonces queremos hacer es sólo decir el título. Y luego diremos PHP, el contenido. Por lo que en este momento esto sólo mostrará el título y el contenido en la página. Perfecto. Obviamente, esto no se ve muy bien en este momento. Entonces cambiemos un poco esto. Entonces digamos que queremos que el título esté en un H1, así que solo haremos una nueva línea. Uno. Vamos a mover esto aquí arriba. Y entonces podemos decir título del blog. Y luego simplemente envolveremos esto en un div por ahora. Y sólo diremos contenido de blog. Perfecto. Y entonces en realidad entraremos en nuestra hoja de estilo personalizado que hicimos. Y sólo diremos título del blog, font-weight, negrita, relleno, en realidad, margen inferior 25, solo para dar algo de espacio. Perfecto. Y luego una cosa más cuando en realidad es empujar esto lejos, todo este contenedor, entero lejos de la cabecera. Entonces volvamos al sencillo y solo diremos post de blog. Simplemente diremos 50 y luego relleno inferior 50 también para alejarlo del pie de página. Refresca esto, ya veremos que surte efecto perfecto, ya luciendo mejor. Digamos que tenemos una imagen destacada para esta entrada de blog. Y en realidad sigamos adelante y agreguemos eso ahora mismo. Por lo que solo haremos clic en Editar Post. Y luego destacaba imagen a la derecha. Simplemente vamos a subir esta imagen. Puedes subir cualquier imagen que quieras. Una actualización. Ahora mismo no va a mostrar nada. Así que vamos a saltar a nuestro editor de código y luego a nuestro archivo single.php PHP. Y justo encima del título, Hagamos una nueva línea con una etiqueta de imagen. Y diremos dentro de la fuente, Es abrir algunos corchetes PHP. Y vamos a decir, aquí arriba, dentro de nuestro bucle, sólo vamos a decir URL de imagen destacada es igual a obtener la URL de la miniatura de la publicación. Y luego dentro vamos a decir conseguir la identificación. Y esta es solo una función predeterminada de WordPress para obtener el ID de la publicación actual que está dentro del bucle. Y luego vamos a establecer el tamaño de la imagen que queremos. Queremos el tamaño completo y acabaremos de cerrar eso. Genial. Entonces en este momento tenemos la URL de la imagen destacada de tamaño completo que acabamos de subir guardada en esta variable. Entonces vamos a guardar eso botón o copiar eso. Y vamos a volver a bajar a nuestra etiqueta de imagen y decir eco esa variable. Y entonces podemos refrescar nuestra página. Y ahora se puede ver nuestra imagen está ahí. Parece que se está superponiendo un poco. Eso también podemos ajustar. Pero esto es genial. Entonces, saltemos a nuestra hoja de estilo y editemos esto. Diremos post de blog. Imagen ancho máximo de 100%, altura. Auto debe contener dentro de nuestra columna. Perfecto. Por lo que luciendo mucho más como una publicación de blog ahora tenemos alguna configuración de espaciado decente. Tenemos nuestra imagen o título y algún contenido en el lado derecho. Aquí suele ser donde mostraríamos artículos similares relacionados con categorías o etiquetas que podría haber configurado. Ahora mismo, solo pondré algunos marcadores de posición ahí, pero en realidad podemos sumergirnos en eso ahora mismo. Entonces dentro del archivo PHP de punto único, este lado derecho, Vamos a hacer un div y llamarlo blog relacionado. Y luego dentro de ese rural, por lo que van a tener una fila que tiene una columna coulomb de poro grande con una imagen. Sólo vamos a dejar eso en blanco por ahora. Y luego la siguiente columna. Este será el título y una frase corta. Vista previa de los contenidos. Vamos a guardar eso y sólo a ver cómo se ve eso. De acuerdo, entonces no tenemos imagen, pero este espaciado se ve bien. Ahí hay un título y luego una vista previa. Genial, Así que en realidad para conseguir algún contenido para aparecer aquí, Vamos a hacer una nueva entrada de blog titular del lugar. Volvamos al tablero. Sólo vamos a nombrar esta prueba. Usaré las mismas imágenes para las pruebas. Y luego algo de contenido aquí. El contenido antes de la prueba 2 es contenido para la prueba dos. Y solo estoy haciendo esto un poco más largo solo para poder mostrarles cómo mostrar una vista previa en lugar de todo el contenido publicado este post. Y oops, en realidad vamos a volver atrás y ver nuestro primer post que hicimos. Y lo que queremos hacer es conseguir que ese segundo post se presente aquí. Para que podamos volver a nuestro editor. Y lo que queremos hacer aquí es básicamente decir si hay otra publicación queremos mostrar este bloque de contenido, esta caja relacionada con el blog que acabamos de crear. Entonces lo que podemos hacer es ejecutar en realidad un, otro bucle de WordPress para obtener publicaciones adicionales en esta página. Necesitamos básicamente tirar otro bucle en la página o abrir ups y paréntesis PHP. Y vamos a decir ARD, que es corto de argumentos. Array. Abre eso y vamos a decir post por página. Pondremos esto en tres. Esto es sólo decir que sólo queremos tres posts dentro de este bucle. En este momento sólo tenemos otro tenedor de plaza. Pero queríamos limitar esto a tres. Diremos el tipo de post, queremos mirar exclusivamente post. Y luego diremos el estado del puesto. Y sólo queremos los posts publicados. Genial. Y luego podemos cerrar esto y luego haremos una nueva línea y decir la consulta que queremos ejecutar, establecer esa variable, diremos nueva consulta WP con nuestro arte que acabamos de establecer. Y luego diremos si esa consulta tiene publicar una consulta. Anfitrión. Queremos agarrar la imagen destacada. Y de nuevo, la imagen destacada es buena, la URL de la miniatura de la publicación. Y entonces ahora vamos a decir conseguir la identificación de este post y el tamaño completo en realidad puede conseguir el pulgar. Ahora. Cierra eso. Y entonces vamos a cerrar de esta manera realmente olvidó el tiempo. Si bien. Los grupos de consulta tienen publicaciones. Y luego aquí abajo, sólo necesitamos cerrar esos. Justo así. No te preocupes, consigue un error aquí en alguna parte. Deshazte de ese soporte ahí. Genial. Entonces ahora mismo tenemos esta línea aquí que en realidad sólo tira en el título de estos post aquí que acabamos de agarrar. Y luego también podemos agarrar la imagen destacada, imagen URL. Y podemos guardar esto y refrescar nuestra página. Y se puede ver ahí tenemos la miniatura y en realidad tenemos ambos posts porque en este momento solo estamos mirando cualquier post y luego agarrando tres de ellos. Entonces por defecto eso en realidad va a agarrar el post actual que estamos viendo, nuestros posts secundarios que acabamos de crear. Por lo que podemos dar un paso más para excluir realmente la publicación actual que estamos viendo porque en realidad no queremos ver eso en nuestros artículos relacionados o similares en nuestra barra lateral. Y para hacer eso, es realmente fácil. Sólo vamos a saltar de nuevo al editor de códigos. Y entonces aquí mismo vamos a añadir otro argumento y sólo vamos a decir post, knock in. Y no voy a decir array loops. Post ID. Adelante y guarde esto, refresca nuestra página. Y eso no lo hizo. Y eso sería porque creo que tengo mis subrayados fuera de lugar. Entonces déjame cambiar de nuevo aquí. Y sí, éste debería ser uno y eso no debería ser demasiado perfecto. Para que eso se deshaga del post actual de estar en la barra lateral. En realidad voy a comentar esa línea solo para que podamos ajustarlos aquí apropiadamente. Y luego lo volveré a agregar. Entonces comentan que tres frescos y luego ahora ven cómo estos son conmovedores. Sólo queríamos un poco de separación aquí. Entonces todo lo que tenemos que hacer es simplemente agarrar esta clase que le dimos guión de blog sin relación, y sólo añadir margen inferior. Sólo diremos 25 pixel. Perfecto. Por lo que ahora tenemos alguna buena configuración de espaciado. Ahora solo necesitamos cambiar esta frase de marcador para sacar el contenido que realmente pusimos en el editor de publicaciones. Entonces para hacer eso, vamos a saltar al punto único PHP. Y luego vamos a decir PHP brackets echo, obtener el guión bajo x. Así. Y esta es otra función predeterminada de WordPress que simplemente tira una cierta cantidad de caracteres del contenido de la publicación y mostrar eso en la página. Entonces vamos a guardar eso y luego refrescar eso. Ahora puedes ver que realmente metemos el contenido real en eso. Si se tratara de párrafos y párrafos de contenido, todavía sólo mostraría un cierto número de caracteres en esta vista previa. Hay algunas cosas ciertas que podemos hacer para realmente hacer esto un poco más pequeño. Podemos guardar el contenido en una variable y luego usar una función PHP para recortar eso. Nuevamente, podemos hacer que la fuente sea más pequeña. Podemos hacer un montón de otras cosas. Ellos un poco de lápiz, estilizan esto un poco más. Pero para nuestros propósitos, este es un buen comienzo aquí. Por lo que la siguiente sección, solo vamos a repasar algunos cabos sueltos aquí con tu desarrollo de tema personalizado de WordPress. Espero que ustedes hayan estado siguiendo a lo largo construyendo su propio sitio de prueba solo para tener una sensación de cómo funciona WordPress, qué puedes hacer con él, qué plugins puedes utilizar el tipo de ampliar la funcionalidad en el back-end. Esto es realmente genial para cuando estás pasando el sitio web a un cliente. De esa manera no tienen que meterse en el código grande para hacer ediciones importantes. Es realmente, realmente útil para eso. Tengo la mitad de un montón de otras cosas. Podría hacerlo curso más adelante en cómo se utilizan los campos personalizados avanzados al máximo y en realidad construir un tema real con elementos bondadosos, elementos funcionales y cosas por el estilo. Entonces espero que ustedes estén emocionados. Gracias chicos por tomar la clase. Como dije en la siguiente sección, vamos a envolver las cosas. 13. Mostrando publicaciones del blog en la página principal: Muy bien, Entonces en esta última sección aquí vamos a estar agregando nuestra entrada de blog a la página de inicio para mostrarlos ahí, así como algunas otras cosas. Entonces lo que vamos a hacer es ir a la página de inicio, delicioso click en el tablero y visitaremos el sitio. Genial, así que estamos de vuelta en la página principal. Y lo que queremos hacer es justo debajo esta tarjeta y esta tarjeta queremos mostrar nuestras dos entradas de blog. Por lo que vamos a saltar de nuevo a nuestro editor de códigos e ir a la plantilla de la página de inicio. Y luego justo debajo de este contenedor de aquí, sólo vamos a hacer un contenedor nuevo. En realidad, podemos hacer esto fuera del bucle. Entonces digamos que hiciste contenedor div row. Y sólo voy a hacer un simple lado a lado, 5050. Y entonces esto se quedará y esto será o ite. Entonces cada vez que se refresquen, asegúrate de que tenemos eso en marcha. Perfecto. De acuerdo, así que ahora todo lo que tenemos que hacer es muy similar a lo que hicimos por la barra lateral de posts de blog relacionados o similares. En realidad podemos copiar la mayor parte de este código. Entonces solo voy a seguir adelante y descomentar esto, copiar todo esto, y moverlo a la página de inicio y pegarlo. Y entonces realmente podemos deshacernos de esto, correcto uno ya que sólo necesitamos uno, porque va a correr dos veces. Para que te lo pueda mostrar en tan solo un segundo. Y entonces sólo tenemos que, nuevo cerrar estas declaraciones. Igual que eso. Genial. Entonces ahora mismo está fijado a tres. Sólo tenemos que publicar y sólo queremos publicar en donde cambiar eso a dos. Podemos deshacernos de la entrada nada y quedarnos con el resto. Y sigamos adelante y sólo cambiemos esto por el título y refresquemos. Y luego se puede ver prueba Tidal una prueba titulada dos, esos son los títulos que le dimos a nuestro blog de placeholder. Entonces esto está funcionando exactamente como queremos. Así que vamos a seguir adelante y darle estilo a esto un poco más bonito. Y de nuevo, podemos robar un poco en este código. Yo sólo voy a agarrar esta característica que ya está ahí. Por lo que sólo necesitamos esta etiqueta de imagen. Títulos. En realidad están quieren envolver en este 84 y los párrafos. Yo sólo voy a recopy y pegar esto aquí. Y luego baja un poco y refresca. Y entonces esto nos debería dar nuestra imagen en miniatura, título y contenido. Quieres ajustar esto solo un poquito. Podemos seguir adelante y cambiar en lugar de miniatura, es una especie de tamaño mediano. Vamos a cambiar estos H2. Y luego quiero envolver todo dentro de su propio div. Y vamos a decir blog, página. Perfecto. Este archivo sólo un poquito, y luego límpialo. Uno más. Genial. Ve y refresca esto, a ver qué obtenemos. Perfecto, por lo que la imagen es un poco más grande. En realidad solo voy a cambiar el ancho completo solo para que los tengamos. El efecto real aquí, porque eso es lo que realmente queremos. Perfecto. Entonces, de nuevo, es una especie de superposición. Eso lo vamos a arreglar con algunos estilos en tan solo un segundo, pero tenemos un, lo que queremos. Entonces tomemos esta clase y saltemos a nuestra hoja de estilo personalizada. Y vamos a decir que la imagen también debe ser de ancho máximo a 100% auto. Bueno, también queremos hacer justamente esta clase. Queremos dar un margen superior de 50, margen inferior de 50. Y entonces vamos a darle un poco de frontera y tal vez algo de relleno. A ver cómo se ve eso. Está bien, Así que se ve bien, haciendo coincidir un poco el tamaño de la tarjeta, no del todo lo mismo. Podemos ajustar eso, darle un poco de radio de frontera. Sólo di cinco píxeles. Y cambiemos esto por algo tal vez un poco más ligero, tal vez un poco demasiado ligero, pero obtienes el punto. ve bien. Podemos continuar con esto. Podríamos agregar un botón que diga leer más que enlaza con el artículo. Podríamos cambiar el tamaño de la imagen, agregar más contenido y así sucesivamente. Pero así es básicamente como sacas una publicación de blog a una plantilla de página. En realidad podemos enlazar a esto para que pueda mostrarles que se remonta a esa plantilla. Entonces, cada cosa, vamos a envolver todo esto aquí dentro de un enlace. Y este enlace tendrá la amplitud H de eco, consigue el permalink. Y todo esto hace es una plantilla de WordPress, nuestra función de nuevo, que obtiene el enlace a la publicación que es la publicación actual en el bucle y simplemente la pone aquí. Entonces vamos a seguir adelante y guardar eso y refrescar. Y ahora puedes ver todo esto cambiado a un enlace y solo podemos hacer clic en él y nos llevará derecho a nuestra plantilla de Post de nuevo estilo. Verdadero rápido. Simplemente ajustaré esto. Estos enlaces, textos, color negro. Y vamos a volver cono. Y eso no está cambiando qué página de inicio, ambos enlace de la página principal está fuera. Entonces podemos hacer aquí es un blogs. Y luego sólo cambia esto para decir. Muy bien, Perfecto, exactamente lo que queremos. 14. Conclusión del curso: Está bien, Así que eso concluye este curso. Gracias chicos por tomar el curso. Espero que ustedes lo hayan hecho todo el camino a través y les haya parecido útil y su viaje a la construcción de su primer tema personalizado de WordPress. De verdad disfruto enseñándolo si ustedes tienen alguna pregunta, siéntanse libres de preguntar. De verdad con ganas de ver lo que ustedes armaban. Esto ha sido muy emocionante, armar este curso, espero hacer más en el futuro y espero que ustedes sigan regresando y aprendiendo de mí. Entonces gracias de nuevo. Espero que haya disfrutado el curso.