カスタムフィールドで表の中にテキストエリアを複数行で表示させたいです。

タグ: カスタムフィールド

このトピックには1件の返信、1人の参加者があり、最後にkenichiroにより1時間、 20分前に更新されました。

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

投稿者

投稿

2025年4月15日 4:43 PM #107876

kenichiro

参加者

■ WordPress のバージョン
6.7.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 )

■ テーマのバージョン
15.29.6

■ スキンの種類
Origin III

■ プラグインの種類・バージョン
最新であることを確認しました。

■ 期待する動作
カスタムフィールドで作成した物件情報一覧ページで、表の中にテキストエリアを複数行で表示させたいです。

■ 自分で試した事

function my_vk_post_options_bukken_add_cf( $options ) {

    if ( 'bukken' === get_post_type() ) {
        // カスタムフィールドの値など独自に表示したい要素
        global $post;
        $append_html = '';

        if ( $post->bukken ) {
            $append_html .= '<p class="data-bukken"><span class="data-bukken-number">' . esc_html( $post->bukken ) . '</span></p>';
        }

        $append_html .= '<table class="table-sm mt-3">';

        // maker text
        $maker        = get_post_meta( $post->ID, 'maker', true );
        $maker_string = '';
        if ( $maker ) {
            $maker_string = esc_html( $maker );
        }

        $carprice = get_post_meta( $post->ID, 'carprice', true );
        $append_html .= '<tr class="price-row"><th>車体価格</th><td class="text-right price-highlight"><span class="price-value">' . number_format( $carprice ) . '円</span></td></tr>';

        $totalprice = get_post_meta( $post->ID, 'totalprice', true );
        $append_html .= '<tr class="price-row"><th>支払総額</th><td class="text-right price-highlight"><span class="price-value">' . number_format( $totalprice ) . '円</span></td></tr>';

        $append_html .= '<tr><th>メーカー</th><td class="text-right">' . $maker_string . '</td></tr>';
        $append_html .= '<tr><th>車名</th><td class="text-right">' . esc_html( $post->carname ) . '</td></tr>';
        $append_html .= '<tr><th>年式</th><td class="text-right">' . esc_html( $post->year ) . '</td></tr>';
        $append_html .= '<tr><th>型式</th><td class="text-right">' . esc_html( $post->model ) . '</td></tr>';
        $append_html .= '<tr><th>車検</th><td class="text-right">' . esc_html( $post->inspection ) . '</td></tr>';

        $mileage = get_post_meta( $post->ID, 'mileage', true );
        $append_html .= '<tr><th>走行距離</th><td class="text-right">' . number_format( $mileage ) . 'km</td></tr>';
        $append_html .= '<tr><th>色</th><td class="text-right">' . esc_html( $post->color ) . '</td></tr>';

        $note        = get_post_meta( $post->ID, 'note', true );
        $note_string = '';
        if ( $note ) {
            $note_string = esc_html( $note );
        }
        $append_html .= '<tr><th>備考</th><td class="text-right note-field">' . nl2br( $note_string ) . '</td></tr>';

        $append_html .= '</table>';

        $options['body_append'] .= $append_html;
    }

    return $options;
}

add_filter( 'vk_post_options', 'my_vk_post_options_bukken_add_cf' );

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
1つ目の1列目が縦表示になってしまいます。
また表の枠がテキストエリアと同じ幅になってしまいます。
2つ目では1列目行になってしまいます。

■ その他特記事項
VWSオンライン勉強会 #022 Lightningで物件情報サイトを作ってみようのYoutube、GitHubを拝見しました。

https://github.com/vektor-inc/lightning-g3-lesson-real-estate