Creare il proprio tema WordPress da zero

, Author

Lo scopo di questo breve tutorial è di permettervi di creare il vostro tema WordPress in pochi minuti. Questo tutorial è per chiunque sia a suo agio con HTML & CSS. Permette di recuperare tutti i contenuti di WordPress per integrarli in una produzione preesistente di HTML & CSS. O da fare in un 2° passo una volta che tutti i contenuti di WordPress sono visualizzati.

Creare i file minimi richiesti

Per ottenere un primo risultato, basta:

  • creare una nuova directory in wp-contents/themes p.e.g. my-own-theme
  • creare un file index.php lì
    • in questo file scrivere e.g. Hi, it works
  • creare un file di stile lì.css
    • in questo file copiare il seguente codice e modificare le informazioni
/* Theme Name: NOM DE VOTRE THEME URI: http://www.VOTRE-SITE.COM Description: DESCRIPTION DE VOTRE THEME. Version: 1.0 Author: VOTRE NOM */
  • si crea uno screenshot.png (dimensioni 1200×900) che illustra il tema
  • andare all’aspetto backend > temi e attivare il nuovo tema lì
  • ritornare all’URL pubblico del sito e aggiornare la pagina
  • La pagina verrà visualizzata: Ciao, funziona

Visualizza il contenuto dinamico relativo al sito (nome, descrizione, percorso della cartella del tema)

Ora che abbiamo visualizzato il contenuto della nostra pagina indice.php attivando il tema, passiamo in rassegna alcuni dei tag WP più utili per iniziare, penso in particolare:

  • titolo del sito
  • descrizione/slogan del sito
  • path to theme directory, così possiamo collegare il nostro foglio di stile.css alla nostra pagina 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 -->

Creare un ciclo per visualizzare tutti gli articoli e il loro contenuto

Ora creeremo un ciclo che visualizza tutti gli aritcoli / post. Per default saranno visualizzati in ordine antecronologico (i più recenti per primi)

<!-- 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; ?>

Filtrare i cicli

Possiamo anche filtrare i cicli per visualizzare solo ciò che ci interessa.

<!-- 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'); ?>

Abilita la possibilità di aggiungere un’immagine evidenziata

In functions.php, aggiungi il seguente codice

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

Visualizza menu

Vedrai che per default non ti è permesso aggiungere un menu. Devi specificarlo a WordPress. Nelle funzioni.php, copiate il seguente codice:

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

Poi nel vostro tema, potete chiamare il vostro menu in questo modo

<?php wp_nav_menu(); ?>

Personalizzate il link More…

Nelle funzioni, copiate questo codice:

//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' );

Prossimo nello stile personalizza la classe more-link

Aggiungi un’area widget

In funzioni, copia questo codice:

// 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' ); ?>

Aggiungi classi sul corpo

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

Aggiungi wp_head() e wp_footer()

Infine, dobbiamo ancora aggiungere le 2 funzioni che permettono a WordPress di aggiungere tutto il codice necessario ai plugin ecc per funzionare correttamente.

<!-- 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 -->

Varie

<!-- 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>

Altro

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *