【Lightningテーマ】カスタム投稿の日付を非表示にする方法

WordPress

WordPressは通常、「投稿」と「固定ページ」という2種類の投稿タイプがありますが、「Lightningテーマ」の推奨プラグインExUnitをインストールすると、カスタム投稿タイプを使う事ができます。

カスタム投稿は通常の投稿のように、日付と更新日が表示されますが、カスタム投稿の使い方によっては、日付を非表示にしたいというケースがあると思います。

そこで、この記事では、カスタム投稿タイプの日付を非表示にするCSSカスタマイズについて解説します。

 

なお、Lightningテーマのカスタム投稿タイプの詳しい使い方については、「【WordPress】Lightningテーマのカスタム投稿タイプを実装する方法」で解説していますので、参考にして下さい。

カスタム投稿の日付を非表示にする流れ

一口に「カスタム投稿」といっても、日付が表示される場所は2つあります。

  1. カスタム投稿のページ
  2. ウィジェット(新着投稿)

それぞれの表示場所によって、CSSのカスタマイズが異なりますので、両方非表示にしたい時は、両方CSSを追加する必要があります。

 

カスタム投稿ページの日付を非表示にするCSS

最初に、カスタム投稿ページの日付を非表示にするCSSについて解説します。

下図はカスタム投稿の個別ページですがCSSを追加する事で非表示にする事ができます。

投稿日を非表示にするCSS

投稿日を非表示にするCSSは以下の通りです。「Post Type ID」が分かっている方は、IDを変更して「追加CSS」に以下のCSSを貼り付けて下さい。

.[Post Type ID] .entry-meta_items {
display: none;
}

「Post Type ID」の解説

筆者のサンプルを元に解説します。

カスタム投稿タイプの設定方法」でも解説しているとおり、「Post Type ID」を「casestudy」というIDで作成しました。

この場合のCSSは以下の通りとなります。

.casestudy .entry-meta_items {
display: none;
}

このCSSを貼り付けると、日付が非表示となります。

 

ウィジェットの日付を非表示にする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でカスタマイズすると安全です。

トップへ戻る
タイトルとURLをコピーしました