Crear un tema en wordpress

Para crear un tema que se considere válido en wordpress, debe contar al menos con estos dos archivos.

  1. style.css
  2. index.php
Archivos necesarios para tema en wordpress

Archivos necesarios para crear un tema válido en wordpress.

style.css

Además de utilizarse para definir las reglas de estilo del tema, style.css contiene comentarios con datos acerca del tema.

A diferencia de los comentarios utilizados cuando se genera un tema hijo en esta ocasión no se utiliza el comentario Template para hacer referencia a un tema – porque no es un tema hijo -.

Tampoco es conveniente utilizar @import – para incluir estilos de otra hoja de estilos – es mejor definir las reglas de estilo directamente en este archivo.

/*
ThemeName: 
Theme URI: 
Description: 
Author: 
Author URI: 
Version: 
*/

index.php

Archivo principal para visualizar el contenido.

Si no existe otra plantilla para mostrar contenido específico – entradas, páginas, categorías, taxonomías, resultados de búsqueda, etc. – se va a utilizar este archivo.

La sección principal de este archivo es «el loop» o ciclo que se utiliza para visualizar el contenido de las entradas.

<?php if (have_posts()) : while (have_posts()) : the post(); ?>
/*  Visualizar los elementos de cada publicación como queramos. */
<?php endwhile; endif; ?>

Ej. con marcado en HTML – clases de bootstrap – y algunas funciones que se encargan de mostrar contenido específico – permalink, título, resumen – de las entradas.

<div class='row'>
    <div class='col-md-8 col-md-offset-2'>
      <?php if (have_posts()) : while (have_posts()) : the_post();  ?>
        <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
          <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
          <section class='entry'>
          <?php the_excerpt(); ?>
          </section>
        </article>
      <?php endwhile; endif; ?>
    </div>
</div>

Secciones

Aunque es posible definir totalmente la estructura del documento dentro de cada plantilla que utilicemos, es recomendable dividir la estructura del documento en secciones.

De esta manera, las secciones que generemos se pueden utilizar en distintas plantillas.
Algunas secciones que podemos extraer en archivos son:

  1. Encabezado – header.php
  2. Pie de página – footer.php
  3. Barra lateral – sidebar.php
Crear secciones que se pueden volver a utilizar

Separar el contenido de una plantilla en secciones que se pueden volver a utilizar.

Encabezado – header.php

En este archivo se encuentran las etiquetas que tiene el encabezado del documento – doctype, html, head, meta, body – que se va a compartir entre muchas – si no es que todas las – plantillas de nuestro tema.

Al definir el encabezado es necesario incluir la función wp_head() antes de cerrar la etiqueta del encabezado – </head> – para que wordpress desencadene la acción wp_head.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title('', true, 'right' ); ?></title>
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>

Pie de página – footer.php

Este archivo va a tener las etiquetas del pie de página – al menos la etiqueta de cierre del cuerpo del documento y la etiqueta de cierre del documento – </body>, </html>.

Es necesario utilizar la función wp_footer() antes de cerrar la etiqueta body para que wordpress pueda desencadenar la acción wp_footer.

  <?php wp_footer() ?>
  </body>
</html>

Barra lateral – sidebar.php

La barra lateral – sidebar – generalmente se utiliza para visualizar los widgets. Los widgets son pequeñas aplicaciones que tienen funcionalidad particular. Ej: Mostrar la lista de categorías utilizadas en las entradas del blog, mostrar un calendario resaltando las fechas de publicaciones, mostrar una nube de etiquetas, buscador, etc. Por lo tanto es probable que no se quiera tener esta sección en todas las plantillas de nuestro tema.

<div id='sidebar' class='col-md-2'>
	<?php if ( ! dynamic_sidebar( ) ) : ?>
  <!-- 
Si no hay una barra lateral con widgets 
se muestra contenido predeterminado.
 -->
		<h3>No hay widgets habilitados...</h3>
		<p>Habilita un widget para ocultar este contenido.</p>
	<?php endif; ?>
</div>
Plantilla secciones separadas

Plantilla con secciones separadas. Se va a utilizar index.php para visualizar cualquier tipo de contenido.

Incluir secciones

Para incluir las secciones que generamos – header.php, footer.php, sidebar.php – dentro de un archivo podemos utilizar las siguientes funciones de wordpress:

  1. get_header() – Incluye el archivo header.php
  2. get_sidebar() – Incluye el archivo sidebar.php
  3. get_footer() – Incluye el archivo footer.php

Estas funciones se van a utilizar en la sección del documento donde se quiera visualizar el contenido del archivo que incluye cada una de las funciones.
Generalmente el encabezado – get_header() – va en la parte superior del documento, – get_sidebar() – se encuentra antes de llamar el pie de página y – get_footer() – se encuentra en la parte inferior del documento.

<?php get_header(); ?>
<div class='row full'>
    <div class='col-md-8 col-md-offset-2'>
      <?php if (have_posts()) : while (have_posts()) : the_post();  ?>
        <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
          <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
          <section class='entry'>
                   <?php the_excerpt(); ?>
          </section>
        </article>
      <?php endwhile; endif; ?>
    </div>
    <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

functions.php

Si instalamos el tema como está en este momento, aunque hay una sección definida para mostrar contenido dinámico en la barra lateral – dynamic_sidebar – no se pueden utilizar los widgets – ni tampoco utilizar menús de navegación -.

Para poder habilitar esas funcionalidades tenemos que incluir otro archivo al tema – functions.php -.

En este archivo se incluye funcionalidad al tema. En este caso la funcionalidad es habilitar el uso de widgets y de menús de navegación en nuestro tema.

Habilitar widgets

Para habilitar los widgets, dentro de functions.php, tenemos que crear una función. El nombre de esta función generalmente inicia con el nombre del tema seguido de _widgets_init.

Dentro de la función registramos la barra lateral y definimos algunas opciones de la barra lateral, por ejemplo que los títulos van a estar dentro de etiquetas h2 y que cada widget va a estar dentro de etiquetas aside.

Finalmente utilizamos la función de wordpress add_action() que se va a encargar de ejecutar la función que definimos cuando el evento widgets_init suceda – a esto se le llama hook o gancho.

<?php

function mi_tema_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'Widgets', 'mi_tema' ),
		'id'            => 'sidebar-1',
		'description'   => 'Arrastra los widgets aquí.',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'mi_tema_widgets_init' );

?>

Habilitar menú de navegación

Si queremos habilitar el uso de los menús de navegación, dentro del archivo functions.php, creamos otra función. El nombre sería el nombre del tema seguido por _setup.

Dentro de esta función pueden definirse distintas funcionalidades que puede incluir el tema pero en este caso únicamente vamos a registrar un menú de navegación – register_nav_menus -.

Una vez que definimos las funcionalidades del tema, enganchamos esta función con el evento after_setup_theme.

<?php

/* Inicializar los widgets...*/

function mi_tema_setup() {
	register_nav_menus( array(
		'primary' => __( 'Navegacion', 'mi_tema' ),
	) );
}
add_action( 'after_setup_theme', 'mi_tema_setup' );


?>

Para visualizar el menú de navegación en alguna plantilla o sección utilizamos la función wp_nav_menu en el lugar donde queremos que se muestre.

<!-- Más HTML -->
<nav>
   <?php wp_nav_menu(); ?>
</nav>
<!-- Más HTML -->

Otros documentos

Estos son algunos archivos que podemos incluir dentro de un tema para ajustar el despliegue del contenido en diferentes secciones.

Archivo

Descripción

404.php

Utilizado cuando WordPress no puede encontrar un post o página.

search.php

Utilizado para mostrar los de resultados de búsqueda.

page.php

Utilizado cuando se visualiza una página.

single.php

Utilizado cuando se visualiza una entrada.

archive.php

Se utiliza cuando una categoría, autor o fecha se consulta.
Si se quiere ajustar el despliegue de alguna sección en particular – categoría, autor, fecha – se pueden utilizar los archivos category.php, author.php y date.php respectivamente.

home.php

Plantilla de la página de inicio.
Si se utiliza una portada estática la plantilla utilizada es la de la página – page.php -.

screenshot.png

Imagen que permite visualizar el despliegue principal del tema en la sección apariencia > temas.

Plantillas para visualizar otro tipo de contenido

Crear otras plantillas para visualizar distinto tipo de contenido.

Puedes descargar los archivos para que comiences a hacer tus temas de wordpress.
El proyecto está en github.

67 comentarios en “Crear un tema en wordpress

  1. domino online

    Hello, Neat post. There’s a problem with your website in internet explorer, could test this?
    IE nonetheless is the market chief and a large component to
    other people will omit your magnificent writing because of this problem.

  2. kitchen design Essex

    Nice post. I learn something totally neew and challenging on blogs I stumbleupon every day.
    It’s always useful to read throughh content from other authors and use something from
    their web sites.

  3. Clases Wordpress por Skype

    Me ha llamado la atencion bastante la nota,
    realmente sobresaliente, muchas gracias por la averiguación, bastante informativa.
    Me quedo averiguando por la web a indagar mas notas aclarativas, gracias again.

  4. house clearance Surrey area

    Aw, this was a realy gpod post. Taking a few minutes and actual effort to make
    a really good article� but what can I say� I put things off a lot and don’t seem to get nearly
    anything done.

  5. Indogenting

    Hi there, all the time i used to check weblog posts here in the early hours in the daylight, as
    i love to find out more and more.

  6. Staithes holiday cottages

    Good day very nice website!! Man .. Excellent .. Amazing ..

    I’ll bookmark your website and take the feeds additionally�I’m satisfied to search out a lot of
    helpful information right here within tthe publish,
    we ned devlop extra strategies on this regard, thanks for sharing.

  7. Agenzia Immobiliare a Livorno

    Hello! This post could not be written any better! Reading through this post reminds me of my good
    old room mate! He always kept chatting about this.

    I will forward this post to him. Fairly certain he will have a good read.
    Many thanks for sharing!

  8. Cara bermain Judi online

    Hello! Someone in my Facebook group shared this website with us so
    I came to look it over. I’m definitely enjoying the information.
    I’m bookmarking and will be tweeting this to my followers!
    Wonderful blog and amazing design and style.

  9. Investing In Real Estate Companies

    Hiya, I’m really glad I have found this information. Today
    bloggers publish only about gossips and internet and this is actually annoying.
    A good blog with interesting content, that is
    whaqt I need. Thank you for keeping this web
    site, I will be visiting it. Do yyou do newsletters?
    Can’t find it.

  10. KZT

    whoah this weblog is magnificent i like studying your articles.
    Keep up the great work! You already know, many
    individuals are looking around for this info, you can aid them greatly.

  11. managed IT securITy services

    Pretty nice post. I just stumbled upon yoir blog and wanted to say that I’ve really enjoyed browsing your
    blog posts. In any case I wilkl be subscribing to your feed and I hope
    youu write again soon!

  12. criminal lawyer London UK

    Magnificent goods from you, man. I have understand yur stuff previou to and you’re just extremely magnificent.
    I really like what you’ve acqured here, really like whjat you’re saying and the way in which you say it.
    You make it enjoyable and you still care for to keep it wise.
    I can’t wait to read farr more from you. This is actually a wonderful site.

  13. search engine Optimisation consultants london

    I am extremely impressed with your writing skills as smartly
    as with the layout to your blog. Is that this a paid subject
    matter or did you modify it yourself? Either way stay up the
    excellent high quality writing, it’s rare to peer a nice weblog like this one nowadays..

  14. Phillip

    We absolutely love your blog and find the majority of yoour post’s to be precisely what I’m looking for.
    Does one ffer guest wrirers to write content for you?
    I wouldn’t mind producing a post or elaborating on many of the subjects you write wih regards to
    here. Again, awesome blog!

  15. bác sĩ Trần Thúy Vân

    Hello! I just wanted to ask if you ever have any problems with hackers?

    My last blog (wordpress) was hacked and I ended up losing
    many months of hard work due to no back up. Do
    you have any solutions to stop hackers?

  16. Yong

    I was just looking for this inforjation for some time. After six hours oof continuous Googleing, att last I got it in your web site.
    I wonder what is the lack of Google strategy that don’t rank this kind of informative web sites in top
    of the list. Usually the top web sites are full
    of garbage.

  17. تور بالی

    
    من این مطلب را خواندم و می توانم
    این پیغام را به افراد دیگر بی قراری پیشنهاد کنم

  18. 24 hour locksmith Dublin

    Wow that was odd. I just wrote an really long comment but after Iclicked submmit my
    comment didn’t appear. Grrrr… well I’m not writing all that over
    again. Regardless, just wanted to say greaat blog!

  19. luxury holiday cottages Whitby area

    It’s a pity yyou don’t have a donate button! I’d definitely donate to this oufstanding blog!

    I suppose for now i’ll settle ffor bookmarking annd addfing youjr RSS feed
    to my Google account.I look forward to brand neww updates and will talk about this blog with my Facebok group.
    Chat soon!

  20. agen poker online terpercaya dan terpopuler

    What i don’t realize is in truth how you are now not
    actually a lot more smartly-preferred than you may
    be right now. You are very intelligent. You realize thus
    considerably with regards to this subject, produced me personally believe it from numerous numerous angles.
    Its like women and men aren’t interested unless it is something to do with Lady gaga!
    Your personal stuffs nice. All the time take care of it up!

  21. men hair transplant

    Simply wish to say your article is as surprising.
    The clarity for your put up is just nice and that i can think
    you’re an expert on this subject. Well with your permission allow me to clutch
    your RSS feed to keep updated with forthcoming post.
    Thanks one million and please carry on the rewarding work.

  22. sua nghe gold

    Have you ever considered creating an ebook or guest authoring on other websites?
    I have a blog centered on the same topics you discuss and would really like to have you share some stories/information. I know
    my subscribers would value your work. If you’re even remotely interested, feel free to shoot me
    an email.

  23. schnell Geld Nebenverdienst

    I will immediately seize your rss feed as I can’t find your e-mail subscription hyperlink or
    e-newsletter service. Do you have any? Please let me recognise in order that I could subscribe.
    Thanks.

  24. download hd 720p

    Heya i am for the first time here. I came across this board
    and I find It truly useful & it helped me out
    much. I hope to give something back and help others like you aided me.

  25. http://ytevn.over-blog.com/

    Have you ever considered publishing an e-book or guest authoring on other websites?
    I have a blog centered on the same ideas you discuss and would love to have you share some stories/information. I
    know my readers would enjoy your work. If you are even remotely interested, feel free
    to shoot me an e mail.

  26. https://alodocter.hatenablog.com/

    Good day I am so excited I found your blog page,
    I really found you by accident, while I was researching on Digg for something else, Nonetheless I am here now and would just like
    to say many thanks for a incredible post and a all round interesting blog (I also love the theme/design), I don’t have time
    to look over it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read much more, Please do keep up the great job.

  27. 실비보험비교사이트

    Have you ever thought about adding a little bit more than just your articles?
    I mean, what you say is fundamental and everything.
    However think of if you added some great photos or video clips to give your posts more, «pop»!
    Your content is excellent but with images and videos, this blog could certainly be one of the greatest in its niche.
    Amazing blog! http://jnnews.or.kr/

  28. 무직자대출

    Do you mind if I quote a couple of your posts as long as
    I provide credit and sources back to your website?
    My blog site is in the very same area of interest as yours and my visitors
    would truly benefit from some of the information you provide here.
    Please let me know if this alright with you. Many thanks! http://www.xn--jj0bz6za886fbqvba.kr/

  29. Coin news

    I’m not sure why but this weblog is loading very slow for me.

    Is anyone else having this issue or is it a problem on my end?
    I’ll check back later on and see if the problem still exists.

  30. fifa 20 coin generator

    Hello would you mind sharing which blog platform you’re working with?
    I’m planning to start my own blog soon but I’m having a difficult time
    deciding between BlogEngine/Wordpress/B2evolution and
    Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something completely unique.
    P.S Apologies for getting off-topic but I had to ask!

  31. https://khoe360day.weebly.com/

    Thanks , I’ve recently been looking for information about this topic for a long time
    and yours is the greatest I’ve came upon till now.
    But, what about the conclusion? Are you certain in regards to
    the supply?

Deja un comentario

Tu dirección de correo electrónico no será publicada.