HOME フォーラム Lightning vk_最新記事の記事一覧の投稿日を非表示にしたい

このトピックには4件の返信が含まれ、2人の参加者がいます。4 年、 1 ヶ月前 Nyanko_x さんが最後の更新を行いました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #7961

    Nyanko_x
    参加者

    LightningとVK EXunit を大変便利に使わせていただいています。
    質問ですが、トップページにウィジェット vk_最新記事で最新の投稿を表示していますが、これの投稿日を非表示にしたいのです。
    いろいろ調べたのですが、コードを書き換えないといけないんですね。
    書き換えるモジュールとコードを教えていただけないでしょうか。
    よろしくお願いいたします。

    #7968
    じょに次郎
    じょに次郎
    モデレーター

    CSSで非表示にするのが手っ取り早いと思います。

    vk_最新記事 でどのページ・ウィジェットエリアでどのレイアウトにおいて非表示にしたいのかによって方法が変わるので、

    全てのWordPressテーマで使える!デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

    を参考にしてみてください。

    変更した場所に対して display:;none; にすれば非表示になります。

    #7981

    Nyanko_x
    参加者

    ありがとうございます。
    私が消したい日付はカスタム投稿の投稿一覧の日付で、要素の詳細で調べたところ、下記のような class でした。
    <span class=”published postList_date postList_meta_items”>2017年5月19日</span>
    これを非表示にするには、子テーマの style.css に、以下の記述を書けばいいのでしょうか。

    .published postList_date postList_meta_items{display:none;}

    #7984
    じょに次郎
    じょに次郎
    モデレーター

    あー、惜しいですね。
    この場合一つのspanタグに .published と .postList_date と . postList_meta_items の3つのclassが指定されてます。

    一つのタグに複数指定されている場合は、各要素の間にはスペースをいれずにそのまま連結します。

    .published.postList_date.postList_meta_items { display:none; }

    で、まぁどれでか一つだけでも指定は効きます。

    .published { display:none; }

    ただし、.published や .postList_meta_itemes は他の場所でも使われているので他の要素も消えてしまいます。

    日付だけ消したいのであれば

    . postList_date { display:none; }

    になります。

    しかしながらここでまた問題が発生します。
    これだと他の .postList_date が指定されている箇所が全て消えてしまいます。

    特定の場所、特定の投稿タイプだけけしたいのであれば、その親要素のclass名やid名を指定します。

    一番親であるbodyタグのclassを見てみましよう。
    post-type-archive-event とか tax-event-cat とかのクラス名があります。
    ※実際のクラス名は上記とは違います。

    この場合、
    カスタム投稿タイプ event のアーカイブページだったり カスタム分類 ecent-cat のアーカイブページ という意味なので、

    カスタム投稿タイプ event のアーカイブページで日付を非表示にしたいなら

    body.post-type-archive-event .postList_date { display:none; }

    になります。

    しかしながらここでまた問題が発生します。

    カスタム投稿タイプ event のカスタム分類 event-cat のアーカイブページを表示している時、body タグには post-type-archive-event クラスは入らず、 tax-event-cat にしかならないので、どちらでも非表示にするように

    body.post-type-archive-event .postList_date { display:none; }
    body.post-.tax-event-cat .postList_date { display:none; }

    というように2つ指定しなくてはいけません。

    ちなみにどちらも同じ display:none; なので、

    body.post-type-archive-event .postList_date,
    body.post-.tax-event-cat .postList_date { display:none; }

    という書き方もできます。

    ウィジェットなどで日付を消したい場合も同じ要領で、ウィジェットの部分のdivタグなどについている id 名などで指定します。

    style の指定は 子ページの style.css や 外観 > カスタマイズ > 追加CSS などに書けば良いです。

    #8022

    Nyanko_x
    参加者

    お礼が遅れて申し訳ありません。
    詳細な解説をありがとうございました。
    もう少しcssを勉強して試してみます。
    もうすっかりいろいろ忘れてしまいましたので・・・

5件の投稿を表示中 - 1 - 5件目 (全5件中)

このトピックに返信するにはログインが必要です。