web-dev-qa-db-fra.com

CSS personnalisé pour afficher un brouillon de page sur le frontend?

Lors de l'affichage d'un brouillon de page sur le frontend, j'aimerais voir ce statut tout de suite sur la page elle-même. Actuellement, il n'y a aucune indication. Existe-t-il un moyen d'avoir un CSS spécifique au brouillon (ou même juste un message d'en-tête?)

draft
3
Derek Illchuk

Il existe probablement un meilleur moyen, mais vous pouvez ajouter le CSS suivant à votre feuille de style, qui ajoutera une petite bannière lors de l'affichage d'une page qui a le statut de brouillon.

.status-draft.hentry:before {
    content: "Previewing a Draft";
    background: #87C5D6 !important;
    display: block;
    text-align: center;
}

Vous pouvez également utiliser ces classes pour les différents statuts.

.status-pending

.status-publish

.status-future

.status-private

Travaille pour moi.

enter image description here

5
RiddleMeThis

OP ici. Si la page d'accueil est définie sur brouillon, la classe CSS utilisée dans la réponse choisie n'est pas disponible. Voici ce que j'utilise maintenant pour placer un filigrane diagonal DRAFT, en utilisant le plugin "CSS and Javascript Toolbox":

CSS

.draft-watermark{
  position:absolute;
  background:clear;
  display:block;
  min-height:50%; 
  min-width:50%;
  color:lightgrey;
  font-size:500%;
  transform:rotate(310deg);
  -webkit-transform:rotate(310deg);
  z-index: 100;
}
.draft-watermark:before {
  content: "DRAFT DRAFT DRAFT DRAFT";
}

Script dans CJToolbox, configuré pour être inclus sur toutes les pages:

<?php if (get_post_status(get_the_ID()) == 'draft'): ?>
<script>
  jQuery(document).ready(function() {
    jQuery('<div class="draft-watermark"></div>').insertBefore(jQuery('div:first'));
  });
</script>
<?php endif; ?>
1
Derek Illchuk