Krypton Solid

14 funciones clave de WordPress para impulsar el desarrollo de temas

14 funciones clave de WordPress para impulsar el desarrollo de temas

Después de algunos años (o incluso meses) de diseñar y desarrollar temas de WordPress, especialmente para los clientes, empiezas a darte cuenta de que muchas de las funciones se pueden estandarizar o resumir en un «tema o kit de inicio». Esto ayuda a que el proceso de desarrollo se inicie y avance rápidamente.

Descubrí que el mejor primer paso para hacer esto es definir la mayoría de las funciones comunes e incluirlas en el functions.php. Esto functions.php será necesario ampliar el archivo para satisfacer las necesidades del tema en particular a medida que surjan nuevos proyectos, pero proporcionará un punto de partida más que impresionante para el desarrollo.

Hay alrededor de 13 funciones clave con las que me gusta comenzar y las agregaré según sea necesario …

1. Soporte de menú personalizado

La función del menú de navegación, introducida en WordPress 3.0, permite la creación y el mantenimiento intuitivos de los menús de navegación en los temas.

Como mínimo, un tema estándar necesitará un menú de navegación principal, tal vez en el encabezado y un menú de navegación secundario en el pie de página. Para ello, registraremos esos dos menús “Menú principal” y “Menú secundario”

Si bien esta no es una característica particularmente nueva, es bueno envolverla en un if function_exists() en caso de que el usuario se quede atascado en una instalación anterior a 3.0:

En el functions.php archivo, incluya lo siguiente:

if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus(
		array(
		  'main_menu' => __( 'Main Menu', 'cake' ),
		  'secondary_menu' => __( 'Secondary Menu', 'cake' ),
		)
	);
}

Ahora que los menús están registrados, debemos indicarle al tema dónde enviarlos. Nos gustaría que el Menú principal aparezca en nuestro encabezado. Entonces, en nuestro header.php archivo, incluimos el siguiente código:

<?php if ( has_nav_menu( 'main_menu' ) ) { ?>
	<?php $defaults = array(
	  'theme_location'  => 'main_menu',
	  'menu'            => '', 
	  'container'       => false, 
	  'echo'            => true,
	  'fallback_cb'     => false,
	  'items_wrap'      => '<ul id="%1$s"> %3$s</ul>',
	  'depth'           => 0 );
	  wp_nav_menu( $defaults );
	?>
<?php } else { ?>
	<ul>
	  <?php wp_list_pages('title_li='); ?>
	</ul>
<?php } ?>

Primero, verificamos si tenemos un menú llamado ‘main_menu’ definido y si lo tenemos, insertamos su contenido aquí, de lo contrario recurrimos al predeterminado wp_list_pages() que podemos personalizar aún más para mostrar los enlaces que necesitemos.

Si desea personalizar aún más el menú, consulte la Página del códice de WordPress en wp_nav_menu() función.

Queremos que el menú secundario aparezca en el pie de página, así que abrimos el footer.php e incluir el siguiente código:

<?php if ( has_nav_menu( 'secondary_menu' ) ) { ?>
	<?php $defaults = array(
	  'theme_location'  => 'secondary_menu',
	  'menu'            => '', 
	  'container'       => false, 
	  'echo'            => true,
	  'fallback_cb'     => false,
	  'items_wrap'      => '<ul id="%1$s"> %3$s</ul>',
	  'depth'           => 0 );
	  wp_nav_menu( $defaults );
	?>
<?php } else { ?>
	<ul>
	  <?php wp_list_pages('title_li='); ?>
	</ul>
<?php } ?>

2. Aplicar estilo al editor visual

Esta función le permite utilizar CSS personalizado para diseñar el editor visual de WordPress TinyMCE.

Crea un archivo CSS llamado editor-style.css y pega tus estilos dentro. Como marcador de posición, me gusta comenzar con estilos en el editor-style.css archivo del tema Twenty Twelve.

En el functions.php agregue lo siguiente:

Si no desea utilizar el nombre «estilo de editor» para su archivo CSS y también desea mover el archivo a otro lugar, por ejemplo, dentro de un directorio css, modifique la función.

Por ejemplo, quiero nombrar mi archivo tiny-mce-styles.css y lo quiero dentro de mi directorio CSS; entonces mi función se verá así:

add_editor_style('/css/editor-style.css');

Ya que estamos en eso, también podríamos diseñar el editor para idiomas de derecha a izquierda. En el directorio de temas, cree un archivo CSS llamado editor-style-rtl.css y, como mínimo, incluir lo siguiente:

html .mceContentBody {
	direction: rtl;
	unicode-bidi: embed;
}
li {
	margin: 0 24px 0 0;
	margin: 0 1.714285714rem 0 0;
}
dl {
	margin: 0 24px;
	margin: 0 1.714285714rem;
}
tr th {
	text-align: right;
}
td {
	padding: 6px 0 6px 10px;
	text-align: right;
}
.wp-caption {
	text-align: right;
}

Nuevamente, como marcador de posición, los estilos anteriores son del tema Twenty Twelve. Modifique el estilo y extienda según sea necesario.

3. Soporte de avatar personalizado

La mayoría de las personas que comentan en blogs en línea tienen un avatar asociado. Sin embargo, si no lo hacen y no le gustan especialmente las opciones de avatar predeterminadas de WordPress, puede definir las suyas propias.

Para hacerlo, incluya el siguiente código en su functions.php:

if ( !function_exists('cake_addgravatar') ) {
	function cake_addgravatar( $avatar_defaults ) {
		$myavatar = get_template_directory_uri() . '/images/avatar.png';
		$avatar_defaults[$myavatar] = 'avatar';
		return $avatar_defaults;
	}
	add_filter( 'avatar_defaults', 'cake_addgravatar' );
}

Lo que estamos haciendo aquí primero es verificar si la función existe. Si es así, agregamos un filtro que le dice a WordPress que use nuestro avatar personalizado definido como predeterminado.

Le estamos diciendo a WordPress que busque este avatar en nuestro directorio de «imágenes» dentro del directorio de temas. El siguiente paso, obviamente, es crear la propia imagen y subirla a la carpeta «imágenes».

4. Formatos de publicación

La función de formatos de publicaciones le permite personalizar el estilo y la presentación de las publicaciones. Al momento de escribir este artículo, hay 9 formatos de publicación estandarizados entre los que los usuarios pueden elegir: aparte, galería, enlace, imagen, cita, estado, video, audio y chat. Además de estos, el formato de publicación «Estándar» predeterminado indica que no se especifica ningún formato de publicación para la publicación en particular.

Para agregar esta funcionalidad a su tema, incluya el siguiente código en su functions.php, especificando los formatos de publicación que aprovecharás. Por ejemplo, si solo desea los formatos de publicación de estado, imagen, enlace, cita y estado, su código debería verse así:

add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );

5. Función de imagen destacada

La función de imagen destacada, como el códice explica, permite al autor elegir una imagen representativa para publicaciones, páginas o tipos de publicaciones personalizadas.

Para habilitar esta funcionalidad, incluya el siguiente código en su functions.php:

add_theme_support( 'post-thumbnails' );

Podríamos detenernos allí y dejar que WordPress defina los tamaños de las miniaturas o podríamos tomar el control y definirlos nosotros mismos. ¡Haremos lo último, obviamente!

Digamos que estamos ejecutando un sitio de revista donde la imagen destacada aparecerá en al menos 3 tamaños diferentes. Tal vez una imagen grande si la publicación aparece o es la más nueva, una imagen de tamaño mediano si es solo una publicación entre el resto y un tamaño normal tal vez para aparecer en otro lugar.

Aprovechamos la add_image_size() función que le indica a WordPress que haga una copia de nuestra imagen destacada en nuestros tamaños definidos.

Para hacer esto, agregamos lo siguiente al functions.php:

// regular size
add_image_size( 'regular', 400, 350, true );

// medium size
add_image_size( 'medium', 650, 500, true );
	
// large thumbnails
add_image_size( 'large', 960, '' );

Vea cómo trabajar con el add_image_size() función para recortar suavemente o recortar sus imágenes en el Página del códice de WordPress.

6. Configuración de visualización de archivos adjuntos

Una vez que hayamos definido los tamaños de imagen anteriores (regular, mediano y grande), y dado que, por defecto, WordPress no lo hace por nosotros, agregaremos la capacidad de seleccionar nuestros tamaños de imagen desde Configuración de pantalla de adjuntos interfaz.

Sería bueno si pudiera, al escribir una publicación, insertar la imagen del tamaño deseado seleccionándola del menú desplegable como lo haría normalmente para los tamaños predeterminados de WordPress.

Para hacer esto, agregamos lo siguiente a nuestro functions.php:

// show custom image sizes on when inserting media
function cake_show_image_sizes($sizes) {
    $sizes['regular'] = __( 'Our Regular Size', 'cake' );
    $sizes['medium'] = __( 'Our Medium Size', 'cake' );
    $sizes['large'] = __( 'Our Large Size', 'cake' );
    return $sizes;
}
add_filter('image_size_names_choose', 'cake_show_image_sizes');

Con eso en su lugar, podemos seleccionar nuestros tamaños de imagen.

7. Agregue enlaces de fuentes (en lugar del antiguo código RSS en el encabezado)

Este es simple. Si ha estado creando temas de WordPress durante un tiempo, recordará los días en que tenía que incluir manualmente el código para generar el feed RSS directamente en el header.php. Este enfoque es más limpio y se basa en la wp_head() gancho de acción para generar el código necesario.

En el functions.php archivo, incluya lo siguiente:

// Adds RSS feed links to for posts and comments.
add_theme_support( 'automatic-feed-links' );

Asegúrate de tener it in the header.php, justo antes del final de &rgt;/head&lgt;

8. Cargar dominio de texto

Con esta función, da el primer paso para que su tema esté disponible para traducción.

Es mejor llamar a esta función desde dentro del after_setup_theme() gancho de acción, es decir, después de que se hayan ejecutado las acciones de configuración, registro e inicialización de su tema.

add_action('after_setup_theme', 'my_theme_setup');
function my_theme_setup(){
    load_theme_textdomain('my_theme', get_template_directory() . '/languages');
}

Ahora agregue un directorio llamado ‘languages‘en su directorio de temas.

Puede obtener más información sobre la función load_theme_textdomain () en el Página del códice de WordPress.

9. Defina el ancho del contenido

El ancho del contenido es una característica de los temas que le permite establecer el ancho máximo permitido para videos, imágenes y otro contenido oEmbed en un tema.

Eso significa que, cuando pegas esa URL de YouTube en el editor y WordPress muestra automáticamente el video real en la interfaz, ese video no excederá el ancho que estableciste usando el $content_width variable.

if ( ! isset( $content_width ) )
	$content_width = 600;

WordPress también recomienda la adición del siguiente CSS:

.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}

Si bien esto es útil, es un poco torpe. Define el ancho del contenido para todas contenido. ¿Qué pasaría si quisieras videos de mayor ancho en las páginas que en las publicaciones y un tamaño aún mayor en un tipo de publicación personalizada? Actualmente, no hay forma de definir esto. Sin embargo, hay un solicitud de función proponiendo la inclusión de la $content_width variable en el incorporado add_theme_support().

10. Barra lateral dinámica

Su tema típico tendrá al menos una barra lateral. El código para definir la barra lateral es bastante sencillo.

Agregue lo siguiente a su functions.php:

if(function_exists('register_sidebar')){
	register_sidebar(array(
		'name' => 'Main Sidebar',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget' => '</aside>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	));
}

Esto registra y define una barra lateral denominada «Barra lateral principal» y su marcado HTML.

Puede obtener más información sobre el register_sidebar() función en el Página del códice de WordPress.

Habitualmente encontrará la necesidad de tener más de esa barra lateral para que pueda simplemente copiar / pegar el código anterior y cambiar el nombre.

También hay una register_sidebars() función que le permitirá registrar y definir múltiples barras laterales a la vez, pero no le da la flexibilidad de darle a cada nueva barra lateral un nombre único.

11. Formato de enlace personalizado «más»

Si está mostrando extractos de sus publicaciones en la página de índice de un blog, de forma predeterminada, WordPress mostrará [...] para indicar que hay más «después del salto».

Lo más probable es que desee agregar un «vínculo más» y definir cómo se ve.

Para hacer esto, necesitamos agregar el siguiente código a nuestro functions.php:

function new_excerpt_more($more) {
       global $post;
	return '...<br /><br /><a href="'. get_permalink($post->ID) . '" class="read_more">read more →</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

Esto agrega una elipses ‘‘justo después del extracto e incluye un enlace para leer más después de dos etiquetas de interrupción. Puede cambiar el nombre y el estilo del read_more Clase CSS para el enlace como se desee.

12. Paginación básica

Cada tema puede tener diferentes necesidades de paginación, pero siempre es más seguro comenzar con buenas funciones predeterminadas: previous_posts_link() y next_posts_link().

function cake_content_nav( $nav_id ) {
	global $wp_query;

	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="<?php echo $nav_id; ?>" class="content_nav clearfix">
			<ul>
				<li class="nextPost"><?php previous_posts_link( __( '← newer ', 'cake' ) ); ?></li>
				<li class="prevPost"><?php next_posts_link( __( 'older →', 'cake' ) ); ?></li>
			</ul>					
		</nav>
	<?php endif;
}?>

13. Redirigir después de la activación del tema

Si tiene instrucciones especiales en su tema, por ejemplo. en la página de opciones de tema que le gustaría que el usuario vea cuando active el tema por primera vez, puede usar la siguiente función para redirigirlos allí:

if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")
	wp_redirect('themes.php?page=themeoptions');

Preste especial atención a la wp_redirect() función. Asegúrese de reemplazar el ‘themes.php?page=themeoptions‘con la URL de su página.

14. Ocultar la barra de administración (durante el desarrollo)

Durante el desarrollo, a veces encuentro que la barra de administración (herramienta) de WordPress distrae bastante.

Está en una posición fija en la parte superior de la ventana y, dependiendo de mi diseño, puede cubrir algunos elementos del encabezado.

Mientras sigo diseñando y desarrollando, me gusta ocultar la barra de administración con esta práctica función.

¿Tiene alguna función favorita para impulsar el desarrollo de plantillas de WordPress? ¿Qué funciones te gustaría ver? Háznoslo saber en los comentarios.

Imagen destacada / miniatura, imagen multiherramienta a través de Shutterstock.

Deja un comentario