WordPressは通常、「投稿」と「固定ページ」という2種類の投稿タイプがありますが、「Lightningテーマ」の推奨プラグインExUnitをインストールすると、カスタム投稿タイプを使えるようになります。
カスタム投稿は通常の投稿のように、日付と更新日が表示されますが、カスタム投稿の使い方によっては、日付を非表示にしたいというケースがあると思います。
そこで、この記事では、カスタム投稿タイプの日付を非表示にするCSSカスタマイズについて解説します。
なお、Lightningテーマのカスタム投稿タイプの詳しい使い方については、「【WordPress】Lightningテーマのカスタム投稿タイプを実装する方法」で解説していますので、是非どうぞ。
好きなところから読めます
Lightningテーマのカスタム投稿の日付を非表示にする流れ
カスタム投稿の日付が表示される場所は2ヶ所あります。
- カスタム投稿のページ
- ウィジェット（新着投稿）
それぞれの表示場所によって、CSSのカスタマイズが異なりますので、両方非表示にしたい時は、両方のCSSをカスタマイズする必要があります。
Lightningテーマのカスタム投稿ページの日付を非表示にするCSS
最初に、カスタム投稿ページの日付を非表示にするCSSについて解説します。
下図はカスタム投稿の個別ページですが、CSSを追加すると下図赤枠内を非表示にできます。
投稿日を非表示にするCSS
投稿日を非表示にするCSSは以下のとおりです。
「Post Type ID」が分かっている方は、IDを変更して「追加CSS」に以下のCSSを貼り付けて下さい。
.[Post Type ID] .entry-meta_items {
display: none;
}「Post Type ID」の解説
筆者のサンプルを元に解説します。
「【WordPress】Lightningテーマのカスタム投稿タイプを実装する方法」という記事の「カスタム投稿タイプの設定方法」という項目で解説したとおり、「Post Type ID」を「casestudy」というIDで作成しました。
この場合のCSSは以下のとおりとなります。
.casestudy .entry-meta_items {
display: none;
}上記のCSSを貼り付けると、日付が非表示となります。
Lightningテーマのウィジェットの日付を非表示にするCSS
次に、ウィジェット（新着投稿）に表示される日付を非表示にするCSSについて解説します。
以下はトップページエリアのウィジェットポジションに、「VK 最新記事」でカスタム投稿の新着情報を表示させている例です。
以下はサイドバーに「VK 最新記事」でカスタム投稿の新着情報を表示させている例です。
両ウィジェットともカスタム投稿の日付が表示されてますが、CSSを追加すると非表示にできます。
ウィジェットの投稿日を非表示にするCSS
ウィジェットの投稿日を非表示にするCSSは以下のとおりです。
「ウィジェットID番号」が分かる方は、IDを変更して「追加CSS」に以下のCSSを貼り付けて下さい。
#vkexunit_post_list-[ウィジェットID番号] .published.postList_date.postList_meta_items {
display: none;
}「ウィジェットID番号」の調べ方は2つ
WordPressのウィジェットID番号の調べ方は2つあります。
- ウィジェットを一覧を表示するPHPカスタマイズを行う
- Chromeの「検証機能」を使ってIDを調べる方法
おすすめは後者の方法ですが、一応、2とおりの方法を解説します。
ウィジェットを一覧を表示するPHPカスタマイズを行う
WEB TIPSさんという方が運営されているサイトにウィジェットを一覧表示するPHPコードが公開されています。
IDの出力方法まで詳しく書かれていますので、詳しくはWEB TIPSさんの記事「ウィジェットIDの調べ方【ワードプレス】」を参考にして下さい。
Chromeの「検証機能」を使ってIDを調べる方法
Chromeの検証機能を使ってIDを調べます。
まずはトップページの「VK 新着記事」のIDを調べます。
画面のどこでも良いので右クリックして、「検証」を選択します。
「検証」をクリックすると、左側にWebページが表示され、右側にHTMLが表示されるようになります。
HTMLやCSSが分からないとこの画面を見ても「訳分らん」と思うかもしれませんが、ひとまずHTMLとCSSを無視しましょう。
下図の矢印部分をクリックして下さい（Ctrl + Shift + C キーを押してもOKです。）
ボタンを押した後、Webページにマウスカーソルを合わせると下図のように、選択できるようになっていますので、対象となるウィジェットの上にマウスカーソルを合わせて下さい。
マウスカーソルを合わせたら右側に注目して下さい。
右側のHTMLに「vkexunit_post_list」と表示されているのが確認できます。
「VK 新着記事」は「vkexunit_post_list」というIDで出力されているのですが、トップページで最新記事とカスタム投稿の2つ「VK 新着記事」を使っているので、カスタム投稿で使用している「VK 新着記事」を特定する必要があります。
以下のケースでは、「vkexunit_post_list-13」、「vkexunit_post_list-16」の2つIDがありますが、どのIDがカスタム投稿なのか調べるために、HTMLをクリックしてみて下さい。
試しに「vkexunit_post_list-16」をクリックしてみると、カスタム投稿の部分が全選択されました。
これはつまり、「vkexunit_post_list-16」がカスタム投稿の新着情報を出力しているという事ですので、このID番号を先程のCSSに追加します。
この場合のCSSは以下のとおりとなります。
#vkexunit_post_list-16 .published.postList_date.postList_meta_items {
display: none;
}
CSSを貼ると、以下のように新着情報の日付が非表示になりました。
サイドバーも同じ方法で、IDを探してCSSの番号を変えるだけで日付を非表示にできます。カスタム投稿の日付を表示させたくないという方は、参考にして下さい。
まとめ
以上、Lightningテーマの推奨プラグイン、ExUnitのカスタム投稿の日付を非表示にする方法を解説しました。
PHPファイルをカスタマイズする方法もありますが、PHPファイルのカスタマイズに失敗すると画面が真っ白になるのでリスクが大きいです。
CSSなら失敗しても安全ですので、カスタム投稿の日付を非表示にする際は、CSSをカスタマイズするようにしましょう。
