<?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' ),
) );
}
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();
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 -->
WordPress vous offre une interface pour gérer les contenus de votre site web. Pour chaque page/article, vous avez à disposition:
un champ titre
un champ de contenu (gutenberg)
des catégories et tags
Interface WP classique
En fonction de vos types de contenus (portfolio, fiche produit, etc…) et/ou de votre mise en écran vous pourriez avoir besoin d’ajouter un ou plusieurs champs spécifiques. WordPress vous permet d’ajouter de nouveaux champs grâce au « custom fields » (Champs personnalisés):
Affichage des cutom fieldsL’interface de gestion des custom fields apparaît sous le contenu
Un exemple
Imaginons: Pour une webapp traitant d’architecture, nous souhaitons créer une fiche spécifique pour chaque bâtiment. Après le titre nous afficherons un cartouche contenant les informations techniques résumées tels que: la date de construction, le nom du bureau d’architecte, etc…
Création des champs personnalisés:
Affichage dans votre thème
<code><?php if (get_post_meta($post->ID, 'key', true)){echo get_post_meta($post->ID, 'key', true); ?>};</code>
ou
<p>Date de constrution: <?php echo get_post_meta($post->ID, 'Date de constrution', true); ?></p> <p>Architecte: <?php echo get_post_meta($post->ID, 'Architecte', true); ?></p>
Les custom fields offrent des possibilités infinies. A vous de les utiliser au mieux pour personnaliser WP en fonction de vos besoins (ou ceux de vos clients).
Vous désirez en savoir plus, lisez l’article suivant:
