Création de conceptions personnalisées «Snow Fall» dans WordPress

Création de superbes articles de style "Snow Fall" dans WordPress avec des champs personnalisés avancés

Ce tutoriel montre comment construire des articles captivants et personnalisés de style "Snow Fall" dans WordPress, reflétant la conception de la pièce emblématique John Branch du New York Times. Nous tirons parti du plugin Advanced Custom Fields (ACF) et de son module complémentaire Flexible Content Fields pour y parvenir.

Concepts clés:

• Cette méthode utilise des champs de contenu flexibles d'ACF pour créer des dispositions dynamiques. Cela permet divers blocs de contenu (texte, images de héros, citations de traction) dans n'importe quel ordre et quantité.
• Un modèle de page personnalisé (snowfall.php) est essentiel pour rendre ce contenu dynamique.
• ACF fournit des fonctions pour parcourir et afficher le contenu de chaque bloc.

Inspiration:

L'article "Snow Fall" du New York Times, ainsi que des pièces similaires du Chicago Tribune et du Verge, ont démontré la puissance de rompre des dispositions standard pour créer un contenu immersif et engageant visuellement. Ce tutoriel vous permet de reproduire cette approche dans WordPress.

Structure de l'article WordPress standard Vs. "Snow Fall":

Articles WordPress typiques Suivez une structure prévisible: image en vedette, titre, texte corporel, barres latérales, commentaires, etc. Les articles "Snow Fall" hiérarchisent la narration visuelle avec des images à écran complet, des dispositions de texte personnalisées, et plus encore.

Construire votre article "Snow Fall":

Nous créerons trois types de blocs de contenu: texte standard (WYSIWYG), images de héros (avec superposition de texte en option) et citer les citations.

1. Configuration des champs personnalisés avancés:

Installez et activez le plugin ACF gratuit et le module complémentaire de contenu flexible payant. Créez un nouveau groupe de terrain nommé "Snow Fall Memplate Fields". Ajoutez un champ "Contenu flexible" appelé "Bloc de contenu".

dans "Block de contenu", ajoutez trois dispositions:

• Texte standard: contient un sous-champ Wysiwyg.
• Image du héros: contient un sous-champ d'image et un sous-champ de superposition de texte.
• Pull Quote: contient un sous-champ de devis et un sous-champ d'auteur.

2. Page de modèle personnalisée (snowfall.php):

Créez un nouveau fichier de modèle nommé snowfall.php dans le répertoire de votre thème:

<?php
/*
Template Name: Snow Fall Template
*/

get_header();

if ( have_rows('content_block') ) {
    while ( have_rows('content_block') ) : the_row();
        printf('<div class="%s">', get_row_layout());
        switch (get_row_layout()) {
            case 'standard_text':
                if (get_sub_field('wysiwyg')) {
                    echo get_sub_field('wysiwyg');
                }
                break;
            case 'hero_image':
                if (get_sub_field('image')) {
                    $image = get_sub_field('image');
                    echo wp_get_attachment_image($image['ID'], 'full'); // Use full-size image
                }
                if (get_sub_field('text_overlay')) {
                    echo '<h3 id="get-sub-field-text-overlay">' . get_sub_field('text_overlay') . '</h3>';
                }
                break;
            case 'pull_quote':
                if (get_sub_field('quote')) {
                    echo '<p>' . get_sub_field('quote') . '</p>';
                }
                if (get_sub_field('author')) {
                    echo '<p>' . get_sub_field('author') . '</p>';
                }
                break;
        }
        echo '</div>';
    endwhile;
}

get_footer();
?>

3. Association des champs ACF avec le modèle:

Dans les paramètres de groupe de champ ACF, sous "Emplacement", "Sélectionnez" Template de page "est égal au" modèle de chute de neige ". Masquer les sections inutiles dans l'onglet Options.

4. Création et utilisation de la page:

Créez une nouvelle page et sélectionnez le "modèle de chute de neige". Vous verrez maintenant l'interface ACF pour ajouter et organiser vos blocs de contenu.

5. Styling:

Ajouter CSS pour styliser la sortie pour correspondre à l'esthétique "Snow Fall" souhaitée.

Ce guide détaillé fournit une base robuste pour créer des articles dynamiques visuellement étonnants dans WordPress. N'oubliez pas de consulter la documentation ACF pour d'autres options de personnalisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!