Si ustedes no han tenido la oportunidad de probar WordPress 3.0, entonces se lo están perdiendo. Hemos creado numerosos posts 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 por defecto llamado Twenty Ten . Este tema tiene muchas características excelentes habilitadas, pero una de las características que muchos usuarios quieren es el Panel de Encabezados Personalizado. En este artículo, compartiremos con usted cómo puede habilitar cabeceras personalizadas con un panel de administración de fondo en WordPress 3.0.
¿Qué hará exactamente esta función?
Creará una pestaña en su panel de administración que le permitirá cambiar las imágenes de cabecera. Puede registrar imágenes predeterminadas si es diseñador de temas para ofrecer más opciones a los usuarios. También permite a los usuarios cargar imágenes personalizadas para el encabezado. Por último, pero no por ello menos importante, esta función utiliza miniaturas en las páginas de un solo post. Si la miniatura de tu mensaje es lo suficientemente grande para ajustarse al tamaño del encabezado, entonces usará tu miniatura de mensaje como encabezado en lugar de la imagen predeterminada. Si su miniatura es más grande, entonces la recortará para usted.
Ver el screencast
¿Cómo añadir esto?
Tomamos el código directamente del archivo de Twenty Ten’s functions.php . Debe pegar los siguientes códigos en el archivo functions.php de su tema .
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 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’)),’concave’=> array(‘url’=> ‘%s/images/headers/concave.jpg’,’thumbnail_url’=> ‘%s/images/headers/concave thumbnail.jpg’,’description’=> __( ‘Concave’, ‘yourtheme’)),’fern’=> array(‘url’=> ‘%s/images/images/headers/fern.jpg’,’thumbnail_url’=>’%s/images/headers/fern.mpg’.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-thumbnail.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’))));}endif;if( ! function_exists( ‘yourtheme_admin_header_style’) ) :/*** Estilos de la imagen de encabezado que se muestra en el panel de administración de encabezados.** Referenciado mediante add_custom_image_header() en su configuración de tema().** @since 3.0.0*/functionyourtheme_admin_header_style() {?>»text/css»>#headimg {height: px;width: px;}#headimg h1, #headimg #desc {display: none;}
Eso es una grosería para mí. Por favor explique
Por supuesto, esto puede que les parezca una tontería a algunos de ustedes. Esto es principalmente para los diseñadores temáticos, pero haremos todo lo posible para descifrarlo. Antes de empezar, asegúrese de copiar y pegar este código en su editor de código, para que pueda hacer los cambios necesarios.
Nota: Estamos usando /images/headers/ como el directorio donde se almacenarán las imágenes de encabezado por defecto.
- Inicie el código creando una función yourtheme_setup().
- En la línea 21, definimos la imagen del encabezado por defecto. Note que hay una variable %s que es básicamente un marcador de posición para el directorio de temas URI.
- La línea 25 y 26 es donde usted define el ancho y el alto de la imagen. Por defecto está configurado en 940px de ancho y 198px de alto. Puede modificarlo editando esas dos líneas.
- A partir de la línea 42, empezamos a registrar las cabeceras por defecto. 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 utilizado.
- En la línea 95, elegimos el estilo del encabezado. No es necesario que cambie estos ajustes porque ya los ha definido en las líneas 25 y 26.
Esto es todo lo que está haciendo para el archivo functions.php del tema. A continuación vamos a entrar en la forma en que vas a añadir esto a tu tema.
Código para añadir en su Tema
Lo más probable es que este código vaya en el archivo header.php del tema . Puedes peinarlo como quieras.
1234567891011ID) &&( /* $src, $width, $height */$image= wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), ‘post-thumbnail’) ) &&$image[1]>= HEADER_IMAGE_WIDTH ) :// ¡Tenemos una nueva imagen de cabecera!echoget_the_post_thumbnail( $post->ID, ‘post-thumbnail’);else: ?> <img src="%20″width=»»height=»»alt=»»/>
¿Qué hace este código?
- En primer lugar, se trata de comprobar si se trata de un único mensaje o de una página. También comprueba si esta entrada/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 del mensaje específica para ese mensaje.
- Si no es una sola página, o la miniatura del mensaje no es lo suficientemente grande, entonces mostrará el encabezado por defecto.
Esperamos que este tutorial le haya sido útil. Recibimos algunos correos electrónicos preguntando sobre este tutorial, así que desglosamos el código del tema Veinte y Diez. Si tiene alguna pregunta, no dude en hacerla en los comentarios.
Deja una respuesta