WordPress

[WordPress]カスタムCSSパターン例

グローバルメニューにしている記事について…

ここは固定ページで設定する方が多いと思いますが、
記事投稿で作ってた場合

ほかの記事と同様に、
そこには例えばパンくずリストやカテゴリー表示、関連記事、ページ送りなど、、、表示されることとなります。

出さないほうがスマートだな、、
と思われたり、記事でこれらを非表示にしたいとき。

記事ごとにある、
カスタムCSSにコードを入力し、操作することができます。

各投稿記事内にあるカスタムCSS

 

という、
カスタムCSSしているコードを、備忘録がてらに上げたいと思います。
一覧としてはこの辺が候補です。

投稿日や更新日を非表示 ⇩

ページの投稿日と更新日

 

パンくずリストの非表示 ⇩

ページのパンくずリスト

 

カテゴリータグ非表示 ⇩

ページのカテゴリータグ

 

SNSボタンの非表示 ⇩

ページのSNSボタン

 

関連記事を非表示 ⇩

ページの関連記事表示

 

ページャー(ページ送り、ページネーション)非表示 ⇩

ページのページ送り箇所

 

コメント欄を非表示 ⇩

ページのコメント入力箇所

 

これらのコード…
固定ページにすれば、カスタマイズなどしなくてもOKでしょうが😅

なにかのときの参考になればと思い…w

カスタムCSSにしたいコードは、
ページのソース表示から探るやりかたでやってます。

コード探索するやりかたは、
こちらの記事で上げてますのでご覧くださいませ…

カスタマイズしたいCSSのコードを見つける方法
カスタマイズしたいソースコードを知るには?サイトやブログのCSSコーディングに不可欠なコードの調べかたを上げてます

 

❶投稿日や更新日を非表示

.date-tags {
display: none;
}

 

❷パンくずリストの非表示

#breadcrumb {
display: none;
}

 

❸カテゴリータグ非表示

.entry-categories-tags {
display: none;
}

 

❹SNSボタンの非表示
私はプラグイン“AddToAny Share Buttons”を反映させてるので、記事ごとに設定が可能になってます。

記事編集の下にあるココから ⇩
✓点を外して対応します。

シェアボタンの操作方法

Cocoonで利用のSNSボタンの場合、違うやり方となりますので設定ページをご覧になってください。

 

❺関連記事を非表示

#related-entries {
display: none;
}

 

❻ページャーを非表示

#pager-post-navi {
display: none;
}

 

❼コメント欄の非表示
投稿一覧が並ぶトコで、
記事ごとに“クイック編集”できる場所があります。

ここをクリックし、
コメントを許可の✓点を外せばOKです。

コメント欄の操作方法

 

まとめる場合はたぶん、こうなると思います。
→たぶんって、、w

.date-tags,
#breadcrumb,
.entry-categories-tags,
#related-entries,
#pager-post-navi {
display: none;
}

 

一つ注意点があります。

一般的なCSSカスタマイズで使われる、
わかりやすく見出しでコメント振ったりするやり方ですが。

例えばこんなふうな、、

/* 投稿日や更新日を非表示 */ ⇦ ココ
.date-tags {
display: none;
}

このカスタムCSSでそれ入れると、
404エラーになっちゃいますのでご注意ください。

文言なにも入れず、
コードだけタンタンと、、表示させてください笑)

以上、
なにかのヒントになりましたらありがたいでっす。

コメント