Tutorial de temas HTML en WordPress: Paso 3-Menus, Widgets and Functions

Ahora estamos en la última parte de nuestra serie de tres partes sobre la creación del primer tema de WordPress de HTML estático. Hasta ahora, ha tomado el archivo index.html, lo ha convertido en un archivo php, agregó etiquetas de plantilla y lo dividió en los archivos de plantilla del tema. Luego ha creado archivos de plantilla adicionales para mostrar diferentes tipos de contenido. En esta parte final terminaremos el proceso de hacer que el tema funcione. Haremos lo siguiente:
Cree un archivo con funciones con algunas funcionalidades esenciales del tema.
Agregue las áreas de widget a la barra lateral y al sótano.
Agregue un menú de navegación que los usuarios puedan completar a través de la pantalla de menús de Administrador de WordPress.
Lo que necesitará para seguir esta publicación, necesitará algunas herramientas:
Una instalación de desarrollo de WordPress, preferiblemente en su automóvil local.
Un editor de código.
El código que ha creado en las partes uno y dos de esta serie: si no lo tiene, puede descargar los archivos que uso.
Asegúrese de hacer este trabajo en un sitio de desarrollo, no en un sitio en vivo: no desea que el mundo vea su tema hasta que esté listo. Crear y completar el archivo con funciones Un archivo con funciones del tema no es un archivo de plantilla: no se usa para mostrar contenido. En cambio, contiene funciones que WordPress utilizará para configurar su tema y sitio.
Si agrega muchas funciones adicionales al archivo con las características, debe crear un complemento. Sin embargo, hay algunas funcionalidades que debe agregar a través de funciones.php y esto agregaremos aquí. Nota: Si desea obtener más información sobre este archivo, consulte nuestra guía final para las funciones del archivo. Configuración del tema Una de las tareas que hace el archivo con funciones es la configuración del tema. Esto incluye cosas como activar los menús de navegación y las imágenes presentadas. En la carpeta de temas, cree un nuevo archivo llamado functions.php y ábralo. Agregue una etiqueta <en su archivo:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Esto agrega:
traducción
Soporte para formatos de publicación
Soporte para la publicación de miniaturas en publicaciones y páginas
Soporte para enlaces RSS
un menú de navegación.
Ahora complete la configuración de traducción abriendo la hoja de estilo. Agregue esta línea al texto comentado desde arriba:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Esto le dice WordPress cuál es el texto del texto para este tema, para que pueda usarse con cualquier código que ponga a disposición para la traducción. Para obtener más información sobre esto, consulte nuestra guía para preparar temas para la traducción. Puede notar que ya hemos incluido un texto en el archivo de características que incluye internacionalización. Esto es para el nombre del menú de navegación en las pantallas de administración. Finalmente, su función está conectada al gancho After_Setup_Theme, sin el cual no se activará. Entonces, el tema ahora está configurado y tenemos un menú de navegación que podemos poblar. Sin embargo, aún no se mostrará en el sitio. Correcemos eso. Agregando un menú de navegación en este momento, el menú es una lista codificada. Reemplacemos esto con una función que mostrará el menú que creamos en las pantallas de administración de WordPress. Abra el archivo Header.php y busque el código de menú:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Reemplácelo con esto:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Esto generará un menú de navegación. Intente agregar un menú a través de la pantalla de menús ahora (después de haber guardado el encabezado y las características con las características).
Aquí está mi menú en el administrador:
Y en el frente de mi sitio:
Agregar áreas de widget El siguiente paso es agregar áreas de widget a la barra lateral y al sótano. Esto reemplazará el contenido codificado pesado que ya está allí. El registro de las áreas de widgets primero debe registrar las áreas de widgets en nuestro archivo de características. Ábralo y agrega eso:

La idea se carga 2B693721668DBA8BCC578B8DE9824642

Registra cuatro áreas de widgets: una en la barra lateral y tres en el sótano, que colocaremos uno al lado del otro. Ahora podrá poblarlos a través de las pantallas de administración, pero no aparecerán en el sitio. Esto se debe a que tenemos que agregarlos a los archivos de plantilla. Para comprender cómo funciona este código, consulte la página Codex desde la función registre_widget (). Agregando un área de widget a la barra lateral primero, agregue nuestro widget desde la barra lateral. Abra el archivo SideBar.php y busque este código:

La idea se carga 2B693721668DBA8BCC578B8DE9824642
Reemplace todo esto con un cheque para ver si el área de widget está poblada y, para mostrar el área de widget y su contenido (es decir, cualquier widgets adicionales):
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Ahora guarde y cierre el archivo.
Cuando actualice su sitio, no verá nada en la barra lateral. Agregue algunos widgets a través de la pantalla de administración de widgets y aparecerán.
Agregar áreas de widget al sótano ahora agregue las tres áreas de widget al sótano. Abra el archivo Footer.php y busque este código:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Verifica cada una de las tres áreas base a su vez y, si se pobla, las emite. Hemos agregado clases de CSS a las áreas de widget flotantes uno al lado del otro y para hacerlas con el ancho correcto. Todos estos están incluidos en la hoja de estilo de mi tema. Los finales metadatos ahora tenemos nuestros widgets y menús en su lugar. El último paso en el archivo de función es agregar el soporte para los metadatos del título. Esto ayudará a los motores de búsqueda a identificar de qué se trata la página. También agregaremos metadatos a nuestro encabezado en la página, en el archivo Header.php. Metadatos para el título del sitio SEO Abra el archivo Header.php. Encuentra esta línea y elimínela:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Si usa su propio archivo estático, el suyo puede ser diferente, pero eso es lo que tengo en el mío. Abra las funciones del archivo.php. Encuentre la gran característica que agregó primero, con todas las funciones de configuración en ella. Agregue esto a la función:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Guarde y cierre el archivo con funciones. Eso es todo lo que tiene que hacer: no tiene que agregar nada al archivo Header.php.
Agregar los metadatos del sitio al encabezado aún no ha configurado el tema para que el título del encabezado se genere automáticamente en lugar de ser codificado. Reparemos eso. En el archivo Header.php, encuentre esta línea:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Editarlo para leer de la siguiente manera:
La idea se carga 2B693721668DBA8BCC578B8DE9824642
Esto completará automáticamente el encabezado con la información que agrega a través de la pantalla Configuración.El tema final ahora echemos un vistazo a nuestro sitio web con un tema completo: ¡Mira bien!Por supuesto, si ha trabajado con su propio HTML estático, el suyo se verá bastante diferente.Es posible que deba pasar un poco de tiempo para ajustar su CSS para asegurarse de que se dirige a todos los elementos de WordPress.
Ahora ha creado su primer tema de WordPress.¡Date una bofetada rotunda, gana la espalda!Este es el comienzo de su carrera de desarrollo de WordPress.Ahora puede agregar más código a su tema. Si lo necesita (usando nuestras guías), puede crear más archivos de plantilla si lo desea y comenzar a usarlo.¡Suerte!
¿Te sientes más seguro en codificar tu propia tarea ahora?¡Dinos en los comentarios!
Etiquetas:
Html

tutorial
Temas de WordPress