Esta lecci\u00f3n del tutorial del tema de WordPress para principiantes contin\u00faa agregando el c\u00f3digo b\u00e1sico requerido para la configuraci\u00f3n del tema. Aprendemos a agregar soportes de temas y, como resultado, se activa la funcionalidad de imagen destacada de WordPress. En esta lecci\u00f3n tambi\u00e9n corregiremos el t\u00edtulo de la portada aplicando nuestro primer filtro.<\/p>\n
Trabajaremos principalmente en Todos los temas necesitan alg\u00fan c\u00f3digo para configurarlo dici\u00e9ndole a WordPress que active ciertas funciones. Esto incluye la activaci\u00f3n de men\u00fas, widgets, traducci\u00f3n, etc. Esto se hace com\u00fanmente en una "funci\u00f3n de configuraci\u00f3n de tema", generalmente enganchada a un gancho convenientemente llamado Configuremos una "funci\u00f3n de tema de configuraci\u00f3n" de este tipo en nuestro Dentro de esta funci\u00f3n, agregaremos un mont\u00f3n de funciones de configuraci\u00f3n comunes y \u00fatiles para los temas de WordPress. Coloque todas las siguientes piezas de c\u00f3digo dentro de su funci\u00f3n de configuraci\u00f3n.<\/p>\n Primero, debemos definir un ancho m\u00e1ximo de im\u00e1genes e incrustaciones (como videos). Esto asegura que cuando los autores inserten im\u00e1genes grandes en las publicaciones, las im\u00e1genes se mantengan dentro de un cierto ancho. Lo configur\u00e9 en 840 p\u00edxeles (porque quiero espacio para la barra lateral), pero puedes ajustarlo a tu gusto.<\/p>\n Tambi\u00e9n debemos informar a WordPress que el tema es traducible y d\u00f3nde puede buscar archivos de traducci\u00f3n. Voy a entrar en detalle en la traducci\u00f3n del tema de WordPress en el siguiente paso<\/a> de esta serie de tutoriales de temas.<\/p>\n Tenga en cuenta el uso de una nueva funci\u00f3n para obtener su directorio de temas, Luego, debemos agregar algunos "soportes de temas", que activan la funcionalidad de WordPress que no est\u00e1 activada de forma predeterminada.<\/p>\n \u00a1Eso fue un mont\u00f3n de Hay muchas m\u00e1s funciones interesantes, por lo que le animo a leer la documentaci\u00f3n de add_theme_support<\/a>. Por ejemplo, hay uno bastante nuevo Tenga en cuenta que si agrega soporte para Finalmente agregamos algunos Aqu\u00ed est\u00e1 la funci\u00f3n de configuraci\u00f3n final en nuestro \u00a1Despu\u00e9s de guardar, ahora deber\u00eda poder agregar im\u00e1genes destacadas a las publicaciones en el administrador! Agreguemos una correcci\u00f3n de tema m\u00e1s en nuestro Agreguemos nuestra primera funci\u00f3n de modificaci\u00f3n de filtro adecuada, usando \u00a1 Recuerde devolver siempre<\/strong> la variable filtrada en sus funciones de filtro! Todos los filtros modifican una variable, y si no devuelve nada, la variable queda indefinida. Esto puede causar muchos problemas. Para obtener m\u00e1s informaci\u00f3n sobre los filtros, echa un vistazo a mi publicaci\u00f3n que explica todo sobre los ganchos y los filtros<\/a>.<\/p>\n Solo queremos personalizar la variable de t\u00edtulo si estamos en la p\u00e1gina principal. Para todas las dem\u00e1s p\u00e1ginas, queremos dejarlo solo (simplemente devu\u00e9lvalo tal como est\u00e1). Pero, \u00bfc\u00f3mo sabemos cu\u00e1ndo estamos en la primera plana?<\/p>\n Podemos aprovechar las etiquetas condicionales de WordPress<\/a>, que son un mont\u00f3n de funciones \u00fatiles que devuelven verdadero o falso en funci\u00f3n de una condici\u00f3n. Estos se usan m\u00e1s com\u00fanmente para preguntar si estamos en una determinada p\u00e1gina o plantilla. Simplemente podemos preguntar "\u00bfEstamos en la portada?". Si este m\u00e9todo devuelve verdadero, solo entonces modificaremos la variable de t\u00edtulo.<\/p>\n Vale la pena se\u00f1alar que hay dos etiquetas condicionales para la p\u00e1gina principal, a saber, Ahora sabemos qu\u00e9 filtro usar y c\u00f3mo asegurarnos de que solo cambiamos el t\u00edtulo si estamos en el lugar correcto. Pero, \u00bfcu\u00e1l deber\u00eda ser el t\u00edtulo? Por lo general, el t\u00edtulo de la p\u00e1gina principal ser\u00eda el nombre de su sitio de WordPress. Pero, \u00bfc\u00f3mo obtenemos esa informaci\u00f3n?<\/p>\n Para recuperar informaci\u00f3n sobre la instalaci\u00f3n actual de WordPress usamos la Si actualiza su p\u00e1gina principal, \u00a1deber\u00eda ver que el nombre de su sitio aparece en la Anteriormente, cuando configuramos los soportes de temas, agregamos soporte para im\u00e1genes destacadas. Con esto activado, ahora podemos generar estas im\u00e1genes en nuestras plantillas. \u00a1Hag\u00e1moslo ahora!<\/p>\n \u00c1brete Si su publicaci\u00f3n no tiene una imagen destacada, no ver\u00e1 nada despu\u00e9s del t\u00edtulo. Sin embargo, si configura una imagen destacada en una de sus publicaciones, functions.php<\/code>el archivo que agregamos en la lecci\u00f3n anterior<\/a>. Al final, agregaremos c\u00f3digo para generar im\u00e1genes destacadas dentro de nuestras plantillas.<\/p>\nConfiguraci\u00f3n del tema<\/h2>\n
after_setup_theme<\/code>. Para algunas cosas espec\u00edficas, necesitamos usar el gancho de inicializaci\u00f3n de WordPress llamado init<\/code>.<\/p>\nEscribiendo el c\u00f3digo de configuraci\u00f3n del tema necesario para
after_setup_theme<\/code><\/h3>\nfunctions.php<\/code>, conectado a after_setup_theme<\/code>:<\/p>\nadd_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n\u00a0\n}<\/code><\/pre>\n$GLOBALS['content_width'] = 840;<\/code><\/pre>\nload_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');<\/code><\/pre>\nget_stylesheet_directory()<\/code>. Esto es muy similar a get_stylesheet_directory_uri()<\/code>lo que encontramos en el \u00faltimo paso, pero aqu\u00ed necesitamos la ruta relativa, no la URL.<\/p>\nadd_theme_support('automatic-feed-links');\nadd_theme_support('post-thumbnails');\nadd_theme_support('html5', [\n 'search-form',\n 'comment-form',\n 'comment-list',\n 'gallery',\n 'caption',\n]);\nadd_theme_support('custom-logo', [\n 'height' => 100,\n 'width' => 300,\n 'flex-width' => true,\n 'flex-height' => false,\n]);\nadd_theme_support('customize-selective-refresh-widgets');<\/code><\/pre>\nadd_theme_support<\/code>llamadas! Como su nombre lo indica, add_theme_support<\/code>le dice a WordPress que active funciones que no est\u00e1n activadas de forma predeterminada. Por ejemplo, im\u00e1genes destacadas ("post-thumbnails"), soporte para etiquetas HTML5 y la funci\u00f3n de logotipo personalizado de WordPress en el Personalizador (\u00a1ajuste la imagen del logotipo deseada si lo desea!).<\/p>\ntitle-tag<\/code>, que maneja la etiqueta del t\u00edtulo. Lo omit\u00ed en este tutorial porque ya agregamos la etiqueta de t\u00edtulo header.php<\/code>manualmente.<\/p>\ntitle-tag<\/code>, debe eliminar la etiqueta de t\u00edtulo de su archivo de encabezado para evitar que se dupliquen las etiquetas de t\u00edtulo.<\/p>\nadd_theme_support<\/code>para el nuevo Gutenberg en WordPress. Agregaremos soporte para secciones anchas, activando la funcionalidad de estilos de bloque y soporte para incrustaciones receptivas:<\/p>\nadd_theme_support('wp-block-styles');\nadd_theme_support('align-wide');\nadd_theme_support('responsive-embeds');<\/code><\/pre>\nEl resultado final<\/h3>\n
functions.php<\/code>:<\/p>\nadd_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n $GLOBALS['content_width'] = 840;\n \/\/ Make your theme ready for translation\n load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');\n \/\/ Add theme support for WordPress functionality\n add_theme_support('automatic-feed-links');\n add_theme_support('title-tag');\n add_theme_support('post-thumbnails');\n add_theme_support('html5', [\n 'search-form',\n 'comment-form',\n 'comment-list',\n 'gallery',\n 'caption',\n ]);\n add_theme_support('custom-logo', [\n 'height' => 100,\n 'width' => 300,\n 'flex-width' => true,\n 'flex-height' => false,\n ]);\n add_theme_support('customize-selective-refresh-widgets');\n \/\/ Add theme support for Gutenberg specific functionality\n add_theme_support('wp-block-styles');\n add_theme_support('align-wide');\n add_theme_support('responsive-embeds');\n}<\/code><\/pre>\nfunctions.php<\/code>antes de agregar im\u00e1genes destacadas a nuestras plantillas; \u00bf Recuerdas que wp_title<\/code>por header.php<\/code>defecto no podemos hacer eco de nada en la p\u00e1gina principal? Arreglemos eso.<\/p>\nAgregar un filtro a
wp_title<\/code><\/h2>\nadd_filter()<\/code>. El filtro al que nos conectaremos tiene el mismo nombre que la funci\u00f3n que usamos para WordPress para obtener din\u00e1micamente el t\u00edtulo de la p\u00e1gina; wp_title<\/code>. Lo que arreglaremos es asegurarnos de que el t\u00edtulo no est\u00e9 vac\u00edo en la p\u00e1gina principal, que es el predeterminado en WordPress. Cuando est\u00e9 en la p\u00e1gina principal, queremos que se complete con el nombre del sitio de WordPress.<\/p>\nSaber cu\u00e1ndo personalizar el t\u00edtulo<\/h3>\n
is_home()<\/code>y is_front_page().<\/code>Estas difieren seg\u00fan su configuraci\u00f3n de "Lectura", ya sea que su p\u00e1gina principal muestre o no las \u00faltimas publicaciones o est\u00e9 configurada en una p\u00e1gina fija. Si sigue este tutorial con una nueva instalaci\u00f3n de WordPress con la configuraci\u00f3n predeterminada, utiliza is_front_page()<\/code>.<\/p>\nObtener el nombre del sitio de WordPress<\/h3>\n
bloginfo()<\/code>funci\u00f3n. Como par\u00e1metro, solicitamos devolver el nombre del sitio, lo que se hace configurando el par\u00e1metro en ‘ name<\/code>‘. Y debido a que este es un filtro y necesitamos devolverlo, no repetirlo, usamos su m\u00e9todo hermano get_bloginfo()<\/code>. La llamada bloginfo()<\/code>siempre generar\u00e1 un eco de salida.<\/p>\nadd_filter('wp_title', 'wptutorial_title_filter');\nfunction wptutorial_title_filter($title) {\n if (is_front_page()) {\n return get_bloginfo('name');\n }\n return $title;\n}<\/code><\/pre>\n<title><\/code>etiqueta (y en la pesta\u00f1a del navegador)! Nuestro filtro afecta solo a la p\u00e1gina principal, por lo que cualquier otra p\u00e1gina, como una publicaci\u00f3n \u00fanica, deber\u00eda devolver lo mismo que antes; el t\u00edtulo de la publicaci\u00f3n.<\/p>\nSalida de im\u00e1genes destacadas en archivos de plantilla<\/h2>\n
index.php<\/code>y encuentra un lugar para ellos dentro del bucle. Eleg\u00ed colocarlo despu\u00e9s del t\u00edtulo, pero t\u00fa decides d\u00f3nde los quieres. Utiliza la funci\u00f3n the_post_thumbnail()<\/code>para generar la imagen. Se recomienda verificar primero si la publicaci\u00f3n incluso tiene una imagen destacada, lo cual hacemos usando has_post_thumbnail()<\/code>.<\/p>\n...\n <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?><\/a><\/h2>\n <?php if (has_post_thumbnail()) {\n the_post_thumbnail();\n } ?>\n <?php the_excerpt(); ?>\n...<\/code><\/pre>\nthe_post_thumbnail()<\/code>generar\u00e1 una <img><\/code>etiqueta con la imagen elegida. Esta funci\u00f3n acepta algunos par\u00e1metros adicionales. Por ejemplo, puede definir qu\u00e9 tama\u00f1o de imagen desea usar y controlar los atributos agregados a la imagen. Como de costumbre, le animo a que eche un vistazo r\u00e1pido a la documentaci\u00f3n<\/a> y la ajuste a su gusto.<\/p>\nDocumentaci\u00f3n sobre los m\u00e9todos utilizados<\/h2>\n