[ 解決済 ] Lightning G3 Pro 投稿リストウィジェットのテキスト１カラムについて
[ 解決済 ] Lightning G3 Pro 投稿リストウィジェットのテキスト１カラムについて
- このトピックには8件の返信、5人の参加者があり、最後に
により1年、 4ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.1.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
14.22.1■ Pro Unit のバージョン
0.20.0■ スキンの種類
Origin III■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ 期待する動作
Lightning G3 Pro 投稿リスト（VK)ウィジェットは便利でよく使用しているのですが、テキスト１カラムを選択した際に右側にスペースが空くので、ここに投稿の要約が表示されるといいなと思っています。
表示する方法がわかる方がいらっしゃれば、教えていただけると助かります。
よろしくお願いいたします。■ 自分で試した事
設定を色々試してみましたが自分では要約は表示できませんでした。■ 症状が発生するブラウザ
Chrome、Safari■ 実際の症状
テキスト１カラムを選択した際に表示されるのは
更新日、カテゴリー名、投稿のタイトル、新着表示のみです。テキスト１カラムを選択した際に表示されるのは
更新日、カテゴリー名、投稿のタイトル、新着表示のみです。VK Blocks Proの投稿リストブロックで、テキスト1カラムの場合は、抜粋欄は表示されないのは仕様となります。
たしかに1カラムでタイトルの文字が少ないと、余白が気になりますね、、、一度、確認させてください。
（PS:WordPress側の最新の投稿ブロックですと、抜粋は表示/非表示できます）
キーマスター様
早速のご回答ありがとうございます。WordPress側の最新の投稿ブロックで抜粋は表示/非表示できるのは把握しております。
クライアント様のご意向で、1行で全て表示したいということなのです。
引き続きよろしくお願いいたします。解決方法ではないのですが、一つの提案です。
デザインは変わりますが、、、
「表示タイプ」を「メディア」にしてカラムを全サイズで1カラムにし、
「表示要素」を「抜粋」「日付」「新着表示」「分類（全項目）」にチェックをいれる方法もあります。一つの案としてご検討ください
現状テキストリストで抜粋を表示する設定がないのは、
タイトルの文字数や抜粋の文字数によっていろいろ調整が必要なためです。
以下のコードで改変できますので、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 );石川＠Vektor,Inc.様
遅くにどうもありがとうございます！ほぼ狙い通りの表示にできました。
ただ1行に収めるのがクライアント様の意向で、抜粋文字数の調整ができること、また抜粋の前に全角スペースが入ると完璧です。
申し訳ございませんが何卒よろしくお願いいたします。抜粋文字数の調整ができること
これに関してはクライアント様と下記のルールを相談した上で CSS で調整することになると思います。
- タイトルは全角何文字まで
- 抜粋は全角何文字まで
- New! を表示するか否か
- カテゴリやカスタム分類を表示する場合その長さは全角何文字まで
これらの文字数をカウントする際は Word など文字数をカウント可能なエディターを使用すれば良いと思います。
これらを話し合った上で上記ルールをもとにタイトルと抜粋等ののフォントサイズを決定して CSS を書くことになると思います。
また抜粋の前に全角スペースが入る
下記 CSS では負けるかもしれませんが
下記のように抜粋の左に１文字分の余白を入れる CSS を書けば解決するとお思います、.vk_post_excerpt { margin-left: 1em; }> ただ1行に収めるのがクライアント様の意向で
> 抜粋文字数の調整ができること、また抜粋の前に全角スペースが入ると完璧です。モバイルなど画面が狭い場合にどのみち１行には収まらないと思いますが大丈夫でしょうか？
改行された時の上下余白なども調整が必要になると思います。
抜粋を入れる事によって、文字数・画面サイズによって崩れたり好みがわかれるので、クライアントの指定に応じた調整が必要になりコントロールができないので、基本機能では実装していません。追加費用が発生してでも本当にその調整をしたいのかはクライアントに確認した方が良いと思います。
先に記載のコードは 弊社製品固有 に関連するサンプルコードですので記載しましたが、
* タイトルの文字数は何文字（横幅どれくらい）にするのか
* 抜粋の文字数は何文字（横幅どれくらい）にするのか？
* New がある場合 抜粋はその分右にずれるが良いのか？
* 画面が狭い場合崩れるが、どの画面サイズでどういう対応にするのか？を要望に応じて実際に調整する必要があります。
公式サポートは原則コードを書かずに設定できる所までですので、
まずはご自身で手を動かしてトライしてください。https://www.vektor-inc.co.jp/post/wordpress-php-1st-step/
「CSS 文字数指定」などで検索すれば出てくると思います。
- このトピックに返信するにはログインが必要です。
