Entradas etiquetadas con Wordpress
WordPress 3.x para desarrolladores: Temas y plantillas, theme-options.php
0Nuestro tema va tomando poco a poco forma. Hoy vamos a crear el archivo theme-options.php que contendrá toda la lógica de las opciones de administración.
THEME-OPTIONS.PHP
Creamos el archivo theme-options.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * Properly enqueue styles and scripts for our theme options page. * * This function is attached to the admin_enqueue_scripts action hook. */ function newtheme_admin_enqueue_scripts( $hook_suffix ) { wp_enqueue_style( 'newtheme-theme-options', get_template_directory_uri() . '/inc/theme-options.css', false, '2011-04-28' ); wp_enqueue_script( 'newtheme-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'farbtastic' ), '2011-06-10' ); wp_enqueue_style( 'farbtastic' ); } add_action( 'admin_print_styles-appearance_page_theme_options', 'newtheme_admin_enqueue_scripts' );
[/codesyntax]
Esta función añade un archivo css y un archivo javascript a la cabecera al apartado apariencia de la administración de WordPress.
[codesyntax lang=»php»]
<?php /** * Register the form setting for our newtheme_options array. * * This function is attached to the admin_init action hook. * * This call to register_setting() registers a validation callback, newtheme_theme_options_validate(), * which is used when the option is saved, to ensure that our option values are complete, properly * formatted, and safe. */ function newtheme_theme_options_init() { register_setting( 'newtheme_options', // Options group, see settings_fields() call in newtheme_theme_options_render_page() 'newtheme_theme_options', // Database option, see newtheme_get_theme_options() 'newtheme_theme_options_validate' // The sanitization callback, see newtheme_theme_options_validate() ); // Register our settings field group add_settings_section( 'general', // Unique identifier for the settings section '', // Section title (we don't want one) '__return_false', // Section callback (we don't want anything) 'theme_options' // Menu slug, used to uniquely identify the page; see newtheme_theme_options_add_page() ); // Register our individual settings fields add_settings_field( 'color_scheme', // Unique identifier for the field for this section __( 'Color Scheme', 'newtheme' ), // Setting field label 'newtheme_settings_field_color_scheme', // Function that renders the settings field 'theme_options', // Menu slug, used to uniquely identify the page; see newtheme_theme_options_add_page() 'general' // Settings section. Same as the first argument in the add_settings_section() above ); add_settings_field( 'link_color', __( 'Link Color', 'newtheme' ), 'newtheme_settings_field_link_color', 'theme_options', 'general' ); add_settings_field( 'layout', __( 'Default Layout', 'newtheme' ), 'newtheme_settings_field_layout', 'theme_options', 'general' ); } add_action( 'admin_init', 'newtheme_theme_options_init' );
[/codesyntax]
Esta función registra la configuración por defecto del tema y añade varios apartados para la administración.
[codesyntax lang=»php»]
<?php /** * Change the capability required to save the 'newtheme_options' options group. * * @see newtheme_theme_options_init() First parameter to register_setting() is the name of the options group. * @see newtheme_theme_options_add_page() The edit_theme_options capability is used for viewing the page. * * By default, the options groups for all registered settings require the manage_options capability. * This filter is required to change our theme options page to edit_theme_options instead. * By default, only administrators have either of these capabilities, but the desire here is * to allow for finer-grained control for roles and users. * * @param string $capability The capability used for the page, which is manage_options by default. * @return string The capability to actually use. */ function newtheme_option_page_capability( $capability ) { return 'edit_theme_options'; } add_filter( 'option_page_capability_newtheme_options', 'newtheme_option_page_capability' );
[/codesyntax]
Esta función permite cambiar las opciones del tema. Es obligatorio para controlar los diversos usuarios y roles que tengan acceso.
[codesyntax lang=»php»]
<?php /** * Add our theme options page to the admin menu, including some help documentation. * * This function is attached to the admin_menu action hook. */ function newtheme_theme_options_add_page() { $theme_page = add_theme_page( __( 'Theme Options', 'newtheme' ), // Name of page __( 'Theme Options', 'newtheme' ), // Label in menu 'edit_theme_options', // Capability required 'theme_options', // Menu slug, used to uniquely identify the page 'newtheme_theme_options_render_page' // Function that renders the options page ); if ( ! $theme_page ) return; add_action( "load-$theme_page", 'newtheme_theme_options_help' ); } add_action( 'admin_menu', 'newtheme_theme_options_add_page' );
[/codesyntax]
Añade la página de opciones de nuestro tema al menú de administración, incluyendo algo de documentación a la ayuda.
[codesyntax lang=»php»]
<?php function newtheme_theme_options_help() { $help = '<p>' . __( 'Some themes provide customization options that are grouped together on a Theme Options screen. If you change themes, options may change or disappear, as they are theme-specific. Your current theme, Twenty Eleven, provides the following Theme Options:', 'newtheme' ) . '</p>' . '<ol>' . '<li>' . __( '<strong>Color Scheme</strong>: You can choose a color palette of "Light" (light background with dark text) or "Dark" (dark background with light text) for your site.', 'newtheme' ) . '</li>' . '<li>' . __( '<strong>Link Color</strong>: You can choose the color used for text links on your site. You can enter the HTML color or hex code, or you can choose visually by clicking the "Select a Color" button to pick from a color wheel.', 'newtheme' ) . '</li>' . '<li>' . __( '<strong>Default Layout</strong>: You can choose if you want your site’s default layout to have a sidebar on the left, the right, or not at all.', 'newtheme' ) . '</li>' . '</ol>' . '<p>' . __( 'Remember to click "Save Changes" to save any changes you have made to the theme options.', 'newtheme' ) . '</p>'; $sidebar = '<p><strong>' . __( 'For more information:', 'newtheme' ) . '</strong></p>' . '<p>' . __( '<a href="http://codex.wordpress.org/Appearance_Theme_Options_Screen" target="_blank">Documentation on Theme Options</a>', 'newtheme' ) . '</p>' . '<p>' . __( '<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>', 'newtheme' ) . '</p>'; $screen = get_current_screen(); if ( method_exists( $screen, 'add_help_tab' ) ) { // WordPress 3.3 $screen->add_help_tab( array( 'title' => __( 'Overview', 'newtheme' ), 'id' => 'theme-options-help', 'content' => $help, ) ); $screen->set_help_sidebar( $sidebar ); } else { // WordPress 3.2 add_contextual_help( $screen, $help . $sidebar ); } }
[/codesyntax]
Esta es la función que añade la ayuda que comentaba en la función anterior. Aquí además podemos ver como se añade un condicional para añadir retrocompatibilidad con versiones anteriores a la 3.3 y la 3.2.
[codesyntax lang=»php»]
<?php /** * Returns an array of color schemes registered for New Theme. */ function newtheme_color_schemes() { $color_scheme_options = array( 'light' => array( 'value' => 'light', 'label' => __( 'Light', 'newtheme' ), 'thumbnail' => get_template_directory_uri() . '/inc/images/light.png', 'default_link_color' => '#1b8be0', ), 'dark' => array( 'value' => 'dark', 'label' => __( 'Dark', 'newtheme' ), 'thumbnail' => get_template_directory_uri() . '/inc/images/dark.png', 'default_link_color' => '#e4741f', ), ); return apply_filters( 'newtheme_color_schemes', $color_scheme_options ); }
[/codesyntax]
Esta función devuelve un array con los esquemas de color para cada versión del tema.
[codesyntax lang=»php»]
<?php /** * Returns an array of layout options registered for New Theme. */ function newtheme_layouts() { $layout_options = array( 'content-sidebar' => array( 'value' => 'content-sidebar', 'label' => __( 'Content on left', 'newtheme' ), 'thumbnail' => get_template_directory_uri() . '/inc/images/content-sidebar.png', ), 'sidebar-content' => array( 'value' => 'sidebar-content', 'label' => __( 'Content on right', 'newtheme' ), 'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-content.png', ), 'content' => array( 'value' => 'content', 'label' => __( 'One-column, no sidebar', 'newtheme' ), 'thumbnail' => get_template_directory_uri() . '/inc/images/content.png', ), ); return apply_filters( 'newtheme_layouts', $layout_options ); }
[/codesyntax]
Devuelve un array con las opciones para cada tipo de estructura del diseño.
[codesyntax lang=»php»]
<?php /** * Returns the default options for New Theme. */ function newtheme_get_default_theme_options() { $default_theme_options = array( 'color_scheme' => 'light', 'link_color' => newtheme_get_default_link_color( 'light' ), 'theme_layout' => 'content-sidebar', ); if ( is_rtl() ) $default_theme_options['theme_layout'] = 'sidebar-content'; return apply_filters( 'newtheme_default_theme_options', $default_theme_options ); }
[/codesyntax]
Devuelve las opciones por defecto del tema.
[codesyntax lang=»php»]
<?php /** * Returns the default link color for New Theme, based on color scheme. * * * @param $string $color_scheme Color scheme. Defaults to the active color scheme. * @return $string Color. */ function newtheme_get_default_link_color( $color_scheme = null ) { if ( null === $color_scheme ) { $options = newtheme_get_theme_options(); $color_scheme = $options['color_scheme']; } $color_schemes = newtheme_color_schemes(); if ( ! isset( $color_schemes[ $color_scheme ] ) ) return false; return $color_schemes[ $color_scheme ]['default_link_color']; }
[/codesyntax]
Devuelve el color por defecto para los vínculos.
[codesyntax lang=»php»]
<?php /** * Returns the options array for New Theme. */ function newtheme_get_theme_options() { return get_option( 'newtheme_theme_options', newtheme_get_default_theme_options() ); }
[/codesyntax]
Devuelve un array con todas las opciones del tema.
[codesyntax lang=»php»]
<?php /** * Renders the Color Scheme setting field. */ function newtheme_settings_field_color_scheme() { $options = newtheme_get_theme_options(); foreach ( newtheme_color_schemes() as $scheme ) { ?> <div class="layout image-radio-option color-scheme"> <label class="description"> <input type="radio" name="newtheme_theme_options[color_scheme]" value="<?php echo esc_attr( $scheme['value'] ); ?>" <?php checked( $options['color_scheme'], $scheme['value'] ); ?> /> <input type="hidden" id="default-color-<?php echo esc_attr( $scheme['value'] ); ?>" value="<?php echo esc_attr( $scheme['default_link_color'] ); ?>" /> <span> <img src="<?php echo esc_url( $scheme['thumbnail'] ); ?>" width="136" height="122" alt="" /> <?php echo $scheme['label']; ?> </span> </label> </div> <?php } }
[/codesyntax]
Esta función genera el grupo de radio buttons que permitirá elegir entre un esquema de color u otro.
[codesyntax lang=»php»]
<?php /** * Renders the Link Color setting field. */ function newtheme_settings_field_link_color() { $options = newtheme_get_theme_options(); ?> <input type="text" name="newtheme_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" /> <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a> <input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'newtheme' ); ?>" /> <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div> <br /> <span><?php printf( __( 'Default color: %s', 'newtheme' ), '<span id="default-color">' . newtheme_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span> <?php }
[/codesyntax]
Esta función genera el formulario para poder elegir el color de los vínculos.
[codesyntax lang=»php»]
<?php /** * Renders the Layout setting field. */ function newtheme_settings_field_layout() { $options = newtheme_get_theme_options(); foreach ( newtheme_layouts() as $layout ) { ?> <div class="layout image-radio-option theme-layout"> <label class="description"> <input type="radio" name="newtheme_theme_options[theme_layout]" value="<?php echo esc_attr( $layout['value'] ); ?>" <?php checked( $options['theme_layout'], $layout['value'] ); ?> /> <span> <img src="<?php echo esc_url( $layout['thumbnail'] ); ?>" width="136" height="122" alt="" /> <?php echo $layout['label']; ?> </span> </label> </div> <?php } }
[/codesyntax]
Esta función genera el campo para elegir la estructura del blog.
[codesyntax lang=»php»]
<?php /** * Returns the options array for New Theme. */ function newtheme_theme_options_render_page() { ?> <div class="wrap"> <?php screen_icon(); ?> <?php $theme_name = function_exists( 'wp_get_theme' ) ? wp_get_theme() : get_current_theme(); ?> <h2><?php printf( __( '%s Theme Options', 'newtheme' ), $theme_name ); ?></h2> <?php settings_errors(); ?> <form method="post" action="options.php"> <?php settings_fields( 'newtheme_options' ); do_settings_sections( 'theme_options' ); submit_button(); ?> </form> </div> <?php }
[/codesyntax]
Función que genera todo el formulario de opciones.
[codesyntax lang=»php»]
<?php /** * Sanitize and validate form input. Accepts an array, return a sanitized array. * * @see newtheme_theme_options_init() * @todo set up Reset Options action */ function newtheme_theme_options_validate( $input ) { $output = $defaults = newtheme_get_default_theme_options(); // Color scheme must be in our array of color scheme options if ( isset( $input['color_scheme'] ) && array_key_exists( $input['color_scheme'], newtheme_color_schemes() ) ) $output['color_scheme'] = $input['color_scheme']; // Our defaults for the link color may have changed, based on the color scheme. $output['link_color'] = $defaults['link_color'] = newtheme_get_default_link_color( $output['color_scheme'] ); // Link color must be 3 or 6 hexadecimal characters if ( isset( $input['link_color'] ) && preg_match( '/^#?([a-f0-9]{3}){1,2}$/i', $input['link_color'] ) ) $output['link_color'] = '#' . strtolower( ltrim( $input['link_color'], '#' ) ); // Theme layout must be in our array of theme layout options if ( isset( $input['theme_layout'] ) && array_key_exists( $input['theme_layout'], newtheme_layouts() ) ) $output['theme_layout'] = $input['theme_layout']; return apply_filters( 'newtheme_theme_options_validate', $output, $input, $defaults ); }
[/codesyntax]
Esta función valida que los datos del formulario son correctos.
[codesyntax lang=»php»]
<?php /** * Enqueue the styles for the current color scheme. */ function newtheme_enqueue_color_scheme() { $options = newtheme_get_theme_options(); $color_scheme = $options['color_scheme']; if ( 'dark' == $color_scheme ) wp_enqueue_style( 'dark', get_template_directory_uri() . '/colors/dark.css', array(), null ); do_action( 'newtheme_enqueue_color_scheme', $color_scheme ); } add_action( 'wp_enqueue_scripts', 'newtheme_enqueue_color_scheme' );
[/codesyntax]
Función que cambiará el estilo actual de la página dependiendo del color de esquema elegido.
[codesyntax lang=»php»]
<?php /** * Add a style block to the theme for the current link color. * * This function is attached to the wp_head action hook. */ function newtheme_print_link_color_style() { $options = newtheme_get_theme_options(); $link_color = $options['link_color']; $default_options = newtheme_get_default_theme_options(); // Don't do anything if the current link color is the default. if ( $default_options['link_color'] == $link_color ) return; ?> <style> /* Link color */ a, #site-title a:focus, #site-title a:hover, #site-title a:active, .entry-title a:hover, .entry-title a:focus, .entry-title a:active, .widget_newtheme_ephemera .comments-link a:hover, section.recent-posts .other-recent-posts a[rel="bookmark"]:hover, section.recent-posts .other-recent-posts .comments-link a:hover, .format-image footer.entry-meta a:hover, #site-generator a:hover { color: <?php echo $link_color; ?>; } section.recent-posts .other-recent-posts .comments-link a:hover { border-color: <?php echo $link_color; ?>; } article.feature-image.small .entry-summary p a:hover, .entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active, .feature-slider a.active { background-color: <?php echo $link_color; ?>; } </style> <?php } add_action( 'wp_head', 'newtheme_print_link_color_style' );
[/codesyntax]
Función que añadirá el color a los vínculos a través de los estilos si este no es el mismo que el de defecto.
[codesyntax lang=»php»]
<?php /** * Adds New Theme layout classes to the array of body classes. */ function newtheme_layout_classes( $existing_classes ) { $options = newtheme_get_theme_options(); $current_layout = $options['theme_layout']; if ( in_array( $current_layout, array( 'content-sidebar', 'sidebar-content' ) ) ) $classes = array( 'two-column' ); else $classes = array( 'one-column' ); if ( 'content-sidebar' == $current_layout ) $classes[] = 'right-sidebar'; elseif ( 'sidebar-content' == $current_layout ) $classes[] = 'left-sidebar'; else $classes[] = $current_layout; $classes = apply_filters( 'newtheme_layout_classes', $classes, $current_layout ); return array_merge( $existing_classes, $classes ); } add_filter( 'body_class', 'newtheme_layout_classes' );
[/codesyntax]
Esta función añade las clases correspondientes a la etiqueta body dependiendo de la estructura de blog elegida.
[codesyntax lang=»php»]
<?php /** * Implements New Theme theme options into Theme Customizer * * @param $wp_customize Theme Customizer object * @return void */ function newtheme_customize_register( $wp_customize ) { $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; $options = newtheme_get_theme_options(); $defaults = newtheme_get_default_theme_options(); $wp_customize->add_setting( 'newtheme_theme_options[color_scheme]', array( 'default' => $defaults['color_scheme'], 'type' => 'option', 'capability' => 'edit_theme_options', ) ); $schemes = newtheme_color_schemes(); $choices = array(); foreach ( $schemes as $scheme ) { $choices[ $scheme['value'] ] = $scheme['label']; } $wp_customize->add_control( 'newtheme_color_scheme', array( 'label' => __( 'Color Scheme', 'newtheme' ), 'section' => 'colors', 'settings' => 'newtheme_theme_options[color_scheme]', 'type' => 'radio', 'choices' => $choices, 'priority' => 5, ) ); // Link Color (added to Color Scheme section in Theme Customizer) $wp_customize->add_setting( 'newtheme_theme_options[link_color]', array( 'default' => newtheme_get_default_link_color( $options['color_scheme'] ), 'type' => 'option', 'sanitize_callback' => 'sanitize_hex_color', 'capability' => 'edit_theme_options', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array( 'label' => __( 'Link Color', 'newtheme' ), 'section' => 'colors', 'settings' => 'newtheme_theme_options[link_color]', ) ) ); // Default Layout $wp_customize->add_section( 'newtheme_layout', array( 'title' => __( 'Layout', 'newtheme' ), 'priority' => 50, ) ); $wp_customize->add_setting( 'newtheme_theme_options[theme_layout]', array( 'type' => 'option', 'default' => $defaults['theme_layout'], 'sanitize_callback' => 'sanitize_key', ) ); $layouts = newtheme_layouts(); $choices = array(); foreach ( $layouts as $layout ) { $choices[$layout['value']] = $layout['label']; } $wp_customize->add_control( 'newtheme_theme_options[theme_layout]', array( 'section' => 'newtheme_layout', 'type' => 'radio', 'choices' => $choices, ) ); } add_action( 'customize_register', 'newtheme_customize_register' );
[/codesyntax]
Esta función añade todas las opciones al personalizador de temas.
[codesyntax lang=»php»]
<?php /** * Bind JS handlers to make Theme Customizer preview reload changes asynchronously. * Used with blogname and blogdescription. */ function newtheme_customize_preview_js() { wp_enqueue_script( 'newtheme-customizer', get_template_directory_uri() . '/inc/theme-customizer.js', array( 'customize-preview' ), '20120523', true ); } add_action( 'customize_preview_init', 'newtheme_customize_preview_js' );
[/codesyntax]
Esta función indica a WordPress que añada un archivo javascript para la previsualización de la página para poder ver los cambios del tema.
WordPress 3.x para desarrolladores: Temas y plantillas, functions.php
0Como ya llevamos varias plantillas creadas con algunas llamadas a funciones del archivo functions.php, vamos a crearlo y añadir esas funciones, después continuaremos añadiendo más plantillas.
FUNCTIONS.PHP
Creamos el archivo functions.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * Set the content width based on the theme's design and stylesheet. */ if ( ! isset( $content_width ) ) $content_width = 584;
[/codesyntax]
Este código creara una variable que nos indicará el ancho que tendrá el contenido.
[codesyntax lang=»php»]
<?php /** * Tell WordPress to run newtheme_setup() when the 'after_setup_theme' hook is run. */ add_action( 'after_setup_theme', 'newtheme_setup' ); if ( ! function_exists( 'newtheme_setup' ) ): function newtheme_setup() { } endif;
[/codesyntax]
Le decimos a WordPress que ejecute newtheme_setup cuando el hook after_setup_theme esté funcionando. Creamos un condicional para comprobar que la función newtheme_setup no ha sido aun creada, y creamos la función.
Dentro de newtheme_setup añadiremos las siguientes lineas de código:
[codesyntax lang=»php»]
<?php load_theme_textdomain( 'newtheme', get_template_directory() . '/languages' );
[/codesyntax]
Esta línea cargará el archivo de idioma correspondiente.
[codesyntax lang=»php»]
<?php add_editor_style();
[/codesyntax]
Le indicamos a WordPress que cargue el editor de estilos. Para ello WordPress buscará el archivo editor-style.css dentro de la carpeta del tema, por tanto copiaremos los archivos editor-style.css y editor-style-rtl.css del tema Twenty Eleven a nuestro tema.
[codesyntax lang=»php»]
<?php require( get_template_directory() . '/inc/theme-options.php' ); require( get_template_directory() . '/inc/widgets.php' );
[/codesyntax]
Estas dos lineas cargan los archivos de las opciones del tema que se mostrarán en la administración y los widgets de los que disponga el tema.
[codesyntax lang=»php»]
<?php add_theme_support( 'automatic-feed-links' );
[/codesyntax]
Le indicamos a WordPress que los links de este tema se añadirán a un archivo rss que se creará automáticamente. Más sobre otros argumentos de esta función: http://codex.wordpress.org/Function_Reference/add_theme_support
[codesyntax lang=»php»]
<?php register_nav_menu( 'primary', __( 'Primary Menu', 'newtheme' ) );
[/codesyntax]
Registramos la barra de menú de la cabecera.
[codesyntax lang=»php»]
<?php add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ) );
[/codesyntax]
Añadimos soporte para varios tipos de formato de posts.
[codesyntax lang=»php»]
<?php $theme_options = newtheme_get_theme_options(); if ( 'dark' == $theme_options['color_scheme'] ) $default_background_color = '1d1d1d'; else $default_background_color = 'f1f1f1'; // Add support for custom backgrounds. add_theme_support( 'custom-background', array( // Let WordPress know what our default background color is. // This is dependent on our current color scheme. 'default-color' => $default_background_color, ) );
[/codesyntax]
Primero recuperamos las opciones del tema a través de la función newtheme_get_theme_options(), que se encuentra en el archivo inc/theme_options.php, el cual crearemos más delante.
Comprobamos que tipo de esquema de estilos se ha elegido y guardamos en la variable $default_background_color el valor correspondiente.
Le indicamos a WordPress el color de nuestro fondo de página.
[codesyntax lang=»php»]
<?php add_theme_support( 'post-thumbnails' );
[/codesyntax]
Le indicamos a WordPress que este tema utilizará imágenes destacadas o thumbnails.
[codesyntax lang=»php»]
<?php $custom_header_support = array( // The default header text color. 'default-text-color' => '000', // The height and width of our custom header. 'width' => apply_filters( 'newtheme_header_image_width', 1000 ), 'height' => apply_filters( 'newtheme_header_image_height', 288 ), // Support flexible heights. 'flex-height' => true, // Random image rotation by default. 'random-default' => true, // Callback for styling the header. 'wp-head-callback' => 'newtheme_header_style', // Callback for styling the header preview in the admin. 'admin-head-callback' => 'newtheme_admin_header_style', // Callback used to display the header preview in the admin. 'admin-preview-callback' => 'newtheme_admin_header_image', ); add_theme_support( 'custom-header', $custom_header_support );
[/codesyntax]
Creamos un array con los encabezados personalizados y se lo indicamos a WordPress.
[codesyntax lang=»php»]
<?php if ( ! function_exists( 'get_custom_header' ) ) { // This is all for compatibility with versions of WordPress prior to 3.4. define( 'HEADER_TEXTCOLOR', $custom_header_support['default-text-color'] ); define( 'HEADER_IMAGE', '' ); define( 'HEADER_IMAGE_WIDTH', $custom_header_support['width'] ); define( 'HEADER_IMAGE_HEIGHT', $custom_header_support['height'] ); add_custom_image_header( $custom_header_support['wp-head-callback'], $custom_header_support['admin-head-callback'], $custom_header_support['admin-preview-callback'] ); add_custom_background(); }
[/codesyntax]
En el caso de que se utilizase este tema con una versión de WordPress inferior a la 3.4 creamos varias constantes, y añadimos las cabeceras personalizadas y el fondo a WordPress.
[codesyntax lang=»php»]
<?php set_post_thumbnail_size( $custom_header_support['width'], $custom_header_support['height'], true );
[/codesyntax]
Configuramos la imagen destacada definiendo un ancho y alto.
[codesyntax lang=»php»]
<?php add_image_size( 'large-feature', $custom_header_support['width'], $custom_header_support['height'], true ); // Used for featured posts if a large-feature doesn't exist. add_image_size( 'small-feature', 500, 300 );
[/codesyntax]
Añadimos la imagen a la cabecera definiendo su ancho y alto, además añadimos una imagen más pequeña para los post en el caso de que no existe imagen para la cabecera.
[codesyntax lang=»php»]
<?php register_default_headers( array( 'wheel' => array( 'url' => '%s/images/headers/wheel.jpg', 'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Wheel', 'newtheme' ) ), 'shore' => array( 'url' => '%s/images/headers/shore.jpg', 'thumbnail_url' => '%s/images/headers/shore-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Shore', 'newtheme' ) ), 'trolley' => array( 'url' => '%s/images/headers/trolley.jpg', 'thumbnail_url' => '%s/images/headers/trolley-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Trolley', 'newtheme' ) ), 'pine-cone' => array( 'url' => '%s/images/headers/pine-cone.jpg', 'thumbnail_url' => '%s/images/headers/pine-cone-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Pine Cone', 'newtheme' ) ), 'chessboard' => array( 'url' => '%s/images/headers/chessboard.jpg', 'thumbnail_url' => '%s/images/headers/chessboard-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Chessboard', 'newtheme' ) ), 'lanterns' => array( 'url' => '%s/images/headers/lanterns.jpg', 'thumbnail_url' => '%s/images/headers/lanterns-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Lanterns', 'newtheme' ) ), 'willow' => array( 'url' => '%s/images/headers/willow.jpg', 'thumbnail_url' => '%s/images/headers/willow-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Willow', 'newtheme' ) ), 'hanoi' => array( 'url' => '%s/images/headers/hanoi.jpg', 'thumbnail_url' => '%s/images/headers/hanoi-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Hanoi Plant', 'newtheme' ) ) ) );
[/codesyntax]
Este es el paquete de imágenes que el tema Twenty Eleven trae por defecto, nosotros haremos lo mismo. Si no lo habéis hecho ya, copiad la carpeta images del tema Twenty Eleven a nuestro tema.
El marcador %s indica que se debe sustituir por la uri del tema.
Como esta función tiene llamadas a otras funciones dentro del mismo archivo functions.php, vamos a crearlas.
En primer lugar crearemos la función newtheme_header_style():
[codesyntax lang=»php»]
<?php if ( ! function_exists( 'newtheme_header_style' ) ) : /** * Styles the header image and text displayed on the blog */ function newtheme_header_style() { $text_color = get_header_textcolor(); // If no custom options for text are set, let's bail. if ( $text_color == HEADER_TEXTCOLOR ) return; // If we get this far, we have custom styles. Let's do this. ?> <style type="text/css"> <?php // Has the text been hidden? if ( 'blank' == $text_color ) : ?> #site-title, #site-description { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } <?php // If the user has set a custom color for the text use that else : ?> #site-title a, #site-description { color: #<?php echo $text_color; ?> !important; } <?php endif; ?> </style> <?php } endif; // newtheme_header_style
[/codesyntax]
Simplemente en esta función se generan los estilos para el título y la descripción que se ubican en la cabecera de la página.
Creamos el método newtheme_admin_header_style():
[codesyntax lang=»php»]
<?php if ( ! function_exists( 'newtheme_admin_header_style' ) ) : /** * Styles the header image displayed on the Appearance > Header admin panel. * * Referenced via add_theme_support('custom-header') in newtheme_setup(). */ function newtheme_admin_header_style() { ?> <style type="text/css"> .appearance_page_custom-header #headimg { border: none; } #headimg h1, #desc { font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; } #headimg h1 { margin: 0; } #headimg h1 a { font-size: 32px; line-height: 36px; text-decoration: none; } #desc { font-size: 14px; line-height: 23px; padding: 0 0 3em; } <?php // If the user has set a custom color for the text use that if ( get_header_textcolor() != HEADER_TEXTCOLOR ) : ?> #site-title a, #site-description { color: #<?php echo get_header_textcolor(); ?>; } <?php endif; ?> #headimg img { max-width: 1000px; height: auto; width: 100%; } </style> <?php } endif; // newhtme_admin_header_style
[/codesyntax]
Esta función permite dar estilos a la imagen de la cabecera dentro de su apartado de opciones en la administración de WordPress, donde se podrá configurar cómo se ve la imagen.
Creamos la función newtheme_admin_header_image():
[codesyntax lang=»php»]
<?php if ( ! function_exists( 'newtheme_admin_header_image' ) ) : /** * Custom header image markup displayed on the Appearance > Header admin panel. * * Referenced via add_theme_support('custom-header') in newtheme_setup(). */ function newtheme_admin_header_image() { ?> <div id="headimg"> <?php $color = get_header_textcolor(); $image = get_header_image(); if ( $color && $color != 'blank' ) $style = ' style="color:#' . $color . '"'; else $style = ' style="display:none"'; ?> <h1><a id="name"<?php echo $style; ?> onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1> <div id="desc"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></div> <?php if ( $image ) : ?> <img src="<?php echo esc_url( $image ); ?>" alt="" /> <?php endif; ?> </div> <?php } endif; // newtheme_admin_header_image
[/codesyntax]
Esta función crea el código html que mostrará la imagen, el título y la descripción en su respectiva zona de opciones de la administración de WordPress, para que el usuario pueda ver como quedaría.
[codesyntax lang=»php»]
<?php /** * Sets the post excerpt length to 40 words. * * To override this length in a child theme, remove the filter and add your own * function tied to the excerpt_length filter hook. */ function newtheme_excerpt_length( $length ) { return 40; } add_filter( 'excerpt_length', 'newtheme_excerpt_length' );
[/codesyntax]
Esta función establece la longitud del extracto de un post a 40 palabras.
[codesyntax lang=»php»]
<?php /** * Returns a "Continue Reading" link for excerpts */ function newtheme_continue_reading_link() { return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) . '</a>'; }
[/codesyntax]
Esta función devuelve el link con el texto «Seguir leyendo…» en los extractos de los posts.
[codesyntax lang=»php»]
<?php /** * Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and newtheme_continue_reading_link(). * * To override this in a child theme, remove the filter and add your own * function tied to the excerpt_more filter hook. */ function newtheme_auto_excerpt_more( $more ) { return ' …' . newtheme_continue_reading_link(); } add_filter( 'excerpt_more', 'newtheme_auto_excerpt_more' );
[/codesyntax]
Esta función remplaza el texto «[…]» por «…» utilizando «…» para ello, y el link de newtheme_continue_reading_link()–
[codesyntax lang=»php»]
<?php /** * Adds a pretty "Continue Reading" link to custom post excerpts. * * To override this link in a child theme, remove the filter and add your own * function tied to the get_the_excerpt filter hook. */ function newtheme_custom_excerpt_more( $output ) { if ( has_excerpt() && ! is_attachment() ) { $output .= newtheme_continue_reading_link(); } return $output; } add_filter( 'get_the_excerpt', 'newtheme_custom_excerpt_more' );
[/codesyntax]
Añade la salida de newtheme_continue_reading_link() a los extractos personalizados de los posts.
[codesyntax lang=»php»]
<?php /** * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link. */ function newtheme_page_menu_args( $args ) { $args['show_home'] = true; return $args; } add_filter( 'wp_page_menu_args', 'newtheme_page_menu_args' );
[/codesyntax]
Esta función hace que en nuestro menú de navegación aparezca un link hacía la página principal.
[codesyntax lang=»php»]
<?php /** * Register our sidebars and widgetized areas. Also register the default Epherma widget. */ function newtheme_widgets_init() { register_widget( 'New_Theme_Ephemera_Widget' ); register_sidebar( array( 'name' => __( 'Main Sidebar', 'newtheme' ), 'id' => 'sidebar-1', 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); register_sidebar( array( 'name' => __( 'Showcase Sidebar', 'newtheme' ), 'id' => 'sidebar-2', 'description' => __( 'The sidebar for the optional Showcase Template', 'newtheme' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); register_sidebar( array( 'name' => __( 'Footer Area One', 'newtheme' ), 'id' => 'sidebar-3', 'description' => __( 'An optional widget area for your site footer', 'newtheme' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); register_sidebar( array( 'name' => __( 'Footer Area Two', 'newtheme' ), 'id' => 'sidebar-4', 'description' => __( 'An optional widget area for your site footer', 'newtheme' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); register_sidebar( array( 'name' => __( 'Footer Area Three', 'newtheme' ), 'id' => 'sidebar-5', 'description' => __( 'An optional widget area for your site footer', 'newtheme' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); } add_action( 'widgets_init', 'newtheme_widgets_init' );
[/codesyntax]
Esta función registra nuestro widget que crearemos en el archivo inc/widgets.php, y las cinco sidebars que añade el tema a diferentes partes de la página.
[codesyntax lang=»php»]
<?php if ( ! function_exists( 'newtheme_content_nav' ) ) : /** * Display navigation to next/previous pages when applicable */ function newtheme_content_nav( $nav_id ) { global $wp_query; if ( $wp_query->max_num_pages > 1 ) : ?> <nav id="<?php echo $nav_id; ?>"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'newtheme' ); ?></h3> <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'newtheme' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'newtheme' ) ); ?></div> </nav><!-- #nav-above --> <?php endif; } endif; // newtheme_content_nav
[/codesyntax]
Muestra los links para mostrar la siguiente o anterior página de posts cuando sea aplicable.
[codesyntax lang=»php»]
<?php /** * Return the URL for the first link found in the post content. * * @return string|bool URL or false when no link is present. */ function newtheme_url_grabber() { if ( ! preg_match( '/<a\s[^>]*?href=[\'"](.+?)[\'"]/is', get_the_content(), $matches ) ) return false; return esc_url_raw( $matches[1] ); }
[/codesyntax]
Devuelve la url del primer link encontrado en el contenido del post.
[codesyntax lang=»php»]
<?php /** * Count the number of footer sidebars to enable dynamic classes for the footer */ function newtheme_footer_sidebar_class() { $count = 0; if ( is_active_sidebar( 'sidebar-3' ) ) $count++; if ( is_active_sidebar( 'sidebar-4' ) ) $count++; if ( is_active_sidebar( 'sidebar-5' ) ) $count++; $class = ''; switch ( $count ) { case '1': $class = 'one'; break; case '2': $class = 'two'; break; case '3': $class = 'three'; break; } if ( $class ) echo 'class="' . $class . '"'; }
[/codesyntax]
Cuenta el número de sidebars habilitados para el pie de página y devuelve la clase que corresponda.
[codesyntax lang=»php»]
<?php if ( ! function_exists( 'newtheme_comment' ) ) : /** * Template for comments and pingbacks. * * To override this walker in a child theme without modifying the comments template * simply create your own newtheme_comment(), and that function will be used instead. * * Used as a callback by wp_list_comments() for displaying the comments. * */ function newtheme_comment( $comment, $args, $depth ) { $GLOBALS['comment'] = $comment; switch ( $comment->comment_type ) : case 'pingback' : case 'trackback' : ?> <li class="post pingback"> <p><?php _e( 'Pingback:', 'newtheme' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?></p> <?php break; default : ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <article id="comment-<?php comment_ID(); ?>" class="comment"> <footer class="comment-meta"> <div class="comment-author vcard"> <?php $avatar_size = 68; if ( '0' != $comment->comment_parent ) $avatar_size = 39; echo get_avatar( $comment, $avatar_size ); /* translators: 1: comment author, 2: date and time */ printf( __( '%1$s on %2$s <span class="says">said:</span>', 'newtheme' ), sprintf( '<span class="fn">%s</span>', get_comment_author_link() ), sprintf( '<a href="%1$s"><time pubdate datetime="%2$s">%3$s</time></a>', esc_url( get_comment_link( $comment->comment_ID ) ), get_comment_time( 'c' ), /* translators: 1: date, 2: time */ sprintf( __( '%1$s at %2$s', 'newtheme' ), get_comment_date(), get_comment_time() ) ) ); ?> <?php edit_comment_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .comment-author .vcard --> <?php if ( $comment->comment_approved == '0' ) : ?> <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'newtheme' ); ?></em> <br /> <?php endif; ?> </footer> <div class="comment-content"><?php comment_text(); ?></div> <div class="reply"> <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>↓</span>', 'newtheme' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?> </div><!-- .reply --> </article><!-- #comment-## --> <?php break; endswitch; } endif; // ends check for newtheme_comment()
[/codesyntax]
Esta función genera el código html necesario para mostrar cada comentario de un post.
[codesyntax lang=»php»]
<?php if ( ! function_exists( 'newtheme_posted_on' ) ) : /** * Prints HTML with meta information for the current post-date/time and author. * Create your own newtheme_posted_on to override in a child theme */ function newtheme_posted_on() { printf( __( '<span class="sep">Posted on </span><a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate>%4$s</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span></span>', 'newtheme' ), esc_url( get_permalink() ), esc_attr( get_the_time() ), esc_attr( get_the_date( 'c' ) ), esc_html( get_the_date() ), esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), esc_attr( sprintf( __( 'View all posts by %s', 'newtheme' ), get_the_author() ) ), get_the_author() ); } endif;
[/codesyntax]
Esta función devuelve los metadatos de un post.
[codesyntax lang=»php»]
<?php /** * Adds two classes to the array of body classes. * The first is if the site has only had one author with published posts. * The second is if a singular post being displayed */ function newtheme_body_classes( $classes ) { if ( function_exists( 'is_multi_author' ) && ! is_multi_author() ) $classes[] = 'single-author'; if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) ) $classes[] = 'singular'; return $classes; } add_filter( 'body_class', 'newtheme_body_classes' );
[/codesyntax]
Esta función devuelve las clases de estilos que corresponden para la etiqueta body dependiendo del tipo de página que se muestre al usuario.
WordPress 3.x para desarrolladores: Temas y plantillas, index.php y content.php
0Con el anterior post os dejé un poco colgados con el tutorial, expliqué las plantillas más básicas y la creación de las plantillas de la cabecera y el pie, además de la explicación del código de cada una. Pero aun falta la parte más importante de todas, el contenido.
EL BUCLE ( THE LOOP )
Bueno, vamos al lío y explico esto del bucle. En el archivo index.php añadimos el siguiente código entre wp_head() y wp_footer().
[codesyntax lang=»php»]
<div id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <?php newtheme_content_nav( 'nav-above' ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php newtheme_content_nav( 'nav-below' ); ?> <?php else : ?> <article id="post-0" class="post no-results not-found"> <header class="entry-header"> <h1 class="entry-title"><?php _e( 'Nothing Found', 'newtheme' ); ?></h1> </header><!-- .entry-header --> <div class="entry-content"> <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'newtheme' ); ?></p> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?>
[/codesyntax]
Lo primero que hacemos es crear dos capas con id primary y content, ambas contendrán el contenido que se muestre en la página.
Seguidamente tenemos un condicional que comprueba si hay posts para mostrar en la página.
Si es que sí hay posts, WordPress procesará las cinco siguientes líneas de código y dentro de estas nuestro bucle o The Loop.
Antes y después del bucle se hace una llamada a la función newtheme_content_nav(), este es un hook para crear el paginador de post en el caso de que haya más que las que pueden entrar en una página. Esta función la crearemos más adelante en el archivo functions.php.
El bucle while se ejecutará mientras have_posts() sea true, y los datos del post se obtienen de the_post(), que serán procesados en la plantilla correspondiente utilizando get_template_part( ‘content’, get_post_format() ). Esta función (get_template_part()) llama a la plantilla content para procesarla y generar el código html correspondiente.
Si no hay posts entonces se muestra un mensaje al usuario indicando esto mismo.
Cerramos las etiquetas div. Por último nos encontramos con la función get_sidebar(), que nos generará la barra lateral con los widgets de nuestro blog. De hecho ya vimos esta función en la plantilla del pie (footer.php) en ella nos encontramos con la función get_sidebar( ‘footer’ ). La razón de que una función tenga argumento y otra no, radica en la plantilla a usar. En el caso del sidebar del pie, se utilizará sidebar-footer.php y para el sidebar del index.php usaremos la genérica: sidebar.php.
Si ejecutásemos ahora la página principal de nuestro WordPress no veríamos contenido, la razón es que aun no hemos creado la plantilla que muestra el contenido, así que vamos a ello.
CONTENT.PHP
Este archivo es el encargado de mostrar el contenido de los posts y maquetarlo en html. Para ello vamos a crear el archivo content.php y añadir las siguientes líneas de código:
[codesyntax lang=»php»]
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php if ( is_sticky() ) : ?> <hgroup> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> <h3 class="entry-format"><?php _e( 'Featured', 'newtheme' ); ?></h3> </hgroup> <?php else : ?> <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1> <?php endif; ?> <?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?> <?php if ( comments_open() && ! post_password_required() ) : ?> <div class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?> </div> <?php endif; ?> </header><!-- .entry-header --> <?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php endif; ?> <footer class="entry-meta"> <?php $show_sep = false; ?> <?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?> <?php /* translators: used between list items, there is a space after the comma */ $categories_list = get_the_category_list( __( ', ', 'newtheme' ) ); if ( $categories_list ): ?> <span class="cat-links"> <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list ); $show_sep = true; ?> </span> <?php endif; // End if categories ?> <?php /* translators: used between list items, there is a space after the comma */ $tags_list = get_the_tag_list( '', __( ', ', 'newtheme' ) ); if ( $tags_list ): if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="tag-links"> <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); $show_sep = true; ?> </span> <?php endif; // End if $tags_list ?> <?php endif; // End if 'post' == get_post_type() ?> <?php if ( comments_open() ) : ?> <?php if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'nwtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; // End if comments_open() ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
Sí, es mucho código pero como siempre os lo explicaré casi línea por línea.
En primer lugar tenemos las etiquetas article y header del post:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header">
Aquí vemos dos funciones de WordPress, la primera the_ID() sirve para devolver el id del post, el segundo genera las clases de estilos para el post.
Ha continuación tenemos el siguiente bloque condicional dentro de la etiqueta header:
[codesyntax lang=»php»]
<?php if ( is_sticky() ) : ?> <hgroup> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> <h3 class="entry-format"><?php _e( 'Featured', 'newtheme' ); ?></h3> </hgroup> <?php else : ?> <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1> <?php endif; ?> <?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?> <?php if ( comments_open() && ! post_password_required() ) : ?> <div class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?> </div> <?php endif; ?>
[/codesyntax]
Como puedes ver el condicional comprueba la función is_sticky(). Esta función comprueba si el post ha sido seleccionado para que se mantenga fijo en la página principal o como destacado. Como verás, si el post está fijo en la página principal se mostrará el título de la entrada y un texto (Featured o Destacado) que indica el estado de este.
En el caso que no sea un post destacado se genera el título por defecto. Para generar la url se utiliza la función the_permalink() que genera la url absoluta del post. Además se añade al atributo title del link el título del post.
[codesyntax lang=»php»]
<?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?>
[/codesyntax]
Este código genera el html correspondiente para las etiquetas meta de la página/post: fecha/hora, autor, descripción, etc.
[codesyntax lang=»php»]
<?php if ( comments_open() && ! post_password_required() ) : ?> <div class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?> </div> <?php endif; ?>
[/codesyntax]
Aquí se comprueba si el post permite comentarios y no es requerida una contraseña. Dentro del condicional se crea el link que mostrará los comentarios, además el texto del vínculo será el número de comentarios que tiene el post. Esto crearía un número al lado del título del post, normalmente con un fondo con una burbuja de diálogo.
[codesyntax lang=»php»]
<?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php endif; ?>
[/codesyntax]
Se comprueba si lo que se está mostrando es una búsqueda, si es así se carga parte del cuerpo del post pero añadiendo al final del texto […].
Si no se está mostrando una búsqueda se carga el contenido con la función the_content(), que en el caso que el post contenga un separador del tipo «read more… » se mostrará un texto que lo indique. Por último se muestran una serie de links para poder ir directamente a las diferentes páginas del post.
[codesyntax lang=»php»]
<footer class="entry-meta"> <?php $show_sep = false; ?> <?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?> <?php /* translators: used between list items, there is a space after the comma */ $categories_list = get_the_category_list( __( ', ', 'newtheme' ) ); if ( $categories_list ): ?> <span class="cat-links"> <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list ); $show_sep = true; ?> </span> <?php endif; // End if categories ?> <?php /* translators: used between list items, there is a space after the comma */ $tags_list = get_the_tag_list( '', __( ', ', 'newtheme' ) ); if ( $tags_list ): if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="tag-links"> <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); $show_sep = true; ?> </span> <?php endif; // End if $tags_list ?> <?php endif; // End if 'post' == get_post_type() ?> <?php if ( comments_open() ) : ?> <?php if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'nwtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; // End if comments_open() ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta -->
[/codesyntax]
Llegamos al pie del post donde se comprobará primero que lo que se muestra es un post y no una búsqueda, en el caso de ser esto afirmativo se cargan las categorías a la que pertenezca el post y se genera su código html correspondiente.
Después se carga el listado de tags o etiquetas y se genera el código html para mostrarlas.
A continuación mostramos de nuevo el número de comentarios del post.
Por último mostramos el link de editar post, siempre y cuando el usuario tenga permiso para ello.
WordPress 3.x para desarrolladores: Temas y plantillas, conceptos básicos.
0Los temás en WordPress se alojan en la carpeta /wp-content/themes. En cada tema encontraremos los diferentes archivos que lo componen (archivos css, plantillas, archivo functions.php, imágenes y archivos javascript).
TEMAS HIJOS
En WordPress puedes crear temas que sean derivados o hijos de otros. Por ejemplo, si en /wp-content/themes un tema llamado twentyeleven, solo habría que crear otro con el mismo nombre pero añadiendo al final -child. Por tanto tendríamos /wp-content/themes/twentyeleven y /wp-content/themes/twentyeleven-child.
Como mínimo un tema hijo debe contener el archivo style.css, el resto de archivos son opcionales (plantillas, archivo functions.php, css, javascript, etc)
HOJAS DE ESTILO DE LOS TEMAS
Cada tema deberá tener un archivo css llamado style.css donde se añadirá información sobre el tema que se está utilizando. Ejemplo:
/* Theme Name: Twenty Ten Theme URI: http://wordpress.org/ Description: The 2010 default theme for WordPress. Author: wordpressdotorg Author URI: http://wordpress.org/ Version: 1.0 Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional) License: License URI: General comments (optional). */
DIRECTRICES DE LAS HOJAS DE ESTILO
- Cumplir con las normas CSS durante la creación de tus CSS.
- Usar CSS válido siempre que sea posible. Como excepción, el uso de prefijos específicos de los proveedores para tomar ventaja de las características de CSS3.
- Minimizar hacks CSS. La excepción obvia es navegadores con soporte específico, por lo general las versiones de IE. Si es posible, hacks CSS separados en secciones separadas o archivos separados.
- Todos los elementos HTML posibles deben ser estilizados por el tema, tanto el contenido de los post/páginas y en el contenido de los comentarios.
- Tablas, títulos, imágenes, listas, bloques de citas, etcétera.
- Añadir estilos para impresión es muy recomendable.
- Puede incluir una hoja de estilos de impresión con media=»print» o añadir en un bloque de medios impresos en su hoja de estilo principal.
ARCHIVO DE FUNCIONES
Un tema puede opcionalmente usar un archivo de funciones, el cual residirá en el subdirectorio del tema y se nombrará como functions.php. Este archivo básicamente actua como un plugin, y si está presente en el tema que tu estás usando, será automáticamente cargado durante el inicio de WordPress. Algunos usos sugeridos para este archivo:
- Habilitar las funciones de temas, tales como barras laterales, menús de navegación, miniaturas post, formatos de post, los encabezados personalizados, fondos personalizados, entre otros.
- Definir las funciones utilizadas en varios archivos de plantilla del tema.
- Crear un menú de opciones, dando a los propietarios del sitio opciones de colores, estilos y otros aspectos de su tema.
ARCHIVOS DE PLANTILLAS
Las plantillas son archivos de código PHP utilizadas para generar las páginas solicitadas por los visitantes. Echemos un vistazo a las distintas plantillas que se pueden definir como parte de un tema.
LISTA DE ARCHIVOS DE PLANTILLAS
Esta lista muestra los principales archivos de plantilla de WordPress para cada tema, aunque no tienen porqué crearse todos si no es necesario.
- style.css: La hoja de estilos principal. Debe ser incluido en el tema y contener la información del encabezado.
- rtl.css: La hoja de estilo RTL. Se incluirá de forma automática si la dirección del texto de la página web es de derecha a izquierda. El archivo puede ser generado usando el plugin RTLer.
- index.php: La plantilla principal. Si el tema proporciona sus propias plantillas, index.php debe estar presente.
- comments.php: La plantilla de comentarios.
- front-page.php: La plantilla de la página principal. Usala solo si usas una página estática como página principal.
- home.php: La plantilla de página de inicio, la cual es la página principal por defecto. Si utiliza una página estática esta es la plantilla para la página con los últimos mensajes.
- single.php: La plantilla de post único. Se utiliza cuando se consulta un solo post.
- single-<post-type>.php: Esta plantilla es utilizada para mostrar una plantilla concreta para cada tipo de entrada o post.
- page.php: Usada cuando se consulta una página individual.
- category.php: Usada cuando una categoría es consultada.
- tag.php: Usada cuando se pide una lista de entradas relacionadas con una etiqueta o tag.
- taxonomy.php: Usada cuando se pide una lista de entradas relacionadas con un término o term de una taxonomía
- author.php: Usada cuando se pide una lista de entradas escritas por un autor.
- date.php: Usada cuando se pide un listado de entradas por fecha.
- archive.php: La plantilla de archivo. Se utiliza cuando una categoría, autor o fecha es consultada. Tenga en cuenta que esta plantilla va a ser reemplazada por category.php, author.php y date.php por sus respectivos tipos de consulta.
- search.php: Usada cuando se realiza un búsqueda.
- attachment.php: Se visualiza cuando se muestra un archivo adjunto.
- image.php: Se utiliza cuando se visualiza un archivo adjunto de imagen único. Si no está presente, attachment.php se utilizará.
- 404.php: Se utiliza cuando WordPress no puede encontrar una entrada o página para la consulta realizada.
PLANTILLAS BÁSICAS
Lo archivos mínimos que debe contener un tema de WordPress son:
- style.css
- index.php
- comments.php
- comments-popup.php
- footer.php
- header.php
- sidebar.php
WordPress 3.x para desarrolladores: Convenciones
0Aunque es un tema cuanto menos, aburrido, es muy necesario a la hora de trabajar en grupo, o si vas a publicar tu plugin o plantilla en WordPress. Las convenciones son normas aplicadas al código para que todos los desarrolladores puedan interpretar el código sin muchos problemas. También por estética: queda más elegante un código con la misma tabulación (por ejemplo) en cada linea que, que cada programador ponga la tabulación que se le antoje. Sin más preámbulos vamos al tema:
COMILLAS SIMPLES Y DOBLES
[codesyntax lang=»php»]
<?php echo '<a href="/static/link" title="Yeah yeah!">Link name</a>'; echo "<a href='$link' title='$linktitle'>$linkname</a>"
[/codesyntax]
Si no tienes nada que evaluar en la cadena, pon comillas simples, sino comillas dobles.
SANGRÍA
Usa tabulaciones y no espacios.
[codesyntax lang=»php»]
<?php $foo = 'somevalue'; $foo2 = 'somevalue2'; $foo34 = 'somevalue3'; $foo5 = 'somevalue4';
[/codesyntax]
Los arrays asociativos deberían empezar en una linea nueva.
[codesyntax lang=»php»]
<?php $my_array = array( 'foo' => 'somevalue', 'foo2' => 'somevalue2', 'foo3' => 'somevalue3', 'foo34' => 'somevalue3', );
[/codesyntax]
LLAVES
En bloques multilinea se deben poner las llaves tal como sigue:
[codesyntax lang=»php»]
<?php if ( condition ) { action1(); action2(); } elseif ( condition2 && condition3 ) { action3(); action4(); } else { defaultaction(); }
[/codesyntax]
Si solo hay una linea en cada bloque se pueden omitir por brevedad.
[codesyntax lang=»php»]
<?php if ( condition ) action1(); elseif ( condition2 ) action2(); else action3();
[/codesyntax]
Si hay un bloque con más de una linea se deberán escribir con llaves:
[codesyntax lang=»php»]
<?php if ( condition ) { action1(); } elseif ( condition2 ) { action2a(); action2b(); }
[/codesyntax]
Los bucles deben contenerse siempre entre llaves:
[codesyntax lang=»php»]
<?php foreach ( $items as $item ) { process_item( $item ); }
[/codesyntax]
NO UTILIZAR LA ETIQUETA DE INICIO CORTA DE PHP
La forma correcta sería:
<?php ... ?>
NO CERRAR EL SCRIPT DE PHP CON SU ETIQUETA
Es decir en vez de usar:
<?php ... ?>
Usaremos solo la inicial
<?php ...
USO DEL ESPACIO
Pon espacios siempre después de las comas y en ambos lados de los operadores lógicos, de comparación, de cadenas y de asignación.
x == 23 foo && bar ! foo array( 1, 2, 3 ) $baz . '-5' $term .= 'X'
Pon espacios a ambos lados de los paréntesis de apertura y cierre.
foreach ( $foo as $bar ) { ...
Cuando definas una función, hazlo así:
function my_function( $param1 = 'foo', $param2 = 'bar' ) { ...
Al realizar comparaciones lógicas:
if ( ! $foo ) { ...
Cuando hagas una conversión de tipos:
foreach ( (array) $foo as $bar ) { ... $foo = (boolean) $bar;
Cuando se hace referencia a un elemento de un array, solo se incluyen espacios en blanco cuando es una variable:
$x = $foo['bar'];$x = $foo[ $bar ];
FORMATEO DE SENTENCIAS SQL
Las partes de la sentencia que sean palabras de SQL deben ir en mayusculas, como SELECT o WHERE.
Es recomendable usar el método $wpdb->prepare() para formatear la sentencia SQL. Este método añadirá las comillas a los valores que lo necesiten.
$var = "dangerous'"; // Los datos en crudo podrían o no necesitar ser formateados $id = some_foo_number(); // El dato que nosotros esperamos es un número, pero no estamos seguros $wpdb->query( $wpdb->prepare( "UPDATE $wpdb->posts SET post_title = %s WHERE ID = %d", $var, $id ) );
%s se utiliza cuando el valor es una cadena (string) y %d cuando es un número. En el método prepare() se añaden las variables que se formatearán y añadirán a la consulta en orden.
CONVENCIONES DE NOMENCLATURAS
Usa letras minúsculas en variables y nombres de funciones. Separa las palabras con guiones bajos (_).
function some_name( $some_variable ) { [...] }
Los nombres de clases deben utilizar palabras capitalizadas separadas con guiones bajos. Las siglas deben estar en mayúsculas:
class Walker_Category extends Walker { [...] } class WP_HTTP { [...] }
Los archivos deben ser nombrados descriptivamente con letras minúsculas y las palabras deben separarse con guiones.
my-plugin-name.php
Los nombres de archivos de clase se basarán en el nombre de la clase precedido de class- y los guiones bajos de la clase serán sustituidos por guiones, por ejemplo WP_Error pasa a ser:
class-wp-error.php
VALORES DE PARÁMETROS DE FUNCIONES AUTOEXPLICATIVOS
Se prefieren valores de cadena que solo true y false cuando se llama a las funciones.
// Correcto function eat( $what, $speed = 'slowly' ) { ... } eat( 'mushrooms' ); eat( 'mushrooms', 'slowly' ); eat( 'dogfood', 'fast' );
OPERADOR TERNARIO
El operador ternario está bien, pero siempre que lo uses prueba que la sentencia sea verdad, no falsa. De la otra forma es confuso. En el caso de empty() se permite el uso de ! empty(), ya que es más legible.
// (si la sentencia es verdad) ? (hacer esto) : (sino, hacer esto); $musictype = ( 'jazz' == $music ) ? 'cool' : 'blah'; // (si el campo no está vacío ) ? (hacer esto) : (sino, hacer esto);
CONDICIONES YODA
if( true == $the_force ){ $victorious = you_will( $be ); }
Siempre que hagas comparaciones lógicas pon la variable en el lado derecho, la constante o el literal en el izquierdo.
Esto se utiliza para en el caso de que en vez de == pongas = (admítelo, más de una vez te habrá pasado), de esta manera saltará un error ya que no puedes asignar a una constante el valor de la variable.
Es un poco extraño, pero útil.
CÓDIGO LIMPIO
En general, la legibilidad es más importante que la limpieza o la brevedad.
isset( $var ) || $var = some_function();if ( ! isset( $var ) ) $var = some_function();
WordPress 3.x para desarrolladores: Temas y plantillas, single.php y comments.php
0Vamos con dos plantillas más, esta vez las que generan la página del post (single.php) y la de los comentarios (comment.php).
SINGLE.PHP
Creamos el archivo single.php y añadimos el siguiente código:
[codesyntax lang=»php»]
[/codesyntax]
Como puedes ver la estructura de este archivo es muy parecida a la de index.php, tenemos una llamada get_header() para crear la cabecera y otra a get_footer() para crear el pie. En medio encontramos el bloque que generará el html para mostrar el post. Tenemos el mismo bucle que teníamos en la página principal además de dos funciones que generan los links hacia el post anterior y el posterior: previous_post_link() y next_post_link().
Se hace una llamada a get_template_part() que cargará la plantilla content-single.php.
Por último carga la plantilla de comentarios con la función comments_template().
COMMENTS.PHP
Crea el archivo comments.php y añade el siguiente código:
[codesyntax lang=»php»]
[/codesyntax]
Vamos a ver este código poco a poco:
[codesyntax lang=»php»]
[/codesyntax]
En primer lugar comprobamos si los comentarios están protegidos por contraseña, si es así se devuelve un return, que evitará que el resto de la plantilla se procese, pero se continuará ejecutando el script.
En el caso de que los comentarios no estén protegidos por contraseña, se comprueba que el post tenga comentarios utilizando la función have_comments(), si es que sí los tiene se genera el html correspondiente.
[codesyntax lang=»php»]
[/codesyntax]
Como ves, aquí se comprueba si hay comentarios, en caso positivo se crea la cabecera de los comentarios.
[codesyntax lang=»php»]
[/codesyntax]
Se crea el sistema de navegación de los comentarios, para mostrar los comentarios más recientes o los más antiguos.
[codesyntax lang=»php»]
[/codesyntax]
Añadimos los comentarios utilizando una llamada a wp_list_comments(), en el que se indica que procese los datos de los comentarios utilizando la función newtheme_comment que encontrará en el archivo functions.php.
Para ver otros argumentos que se le pueden indicar a la función wp_list_comments() ver http://codex.wordpress.org/Function_Reference/wp_list_comments
[codesyntax lang=»php»]
[/codesyntax]
Volvemos a crear el sistema de navegación de los comentarios, pero esta vez al finalizar la lista de comentarios.
[codesyntax lang=»php»]
[/codesyntax]
Por último mostramos un mensaje en el caso de que los comentarios estén cerrados, además, mostramos el formulario para enviar un comentario.