Crear tu propio tema de WordPress desde cero

, Author

El objetivo de este breve tuto es que puedas crear tu propio tema de WordPress en pocos minutos. Este tuto es para cualquiera que se sienta cómodo con HTML & CSS. Permite obtener todo el contenido de WordPress para integrarlo en una producción HTML & CSS preexistente. O para hacer en un 2º paso una vez que se despliegan todos los contenidos de WordPress.

Crear los archivos mínimos necesarios

Para obtener un primer resultado, basta con:

  • crear un nuevo directorio en wp-contents/themes p.por ejemplo mi-propio-tema
  • crea un archivo index.php allí
    • en este archivo escribe por ejemplo Hola, funciona
  • crea un archivo de estilo allí.css
    • en este archivo copia el siguiente código y modifica la información
/* Theme Name: NOM DE VOTRE THEME URI: http://www.VOTRE-SITE.COM Description: DESCRIPTION DE VOTRE THEME. Version: 1.0 Author: VOTRE NOM */
  • crea una captura de pantalla.png (dimensiones 1200×900) que ilustra el tema
  • ir a la apariencia del backend > temas y activar el nuevo tema allí
  • volver a la URL pública del sitio y refrescar la página
  • La página se mostrará: Hola, ya funciona

Mostrar contenido dinámico relacionado con el sitio (nombre, descripción, ruta a la carpeta del tema)

Ahora que hemos mostrado el contenido de nuestra página índice.php activando el tema, vamos a repasar algunas de las etiquetas más útiles de WP para empezar, estoy pensando en particular:

  • título del sitio
  • descripción del sitio/eslogan
  • ruta al directorio del tema, para que podamos enlazar nuestra hoja de estilo.css a nuestra página index.php
<?php bloginfo('stylesheet_directory'); ?> <!-- chemin vers le répertoire/thème du site du site --><?php bloginfo('name'); ?> <!-- nom du site --><?php bloginfo('description'); ?> <!-- description du site -->

Crear un bucle para mostrar todos los artículos y su contenido

Ahora crearemos un bucle que muestre todos los aritculos / posts. Por defecto se mostrarán en orden antecronológico (los más nuevos primero)

<!-- Commencer la boucle --><?php if (have_posts()) : while (have_posts()) : the_post(); ?><!-- Afficher les contenus de la boucle --><?php the_post_thumbnail(); ?> <!-- remplace la balise <img> ! alternativement, on peut remplacer l'attribut src de la balise <img> par --> <?php echo get_the_post_thumbnail_url(); ?><?php the_title(); ?> <!-- titre du post --><?php the_content(); ?> <!-- contenu du post --><?php echo get_the_date(); ?> <!-- date du post / on le fait des cette façon car sinon WP n'affiche qu'une fois la date si plusieurs posts on la même date--><?php the_permalink(); ?> <!-- lien vers le détail du post --><?php the_time(); ?> <!-- date de création du post --><?php the_author(); ?> <!-- auteur du post --><?php the_category();?> <!-- la/les catégorie(s) assignée(s) au post --><!-- Terminer la boucle --><?php endwhile; endif; ?>

Filtrar los bucles

También podemos filtrar los bucles para mostrar sólo lo que nos interesa.

<!-- n'afficher que les contenus de type 'post' (dans une page p.ex. --><?php query_posts('post_type=post') ?><!-- n'afficher que le premier post. On n'affiche qu'un post --><?php query_posts('posts_per_page=1'); ?><!-- Afficher uniquement le 2e, 3e et 4e post. On skip le premier et on en affiche 3 au total--><?php query_posts('offset=1&posts_per_page=3'); ?><!-- afficher tout excepté le premier post. --><?php query_posts('offset=1'); ?><!-- afficher tout excepté les 4 premiers posts. --><?php query_posts('offset=4'); ?>

Habilitar la posibilidad de añadir una imagen destacada

En functions.php, añade el siguiente código

//activer image mise en avantadd_theme_support( 'post-thumbnails' );

Menú de visualización

Verás que por defecto no puedes añadir un menú. Tienes que especificarlo a WordPress. En las funciones.php, copia el siguiente código:

// ajouter une zone de menuregister_nav_menu( 'primary', __( 'Navigation Menu' ) );

Después, en tu tema, puedes llamar a tu menú de esta manera

<?php wp_nav_menu(); ?>

Personaliza el enlace Más…

En funciones, copia este código:

//personaliser "lire la suite" function modify_read_more_link() {return '<a class="more-link" href="' . get_permalink() . '">lire la suite...</a>';} add_filter( 'the_content_more_link', 'modify_read_more_link' );

Siguiente en estilo personaliza la clase more-link

Agrega un área de widgets

En funciones, copia este código:

// Enregistrer une zone appelée 'Ma zone de widgets'function add_widget_Support() { register_sidebar( array( 'name' => 'La zone de widgets de Thomas', 'id' => 'zone-widgets', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', ) );}// Hook the widget initiation and run our functionadd_action( 'widgets_init', 'add_Widget_Support' );// puis mettre ceci dans le thème à l'endroit désiré:<?php dynamic_sidebar( 'zone-widgets' ); ?>

Añadir clases en el cuerpo

<body <?php body_class(); ?>>

Añadir wp_head() y wp_footer()

Por último, nos queda añadir las 2 funciones que permiten a WordPress añadir todo el código necesario para que los plugins, etc, funcionen correctamente.

<!-- Pour wp_head(), il faut le mettre juste avant la fermeture de la balise <head> --> <?php wp_head(); ?> </head><!-- Pour wp_footer(), il faut le mettre juste avant la fermeture de la balise <body> --> <?php wp_footer(); ?> </body> <!-- ou alors tout en bas si on inclut la fermeture des balises body et html dans le footer -->

Diversos

<!-- Insérer le nom d'une page ou d'un post suivi du nom du site dans la balise <title> --><title><?php wp_title(' - ', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Más información

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *