Les shortcodes

Un premier Shortcode qui affiche les titres des 5 derniers articles

A copier dans votre fichier functions.php


add_shortcode( 'query_shortcode', 'query_shortcode_function' );
function query_shortcode_function() {
     ob_start();
     get_template_part('template-parts/query_shortcode');
     return ob_get_clean();
}

Créer le fichier dans query_shortcode.php dans le dossier « template-parts » de votre thème

<?php
    echo 'Mon shortcode';
?>

A insérer là où vous souhaiter le faire apparaître

[query_shortcode]

Avec une requête personnalisée

<?php 
// 1. On définit les arguments pour définir ce que l'on souhaite récupérer
$args = array(
    'post_type' => 'post',
    'category_name' => 'films',
    'posts_per_page' => 3,
);

// 2. On exécute la WP Query
$my_query = new WP_Query( $args );

// 3. On lance la boucle !
if( $my_query->have_posts() ) : while( $my_query->have_posts() ) : $my_query->the_post();
    
    the_title();
    the_post_thumbnail();

endwhile;
endif;

// 4. On réinitialise à la requête principale (important)
wp_reset_postdata();
?>


Références:


https://codex.wordpress.org/Shortcode_API

Des plugins (indispensables?… ou pas !)

Les indispensables?

Référencement

Formulaire de contact

Pour afficher des articles

Utilitaires bien pratiques

Créer des liens internes dans une page

Etape 1:
définissez des « ancres » dans votre page.

Vous sélectionnez un bloc gutenberg et dans la colonne de droite, vous pouvez lui attribuer une ancre

Etape 2:
définissez des « ancres » dans votre page.

Vous créer un lien en définissant ça valeur par #votreancre

<!-- exemple -->
<a href="#votreancre">Aller à l'ancre X</a>

Remplacer le menu responsive installé par défaut dans le thème « _s » avec un plugin.

Vous trouverez ci-dessous des solutions ne requérant aucune connaissance en programmation car utilisant faisant appel à des plugins.
Souvent, ce sont des solutions pratiques, mais qui permettent un grand nombre d’options. On se trouve donc souvent avec des solutions complexes pour un élément qui aurait pu être mis en place plus légèrement.

Proposition 1
Le plugin « Responsive Menu »

Dans les options du plugins:

  • Masquer les options PRO (ces options sont payantes) en bas de page
  • Définissez la largeur à laquelle le menu se transforme
  • Sélectionner le menu à utiliser (qu’il faut créer avant bien entendu!)
  • Mentionner l’ID du menu à remplacer.
    Vous retrouvez cette information en inspectant le code de votre menu actuel

Toutes les autres options sont à découvrir dans le menu du plugin.
La largeur du menu, le bouton, les couleurs,…

Il est possible qu’une option dont vous avez besoin ne soit pas disponible; ou que c’est une option payante ;-).
Pas de soucis, vous pouvez « over-stylé » dans votre propre css:

css actuel:

Dans votre custom css:
Attention: n’oublier pas d’ajouter le « !important » avant le « ; » de chacune de vos propriétés; le plugin insérant ss réglages inline directement dans le code

body #responsive-menu-container {

    transition: transform 0.3s !important;
    text-align: right !important;

}

Proposition 2
Le plugin “WP Responsive Menu”

Dans les options du plugins: vous retrouverez sensiblement les mêmes options que dans le plugin précédent.

Et vous pourrez aussi over-stylé avec votre propre css.

Je vois 1 raison majeure d’utiliser cette solution plutôt que l’autre plugin: celui-ci ne rajoute pas 800 lignes de css dans le header mais il doit de toute manière les stocker autre part…

Proposition 3
Le plugin “WP Mobile Menu”

Dans les options du plugins: vous retrouverez sensiblement les mêmes options que dans le plugin précédent.

Et vous pourrez aussi over-stylé avec votre propre css.

Option intéressante, il permet déjà dans la version gratuite de créer 2 menus: 1 à gauche et 1 à droite.

Changer la largeur par défaut de l’éditeur Gutenberg

Tout est clair ici

et plus simplement: dans functions.php

function monchangement_gutenberg_admin_styles() {
    echo '
        <style>
            /* Main column width */
            .wp-block {
                max-width: 720px;
            }
 
            /* Width of "wide" blocks */
            .wp-block[data-align="wide"] {
                max-width: 1080px;
            }
 
            /* Width of "full-wide" blocks */
            .wp-block[data-align="full"] {
                max-width: none;
            }	
        </style>
    ';
}
add_action('admin_head', 'monchangement_gutenberg_admin_styles');

Ajouter des tailles images personnalisées

Dans le fichier functions.php


<?php
// First we'll add support for featured images
add_theme_support( 'post-thumbnails' );

// Then we'll add our 2 custom images
add_image_size( 'featured-large', 1600, 400, true );
add_image_size( 'blog-width', 800, 600 );

// And then we'll add the custom size that spans the width of the blog to the Gutenberg image dropdown
add_filter( 'image_size_names_choose', 'notretheme_custom_image_sizes' );

function notretheme_custom_image_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'blog-width' => __( 'Blog Width' ),
    ) );
}


Tous les détails à retrouver ici

Les requêtes personnalisées

Sources: capitainewp.io

Exemple de requête que l’on peut copier et adapter en fonction de nos besoins:


<?php 
// 1. On définit les arguments pour définir ce que l'on souhaite récupérer
$args = array(
    'post_type' => 'post',
    'category_name' => 'films',
    'posts_per_page' => 3,
);

// 2. On exécute la WP Query
$my_query = new WP_Query( $args );

// 3. On lance la boucle !
if( $my_query->have_posts() ) : while( $my_query->have_posts() ) : $my_query->the_post();
    
    the_title();
    the_content();
    the_post_thumbnail();

endwhile;
endif;

// 4. On réinitialise à la requête principale (important)
wp_reset_postdata();
?>

Ajouter une nouvelle zone de widget

Référence: wpformation

Étape 1 : Créer sa nouvelle zone de widget

Dans le fichier functions.php

function header_widgets_init() {
 
 register_sidebar( array(

 'name' => 'Ma nouvelle zone de widget',
 'id' => 'new-widget-area',
 'before_widget' => '<div class="nwa-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="nwa-title">',
 'after_title' => '</h2>',
 ) );
}

add_action( 'widgets_init', 'header_widgets_init' );



Quelques explications :

  • ‘name’ = nom de la “widget area” qui apparaîtra dans votre administration WordPress
  • ‘id’ = identifiant unique de votre “widget area”
  • ‘before_widget’ = choisir une balise HTML à ouvrir avant votre widget (<div>, <li> etc…) et profitez-en pour y ajouter une classe qui pourra vous aider lors de la customisation CSS (étape 5)
  • ‘after_widget’ = fermer la balise (</div>, </li> etc…)
  • ‘before_title’ = choisir une balise pour le titre du widget (<h2>, <h3>, <h4> etc…) et, comme pour le ‘before_widget’,ajoutez une classe pour agir en CSS ultérieurement
  • ‘after_title’ = fermer la balise du titre (</h2>, </h3>, </h4> etc…)
  • ‘before_sidebar’ = choisir une balise HTML à ouvrir avant votre widget (<div>, etc…) et profitez-en pour y ajouter une classe qui pourra vous aider lors de la customisation CSS (étape 5)
  • ‘after_sidebar = fermer la balise (</div>, etc…)

Étape 2 : Faire apparaître la nouvelle widget area

 <!-- ajout de ma nouvelle widget area -->
 <?php if ( is_active_sidebar( 'new-widget-area' ) ) : ?>
 <div id="header-widget-area" class="nwa-header-widget widget-area" role="complementary">
 <?php dynamic_sidebar( 'new-widget-area' ); ?>
 </div>
 <?php endif; ?>
 <!-- fin nouvelle widget area -->


Résultat dans le dashboard de votre site:

Installer WordPress dans un sous-domaine sur votre hébergement Infomaniak

Vous posséder un hébergement web, lié au domaine monsite.ch.

Par défaut, Infomaniak créé un sous domaine www.monsite.ch

On peut créer un nombre illimité de sous-domaine.
Pour chaque sous-domaine: on peut réaliser un site distinct.

En fonction des objectifs, on pourrait ainsi imaginer une segmentation d’un site en plusieurs sites distincts.

monsite.ch (www.monsite.ch) pour le site de référence
shop.monsite.ch pour la section dédiée au e-commerce
demo.monsite.ch pour la section dédiée aux démonstration

Créer un sous-domaine sur votre hébergement Infomaniak

  • Ouvrir le Manager (manager.infomaniak.com)
  • Aller dans Hébergement Web
  • Cliquer sur l’hébergement/le nom de domaine concerné
  • Sous Sites cliquer sur Ajouter


  • Choisir utiliser un Sous-domaine
  • Inscrire le nom du Sous-domaine (ex : xxx.votre-domaine.com)

  • Créer le compte administrateur de wordpress
  • Définir le titre du site
  • Définir le thème initial du site
  • Valider le résumé

  • Terminer la procédure avec le bouton Valider

(Référence Infomaniak)

Les blocks Large et Fullwidth.

Par défaut, Undercore ne gère pas les blocks Large et Fullwidth.
Il faut les activer.

Dans le fichier functions.php ajoutez cette fonction:

/**
 * Activate fullwidth block
 */

function slugdemontheme_setup_theme_supported_features() {

	// Format large
	add_theme_support( 'align-wide' );

}
add_action( 'after_setup_theme', 'slugdemontheme_setup_theme_supported_features' );

Et dans votre fichier css:

/* FULLWIDTH BLOCK */
@media screen and (min-width: 960px) {
    .alignfull {
          width: 100vw;
          margin-left: calc(50% - 50vw);
    }
    .alignwide {
          width: calc(100% + 240px);
          position: relative;
          left: -120px;
    }
}
   .entry-content .alignwide {
        margin-left  : -80px;
        margin-right : -80px;
    }
    .entry-content .alignfull {
        margin-left  : calc( -100vw / 2 + 100% / 2 );
        margin-right : calc( -100vw / 2 + 100% / 2 );
        max-width    : 100vw;
    }
    .alignfull img {
        width: 100vw;
    }