Interadictos
Para los que no pueden separarse de internet
Entradas etiquetadas con tema
El widget de pestañas falla en el tema Mystique 3.2.9.3 para WordPress
4hace 10 años
El widget de pestañas permite mostrar en un mismo espacio, lo que habitualmente tendríamos que tener en varios widgets. En este blog se muestra en la columna de la derecha, donde podéis navegar por varios elementos que os ofrecen diversa información y contenidos del blog.
Pues bien, desde hace un tiempo, vengo observando como al pulsar en las pestañas, estas, simplemente, no hacen nada: no carga otro contenido, no hay navegación, etc.
Como no quiero aburriros con el proceso de búsqueda del error, voy al grano: dentro de wp-content/themes/mystique/js hay un archivo llamado jquery.atom.js. En este archivo localizamos las siguientes líneas:
$('.sections', tabs).css('height', $("#" + $('.navi li.active a', tabs).attr('href'), tabs).outerHeight(true));
var current = $("#" + $('.navi li.active', tabs).removeClass('active').find('a').attr('href'), tabs),
next = $("#" + $(this).parent('li').addClass('active').find('a').attr('href'), tabs);
Y las sustituis por las siguientes líneas:
$('.sections', tabs).css('height', $($('.navi li.active a', tabs).attr('href'), tabs).outerHeight(true));
var current = $($('.navi li.active', tabs).removeClass('active').find('a').attr('href'), tabs),
next = $($(this).parent('li').addClass('active').find('a').attr('href'), tabs);
Como ya habrás observado solo hay que eliminar la almohadilla que hay dentro de los selectores («#» + ), que es lo que provoca que no funcionen las pestañas.
Tendrás que comprimir el archivo y llamarlo jquery.atom.min.js, para que al activar la opción de Mystique de «Optimizar el sitio web para carga rápida», no vuelva a reproducirse el fallo. También puedes modificar este archivo a mano, aunque solo te lo recomiendo si sabes lo que estas haciendo.
WordPress 3.x para desarrolladores: Temas y plantillas, category.php, author.php, archive.php y 404.php
0hace 11 años
Estas son las últimas plantillas que crearemos para nuestro tema.
CATEGORY.PHP
Creamos el archivo category.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying Category Archive pages. * * @package WordPress * @subpackage New_Theme */ get_header(); ?> <section id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <header class="page-header"> <h1 class="page-title"><?php printf( __( 'Category Archives: %s', 'newtheme' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1> <?php $category_description = category_description(); if ( ! empty( $category_description ) ) echo apply_filters( 'category_archive_meta', '<div class="category-archive-meta">' . $category_description . '</div>' ); ?> </header> <?php newtheme_content_nav( 'nav-above' ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php /* Include the Post-Format-specific template for the content. * If you want to overload this in a child theme then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ 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> <?php get_search_form(); ?> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </section><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
[/codesyntax]
Esta plantilla está creada para mostrar los post que están en una misma categoría. La estructura de la página es idéntica al del resto que hemos visto del estilo.
AUTHOR.PHP
Creamos el archivo author-php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying Author Archive pages. * * @package WordPress * @subpackage New_Theme */ get_header(); ?> <section id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <?php /* Queue the first post, that way we know * what author we're dealing with (if that is the case). * * We reset this later so we can run the loop * properly with a call to rewind_posts(). */ the_post(); ?> <header class="page-header"> <h1 class="page-title author"><?php printf( __( 'Author Archives: %s', 'newtheme' ), '<span class="vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( "ID" ) ) ) . '" title="' . esc_attr( get_the_author() ) . '" rel="me">' . get_the_author() . '</a></span>' ); ?></h1> </header> <?php /* Since we called the_post() above, we need to * rewind the loop back to the beginning that way * we can run the loop properly, in full. */ rewind_posts(); ?> <?php newtheme_content_nav( 'nav-above' ); ?> <?php // If a user has filled out their description, show a bio on their entries. if ( get_the_author_meta( 'description' ) ) : ?> <div id="author-info"> <div id="author-avatar"> <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'newtheme_author_bio_avatar_size', 60 ) ); ?> </div><!-- #author-avatar --> <div id="author-description"> <h2><?php printf( __( 'About %s', 'newtheme' ), get_the_author() ); ?></h2> <?php the_author_meta( 'description' ); ?> </div><!-- #author-description --> </div><!-- #author-info --> <?php endif; ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php /* Include the Post-Format-specific template for the content. * If you want to overload this in a child theme then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ 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> <?php get_search_form(); ?> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </section><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
[/codesyntax]
Esta plantilla muestra los post que un autor haya escrito. Lo más relevante del código es que para obtener los datos del autor se recupera el primer post, se genera la cabecera del contenido y después se reinicia el dataset para mostrar los post desde el primero, utilizando para ello la función rewind_posts().
ARCHIVE.PHP
Creamos el archivo archive.php y añadimos el siguiete código:
[codesyntax lang=»php»]
<?php /** * The template for displaying Archive pages. * * Used to display archive-type pages if nothing more specific matches a query. * For example, puts together date-based pages if no date.php file exists. * * Learn more: http://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Twenty_Eleven */ get_header(); ?> <section id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <header class="page-header"> <h1 class="page-title"> <?php if ( is_day() ) : ?> <?php printf( __( 'Daily Archives: %s', 'newtheme' ), '<span>' . get_the_date() . '</span>' ); ?> <?php elseif ( is_month() ) : ?> <?php printf( __( 'Monthly Archives: %s', 'newtheme' ), '<span>' . get_the_date( _x( 'F Y', 'monthly archives date format', 'newtheme' ) ) . '</span>' ); ?> <?php elseif ( is_year() ) : ?> <?php printf( __( 'Yearly Archives: %s', 'newtheme' ), '<span>' . get_the_date( _x( 'Y', 'yearly archives date format', 'newtheme' ) ) . '</span>' ); ?> <?php else : ?> <?php _e( 'Blog Archives', 'newtheme' ); ?> <?php endif; ?> </h1> </header> <?php newtheme_content_nav( 'nav-above' ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php /* Include the Post-Format-specific template for the content. * If you want to overload this in a child theme then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ 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> <?php get_search_form(); ?> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </section><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
[/codesyntax]
Esta plantilla muestra los post publicados en una fecha o entre fechas concretas.
WordPress 3.x para desarrolladores: temas y plantillas, tag.php, search.php, searchform.php e image.php
0hace 11 años
Llegamos a las penúltimas plantillas por comentar.
TAG.PHP
Creamos el archivo tag.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template used to display Tag Archive pages * * @package WordPress * @subpackage New_Theme */ get_header(); ?> <section id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <header class="page-header"> <h1 class="page-title"><?php printf( __( 'Tag Archives: %s', 'newtheme' ), '<span>' . single_tag_title( '', false ) . '</span>' ); ?></h1> <?php $tag_description = tag_description(); if ( ! empty( $tag_description ) ) echo apply_filters( 'tag_archive_meta', '<div class="tag-archive-meta">' . $tag_description . '</div>' ); ?> </header> <?php newtheme_content_nav( 'nav-above' ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php /* Include the Post-Format-specific template for the content. * If you want to overload this in a child theme then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ 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> <?php get_search_form(); ?> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </section><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
[/codesyntax]
Prácticamente es idéntico al resto de plantillas del estilo que hemos visto. En este caso muestra un listado de post por la etiqueta elegida.
SEARCH.PHP
Creamos el archivo search.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying Search Results pages. * * @package WordPress * @subpackage New_Theme */ get_header(); ?> <section id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <header class="page-header"> <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'newtheme' ), '<span>' . get_search_query() . '</span>' ); ?></h1> </header> <?php newtheme_content_nav( 'nav-above' ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php /* Include the Post-Format-specific template for the content. * If you want to overload this in a child theme then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ 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( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'newtheme' ); ?></p> <?php get_search_form(); ?> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </section><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
[/codesyntax]
Esta plantilla es la que muestra el listado de post que coinciden con la búsqueda que realiza el usuario.
SEARCHFORM.PHP
Creamos el archivo searchform.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying search forms in Twenty Eleven * * @package WordPress * @subpackage New_Theme */ ?> <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <label for="s" class="assistive-text"><?php _e( 'Search', 'newtheme' ); ?></label> <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'newtheme' ); ?>" /> <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'newtheme' ); ?>" /> </form>
[/codesyntax]
Esta plantilla es la que genera el formulario de búsqueda. Como ves no tiene mucho que explicar.
IMAGE.PHP
Creamos el archivo image.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php
/**
* The template for displaying image attachments.
*
* @package WordPress
* @subpackage New_Theme
*/
get_header(); ?>
<div id="primary" class="image-attachment">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<nav id="nav-single">
<h3 class="assistive-text"><?php _e( 'Image navigation', 'newtheme' ); ?></h3>
<span class="nav-previous"><?php previous_image_link( false, __( '← Previous' , 'newtheme' ) ); ?></span>
<span class="nav-next"><?php next_image_link( false, __( 'Next →' , 'newtheme' ) ); ?></span>
</nav><!-- #nav-single -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-meta">
<?php
$metadata = wp_get_attachment_metadata();
printf( __( '<span class="meta-prep meta-prep-entry-date">Published </span> <span class="entry-date"><abbr class="published" title="%1$s">%2$s</abbr></span> at <a href="%3$s" title="Link to full-size image">%4$s × %5$s</a> in <a href="%6$s" title="Return to %7$s" rel="gallery">%8$s</a>', 'newtheme' ),
esc_attr( get_the_time() ),
get_the_date(),
esc_url( wp_get_attachment_url() ),
$metadata['width'],
$metadata['height'],
esc_url( get_permalink( $post->post_parent ) ),
esc_attr( strip_tags( get_the_title( $post->post_parent ) ) ),
get_the_title( $post->post_parent )
);
?>
<?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<div class="entry-attachment">
<div class="attachment">
<?php
/**
* Grab the IDs of all the image attachments in a gallery so we can get the URL of the next adjacent image in a gallery,
* or the first image (if we're looking at the last image in a gallery), or, in a gallery of one, just the link to that image file
*/
$attachments = array_values( get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) ) );
foreach ( $attachments as $k => $attachment ) {
if ( $attachment->ID == $post->ID )
break;
}
$k++;
// If there is more than 1 attachment in a gallery
if ( count( $attachments ) > 1 ) {
if ( isset( $attachments[ $k ] ) )
// get the URL of the next image attachment
$next_attachment_url = get_attachment_link( $attachments[ $k ]->ID );
else
// or get the URL of the first image attachment
$next_attachment_url = get_attachment_link( $attachments[ 0 ]->ID );
} else {
// or, if there's only 1 image, get the URL of the image
$next_attachment_url = wp_get_attachment_url();
}
?>
<a href="<?php echo esc_url( $next_attachment_url ); ?>" title="<?php the_title_attribute(); ?>" rel="attachment"><?php
$attachment_size = apply_filters( 'newtheme_attachment_size', 848 );
echo wp_get_attachment_image( $post->ID, array( $attachment_size, 1024 ) ); // filterable image width with 1024px limit for image height.
?></a>
<?php if ( ! empty( $post->post_excerpt ) ) : ?>
<div class="entry-caption">
<?php the_excerpt(); ?>
</div>
<?php endif; ?>
</div><!-- .attachment -->
</div><!-- .entry-attachment -->
<div class="entry-description">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-description -->
</div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->
<?php comments_template(); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
[/codesyntax]
Esta plantilla nos permite crear una galería de imágenes simplemente añadiendo las imágenes desde la administración.
WordPress 3.x para desarrolladores: Temas y plantillas, showcase.php y content-intro.php
0hace 11 años
Estas dos plantillas permiten crear un nuevo formato de página reestructurando los sidebars y los posts.
SHOWCASE.PHP
Creamos el archivo showcase.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php
/**
* Template Name: Showcase Template
* Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
*
* The showcase template in New Theme consists of a featured posts section using sticky posts,
* another recent posts area (with the latest post shown in full and the rest as a list)
* and a left sidebar holding aside posts.
*
* We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
*
* @package WordPress
* @subpackage New_Theme
*/
// Enqueue showcase script for the slider
wp_enqueue_script( 'newtheme-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
get_header(); ?>
<div id="primary" class="showcase">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php
/**
* We are using a heading by rendering the_content
* If we have content for this page, let's display it.
*/
if ( '' != get_the_content() )
get_template_part( 'content', 'intro' );
?>
<?php endwhile; ?>
<?php
/**
* Begin the featured posts section.
*
* See if we have any sticky posts and use them to create our featured posts.
* We limit the featured posts at ten.
*/
$sticky = get_option( 'sticky_posts' );
// Proceed only if sticky posts exist.
if ( ! empty( $sticky ) ) :
$featured_args = array(
'post__in' => $sticky,
'post_status' => 'publish',
'posts_per_page' => 10,
'no_found_rows' => true,
);
// The Featured Posts query.
$featured = new WP_Query( $featured_args );
// Proceed only if published posts exist
if ( $featured->have_posts() ) :
/**
* We will need to count featured posts starting from zero
* to create the slider navigation.
*/
$counter_slider = 0;
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) )
$header_image_width = get_theme_support( 'custom-header', 'width' );
else
$header_image_width = HEADER_IMAGE_WIDTH;
?>
<div class="featured-posts">
<h1 class="showcase-heading"><?php _e( 'Featured Post', 'newtheme' ); ?></h1>
<?php
// Let's roll.
while ( $featured->have_posts() ) : $featured->the_post();
// Increase the counter.
$counter_slider++;
/**
* We're going to add a class to our featured post for featured images
* by default it'll have the feature-text class.
*/
$feature_class = 'feature-text';
if ( has_post_thumbnail() ) {
// ... but if it has a featured image let's add some class
$feature_class = 'feature-image small';
// Hang on. Let's check this here image out.
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) );
// Is it bigger than or equal to our header?
if ( $image[1] >= $header_image_width ) {
// If bigger, let's add a BIGGER class. It's EXTRA classy now.
$feature_class = 'feature-image large';
}
}
?>
<section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
<?php
/**
* If the thumbnail is as big as the header image
* make it a large featured post, otherwise render it small
*/
if ( has_post_thumbnail() ) {
if ( $image[1] >= $header_image_width )
$thumbnail_size = 'large-feature';
else
$thumbnail_size = 'small-feature';
?>
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail( $thumbnail_size ); ?></a>
<?php
}
?>
<?php get_template_part( 'content', 'featured' ); ?>
</section>
<?php endwhile; ?>
<?php
// Show slider only if we have more than one featured post.
if ( $featured->post_count > 1 ) :
?>
<nav class="feature-slider">
<ul>
<?php
// Reset the counter so that we end up with matching elements
$counter_slider = 0;
// Begin from zero
rewind_posts();
// Let's roll again.
while ( $featured->have_posts() ) : $featured->the_post();
$counter_slider++;
if ( 1 == $counter_slider )
$class = 'class="active"';
else
$class = '';
?>
<li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" <?php echo $class; ?>></a></li>
<?php endwhile; ?>
</ul>
</nav>
<?php endif; // End check for more than one sticky post. ?>
</div><!-- .featured-posts -->
<?php endif; // End check for published posts. ?>
<?php endif; // End check for sticky posts. ?>
<section class="recent-posts">
<h1 class="showcase-heading"><?php _e( 'Recent Posts', 'newtheme' ); ?></h1>
<?php
// Display our recent posts, showing full content for the very latest, ignoring Aside posts.
$recent_args = array(
'order' => 'DESC',
'post__not_in' => get_option( 'sticky_posts' ),
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ),
'field' => 'slug',
'operator' => 'NOT IN',
),
),
'no_found_rows' => true,
);
// Our new query for the Recent Posts section.
$recent = new WP_Query( $recent_args );
// The first Recent post is displayed normally
if ( $recent->have_posts() ) : $recent->the_post();
// Set $more to 0 in order to only get the first part of the post.
global $more;
$more = 0;
get_template_part( 'content', get_post_format() );
echo '<ol class="other-recent-posts">';
endif;
// For all other recent posts, just display the title and comment status.
while ( $recent->have_posts() ) : $recent->the_post(); ?>
<li 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>
<span class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?>
</span>
</li>
<?php
endwhile;
// If we had some posts, close the <ol>
if ( $recent->post_count > 0 )
echo '</ol>';
?>
</section><!-- .recent-posts -->
<div class="widget-area" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
<?php
the_widget( 'New_Theme_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
?>
<?php endif; // end sidebar widget area ?>
</div><!-- .widget-area -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
[/codesyntax]
Lo primero que hace el código es indicar a WordPress que cargue el archivo showcase.js, que nosotros deberemos copiar a nuestra carpeta en la ruta correcta.
[codesyntax lang=»php»]
<?php while ( have_posts() ) : the_post(); ?> <?php /** * We are using a heading by rendering the_content * If we have content for this page, let's display it. */ if ( '' != get_the_content() ) get_template_part( 'content', 'intro' ); ?> <?php endwhile; ?>
[/codesyntax]
A continuación se carga el contenido de la página, normalmente una descripción, o una galería de imágenes.
[codesyntax lang=»php»]
<?php
/**
* Begin the featured posts section.
*
* See if we have any sticky posts and use them to create our featured posts.
* We limit the featured posts at ten.
*/
$sticky = get_option( 'sticky_posts' );
// Proceed only if sticky posts exist.
if ( ! empty( $sticky ) ) :
$featured_args = array(
'post__in' => $sticky,
'post_status' => 'publish',
'posts_per_page' => 10,
'no_found_rows' => true,
);
// The Featured Posts query.
$featured = new WP_Query( $featured_args );
// Proceed only if published posts exist
if ( $featured->have_posts() ) :
/**
* We will need to count featured posts starting from zero
* to create the slider navigation.
*/
$counter_slider = 0;
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) )
$header_image_width = get_theme_support( 'custom-header', 'width' );
else
$header_image_width = HEADER_IMAGE_WIDTH;
?>
<div class="featured-posts">
<h1 class="showcase-heading"><?php _e( 'Featured Post', 'newtheme' ); ?></h1>
<?php
// Let's roll.
while ( $featured->have_posts() ) : $featured->the_post();
// Increase the counter.
$counter_slider++;
/**
* We're going to add a class to our featured post for featured images
* by default it'll have the feature-text class.
*/
$feature_class = 'feature-text';
if ( has_post_thumbnail() ) {
// ... but if it has a featured image let's add some class
$feature_class = 'feature-image small';
// Hang on. Let's check this here image out.
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) );
// Is it bigger than or equal to our header?
if ( $image[1] >= $header_image_width ) {
// If bigger, let's add a BIGGER class. It's EXTRA classy now.
$feature_class = 'feature-image large';
}
}
?>
<section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
<?php
/**
* If the thumbnail is as big as the header image
* make it a large featured post, otherwise render it small
*/
if ( has_post_thumbnail() ) {
if ( $image[1] >= $header_image_width )
$thumbnail_size = 'large-feature';
else
$thumbnail_size = 'small-feature';
?>
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail( $thumbnail_size ); ?></a>
<?php
}
?>
<?php get_template_part( 'content', 'featured' ); ?>
</section>
<?php endwhile; ?>
<?php
// Show slider only if we have more than one featured post.
if ( $featured->post_count > 1 ) :
?>
<nav class="feature-slider">
<ul>
<?php
// Reset the counter so that we end up with matching elements
$counter_slider = 0;
// Begin from zero
rewind_posts();
// Let's roll again.
while ( $featured->have_posts() ) : $featured->the_post();
$counter_slider++;
if ( 1 == $counter_slider )
$class = 'class="active"';
else
$class = '';
?>
<li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" <?php echo $class; ?>></a></li>
<?php endwhile; ?>
</ul>
</nav>
<?php endif; // End check for more than one sticky post. ?>
</div><!-- .featured-posts -->
<?php endif; // End check for published posts. ?>
<?php endif; // End check for sticky posts. ?>
[/codesyntax]
A continuación comprueba si existen post destacados para mostrar, si es así se inicia el bucle para procesar los datos y mostrar el código html correspondiente.
[codesyntax lang=»php»]
<section class="recent-posts"> <h1 class="showcase-heading"><?php _e( 'Recent Posts', 'newtheme' ); ?></h1> <?php // Display our recent posts, showing full content for the very latest, ignoring Aside posts. $recent_args = array( 'order' => 'DESC', 'post__not_in' => get_option( 'sticky_posts' ), 'tax_query' => array( array( 'taxonomy' => 'post_format', 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ), 'field' => 'slug', 'operator' => 'NOT IN', ), ), 'no_found_rows' => true, ); // Our new query for the Recent Posts section. $recent = new WP_Query( $recent_args ); // The first Recent post is displayed normally if ( $recent->have_posts() ) : $recent->the_post(); // Set $more to 0 in order to only get the first part of the post. global $more; $more = 0; get_template_part( 'content', get_post_format() ); echo '<ol class="other-recent-posts">'; endif; // For all other recent posts, just display the title and comment status. while ( $recent->have_posts() ) : $recent->the_post(); ?> <li 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> <span class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?> </span> </li> <?php endwhile; // If we had some posts, close the <ol> if ( $recent->post_count > 0 ) echo '</ol>'; ?> </section><!-- .recent-posts -->
[/codesyntax]
Después tenemos los post más recientes, que se obtienen de la misma manera que los destacados.
[codesyntax lang=»php»]
<div class="widget-area" role="complementary"> <?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?> <?php the_widget( 'New_Theme_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) ); ?> <?php endif; // end sidebar widget area ?> </div><!-- .widget-area -->
[/codesyntax]
Por último cargamos el widget que mostrará un listado de links a diferentes post.
CONTENT-INTRO.PHP
Creamos el archivo content-intro.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying page content in the showcase.php page template * * @package WordPress * @subpackage New_Theme */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'intro' ); ?>> <header class="entry-header"> <h2 class="entry-title"><?php the_title(); ?></h2> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
Código sencillo, simplemente da formato al contenido.
WordPress 3.x para desarrolladores: Temas y plantillas, content-image.php, content-link.php, content-quote.php y content-status.php
0hace 11 años
CONTENT-IMAGE.PHP
Creamos el archivo content-image.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying posts in the Image Post Format on index and archive pages * * Learn more: http://codex.wordpress.org/Post_Formats * * @package WordPress * @subpackage New_Theme */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'indexed' ); ?>> <header class="entry-header"> <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( 'Image', 'newtheme' ); ?></h3> </hgroup> <?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 --> <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 --> <footer class="entry-meta"> <div class="entry-meta"> <?php printf( __( '<a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s" pubdate>%3$s</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="%4$s" title="%5$s" rel="author">%6$s</a></span></span>', 'newtheme' ), esc_url( get_permalink() ), get_the_date( 'c' ), 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() ); ?> </div><!-- .entry-meta --> <div class="entry-meta"> <?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 ); ?> </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 ): ?> <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 ); ?> </span> <?php endif; // End if $tags_list ?> <?php if ( comments_open() ) : ?> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; // End if comments_open() ?> </div><!-- .entry-meta --> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
Este tipo de contenido simplemente muestra una imagen y su respectivo título.
CONTENT-LINK.PHP
Creamos el archivo content-link.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying posts in the Link Post Format on index and archive pages * * Learn more: http://codex.wordpress.org/Post_Formats * * @package WordPress * @subpackage New_Theme */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <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( 'Link', 'newtheme' ); ?></h3> </hgroup> <?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 newtheme_posted_on(); ?> <?php if ( comments_open() ) : ?> <span class="sep"> | </span> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
Este contenido es más sencillo aún. Simplemente mostramos un link o un conjunto de estos.
CONTENT-QUOTE.PHP
Creamos el archivo content-quote.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php <?php /** * The default template for displaying content * * @package WordPress * @subpackage New_Theme */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <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( 'Quote', 'newtheme' ); ?></h3> </hgroup> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?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 /* 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 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', 'newtheme' ), __( '<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]
Más de lo mismo, lo único que cambia es que aparece un subtítulo indicando que es una cita.
CONTENT-STATUS.PHP
Creamos el archivo content-status.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying posts in the Status Post Format on index and archive pages * * Learn more: http://codex.wordpress.org/Post_Formats * * @package WordPress * @subpackage New_Theme */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <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( 'Status', 'newtheme' ); ?></h3> </hgroup> <?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"> <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ), apply_filters( 'newtheme_status_avatar', '65' ) ); ?></div> <?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 newtheme_posted_on(); ?> <?php if ( comments_open() ) : ?> <span class="sep"> | </span> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
En este caso se añade la imagen del perfil del autor o avatar para acompañar al contenido.
WordPress 3.x para desarrolladores: Temas y plantillas, content-aside.php, content-featured.php y content-gallery.php
0hace 11 años
Durante los próximos post, incluido este, explicaré las últimas plantillas que quedan por crear de nuestro tema, después continuaré el tutorial con los plugins.
CONTENT-ASIDE.PHP
WordPress dispone de varios formatos de post que pueden ser personalizados (ver: http://codex.wordpress.org/Post_Formats), entre ellos se encuentra aside, que es parecido a una actualización de Facebook, es decir, no tiene título.
Creamos el archivo content-aside.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying posts in the Aside Post Format on index and archive pages * * Learn more: http://codex.wordpress.org/Post_Formats * * @package WordPress * @subpackage New_Theme */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <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( 'Aside', 'newtheme' ); ?></h3> </hgroup> <?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 newtheme_posted_on(); ?> <?php if ( comments_open() ) : ?> <span class="sep"> | </span> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
Como veis, lo primero que se crea es la cabecera del post, pero en este caso, en vez de mostrar el título del post se mostrará el texto «Aside«. El resto del código es prácticamente igual al de un post normal: se muestra el contenido del post y se crea el pie de este con los metadatos y los correspondientes links, entre ellos el de editar.
CONTENT-FEATURED.PHP
Los post featured son los post destacados de los que ya hemos hablado con anterioridad. Aunque este tipo de post no aparece en la lista de formatos de post, si es una características de los post normales que se puede personalizar con su propia plantilla.
Por tanto crearemos el archivo content-featured.php y añadiremos el siguiente código:
[codesyntax lang=»php»]
<?php
/**
* The template for displaying content featured in the showcase.php page template
*
* @package WordPress
* @subpackage New_Theme
*/
global $feature_class;
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $feature_class ); ?>>
<header class="entry-header">
<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>
<div class="entry-meta">
<?php newtheme_posted_on(); ?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-summary">
<?php the_excerpt(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php
/* translators: used between list items, there is a space after the comma */
$tag_list = get_the_tag_list( '', __( ', ', 'newtheme' ) );
if ( '' != $tag_list ) {
$utility_text = __( 'This entry was posted in %1$s and tagged %2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'newtheme' );
} else {
$utility_text = __( 'This entry was posted in %1$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'newtheme' );
}
printf(
$utility_text,
/* translators: used between list items, there is a space after the comma */
get_the_category_list( __( ', ', 'newtheme' ) ),
$tag_list,
esc_url( get_permalink() ),
the_title_attribute( 'echo=0' )
);
?>
<?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
Lo mismo de antes, se muestra el título, se muestra el contenido y se muestra el pie del post, la única diferencia sería que, en este caso también mostramos el texto «FEATURED» o «DESTACADO» en la página principal.
CONTENT-GALLERY.PHP
Este tipo de contenido nos permite mostrar galerías de imágenes, adjuntando las imágenes al post.
Creamos el archivo content-gallery.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /** * The template for displaying posts in the Gallery Post Format on index and archive pages * * Learn more: http://codex.wordpress.org/Post_Formats * * @package WordPress * @subpackage New_Theme */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <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( 'Gallery', 'newtheme' ); ?></h3> </hgroup> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> </header><!-- .entry-header --> <?php if ( is_search() ) : // Only display Excerpts for search pages ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php if ( post_password_required() ) : ?> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?> <?php else : ?> <?php $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) ); if ( $images ) : $total_images = count( $images ); $image = array_shift( $images ); $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' ); ?> <figure class="gallery-thumb"> <a href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a> </figure><!-- .gallery-thumb --> <p><em><?php printf( _n( 'This gallery contains <a %1$s>%2$s photo</a>.', 'This gallery contains <a %1$s>%2$s photos</a>.', $total_images, 'newtheme' ), 'href="' . esc_url( get_permalink() ) . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"', number_format_i18n( $total_images ) ); ?></em></p> <?php endif; ?> <?php the_excerpt(); ?> <?php endif; ?> <?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 /* 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 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', 'newtheme' ), __( '<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]
La parte más importante de este código es el siguiente extracto:
[codesyntax lang=»php»]
<?php if ( post_password_required() ) : ?> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?> <?php else : ?> <?php $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) ); if ( $images ) : $total_images = count( $images ); $image = array_shift( $images ); $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' ); ?> <figure class="gallery-thumb"> <a href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a> </figure><!-- .gallery-thumb --> <p><em><?php printf( _n( 'This gallery contains <a %1$s>%2$s photo</a>.', 'This gallery contains <a %1$s>%2$s photos</a>.', $total_images, 'newtheme' ), 'href="' . esc_url( get_permalink() ) . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"', number_format_i18n( $total_images ) ); ?></em></p> <?php endif; ?>
[/codesyntax]
Esta parte es la que calcula el número de imágenes en el post y las convierte en una galería.
WordPress 3.x para desarrolladores: Temas y plantillas, widgets.php
0hace 11 años
El siguiente archivo que vamos a crear es widgets.php que generará un widget para mostrar diferentes tipos de contenido, como citas estados, etc.
WIDGETS.PHP
Creamos el archivo inc/widgets.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php
/**
* Makes a custom Widget for displaying Aside, Link, Status, and Quote Posts available with New Theme
*
* Learn more: http://codex.wordpress.org/Widgets_API#Developing_Widgets
*
* @package WordPress
* @subpackage Nwe_Theme
*/
class New_Theme_Ephemera_Widget extends WP_Widget {
}
[/codesyntax]
Creamos la clase New_Theme_Ephemera_Widget que nos permitirá crear el widget.
Dentro de la clase añadimos los siguientes métodos.
[codesyntax lang=»php»]
<?php
/**
* Constructor
*
* @return void
**/
function New_Theme_Ephemera_Widget() {
$widget_ops = array( 'classname' => 'widget_newtheme_ephemera', 'description' => __( 'Use this widget to list your recent Aside, Status, Quote, and Link posts', 'newtheme' ) );
$this->WP_Widget( 'widget_newtheme_ephemera', __( 'New Theme Ephemera', 'newtheme' ), $widget_ops );
$this->alt_option_name = 'widget_newtheme_ephemera';
add_action( 'save_post', array(&$this, 'flush_widget_cache' ) );
add_action( 'deleted_post', array(&$this, 'flush_widget_cache' ) );
add_action( 'switch_theme', array(&$this, 'flush_widget_cache' ) );
}
[/codesyntax]
Este método es el constructor del widget, le indica a WordPress la clase que utilizará, la desripción y el nombre del widget. Además se añaden varias acciones para volver a generar la cache cuando se guarde o elimine un post o cuando se cambie de tema.
[codesyntax lang=»php»]
<?php
/**
* Outputs the HTML for this widget.
*
* @param array An array of standard parameters for widgets in this theme
* @param array An array of settings for this widget instance
* @return void Echoes it's output
**/
function widget( $args, $instance ) {
$cache = wp_cache_get( 'widget_newtheme_ephemera', 'widget' );
if ( !is_array( $cache ) )
$cache = array();
if ( ! isset( $args['widget_id'] ) )
$args['widget_id'] = null;
if ( isset( $cache[$args['widget_id']] ) ) {
echo $cache[$args['widget_id']];
return;
}
ob_start();
extract( $args, EXTR_SKIP );
$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? __( 'Ephemera', 'newtheme' ) : $instance['title'], $instance, $this->id_base);
if ( ! isset( $instance['number'] ) )
$instance['number'] = '10';
if ( ! $number = absint( $instance['number'] ) )
$number = 10;
$ephemera_args = array(
'order' => 'DESC',
'posts_per_page' => $number,
'no_found_rows' => true,
'post_status' => 'publish',
'post__not_in' => get_option( 'sticky_posts' ),
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-status', 'post-format-quote' ),
'field' => 'slug',
'operator' => 'IN',
),
),
);
$ephemera = new WP_Query( $ephemera_args );
if ( $ephemera->have_posts() ) :
echo $before_widget;
echo $before_title;
echo $title; // Can set this with a widget option, or omit altogether
echo $after_title;
?>
<ol>
<?php while ( $ephemera->have_posts() ) : $ephemera->the_post(); ?>
<?php if ( 'link' != get_post_format() ) : ?>
<li class="widget-entry-title">
<a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
<span class="comments-link">
<?php comments_popup_link( __( '0 <span class="reply">comments →</span>', 'newtheme' ), __( '1 <span class="reply">comment →</span>', 'newtheme' ), __( '% <span class="reply">comments →</span>', 'newtheme' ) ); ?>
</span>
</li>
<?php else : ?>
<li class="widget-entry-title">
<?php
// Grab first link from the post content. If none found, use the post permalink as fallback.
$link_url = newtheme_url_grabber();
if ( empty( $link_url ) )
$link_url = get_permalink();
?>
<a href="<?php echo esc_url( $link_url ); ?>" title="<?php printf( esc_attr__( 'Link to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?> <span>→</span></a>
<span class="comments-link">
<?php comments_popup_link( __( '0 <span class="reply">comments →</span>', 'newtheme' ), __( '1 <span class="reply">comment →</span>', 'newtheme' ), __( '% <span class="reply">comments →</span>', 'newtheme' ) ); ?>
</span>
</li>
<?php endif; ?>
<?php endwhile; ?>
</ol>
<?php
echo $after_widget;
// Reset the post globals as this query will have stomped on it
wp_reset_postdata();
// end check for ephemeral posts
endif;
$cache[$args['widget_id']] = ob_get_flush();
wp_cache_set( 'widget_newtheme_ephemera', $cache, 'widget' );
}
[/codesyntax]
Este método es un poco largo, así que voy a dividirlo y explicar el código.
[codesyntax lang=»php»]
<?php
$cache = wp_cache_get( 'widget_newtheme_ephemera', 'widget' );
if ( !is_array( $cache ) )
$cache = array();
if ( ! isset( $args['widget_id'] ) )
$args['widget_id'] = null;
if ( isset( $cache[$args['widget_id']] ) ) {
echo $cache[$args['widget_id']];
return;
}
[/codesyntax]
Primero recuperamos los datos del widget desde la caché de WordPress.
Comprobamos que en caso de que no sea un array le damos el valor de un array vacío.
Comprobamos también que $args[‘widget_id’] no esta establecido y le damos el valor null.
Por último comprobamos que la caché disponga de algún contenido para el widget, si es así se muestra ese contenido y se devuelve un return para que php no siga ejecutando el método.
[codesyntax lang=»php»]
<?php ob_start(); extract( $args, EXTR_SKIP ); $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? __( 'Ephemera', 'newtheme' ) : $instance['title'], $instance, $this->id_base); if ( ! isset( $instance['number'] ) ) $instance['number'] = '10'; if ( ! $number = absint( $instance['number'] ) ) $number = 10; $ephemera_args = array( 'order' => 'DESC', 'posts_per_page' => $number, 'no_found_rows' => true, 'post_status' => 'publish', 'post__not_in' => get_option( 'sticky_posts' ), 'tax_query' => array( array( 'taxonomy' => 'post_format', 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-status', 'post-format-quote' ), 'field' => 'slug', 'operator' => 'IN', ), ), ); $ephemera = new WP_Query( $ephemera_args );
[/codesyntax]
En el caso de que no haya contenido en la caché de WordPress, el método continuará ejecutandose.
En este extracto de código vemos como primero se abre el buffer de php utilizando la función ob_start(). Esta función permite que en vez de mostrar cualquier contenido que le siguiente, lo almacena en buffer para después poder mostrarlo donde corresponda con ob_get_flush().
A continuación se recupera el título y el número de post a mostrar.
Se crea un array con los parámetros para ejecutar una consulta SQL.
Por último se crea una nueva instancia de WP_Query() que devolverá los registros encontrados en la base de datos.
[codesyntax lang=»php»]
<?php if ( $ephemera->have_posts() ) : echo $before_widget; echo $before_title; echo $title; // Can set this with a widget option, or omit altogether echo $after_title; ?> <ol> <?php while ( $ephemera->have_posts() ) : $ephemera->the_post(); ?> <?php if ( 'link' != get_post_format() ) : ?> <li class="widget-entry-title"> <a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a> <span class="comments-link"> <?php comments_popup_link( __( '0 <span class="reply">comments →</span>', 'newtheme' ), __( '1 <span class="reply">comment →</span>', 'newtheme' ), __( '% <span class="reply">comments →</span>', 'newtheme' ) ); ?> </span> </li> <?php else : ?> <li class="widget-entry-title"> <?php // Grab first link from the post content. If none found, use the post permalink as fallback. $link_url = newtheme_url_grabber(); if ( empty( $link_url ) ) $link_url = get_permalink(); ?> <a href="<?php echo esc_url( $link_url ); ?>" title="<?php printf( esc_attr__( 'Link to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?> <span>→</span></a> <span class="comments-link"> <?php comments_popup_link( __( '0 <span class="reply">comments →</span>', 'newtheme' ), __( '1 <span class="reply">comment →</span>', 'newtheme' ), __( '% <span class="reply">comments →</span>', 'newtheme' ) ); ?> </span> </li> <?php endif; ?> <?php endwhile; ?> </ol> <?php echo $after_widget; // Reset the post globals as this query will have stomped on it wp_reset_postdata(); // end check for ephemeral posts endif;
[/codesyntax]
Se comprueba si existen post para mostrar y si es que sí se muestran diferentes valores antes de iniciar el búcle que dará formato al contenido.
Se muestra cualquier contenido posterior al widget, se reincian los post globales que esta consulta haya podido pisar.
[codesyntax lang=»php»]
<?php $cache[$args['widget_id']] = ob_get_flush(); wp_cache_set( 'widget_newtheme_ephemera', $cache, 'widget' );
[/codesyntax]
Por último se guardan los datos del buffer en la caché de WordPress.
[codesyntax lang=»php»]
<?php
/**
* Deals with the settings when they are saved by the admin. Here is
* where any validation should be dealt with.
**/
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['number'] = (int) $new_instance['number'];
$this->flush_widget_cache();
$alloptions = wp_cache_get( 'alloptions', 'options' );
if ( isset( $alloptions['widget_newtheme_ephemera'] ) )
delete_option( 'widget_newtheme_ephemera' );
return $instance;
}
[/codesyntax]
Este método permite verificar que los datos que ha introducido el administrador sean correctos y se guarden en la caché para futuros usos.
[codesyntax lang=»php»]
<?php
function flush_widget_cache() {
wp_cache_delete( 'widget_newtheme_ephemera', 'widget' );
}
[/codesyntax]
Este método elimina el widget de la caché de WordPress.
[codesyntax lang=»php»]
<?php
/**
* Displays the form for this widget on the Widgets page of the WP Admin area.
**/
function form( $instance ) {
$title = isset( $instance['title']) ? esc_attr( $instance['title'] ) : '';
$number = isset( $instance['number'] ) ? absint( $instance['number'] ) : 10;
?>
<p><label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title:', 'newtheme' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /></p>
<p><label for="<?php echo esc_attr( $this->get_field_id( 'number' ) ); ?>"><?php _e( 'Number of posts to show:', 'newtheme' ); ?></label>
<input id="<?php echo esc_attr( $this->get_field_id( 'number' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'number' ) ); ?>" type="text" value="<?php echo esc_attr( $number ); ?>" size="3" /></p>
<?php
}
[/codesyntax]
Este último método crea el formulario donde el administrador podrá modificar el widget.
WordPress 3.x para desarrolladores: Temas y plantillas, theme-options.php
0hace 11 años
Nuestro 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
0hace 11 años
Como 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.
Chicle de Melón
Una lástima que este plugin ya no exista, hay algunos que son parecidos pero no funcionan igual.
hace 3 semanas
Mr.Drean
Básico, pero sirve para los principiantes.
hace 3 años
Vicky
En Windows 10 no funciona, o la fórmula que poneis es errónea.
hace 4 años
marisa
como puedo entrar a modificar un archivo en ms dos
hace 4 años
Crear un tunel por SSH por consola (GNU/Linux) | Blog de Mario Javier
[…] Fuente: de https://www.interadictos.es/2014/01/20/crear-un-tunel-por-ssh-por-consola-gnulinux/ […]
hace 6 años