Después de algunos años (o incluso meses) de diseñar y desarrollar temas de WordPress, especialmente para clientes, usted comienza a darse cuenta de que gran parte de la funcionalidad se puede estandarizar o destilar en un "tema o kit inicial". Esto ayuda a iniciar el proceso de desarrollo y avanza a buen ritmo.
El mejor primer paso para hacer esto, he descubierto, es definir la mayoría de las funciones comunes e incluirlas en el functions.php . Esta functions.php El archivo deberá extenderse para satisfacer las necesidades del tema en particular a medida que surjan nuevos proyectos, pero proporcionará un punto de partida más que increíble para el desarrollo.
Hay alrededor de 13 funciones clave con las que me gusta comenzar y las agregaré según sea necesario ...
La característica del menú de navegación, presentada en WordPress 3.0, permite la creación intuitiva y el mantenimiento de los menús de navegación en los temas.
Por lo menos, 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 hacer esto, registraremos esos dos menús "Menú principal" y "Menú secundario"
Si bien esta no es una característica particularmente nueva, todavía es bueno envolverla en una if function_exists() en caso de que el usuario esté atorado en una instalación previa a la versión 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, necesitamos decirle al tema dónde darlos como resultado. Nos gustaría que el menú principal aparezca en nuestro encabezado. Entonces, en nuestro header.php archivo, incluimos el siguiente código:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Primero, verificamos si tenemos definido un menú llamado 'main_menu' y si lo hacemos, insertamos su contenido aquí, de lo contrario recurrimos al valor predeterminado wp_list_pages() que podemos personalizar aún más para mostrar los enlaces que necesitamos.
Si desea una personalización aún mayor del menú, consulte la WordPress codex page on wp_nav_menu() función.
Queremos que el menú secundario aparezca en el pie de página, así que abrimos el footer.php e incluye el siguiente código:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Esta función le permite usar CSS personalizados para dar estilo al editor visual WordPress TinyMCE.
Crea un archivo CSS llamado editor-style.css y pega tus estilos adentro. 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:
add_editor_style();Si no desea utilizar el nombre "editor-style" para su archivo CSS y también desea mover el archivo a otra parte, 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'); Mientras estamos en eso, también podríamos diseñar el editor para idiomas de derecha a izquierda. En el directorio de temas, crea 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. Restyle y extienda según sea necesario.
La mayoría de las personas que comentan blogs en línea tienen un avatar asociado a ellos. Sin embargo, si no lo hacen y no le gustan particularmente 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 lo hace, agregamos un filtro que le dice a WordPress que use nuestro avatar definido como predeterminado.
Le estamos diciendo a WordPress que encuentre este avatar en nuestro directorio de "imágenes" dentro del directorio de temas. El siguiente paso, obviamente, es crear la imagen y subirla a la carpeta "imágenes".
La función de formatos de publicación le permite personalizar el estilo y la presentación de las publicaciones. Al momento de escribir estas líneas, hay 9 formatos de publicación estandarizados 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 predeterminado "Estándar" 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 se aprovecharán. Por ejemplo, si solo quiere los formatos de publicación a un lado, imagen, enlace, cita y estado, su código debería verse así:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );La función de imagen presentada, como el codex explica, le 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 una revista donde la imagen mostrada 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 regular que quizás aparezca en otro lugar.
Aprovechamos el add_image_size() función que instruye a WordPress a hacer una copia de nuestra imagen destacada en nuestros tamaños definidos.
Para hacer esto, agregamos lo siguiente al functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); Vea cómo trabajar con el add_image_size() función para cultivo blando o para recortar sus imágenes en el WordPress codex page.
Una vez que hayamos definido los tamaños de imagen anteriores (regular, medio y grande), y dado que WordPress por defecto no lo hace por nosotros, agregaremos la capacidad de seleccionar nuestros tamaños de imagen desde la interfaz Configuración de visualización de archivo adjunto .
Sería bueno si, al escribir una publicación, insertara 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 nuestra functions.php :
// show custom image sizes on when inserting mediafunction 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.
Este es simple. Si ha estado creando temas de WordPress por un tiempo, recordará los días en los que tuvo que incluir código manualmente para generar la fuente RSS directamente en header.php. Este enfoque es más limpio y depende del wp_head() gancho de acción para dar salida al 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 , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Con esta función, dará el primer paso para que su tema esté disponible para la traducción.
Lo mejor es 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 agrega un directorio llamado ' languages 'en su directorio de temas.
Puede obtener más información sobre la función load_theme_textdomain () en WordPress codex page .
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 pegue esa URL de YouTube en el editor y WordPress muestre automáticamente el video real en la interfaz, ese video no excederá el ancho que configuró usando el $content_width variable.
if ( ! isset( $content_width ) )$content_width = 600;WordPress también recomienda agregar el 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 pesado. Define el ancho del contenido para todo el contenido. ¿Qué sucede si quieres videos de mayor ancho en páginas que en publicaciones y un tamaño aún mayor en un tipo de publicación personalizado? Actualmente, no hay forma de definir esto. Sin embargo, hay un solicitud de función proponiendo la inclusión del $content_width variable en el built-in add_theme_support() .
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' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Esto registra y define una barra lateral llamada "Main Sidebar" y su marcado HTML.
Puedes aprender más sobre el register_sidebar() función en la página de Codex de WordPress.
De forma rutinaria, encontrará la necesidad de tener más de una barra lateral para poder copiar y 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, todas a la vez, pero no le da la flexibilidad de darle a cada barra lateral nueva un nombre único.
Si muestra extractos de sus publicaciones en una página de índice de blog, WordPress mostrará de forma predeterminada [...] para indicar que hay más "después del salto".
Lo más probable es que desee agregar un "enlace más" y definir cómo se ve.
Para hacer esto, necesitamos agregar el siguiente código a nuestra functions.php :
function new_excerpt_more($more) {global $post;return '...
function cake_content_nav( $nav_id ) {global $wp_query;if ( $wp_query->max_num_pages > 1 ) : ?>Si tiene instrucciones especiales en su tema, por ej. en la página de opciones de tema que le gustaría que el usuario vea cuando activan 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'); Presta especial atención a wp_redirect() función. Asegúrate de reemplazar el ' themes.php?page=themeoptions 'con la URL de tu página.
Durante el desarrollo, a veces encuentro que la barra de administración de WordPress (herramienta) es bastante molesta.
Está en una posición fija en la parte superior de la ventana y, según mi diseño, puede cubrir algunos elementos del encabezado.
Mientras sigo diseñando y desarrollando, me gusta esconder la barra de administración con esta práctica función.
show_admin_bar( false );¿Tiene alguna de las funciones favoritas para comenzar con el desarrollo de plantillas de WordPress? ¿Qué funciones te gustaría ver? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen multi-herramienta a través de Shutterstock.