¿Estás buscando 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 integradas que puedes utilizar para tener unos primeros pasos. En este artículo, vamos a compartir una hoja de trucos tema de WordPress para principiantes.
Antes de empezar
WordPress viene con un potente motor de plantillas que permite a los desarrolladores de temas crear hermosos diseños para sitios web que funcionan con WordPress. Existen temas de WordPress gratuitos y de pago 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 los colores, añadir imágenes de cabecera, configurar menús de navegación y mucho más.
Sin embargo, todavía está limitado a las características que su tema es compatible con / dar soporte. A veces es posible que desee hacer pequeños cambios en su tema de WordPress que requieren algún código. Para ello, necesitarás tener conocimientos básicos de PHP, HTML y CSS.
Lo primero que deberías hacer es familiarizarte con cómo funciona WordPress entre bastidores y con las plantillas de temas de WordPress.
Después de eso hay algunas mejores prácticas que puede que desee seguir. Por ejemplo, crear un tema hijo en lugar de hacer los cambios directamente en los archivos del 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. Todo tema de WordPress debe tener una hoja de estilos y un archivo de índice, pero por lo general vienen con un montón de otros archivos.
A continuación se muestra la lista de archivos básicos que cada tema tiene:
- style.css
- cabecera.php
- index.php
- barra lateral.php
- pie de página.php
- single.php
- página.php
- comentarios.php
- 404.php
- funciones.php
- archivo.php
- formulario.php
- buscar.php
Si está creando su propio tema, puede 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 le dan un marco sobre el que construir.
Etiquetas de plantilla en cabecera
WordPress viene con un montón de funciones útiles que se pueden utilizar para dar salida a diferentes cosas a través de su tema. Estas funciones se llaman etiquetas de plantilla.
La primera y probablemente la más importante función que es obligatoria en todos los temas de WordPress que cumplen con los estándares se llama wp_head, y tiene este aspecto:
<?php wp_head(); ?>
Este código obtiene todo el HTML importante que WordPress necesita añadir en la sección <head> de cada página de su sitio web. También es esencial para que muchos plugins de WordPress funcionen correctamente en su sitio web.
A continuación hay una lista de etiquetas de plantilla que encontrarás y usarás comúnmente en el archivo header.php de tu tema. Sin embargo, también pueden ser usadas 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 de temas
Ahora echemos un vistazo a 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 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 contenido, extractos y metadatos de sus 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 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 preparadas para widgets llamadas barras laterales. Estas son ubicaciones en los archivos de su tema donde los usuarios pueden arrastrar y soltar widgets de WordPress. A menudo un tema tiene múltiples ubicaciones donde los usuarios pueden añadir widgets.
Sin embargo, lo más común es que estas áreas de widgets se encuentren en la barra lateral derecha o izquierda de la estructura / disposición / diseño / plantilla del tema. Para obtener más información, consulte nuestra guía sobre cómo añadir barras laterales dinámicas preparadas para widgets 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 -->
Tendrás que sustituir sidebar-1 por el nombre definido por tu tema para esa zona concreta preparada para widgets o la barra lateral.
Etiquetas de plantilla para mostrar 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.
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 tu tema haya utilizado para registrar el menú de navegación. La clase contenedora CSS puede llamarse como quieras. Rodea tu menú de navegación para que puedas aplicarle el estilo que desees.
Varias etiquetas de plantilla
Las siguientes son 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 utilizar a través de su tema o plugin para ver si se cumplen ciertas condiciones y luego hacer algo en consecuencia.
Por ejemplo, si la entrada 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 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 acerca de las etiquetas condicionales.
El bucle de WordPress
El Loop o bucle de WordPress es el código usado para obtener y mostrar entradas en WordPress. Muchas etiquetas de plantilla de WordPress solo pueden funcionar dentro del bucle ya que están asociadas a los objetos entrada 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 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 saber más acerca del bucle, marque / compruebe Qué es un bucle en WordPress (Infografía).
Esperamos que este artículo le ayude como la hoja de trucos básicos sobre temas de WordPress para principiantes. Puede que 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 ver tutoriales en vídeo sobre WordPress. También puedes encontrarnos en Twitter y Facebook.
Marco
This is great article.
But is it still relevant in 2022 with Gutenberg block editor?
WPBeginner your the best!
WPBeginner Support
What we share in this article is still currently relevant.
Administrador
Henry Obilor
I would love to ask when creating a new theme. Can I create my own header.php and use a premium theme footer.php?
Mixing yours with already built template. Will it work?
WPBeginner Support
That would heavily depend on the content of the footer.php and how you have your theme coded. If you have the footer then the best method would be to test on a local installation.
Administrador
Biplob
It’s awesome thing. it’s very useful
Zaki
This is certainly not for beginners. I am afraid I will end up with messing up my website. Coding part is completely unclear. I would appreciate if you can some great screenshots to illustrate “How to add a custom page”.
Sanam
Bro where to paste that code in functions.php
WPBeginner Support
At the bottom. If you have ?> tag as the last line then you need to paste code before that line.
Administrador
Shahbaz Ahmed Bhatti
Very Nice and Goooood Work Keep it up, Very goood information for Basic
Solomon
Thanks very much, i really appreciate.
Pali Madra
Thanks for the great tutorial. I recommend the tutorial to anyone trying to learn WordPress.
Keep up the good work!
Ben
Thanks for a very helpful article. Just want I have been looking for.
Thanks.
Ben
madalinignisca
what is – Site’s Description
I think it is
madalinignisca
what is “<?php bloginfo(%u2019description%u2019); ?> – Site’s Description” ? I think it is “<?php bloginfo(‘description’); ?>”
mirzayasir4
That’s great useful cheet sheet when you are doing editing in themes. Thanks
John
Fantastic, I’ve been looking for an easy Wordpress cheatsheet for a while, thanks for doing this, makes life a lot easier and I can get a bit more creative. Wordpress has such a lot of power under the hood.
mark
this is gr8 for beginner
Russell Poulter
This is SO bookmarked!
Thanks.
asif eminov
Thanks this details.
Ersatzknochen
Yeah, very useful. Thank you.
Delighted
Thank you for the Codes in Header.php part, Very easy to understand and VERY useful! thank you for this.
SleepY
Wow….thats what i was looking for since days.
thanks a lot !
Victor Duwon Jackson
This is great, Thanks.
Manoj
Great info! bookmarked
Obed Ward
Excellent WP theme cheat sheet, going to bookmark it (and of course tweet it). Thanks!
Naeem Noor
Very Useful, just printed it.
Blog2Life
These shortcodes are just what I was looking for to start work on some new themes.. thanks for the post and keep up the good work!
Hami
Yes exactly. This post has solved out and let us (beginners) start working instantly on new ideas
A.D.K.
This is very useful thanks.
Jon Rawlins
Retweeted this for you. Just about to get a blog setup for myself, so this site has been very useful.
Angad Sodhi
Aah! Bookmarking this right away..
Referring the default theme for these small details is now history!
Thank you people.
DaveK
Cool, Thanks for sharing, consider it tweeted