Asignando theme supports

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

Carlos Eduardo Santaella Guevara

student•

el profe tuvo una equivocación al momento de poner el <?php the_custom_logo(); ?> ya que el lugar con el que lo reemplazo era el icono del menú cuando esta en mobile, de nada! :D

Gustavo Amarista

student•

En efecto, para el momento del dev, reemplacé en ambas lineas 16 y 20 el the_custom_logo.

Y se ven los dos logos en mobile mode

Josué Eduardo Apén Bal

student•

¿Y eso cómo se arregla?

Federico Alberto Rojas

student•

En nuevas versiones de WordPress Para los que el logo de Yard Sales no les aparezca entre las imágenes al clickear 'upload files': -> Es porque necesitan primero permitir la subida de formato .svg

Una solución es agregar en functions.php y en wp-config.php lo siguiente

functions.php agregar el siguiente código

function cc_mime_types($mimes)
{
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Y luego en el archivo wp-config.php que se encuentra en la carpeta raíz de la instalación de WordPress agregar esto

define('ALLOW_UNFILTERED_UPLOADS', true);

Esto va a hacer que puedan subir .svg aunque si e hará en un sitio online se recomienda usar un plugin como este que es gratuito: Safe SVG

Federico Alberto Rojas

student•

El plugin Safe SVG es porque los SVGs necesitan ser desinfectados. La sanitización es básicamente la limpieza de código o entrada para evitar problemas de seguridad (como la inyección de código), conflictos de código y errores.

Alvaro H. Ruiz V.

student•

Por un curso de todos los theme suports y formas de dar estilos personalizados las paginas y post! XD va genial el curso <3

Andrés Felipe Patiño Vallejo

student•

Pueden utilizar esta herramienta:

https://generatewp.com/theme-support/

Para crear código personalizado y agregar las características del tema con la función add_theme_support ();

Carlos Perilla

student•

Parece algo obvio pero es buena idea desactivar Ad-Block, al customizar el logo me daba problemas, porque uso Brave, y tenía los escudos arriba. Espero que este tip le sirva a alguien más.

César Luis Amundaray Rodríguez

student•

Si el logo les queda grande después de seleccionar la imagen, deben escalarla a 170x35.

Carlos Alfredo Piedrahita Rodriguez

student•

Error con el "Crop Image" Trabajo con Xampp, y tenía un problema cuando intentaba hacer el "crop image" del logo, salía un error y no dejaba. Después de mucho buscar encontré que había un problema con una librería de php que no estaba habilitada.

La solución fue editar el "php.ini" , buscar la linea de la librería "extension=gd" y quitar el ";" del comienzo, para habilitarla. Para que vuelva a cargar el archivo php.ini se debe apagar y volver a encender el servidor de Apache y MySql desde xampp.

Tampoco me funciona muy bien tener el flex en el array, ya que no recorta la imagen al tamaño necesario, quedando muy grande. Decidí quitar los flex.

Andrés Vega

student•

Creo que al final coloca el código del logo en el menu hamburguesa y debe ser remplazado es en la sección de Logo.

Camilo Andres Barragan Gomez

student•

Gracias!

fermin martin

student•

Lo explica en el minuto 7:56 de la siguiente clase

Aldo Miguel Ortiz Parodi

student•

7. Agregando theme supports

Hemos aprendido a poder personalizar:

El logo, el favicon y el título.

functions.php

function arudope_theme_supports(){
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('custom-logo',
    array(
        "width" => 170,
        "height" => 35,
        "flex-width" => true,
        "flex-height" => true,
    )
);
}

add_action("after_setup_theme", "arudope_theme_supports");

Documentación:

Jesús Velázquez Jiménez

student•

Título Esta función permite a los temas añadir la etiqueta de título del documento al HTML <head>. add_theme_support('title-tag'); Añadir thumbnail add_theme_support('post-thumbnails');' Logo personalizado

add_theme_support('custom-logo', array(
	"width" => 170,
	"height" => 35,
	"flex-width" => true,
	"flex-height" => true,
));

the_custom_logo();

Frank GP

student•

donde puedo poner las dimensiones del logo? cuando se usa la etiqueta img se puede pero en este caso estamos usando una sintaxis php

Cristian Ramanzin

teacher•

Hola, Frank. Las dimensiones se ponen en el support en el function.php

    add_theme_support('custom-logo',
    array(
        "width" => 170,
        "height" => 35,
        "flex-width" => true,
        "flex-height" => true,
    )
    );

Madelein Espinosa Ramírez

student•

Alguién me puede hacer el favor de ayudarme, ya que no me aparece la opción para colcoar el logo a pesar de que coloqué el código del profe. Además, no sé por qué veo mi página así en este punto. Muchas Gracias!

Cristian Ramanzin

teacher•

¡Hola Madelein! Cuando pasa esto lo primero que tenemos que verificar es si la url de los assets es correcta. Algo rápido que puedes intentar es ir a Ajustes->Enlaces Permanentes y simplemente darle guardar. Con respecto al logo, cópiame el código de tu archivo functions.php para que veamos que puede estar pasando.

Rodrigo Alles

student•

Apuntes

Asignando Theme Supports en WordPress

Los Theme Supports son funciones que se utilizan en el archivo functions.php de un tema para agregar características específicas a un tema de WordPress. A continuación, se explican algunas funciones Theme Supports comunes que se pueden utilizar en un tema de WordPress.

title-tag

La función title-tag se utiliza para permitir que WordPress genere automáticamente la etiqueta <title> en la cabecera del sitio web. Esto es importante para mejorar la accesibilidad y el SEO del sitio web.

add_theme_support( 'title-tag' );

after_setup_theme

La función after_setup_theme se utiliza para definir las características del tema después de que se ha configurado el tema. Esto es importante para asegurarse de que todas las características del tema se establezcan correctamente.

add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
    // Theme setup code here
}

post-thumbnails

La función post-thumbnails se utiliza para permitir que las imágenes destacadas se muestren en las publicaciones. Es importante asegurarse de que los tamaños de imagen estén configurados correctamente para evitar problemas de carga de página.

add_theme_support( 'post-thumbnails' );

Para mostrar la imagen destacada en una publicación, se puede utilizar la siguiente función en el archivo single.php del tema:

<?php if ( has_post_thumbnail() ) : ?>
    <div class="post-thumbnail">
        <?php the_post_thumbnail(); ?>
    </div>
<?php endif; ?>

custom-logo

La función custom-logo se utiliza para permitir que se muestre un logotipo personalizado en el sitio web. La función también permite definir el tamaño y la posición del logotipo.

add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

En este ejemplo, el logotipo tendrá una altura de 100 píxeles y una anchura de 400 píxeles. La opción flex-height permite que la altura del logotipo sea flexible y la opción flex-width permite que la anchura del logotipo sea flexible.

Para mostrar el logotipo en el archivo header.php del tema, se puede utilizar la siguiente función:

<?php if ( has_custom_logo() ) : ?>
    <div class="site-logo"><?php the_custom_logo(); ?></div>
<?php endif; ?>

Conclusión

Los Theme Supports son funciones importantes que se utilizan en el archivo functions.php de un tema de WordPress para agregar características específicas a un sitio web. Al utilizar estas funciones, se puede personalizar fácilmente el tema para satisfacer las necesidades específicas de cada sitio web.

Ivan Luna

student•

que brutal esta clase!

Freddy Rafael Peñalver Nuñez

student•

desde este recurso https://generatewp.com/theme-support/ que encontré por internet, puede ser que sirva para los support para los theme

Alvaro Ruiz

student•

Gracias! interesante!

Jorge Molina Sotoca

student•

No funciona en WordPress el siguiente código para mostrar las imágenes destacadas en los post.

¿Alguien sabe qué ocurre?

function plz_theme_supports(){
    add_theme_support('title-tag');
    add_theme_support( 'post-thumbnails' );
}

add_action("after_setup_theme", "plz_theme_supports");

Roney Sebastian Rodriguez Huertas

student•

Hola Profe, en caso de que yo tenga diferentes logos, por ejemplo mi plantilla tiene un icono que encoge el menú por ende el logo se tendría que colocar más pequeño en caso de quitar y biseversa, al volverlo a presionar muestra el logo y texto ¿se podría hacer algo allí?

Jorge Luis Paiva Huamán

student•

Consulta. De qué forma podemos setear para que la ruta de las imágenes que se suben se depositen en una caperta personalizada? Ej: en /imagenes/productos/*.jpg

Diego Andrés González Díaz

student•

Hola a todos, una pregunta ¿Cómo puedo modificar el tamaño del logo desde el admin?

En muchas plantillas tienen la opcción de ajustarlo por una barra deslizable

Eloy Chávez Dev

student•

Holiii 👋🏻

Esto dependerá de la plantilla que estés utilizando, normalmente todas las plantillas cuentan con una página explicando que funciones tienen y donde encontrar estas opciones.

Diego Andrés González Díaz

student•

Estoy desarrollando mi propia plantilla pero tengo la duda de como generar este desde php

Nery Alejandra Fierro

student•

por que mi logo no funciona de manera responsive, le puse de medidas 35x40 y estoy cargando una imagen de 350 x 400 y no se adapta

Jhon Edward Bedoya

student•

🟢 Hello!

¿Podrías subir una captura de pantalla para guiarte de una manera precisa? 🤗

Un abrazo de gol! 🦾

function arudope_theme_supports(){
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('custom-logo',
    array(
        "width" => 170,
        "height" => 35,
        "flex-width" => true,
        "flex-height" => true,
    )
);
}

add_action("after_setup_theme", "arudope_theme_supports");

Asignando theme supports

Comenzando nuestro theme

Conversión de Plantillas HTML a Temas de WordPress

Instalación de LocalWP en Windows para WordPress

Creación de un Tema de WordPress desde Cero

Armar estructura del Theme

Armando los archivos de nuestro Theme

Hooks

Agregando de funcionalidades de WordPress a nuestro theme

Asignando theme supports

Registrar y mostrar menúes

Registrando sidebars para nuestros Widgets

Personalizar el Loop de WordPress

Creando un Custom Post Type

Listando nuestros productos

Refactorizando nuestro código

Cierre del curso

Cierre del curso