¿Está buscando una hoja de trucos de tema de WordPress para modificar rápidamente su tema o crear un nuevo tema personalizado? WordPress viene con muchas etiquetas de plantilla integradas que puede usar para comenzar. En este artículo, compartiremos una hoja de trucos sobre temas de WordPress para principiantes.
Antes de empezar
WordPress viene con un poderoso motor de plantillas que permite a los desarrolladores de temas crear hermosos diseños para sitios web impulsados por WordPress. Hay temas de WordPress premium y gratuitos que puede instalar en su sitio web.
Cada tema de WordPress viene con una serie de opciones de personalización. Estas opciones le permiten cambiar colores, agregar imágenes de encabezado, configurar menús de navegación y más.
Sin embargo, todavía está limitado a las funciones que admite su tema. A veces, es posible que desee realizar pequeños cambios en su tema de WordPress que requieran algo de codificación. Para hacer eso, necesitará tener conocimientos básicos de PHP, HTML y CSS.
Lo primero que querrá hacer es familiarizarse con el funcionamiento de WordPress entre bastidores y las plantillas de temas de WordPress.
Después de eso, hay algunas mejores prácticas que es posible que desee seguir. Por ejemplo, crear un tema hijo en lugar de realizar cambios directamente en los archivos de su tema.
También puede practicar con su tema instalando WordPress en su computadora.
Dicho esto, profundicemos en nuestra hoja de trucos de 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 estilo y un archivo de índice, pero generalmente contienen muchos otros archivos.
A continuación se muestra la lista de archivos básicos que tiene cada tema:
- style.css
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- page.php
- comments.php
- 404.php
- functions.php
- archive.php
- searchform.php
- search.php
Si está creando su propio tema, puede comenzar con uno de los temas de inicio de WordPress. Estos temas vienen con archivos de plantilla de WordPress listos para usar y CSS que le brindan un marco sobre el que construir.
Etiquetas de plantilla en el encabezado
WordPress viene con muchas funciones útiles que se pueden usar para generar diferentes cosas a lo largo de su tema. Estas funciones se denominan etiquetas de plantilla.
La primera y probablemente la función más importante que se requiere en todos los temas de WordPress compatibles 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 agregar en el <head>
sección de cada página de su sitio web. También es esencial que muchos complementos de WordPress funcionen correctamente en su sitio web.
A continuación se muestra una lista de etiquetas de plantilla que normalmente encontrará y utilizará en el archivo header.php de su tema. Sin embargo, también se pueden usar en cualquier otro lugar de su tema cuando los necesite.
// 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 de tema
Ahora echemos un vistazo a algunas 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 su tema los usará para incluir encabezado, pie de página, contenido, comentarios y plantillas de 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 ciclo de WordPress para mostrar contenido, extractos y metadatos de sus publicaciones.
// 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 the_permalink() ?> // 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 listas para widgets llamadas barras laterales. Estas son ubicaciones en sus archivos de tema donde los usuarios pueden arrastrar y soltar widgets de WordPress. A menudo, un tema tiene varias ubicaciones donde los usuarios pueden agregar widgets.
Sin embargo, más comúnmente estas áreas de widgets se encuentran en la barra lateral derecha o izquierda del diseño del tema. Para obtener más información, consulte nuestra guía sobre cómo agregar barras laterales listas para widgets dinámicos en su tema de WordPress.
Aquí está el código utilizado para mostrar una barra lateral en su tema.
<?php if ( ! is_active_sidebar( 'sidebar-1' ) ) { return; } ?> <aside id="secondary" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-1' ); ?> </aside><!-- #secondary -->
Deberá reemplazar la barra lateral-1 con el nombre definido por su tema para esa área en particular lista para widgets o la barra lateral.
Etiquetas de plantilla para mostrar menús de navegación
WordPress viene con un poderoso sistema de administració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 en el menú de navegación.
Consulte nuestra guía sobre cómo crear sus propios menús de navegación personalizados en un tema de WordPress.
A continuación se muestra el código que se utilizará en su 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 usó su tema para registrar el menú de navegación. La clase de contenedor CSS puede llamarse como desee. Rodeará su menú de navegación, para que pueda diseñarlo en consecuencia.
Etiquetas de plantilla misceláneas
A continuación se muestran algunas de las etiquetas que usará comúnmente en su 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@example.com', 32 ); ?> // Displays gravatar of the current post's author <?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
Etiquetas condicionales en temas de WordPress
Las etiquetas condicionales son funciones que devuelven resultados en verdadero o falso. Estas etiquetas condicionales se pueden usar en todo su tema o complemento para ver si se cumplen ciertas condiciones y luego hacer algo en consecuencia.
Por ejemplo, si la publicación actual tiene una imagen destacada o no. Si no tiene una imagen destacada, puede mostrar una imagen destacada predeterminada 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 se muestran algunas etiquetas condicionales más que puede 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 puede 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 el bucle de WordPress es el código utilizado para buscar y mostrar publicaciones en WordPress. Es posible que muchas etiquetas de plantilla de WordPress solo funcionen dentro del bucle, ya que están asociadas con los objetos post o post_type.
A continuación se muestra un ejemplo de un bucle simple 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 the_permalink() ?>" 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 comments_link(); ?>" 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 obtener más información sobre el bucle, consulte ¿Qué es un bucle en WordPress (infografía)?
Esperamos que este artículo le ayude como la hoja de trucos básica del tema de WordPress para principiantes. Es posible que también desee ver nuestra lista de los trucos más útiles para el archivo de funciones de WordPress.