Hoja de trucos sobre temas de WordPress para principiantes
¿Buscas una hoja de trucos sobre temas de WordPress para modificar rápidamente tu tema o crear un nuevo tema personalizado? WordPress viene con muchas etiquetas de plantilla incorporadas que puedes utilizar para empezar. En este artículo, compartiremos una hoja de trucos sobre temas de WordPress para principiantes
Antes de empezar
WordPress cuenta con un potente motor de plantillas que permite a los desarrolladores de temas crear hermosos diseños para los sitios web que funcionan con WordPress. Hay temas de WordPress tanto premium como gratuitos que puedes instalar en tu sitio web
Cada tema de WordPress viene con una serie de opciones de personalización. Estas opciones te permiten cambiar los colores, añadir imágenes de cabecera, configurar menús de navegación y mucho más
Sin embargo, sigues estando limitado a las funciones que admite tu tema. A veces puedes querer hacer pequeños cambios en tu tema de WordPress que requieran algo de codificación. Para ello, necesitarás saber algo de PHP, HTML y CSS básicos
Lo primero que debes hacer es familiarizarte con el funcionamiento de WordPress entre bastidores y con las plantillas de los temas de WordPress
Después de eso, hay algunas prácticas recomendadas que puedes seguir. Por ejemplo, crear un tema hijo en lugar de hacer los cambios directamente en los archivos de tu tema
También puedes practicar con tu tema instalando WordPress en tu ordenador
Dicho esto, vamos a sumergirnos en nuestra hoja de trucos sobre temas de WordPress para principiantes
Plantillas básicas de temas de WordPress
Cada tema de WordPress se compone de diferentes archivos llamados plantillas. Todos los temas de WordPress deben tener una hoja de estilos y un archivo de índice, pero normalmente vienen con muchos otros archivos.
A continuación se muestra la lista de archivos básicos que tiene todo tema:
- style.css
- header.php
- index.php
- barra lateral.php
- pie de página.php
- single.php
- página.php
- comentarios.php
- 404.php
- functions.php
- archivo.php
- formulario de búsqueda.php
- buscar.php
Si vas a crear tu propio tema, puedes empezar con uno de los temas de inicio de WordPress. Estos temas vienen con archivos de plantilla de WordPress listos para usar y CSS que te dan un marco sobre el que construir
Etiquetas de plantilla en la cabecera
WordPress viene con un montón de funciones útiles que se pueden utilizar para dar salida a diferentes cosas a través de tu tema. Estas funciones se llaman etiquetas de plantilla.
La primera función, y probablemente la más importante, que se requiere en todos los temas de WordPress que cumplen con el estándar, se llama wp_head, y tiene este aspecto
<?php wp_head(); ?>
Este código recupera todo el HTML importante que WordPress necesita añadir en el <head> de cada página de tu sitio web. También es esencial para que muchos plugins de WordPress funcionen correctamente en tu sitio web
A continuación encontrarás una lista de etiquetas de plantilla que encontrarás y utilizarás habitualmente en el archivo header.php de tu tema. Sin embargo, también pueden utilizarse en otras partes de tu tema cuando las necesites
// Title of the Blog, or Blog Name
<?php bloginfo('name'); ?>
// Title of a Specific Page
<?php wp_title(); ?>
// Exact URL for the site
<?php bloginfo('url'); ?>
// Site's Description
<?php bloginfo('description'); ?>
// Location of Site’s Theme File
<?php bloginfo('template_url'); ?>
// Link to the Style.css location
<?php bloginfo('stylesheet_url'); ?>
// RSS Feed URL for the site
<?php bloginfo('rss2_url'); ?>
// Pingback URL for the site
<?php bloginfo('pingback_url'); ?>
// WordPress version number
<?php bloginfo('version'); ?>
Etiquetas de plantilla utilizadas en otros archivos del tema
Ahora vamos a ver otras etiquetas de plantilla de uso común y lo que hacen
Las siguientes etiquetas de plantilla se utilizan para llamar e incluir otras plantillas. Por ejemplo, el archivo index.php de tu tema las utilizará para incluir las plantillas de cabecera, pie de página, contenido, comentarios y barra lateral
//Displays Header.php file content <?php get_header(); ?> // Displays Footer.php file content <?php get_footer(); ?> // Displays Sidebar.php file content <?php get_sidebar(); ?> // Displays Comment.php file content <?php comments_template(); ?>
Las siguientes etiquetas de plantilla se utilizan dentro del bucle de WordPress para mostrar el contenido, el extracto y los metadatos de tus entradas
// Displays the Content of the Post
<?php the_content(); ?>
// Displays the excerpt that is used in Posts
<?php the_excerpt(); ?>
// Title of the Specific Post
<?php the_title(); ?>
// Link of the Specific Post
<?php%20the_permalink()%20?>
// Category of a Specific Post
<?php the_category(', ') ?>
// Author of the Specific Post
<?php the_author(); ?>
//ID of a Specific Post
<?php the_ID(); ?>
// Edit link for a Post
// Oonly visible to logged in users with editing privileges
<?php edit_post_link(); ?>
// URL of the next page
<?php next_post_link(' %link ') ?>
// URL of the previous page
<?php previous_post_link('%link') ?>
Los temas de WordPress vienen con áreas preparadas para widgets llamadas Barras laterales. Son ubicaciones en los archivos de tu tema donde los usuarios pueden arrastrar y soltar los widgets de WordPress. A menudo un tema tiene varias ubicaciones donde los usuarios pueden añadir widgets
Sin embargo, lo más habitual es que estas áreas de widgets se encuentren en la barra lateral derecha o izquierda del diseño del tema. Para saber más, consulta nuestra guía sobre cómo añadir barras laterales dinámicas preparadas para widgets en tu tema de WordPress
Este es el código utilizado para mostrar una barra lateral en tu tema
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->
Tendrás que sustituir sidebar-1 por el nombre que defina tu tema para esa zona preparada para widgets o la barra lateral
Etiquetas de plantilla para mostrar los menús de navegación
WordPress viene con un potente sistema de gestión de menús que permite a los usuarios crear menús de navegación para su sitio web. Un tema de WordPress puede tener más de una ubicación de menú de navegación
Consulta nuestra guía sobre cómo crear tus propios menús de navegación personalizados en un tema de WordPress
A continuación se muestra el código que se utilizará en tu tema para mostrar un menú de navegación
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>
La ubicación del tema depende del nombre que haya utilizado tu tema para registrar el menú de navegación. La clase contenedora CSS puede llamarse como quieras. Rodea tu menú de navegación, para que puedas darle el estilo adecuado
Etiquetas varias de la plantilla
A continuación se indican algunas de las etiquetas que se utilizan habitualmente en el tema de WordPress
// Displays the date current post was written
<?php echo get_the_date(); ?>
// Displays the last time a post was modified
get_the_modified_time
// Displays the last modified time for a post
<?php echo the_modified_time('F d, Y'); ?>
// Displays post thumbnail or featured image
<?php the_post_thumbnail( ); ?>
// Displays monthly archives
<?php wp_get_archives( ); ?>
// Displays the list of categories
<?php wp_list_categories(); ?>
// Displays the gravatar of a user from email address
// 32 pixels is the size, you can change that if you need
<?php echo get_avatar( '[email protected]', 32 ); ?>
// Displays gravatar of the current post's author
<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
Etiquetas condicionales en los temas de WordPress
Las etiquetas condicionales son funciones que devuelven resultados en Verdadero o Falso. Estas etiquetas condicionales pueden utilizarse en todo tu tema o plugin para ver si se cumplen ciertas condiciones y hacer algo en consecuencia
Por ejemplo, si el post actual tiene una imagen destacada o no. Si no tiene una imagen destacada, entonces puedes mostrar una imagen destacada por defecto en su lugar
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/images/thumbnail-default.jpg" />';
}
?>
A continuación hay algunas etiquetas condicionales más que puedes utilizar
// Checks if a single post is being displayed is_single() // Checks if a page is being displayed is_page() // Checks if the main blog page is displayed is_home() // Checks if a static front page is displayed is_front_page() // Checks if current viewer is logged in is_user_logged_in()
Hay muchas más etiquetas condicionales que puedes utilizar. La lista completa de etiquetas condicionales se puede encontrar en la página del códice de WordPress sobre etiquetas condicionales
El bucle de WordPress
El bucle o loop de WordPress es el código utilizado para obtener y mostrar las entradas en WordPress. Muchas etiquetas de las plantillas de WordPress sólo pueden funcionar dentro del bucle, ya que están asociadas a los objetos post o post_type
A continuación se muestra un ejemplo de un simple bucle de WordPress
<?php
// checks if there are any posts that match the query
if (have_posts()) :
// If there are posts matching the query then start the loop
while ( have_posts() ) : the_post();
// the code between the while loop will be repeated for each post
?>
<h2 id="post-<?php the_ID(); ?>"><a href="<?php%20the_permalink()%20?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p class="date-author">Posted: <?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
<p class="postmetadata">Filed in: <?php the_category(); ?> | Tagged: <?php the_tags(); ?> | <a href="<?php%20comments_link();%20?>" title="Leave a comment">Comments</a></p>
<?php
// Stop the loop when all posts are displayed
endwhile;
// If no posts were found
else :
?>
<p>Sorry no posts matched your criteria.</p>
<?php
endif;
?>
Para saber más sobre el bucle, consulta Qué es un bucle en WordPress (infografía)
Esperamos que este artículo te ayude como hoja de trucos básicos de WordPress para principiantes. Quizás también quieras ver nuestra lista de los trucos más útiles para el archivo de funciones de WordPress
Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.
Si quieres conocer otros artículos parecidos a Hoja de trucos sobre temas de WordPress para principiantes puedes visitar la categoría Themes.
Deja un comentario
¡Más Contenido!