Lightning G3 Pro Unit の投稿一覧を LTG コンテンツエリア投稿ウィジェットのデザイン風にする方法

,

  1. Staff Blog
  2. WordPress
  3. Lightning G3 Pro Unit の投稿一覧を LTG コンテンツエリア投稿ウィジェットのデザイン風にする方法

この記事について

Lightning G3 Pro Unit のアーカイブページ設定を「メディア」にしてカラムは「1」として、【表示要素】から「画像」のチェックを外した場合、「画像右上分類名」は画像の中にあるため消えてしまいます。今回はこの条件の場合に、背景色付きの「画像右上分類名」を表示して、cssでカスタマイズする方法を書きます。

Lightning 投稿一覧カスタマイズ徹底解説

はじめに WordPressには、カテゴリー一覧や月別アーカイブなど、投稿を一覧表示するアーカイブページがあります。 このアーカイブページには、投稿が並びますが、この投稿1件分に何を表示するのかは、多くの場合カスタマイズ […]

以前、Lightning 投稿一覧カスタマイズについて紹介した記事がありますので、そちらも確認しますと、理解が深まりますので、ぜひご覧ください。
では本題に入っていきます。

目標のレイアウト

タイトルの横に背景色付きの「分類名」のラベルが表示されて、【表示要素】から画像は非表示にしています。

子テーマを準備します

コードを書きますので、子テーマをご準備ください。

子テーマとは

子テーマについての説明は、以下の記事で紹介していますので、作り方がわからない方は参考にしてください。

カスタマイズの準備 1 : Lightningの子テーマの準備 | ベクトレ

このレッスンについてWordPressの子テーマについて、また、Lightning用の子テーマのサンプルデータを利用する方法について解説しています。子テーマとは?適用中の親テーマは絶対直接カスタマイズしない利用中のテーマのファイルを直接カスタマイズすると、テーマをバージョンアップした際には全て新しいデータで上書きされます。つまり、せっかく色々カスタマイズした部分が消えてしまうということになります。子テーマは適用中のテーマを

Lightning アーカイブページ設定

管理画面【外観】>【カスタマイズ】>【Lightning アーカイブページ設定】から設定していきます。

アーカイブページ設定とは

アーカイブページ設定 | Lightning G3 Pro Unit とは | Lightning

投稿や独自に追加した投稿タイプのアーカイブページ(一覧ページ)で、様々なレイアウトで記事を一覧表示できます。

表示タイプとカラム

表示タイプは「メディア」、カラムは「1」にします。

表示タイプとカラム

表示要素

今回は、「抜粋」「日付」「新着表示」にチェックを入れました。お好みで調整してください。

表示要素

追加するコード

子テーマの各ファイルに以下のコードを追加してください。

functions.php

<?php
add_filter(
    'vk_post_options',
    function ( $options, $post ) {
        // 表示したい投稿タイプ&表示レイアウトを条件分岐で指定
        if ( 'post' === get_post_type() && 'media' === $options['layout'] ) { //投稿タイプが post かつ 表示レイアウトが media の場合
            $single_term              = Vk_term_color::get_single_term_with_color(); //タクソノミーの背景色
            $options['body_prepend'] .= $single_term; // 投稿要素の本文部分の前に追加
        }
        return $options; //フィルターフックを適用
    },
    10,
    2
);

style.css

/* 日付 */
.vk_post.media .vk_post_date{
    font-size:14px;
}
.vk_post.media .vk_post_date::before {
    margin-right: 5px;
    font-family: "Font Awesome 6 Free";
    content: "\f073";
    font-weight: 900;
}
/* 画像右上分類名 非表示 */
.vk_post.media .vk_post_imgOuter_singleTermLabel{
    display: none;
}
/* 分類ラベル */
.vk_post.media .media-body > span{
    padding: 1px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    margin-bottom: 0.5rem;
    display: inline-block;
}

@media (min-width: 768px) {
    /* 分類ラベルの位置 */
    .vk_post.media .media-body > span{
        position: absolute;
        right: 0;
    }
    /* タイトル横 余白 */
    .vk_post.media .media-title{
        padding-right: 6rem;
    }
}

保存して公開画面を確認しますと、目標のレイアウトになっていると思います。

この記事を書いた人

久納 美幸
デザインやCSSコーディング、フォーラム対応を担当しています。フォーラムでは「うなこ」という名前で投稿しています。

WordFes Nagoya(2013-2017)では、名古屋版わぷーを制作しました。
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。


このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP