Page Publishing

[denvergeeks]

Une alternative à la publication de pages - une autre méthode consiste à utiliser CSS pour supprimer les éléments indésirables d’un article de sujet normal, tout en préservant toutes les fonctionnalités (c’est-à-dire les scripts Javascript dans les composants de thème installés, et le style CSS, etc.)

Les balises dans le compositeur peuvent être utilisées pour appliquer sélectivement un formatage à un article de sujet spécifique.

Par exemple, sur mon site, j’obtiens cela en collant le CSS suivant dans le CSS de mon thème dans l’onglet Commun :

/********************** SUPPRIMER DES ÉLÉMENTS DE LA MISE EN PAGE À L'AIDE DES BALISES *************** /

.tag-no-header {
    .d-header {
        display: none !important;
    }
    #post_1 nav.post-controls .actions button.edit {
    top: 0px !important;
    }
    .topic-body h1 {
        padding-top: 0 !important;
    }
}

.tag-no-sidebars {
    aside.sidebar {
        display: none !important;
    }
}

.tag-no-category {
    .topic-category {
        display: none !important;
    }
}

.tag-no-timeline {
    .topic-navigation {
        display:none !important;
    }
    .container.posts {
        grid-template-columns: 100% !important;
    }
    .topic-body {
    width: 100% !important;
    }
}

.tag-no-post-links {
    .post-links-container {
        display:none !important;
    }
}

.tag-no-box-shadow {
    .topic-body {
        width: 100% !important;
        border-top: none !important;
        box-shadow: none !important;
        background-color: unset !important;
    }
}

.tag-no-topic-meta-data {
    .topic-meta-data {
        display:none !important;
    }
}

.tag-no-side-margins {
    .wrap {
        max-width: unset !important;
        padding: 0 10px !important;
    }
    .content-wrapper {
        display: block !important;
    }
    #main-outlet-wrapper {
        width: 100% !important;
    }
    .topic-body {
        width: 100% !important;
    }
}

.tag-no-footer-buttons {
    #topic-footer-buttons {
        display: none !important;
    }
}

Ensuite, je crée des balises que je peux appliquer sélectivement aux articles de sujet, correspondant aux sélecteurs CSS dans le code ci-dessus…

no-header
no-sidebars
no-category
no-timeline
no-post-links
no-box-shadow
no-topic-meta-data
no-side-margins
no-footer-buttons

---

Voici donc les deux versions différentes du même article de sujet…

Avant (aucune balise appliquée) :

Après (toutes les balises appliquées) - que je peux également intégrer sous forme d’iFrame dans d’autres articles sur mon site :