• 解決済 ytonksuket

    (@ytonksuket)


    質問失礼します。
    現在トップページ(固定ページ)の一部に、カスタム投稿ページの中のある特定の1ページの本文を表示させています。
    抜粋の文字数指定ではなく、行数指定したくてjQueryを使ってやってみてるのですがうまくいきません。
    参考記事(https://dezanari.com/jquery-trim-line-height/)を見ながら要素などを書き換えて使用しています。
    どこを訂正するべきなのか、原因は何なのか、どなたかわかる方教えていただけませんでしょうか?
    よろしくお願いいたします。

    functions.php

    //トップページ 最新ニュースのショートコード作成
    function add_top_schedule() {
    
    	/* (ステップ1)データの取得 */
    	$query = new WP_Query(
    			array(
    					'post_type' => 'scheduling',
    					'name' => '2021',
    					//'posts_per_page' => 3,
    			)
    	);
    	?>
    	<?php
    	/* (ステップ2)データの表示 */
    	if ( $query->have_posts() ) : ?>
    			<div class="scheduling_copy">
    					<?php while ( $query->have_posts() ) : $query->the_post();?>
    							<h2><?php the_title(); ?></h2>
    							<p>投稿日:<?php echo get_the_date(); ?></p>
    							<p><?php the_category(", "); ?></p>
    							<p class="extract_line"><?php the_content(); ?></p>
    							<a href="***" class="more">一覧表示</a>
    							<?php if ( has_post_thumbnail() ) : ?>
    									<p><?php the_post_thumbnail(); ?></p>
    							<?php endif; ?>  
    							<hr />
    					<?php endwhile; ?>
    			</div>
    	<?php endif; wp_reset_postdata();
    	}
    	add_shortcode('top_sheduling', 'add_top_schedule');
    	//ここまで トップページ 最新ニュースのショートコード作成

    script.js

    jQuery(function ($) {
      var $text = $('.extract_line');//対象のテキスト
      var $more = $('.more');//続きを読むボタン
      var lineNum = 3;//表示する行数
      var textHeight = $text.height();//テキスト全文の高さ
      var lineHeight = parseFloat($text.css('line-height'));//line-height
      var textNewHeight = lineHeight * lineNum;//指定した行数までのテキストの高さ
      
      // テキストが表示制限の行数を超えたら発動
      if (textHeight > textNewHeight) {
        $text.css({
          height: textNewHeight,
          overflow: 'hidden',
        });
        //続きを読むボタンクリックで全文表示
        // $more.click(function () {
        //   $(this).hide();
        //   $text.css({
        //     'height': textHeight,
        //     'overflow': 'visible',
        //   });
        //   return false;//aタグ無効化
        // });
      } else {
        // 指定した行数以下のテキストなら続きを読むは表示しない
        $more.hide();
      }
    });
7件の返信を表示中 - 1 - 7件目 (全7件中)
  • こんにちは

    まず、ショートコードのコールバック関数に問題があります。ショートコードのコールバック関数は何も出力してはいけません。ショートコードを置き換えるために使われるテキストを返す (return) 必要があります。
    関数リファレンス/add shortcode – WordPress Codex 日本語版

    あと、p タグが入れ子になっています。
    <p class="extract_line"><?php the_content(); ?></p>

    とりあえず、これらを修正してみてください。修正しても解決しない場合は、修正したコードを提示してもらえれば、分かる人が回答できると思います。

    トピック投稿者 ytonksuket

    (@ytonksuket)

    ishitaka様。
    お返事ありがとうございます。

    さっそくご指摘の部分を修正してみます!

    補足です。

    表示行数を制限するだけであれば、CSS だけでいいような気もします。

    .extract_line {
    	display: -webkit-box;
    	-webkit-line-clamp: 5;
    	-webkit-box-orient: vertical;
    	overflow: hidden;
    	text-overflow: ellipsis;
    }

    ※ IE を除く。

    トピック投稿者 ytonksuket

    (@ytonksuket)

    ishitaka様。
    ありがとうございます!
    こちらも試してみます!

    トピック投稿者 ytonksuket

    (@ytonksuket)

    >>まず、ショートコードのコールバック関数に問題があります。ショートコードのコールバック関数は何も出力してはいけません。ショートコードを置き換えるために使われるテキストを返す (return) 必要があります。

    →PHP初心者の為こちら理解するのに苦しんでましたが、ishitaka様の補足(CSSで代用)で自分の思い描いた形となりましたので無事解決といたします。

    ishitaka様、この度は誠にありがとうございました。

    解決したということなので、以下のことは気が向いたらお読みください。

    ショートコードのコールバック関数は、このままでは不具合が起きる可能性があります。
    最小限の変更(書換えた部分以外は正しく動作するということを前提に)でコードを書換えてみました。ご参考まで。

    function add_top_schedule() {
    	/* (ステップ1)データの取得 */
    	$query = new WP_Query(
    		array(
    			'post_type' => 'scheduling',
    			'name' => '2021',
    			//'posts_per_page' => 3,
    		)
    	);
    	?>
    	<?php
    
    	ob_start(); // ←★追加
    
    	/* (ステップ2)データの表示 */
    	if ( $query->have_posts() ) : ?>
    		<div class="scheduling_copy">
    			<?php while ( $query->have_posts() ) : $query->the_post();?>
    				<h2><?php the_title(); ?></h2>
    				<p>投稿日:<?php echo get_the_date(); ?></p>
    				<p><?php the_category(", "); ?></p>
    				<div class="extract_line"><?php the_content(); ?></div>
    				<a href="***" class="more">一覧表示</a>
    				<?php if ( has_post_thumbnail() ) : ?>
    					<p><?php the_post_thumbnail(); ?></p>
    				<?php endif; ?>  
    				<hr />
    			<?php endwhile; ?>
    		</div>
    	<?php endif; wp_reset_postdata();
    
    	return ob_get_clean(); // ←★追加
    }
    add_shortcode('top_sheduling', 'add_top_schedule');

    ※ 2行追加(★印のところ)と、下記のように変更しました。

    <p class="extract_line"><?php the_content(); ?></p>

    <div class="extract_line"><?php the_content(); ?></div>

    • この返信は3年、 1ヶ月前にishitakaが編集しました。
    トピック投稿者 ytonksuket

    (@ytonksuket)

    ishitaka様。
    最後までご丁寧にありがとうございます!

    知識不足でreturnの返し方がいまいちわからず悩んでいたので、正解を教えていただき本当に助かりました!
    WordPressの固定ページにショートコードとして使用すると更新の時にエラーが出るものの実際の表示は希望通りにされていたので危うくそのままにするところでした。
    ishitaka様から教えていただいたコードに書き直したところ、更新の時もエラーが出ることがなくなりました。
    これで安心できました。

    本当に何から何まで教えていただき、ありがとうございました。
    まだまだ知識不足なので今後も精進していきたいと思います。
    ishitaka様、この度は誠にありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「抜粋の行数指定がうまくいかない」には新たに返信することはできません。