[ 解決済 ] Lightning G3 Pro 投稿リストウィジェットのテキスト1カラムについて

VWSとは フォーラム Lightning [ 解決済 ] Lightning G3 Pro 投稿リストウィジェットのテキスト1カラムについて

[ 解決済 ] Lightning G3 Pro 投稿リストウィジェットのテキスト1カラムについて

  • このトピックには8件の返信、5人の参加者があり、最後にkotaroにより1年、 1ヶ月前に更新されました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #72457

    kotaro
    参加者

    ■ WordPress のバージョン
    6.1.1

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

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    14.22.1

    ■ Pro Unit のバージョン
    0.20.0

    ■ スキンの種類
    Origin III

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    Lightning G3 Pro 投稿リスト(VK)ウィジェットは便利でよく使用しているのですが、テキスト1カラムを選択した際に右側にスペースが空くので、ここに投稿の要約が表示されるといいなと思っています。
    表示する方法がわかる方がいらっしゃれば、教えていただけると助かります。
    よろしくお願いいたします。

    ■ 自分で試した事
    設定を色々試してみましたが自分では要約は表示できませんでした。

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

    ■ 実際の症状
    テキスト1カラムを選択した際に表示されるのは
    更新日、カテゴリー名、投稿のタイトル、新着表示のみです。

    Attachments:
    You must be logged in to view attached files.
    #72459

    Vektor,Inc
    キーマスター

    テキスト1カラムを選択した際に表示されるのは
    更新日、カテゴリー名、投稿のタイトル、新着表示のみです。

    VK Blocks Proの投稿リストブロックで、テキスト1カラムの場合は、抜粋欄は表示されないのは仕様となります。
    たしかに1カラムでタイトルの文字が少ないと、余白が気になりますね、、、

    一度、確認させてください。

    (PS:WordPress側の最新の投稿ブロックですと、抜粋は表示/非表示できます)

    #72460

    kotaro
    参加者

    キーマスター様

    早速のご回答ありがとうございます。WordPress側の最新の投稿ブロックで抜粋は表示/非表示できるのは把握しております。
    クライアント様のご意向で、1行で全て表示したいということなのです。
    引き続きよろしくお願いいたします。

    #72464

    うなこ
    モデレーター

    解決方法ではないのですが、一つの提案です。
    デザインは変わりますが、、、
    「表示タイプ」を「メディア」にしてカラムを全サイズで1カラムにし、
    「表示要素」を「抜粋」「日付」「新着表示」「分類(全項目)」にチェックをいれる方法もあります。

    一つの案としてご検討ください

    #72467

    石川@Vektor,Inc.
    キーマスター

    現状テキストリストで抜粋を表示する設定がないのは、
    タイトルの文字数や抜粋の文字数によっていろいろ調整が必要なためです。
    以下のコードで改変できますので、CSSなどでお好みに調整してください。

    
    /**
     * 投稿一覧画面で表示する投稿情報を差し替える
     *
     * @param array  $html : 1件分の表示部分のHTML
     * @param object $post : 1件分の投稿情報.
     * @param array  $options : 1件分の表示形式に関する設定配列。特定の $options[layout] 指定の時だけ差し替えるなどの条件分岐用
     * @return string $hetm : 差し替えるHTML
     */
    add_filter(
    	'vk_post_view',
    	function( $html, $post, $options ) {
    
    		// テキストリストの時だけ差し替える
    		if ( 'postListText' === $options['layout'] ){
    			$layout_type = $options['layout'];
    
    			$html  = '';
    			$html .= VK_Component_Posts::get_view_first_div( $post, $options );
    	
    			if ( $options['display_date'] ) {
    				$html .= '<span class="postListText_date published">';
    				$html .= esc_html( get_the_date( '', $post->ID ) );
    				$html .= '</span>';
    			}
    	
    			if ( $options['display_image_overlay_term'] ) {
    				$html     .= '<span class="postListText_singleTermLabel">';
    				$term_args = array(
    					'class' => 'postListText_singleTermLabel_inner',
    					'link'  => true,
    				);
    				if ( method_exists( 'Vk_term_color', 'get_single_term_with_color' ) ) {
    					$html .= Vk_term_color::get_single_term_with_color( $post, $term_args );
    				}
    				$html .= '</span>';
    			}
    	
    			$html .= '<p class="postListText_title"><a href="' . get_the_permalink( $post->ID ) . '">';
    			$html .= get_the_title( $post->ID );
    			$html .= '</a>';
    	
    			if ( $options['display_new'] ) {
    				$today = date_i18n( 'U' );
    				$entry = get_the_time( 'U' );
    				$kiji  = gmdate( 'U', ( $today - $entry ) ) / 86400;
    				if ( $options['new_date'] > $kiji ) {
    					$html .= '<span class="vk_post_title_new">' . $options['new_text'] . '</span>';
    				}
    			}
    	
    			$html .= '<span class="vk_post_excerpt">' . get_the_excerpt() . '</span>';
    
    			$html .= '</p>';
    	
    			$html .= '</div>';
    		}
    
    		return $html;
    	},
    	10,
    	3
    );
    
    

    投稿一覧の高度なカスタマイズ

    #72468

    kotaro
    参加者

    石川@Vektor,Inc.様

    遅くにどうもありがとうございます!ほぼ狙い通りの表示にできました。
    ただ1行に収めるのがクライアント様の意向で、抜粋文字数の調整ができること、また抜粋の前に全角スペースが入ると完璧です。
    申し訳ございませんが何卒よろしくお願いいたします。

    #72480

    DRILL LANCER
    モデレーター

    抜粋文字数の調整ができること

    これに関してはクライアント様と下記のルールを相談した上で CSS で調整することになると思います。

    • タイトルは全角何文字まで
    • 抜粋は全角何文字まで
    • New! を表示するか否か
    • カテゴリやカスタム分類を表示する場合その長さは全角何文字まで

    これらの文字数をカウントする際は Word など文字数をカウント可能なエディターを使用すれば良いと思います。

    これらを話し合った上で上記ルールをもとにタイトルと抜粋等ののフォントサイズを決定して CSS を書くことになると思います。

    また抜粋の前に全角スペースが入る

    下記 CSS では負けるかもしれませんが
    下記のように抜粋の左に1文字分の余白を入れる CSS を書けば解決するとお思います、

    .vk_post_excerpt {
    	margin-left: 1em;
    }
    #72487

    石川@Vektor,Inc.
    キーマスター

    > ただ1行に収めるのがクライアント様の意向で
    > 抜粋文字数の調整ができること、また抜粋の前に全角スペースが入ると完璧です。

    モバイルなど画面が狭い場合にどのみち1行には収まらないと思いますが大丈夫でしょうか?
    改行された時の上下余白なども調整が必要になると思います。
    抜粋を入れる事によって、文字数・画面サイズによって崩れたり好みがわかれるので、クライアントの指定に応じた調整が必要になりコントロールができないので、基本機能では実装していません。

    追加費用が発生してでも本当にその調整をしたいのかはクライアントに確認した方が良いと思います。

    先に記載のコードは 弊社製品固有 に関連するサンプルコードですので記載しましたが、

    * タイトルの文字数は何文字(横幅どれくらい)にするのか
    * 抜粋の文字数は何文字(横幅どれくらい)にするのか?
    * New がある場合 抜粋はその分右にずれるが良いのか?
    * 画面が狭い場合崩れるが、どの画面サイズでどういう対応にするのか?

    を要望に応じて実際に調整する必要があります。

    公式サポートは原則コードを書かずに設定できる所までですので、
    まずはご自身で手を動かしてトライしてください。

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

    https://www.vektor-inc.co.jp/post/wordpress-php-1st-step/

    「CSS 文字数指定」などで検索すれば出てくると思います。

    #72490

    kotaro
    参加者

    石川@Vektor,Inc.様

    どうもありがとうございました。とても参考になりました。
    あとは自力でなんとかやってみます。

9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。