Catégorie : Wordpress

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

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

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;
    }

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

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):

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:

Référence: WordPress Custom Fields 101: Tips, Tricks, and Hacks