Cómo habilitar el panel de imágenes de encabezado personalizado en WordPress 3.0

Si ustedes no han tenido la oportunidad de probar WordPress 3.0, entonces se están perdiendo. Hemos creado numerosas publicaciones sobre las características de WordPress 3.0 y también hemos mostrado capturas de pantalla de WordPress 3.0. Una de las actualizaciones dignas de mención en esta versión es un nuevo tema predeterminado llamado Veinte diez. Este tema tiene muchas funciones excelentes habilitadas, pero una de las funciones que muchos usuarios desean es el Panel de encabezados personalizados. En este artículo, compartiremos con usted cómo puede habilitar encabezados personalizados con un panel de administración de back-end en WordPress 3.0.

¿Qué hará exactamente esta característica??

Creará una pestaña en su panel de administración que le permitirá cambiar las imágenes del encabezado. Puede registrar imágenes predeterminadas si es un diseñador de temas para dar a los usuarios más opciones. También permite a los usuarios cargar imágenes personalizadas para el encabezado. Por último, pero ciertamente no menos importante, esta función utiliza miniaturas de las publicaciones en las páginas de una sola publicación. Si la miniatura de la publicación es lo suficientemente grande como para ajustarse al tamaño del encabezado, usará la miniatura de la publicación como encabezado en lugar de la imagen predeterminada. Si tu miniatura es más grande, entonces la recortará para ti.

Mira el Screencast

Cómo agregar esto?

Tomamos el código directamente de Twenty Ten's funciones.php expediente. Necesitas pegar los siguientes códigos en tu tema funciones.php expediente.

 array ('url' => '% s / images / headers / berries.jpg', 'thumbnail_url' => '% s / images / headers / berries-thumbnail.jpg', 'description' => __ ('Berries' , 'yourtheme')), 'cherryblossom' => array ('url' => '% s / images / headers / cherryblossoms.jpg', 'thumbnail_url' => '% s / images / headers / cherryblossoms-thumbnail.jpg ',' description '=> __ (' Cherry Blossoms ',' yourtheme ')),' cóncavo '=> array (' url '=>'% s / images / headers / concave.jpg ',' thumbnail_url '=> '% s / images / headers / concave-thumbnail.jpg', 'description' => __ ('Concave', 'yourtheme')), 'fern' => array ('url' => '% s / images / headers / fern.jpg ',' thumbnail_url '=>'% s / images / headers / fern-thumbnail.jpg ',' description '=> __ (' Fern ',' yourtheme ')),' forestfloor '=> array ('url' => '% s / images / headers / forestfloor.jpg', 'thumbnail_url' => '% s / images / headers / forestfloor-thumbnail.jpg', 'description' => __ ('Forest Floor' , 'yourtheme')), 'inkwell' => array ('url' => '% s / images / headers / inkwell.jpg', 'thumbnail_url' => '% s / images / headers / inkwell-t humbnail.jpg ',' description '=> __ (' Inkwell ',' yourtheme ')),' path '=> array (' url '=>'% s / images / headers / path.jpg ',' thumbnail_url ' => '% s / images / headers / path-thumbnail.jpg', 'description' => __ ('Path', 'yourtheme')), 'sunset' => array ('url' => '% s / images / headers / sunset.jpg ',' thumbnail_url '=>'% s / images / headers / sunset-thumbnail.jpg ',' description '=> __ (' Sunset ',' yourtheme '))));  terminara si; if (! function_exists ('yourtheme_admin_header_style')): / ** * Da estilo a la imagen del encabezado que se muestra en el panel de administración Apariencia> Encabezado. * * Se hace referencia a través de add_custom_image_header () en yourtheme_setup (). * * @since 3.0.0 * / function yourtheme_admin_header_style () ?> #headimg height: px; ancho: px;  #headimg h1, #headimg #desc display: none;   

Eso es jibbrish para mí. Por favor explique

Por supuesto, esto podría parecerle a algunos de ustedes. Esto es principalmente para diseñadores de temas, pero haremos nuestro mejor esfuerzo para desglosarlo. Antes de comenzar, asegúrese de copiar y pegar este código en su editor de código, para que pueda hacer los cambios necesarios..

Nota: estamos utilizando / images / headers / como el directorio donde almacenará sus imágenes de encabezado predeterminadas.

• Inicia el código creando una función yourtheme_setup ().
• En la línea 21, definimos la imagen del encabezado por defecto. Tenga en cuenta que hay una variable% s que es básicamente un marcador de posición para el URI del directorio de temas.
• Las líneas 25 y 26 es donde se define el ancho y la altura de la imagen. Por defecto, se establece en 940px de ancho y 198px de alto. Puedes cambiarlo editando esas dos líneas..
• A partir de la línea 42, comenzamos a registrar los encabezados predeterminados. Estas son las imágenes que se mostrarán como una opción de botón de radio en su panel de administración. Si necesita más opciones, simplemente siga el formato que está utilizando.
• En la línea 95, elegimos el estilo del encabezado. No necesita cambiar estas configuraciones porque ya las definió en las líneas 25 y 26.

Eso es todo lo que estás haciendo para el archivo functions.php del tema. A continuación veremos cómo agregará esto a su tema..

Código para agregar en su tema

Este código probablemente irá en el tema de header.php expediente. Puedes peinarlo como quieras..

ID) && (/ * $ src, $ width, $ height * / $ image = wp_get_att_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'post-thumbnail')) && $ image [1]> = HEADER_IMAGE_WIDTH): Tenemos una nueva imagen de cabecera! echo get_the_post_thumbnail ($ post-> ID, 'post-thumbnail'); else:?>  

¿Qué hace este código??

• Primero, está comprobando si se trata de una sola publicación o una página. También verifica si esta publicación / página tiene una miniatura, y si es lo suficientemente grande.
• Si la página es una sola página y tiene una miniatura lo suficientemente grande, entonces muestra la miniatura de la publicación específica para esa publicación.
• Si no es una sola página, o la miniatura de la publicación no es lo suficientemente grande, mostrará el encabezado predeterminado.

Esperamos que este tutorial haya sido de ayuda. Recibimos algunos correos electrónicos preguntando acerca de este tutorial, así que dividimos el código del tema de Twenty Ten. Si tiene alguna pregunta, no dude en preguntar en los comentarios..