web-dev-qa-db-ja.com

フロントエンドでドラフトページを表示するためのカスタムCSS？

フロントエンドでドラフトページを表示しているときに、ページ自体でそのステータスをすぐに確認したいと思います。現在、兆候はありません。ドラフト固有のCSS（またはヘッダーメッセージのみ）を作成する方法はありますか？

draft
3
Derek Illchuk

おそらくもっと良い方法がありますが、次のCSSをスタイルシートに追加すると、ステータスが下書きのページを表示するときに小さなバナーが追加されます。

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

これらのクラスをさまざまなステータスに使用することもできます。

.status-pending

.status-publish

.status-future

.status-private

私のために働く。

enter image description here

5
RiddleMeThis

OPはこちら。ホームページが下書きに設定されている場合、選択した回答で使用されているCSSクラスは使用できません。これは、「CSSおよびJavaScriptツールボックス」プラグインを使用して、斜めのドラフト透かしを配置するために現在使用しているものです。

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

CJToolboxのスクリプト、すべてのページに含まれるように設定：

<?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