• mrsmith11

    (@mrsmith11)


    お世話になります。

    自作のブログカードを使用しているのですが、なぜか画像パスが取得(表示)されません。

    画像パスなしでショートコードを使うと、その投稿のアイキャッチ画像を取得しますが、画像パスを任意のURLを指定して使用すると、なぜか任意の画像が取得できません。

    ショートコード
    [nlink url="リンク" title="タイトル" excerpt="抜粋文" img="画像のパス"]

    追加CSS

    /*-------------------------
      ブログカード
    -------------------------*/
    a.tmt-blog-card {
      border: 1px solid #e1e1e1;
      box-shadow: 2px 2px #ddd;
      display: block;
      padding: 20px;
      position: relative;
      -webkit-transition: 0.3s ease-in-out;
    	-moz-transition: 0.3s ease-in-out;
    	-o-transition: 0.3s ease-in-out;
    	transition: 0.3s ease-in-out;
      width: 100%;
    	text-decoration:none;
    }
      a.tmt-blog-card::before {
        background-color: #505050;
        border: solid 1px #939393;
        color: #FFF;
        content: '合わせて読みたい';
        font-size: 12px;
        display: block;
        padding: 4px 20px;
        position: absolute;
        top: -15px;
        left: 25px;
      }
      a.tmt-blog-card::after {
        border: solid 1px #939393;
        color: #939393;
        content: '続きを読む';
        font-size: 14px;
        display: block;
        padding: 5px 20px;
        position: absolute;
        bottom: 10px;
        right: 20px;
      }
      a.tmt-blog-card:hover {
        box-shadow: none;
        opacity: .8;
      }
    .tmt-blog-card-box {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
    }
      .tmt-blog-card-title {
        font-size: 16px;
        font-weight: 600;
        color: #428bca;
        padding-bottom: 5px;
      }
      .tmt-blog-card-thumbnail {
        flex: 1;
        margin-right: 15px;
        padding-top: 5px;
      }
        .tmt-blog-card-thumbnail img {
          width: 100%;
        }
      .tmt-blog-card-content {
        flex: 2.5;
      }
      .tmt-blog-card-excerpt {
    
        color: #a4a4a4;
        font-size: 13px;
        padding-bottom: 12px;
      }
      .tmt-blog-card-site {
        color: #b2b2b2;
        font-size: 11px;
        padding-left: 5px;
      }
        .tmt-blog-card-site img {
          margin-right: 5px;
          vertical-align: bottom;
          width: 20px;
        }
    @media (max-width: 980px) {
      .tmt-blog-card-excerpt {
        border: none;
      }
    }
    @media (max-width: 640px) {
      a.tmt-blog-card {
        padding: 10px 10px 20px 10px;
      }
      a.tmt-blog-card::before {
        font-size: 11px;
        padding: 2.5px 8px;
        top: -15px;
        left: 10px;
      }
      a.tmt-blog-card::after {
        font-size: 11px;
        padding: 2px 13px;
        right: 10px;
    		display:none;
      }
      .tmt-blog-card-thumbnail {
        margin-right: 10px;
        padding-top: 10px;
      }
      .tmt-blog-card-title {
        font-size: 14px;
      }
      .tmt-blog-card-excerpt {
        display: none;
      }
    }
    
    @media screen and (min-width: 670px) {
    	.video-container {
    		max-width: 100%;
    	}
    }

    code snippets

    //---------------------------------------//
    // 内部リンクのブログカード化(ショートコード)
    // ここから
    //---------------------------------------//
    
    // 記事IDを指定して抜粋文を取得する
    function ltl_get_the_excerpt( $post_id ){
    	$post = get_post( $post_id );
    	if ( empty( $post->post_excerpt ) ) {
    		return wp_html_excerpt( strip_shortcodes( $post->post_content ), 55, '...' );
    	} else {
    		return $post->post_excerpt;
    	}
    }
    
    //内部リンクをはてなカード風にするショートコード
    function nlink_scode( $atts ) {
        extract(shortcode_atts(array(
            'url'=>"",
            'title'=>"",
            'excerpt'=>""
        ),$atts));
    
        $id = url_to_postid( $url );//URLから投稿IDを取得
    
        $img_width ="200";//画像サイズの幅指定
        $img_height = "200";//画像サイズの高さ指定
        $no_image = 'noimageに指定したい画像があればここにパス'; //アイキャッチ画像がない場合の画像(絶対パス)を指定
    
      //自サイト名を表示させたい場合はここにアイコン画像(絶対パス)を指定
      //サイズは 1:1 推奨
      //表示させない場合はそのまま未入力で
      $site_icon = '';
    
        //タイトルを取得
        if( empty( $title ) ){
            $title = esc_html(get_the_title( $id ));
        }
    
      //抜粋文を取得
        if( empty( $excerpt ) ){
            $excerpt = esc_html( ltl_get_the_excerpt( $id ) );
        if( mb_strlen($excerpt, 'UTF-8') > 40 ){
            $excerpt= mb_substr($excerpt, 0, 40, 'UTF-8').'.....';
        }
        }
    
      //サイト名を取得
      if( $site_icon != "" ){
            $site = '<img src="' . $site_icon . '" alt="' . get_bloginfo( 'name' ) . '">' . get_bloginfo( 'name' );
        }
    
        //アイキャッチ画像を取得
        if( has_post_thumbnail( $id ) ) {
          $img = wp_get_attachment_image_src( get_post_thumbnail_id( $id ),array( $img_width, $img_height ) );
          $img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . " />";
        }else{
          $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />';
        }
    
        $nlink .='
    <a href="'. $url .'" class="tmt-blog-card">
      <div class="tmt-blog-card-box">
        <div class="tmt-blog-card-thumbnail">'. $img_tag .'</div>
        <div class="tmt-blog-card-content">
            <div class="tmt-blog-card-title">'. $title .' </div>
            <div class="tmt-blog-card-excerpt">'. $excerpt .'</div>
        </div>
      </div>
      <div class="tmt-blog-card-site">'. $site .'</div>
    </a>';
    
        return $nlink;
    }
    
    add_shortcode("nlink", "nlink_scode");
    //---------------------------------------//
    // ここまで
    // 内部リンクのブログカード化(ショートコード)
    //---------------------------------------//

    画像パスなしでショートコードを使うと、その投稿のアイキャッチ画像を取得しますが、画像パスを任意のURLを指定して使用すると、なぜか任意の画像が取得できません。

    画像パスを取得するには、どこを修正すればいいのでしょうか?

    技術的な知識をお持ちの方お教えいただけましたら幸いです。

    よろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • shokun0803

    (@shokun0803)

    mrsmith11さん、こんにちは。

        extract(shortcode_atts(array(
            'url'=>"",
            'title'=>"",
            'excerpt'=>""
        ),$atts));

    $attsからimgを取得してないのでは?

    ご参考になれば。

    トピック投稿者 mrsmith11

    (@mrsmith11)

    ありがとうございます。

    初心者のため、どのように修正すればいいかわかりません。

    $attsからimgを取得してないのでは?

    というのは、どこをどのように修正すればよいのでしょうか?

    恐れ入りますがよろしくお願いいたします。

    shokun0803

    (@shokun0803)

    mrsmith11さん、こんにちは。

    コードの内容を分からずに実装することは非常に危険です。
    最低でも PHP の文法と WordPress の関数を確認されますようお勧めいたします。
    関数リファレンス/add shortcode

    リファレンスの用例を見ていただいても分かる通り、ショートコードで[nlink url="リンク" title="タイトル" excerpt="抜粋文" img="画像のパス"]と4つの属性を渡していますので、4つの属性が関数内で利用できる必要があります。
    前述の記載の通り、この関数内では3つの属性しか処理していません。

    ご参考になれば。

    トピック投稿者 mrsmith11

    (@mrsmith11)

    つまり、こういうことでしょうか?

    extract(shortcode_atts(array(
    'url'=>"",
    'title'=>"",
    'excerpt'=>"",
    'img'=>""
    ),$atts));

    よろしくお願いいたします。

    shokun0803

    (@shokun0803)

    mrsmith11さん、こんにちは。

    その書き方は間違っていませんが、$imgはその後のコードで上書きされてしまいます。
    ソースコード全体の書き方を調整する必要があります。
    ショートコード API

    何度も申しますが、ショートコードで画像のパスを渡して表示に使用することができるとすれば、違う URL が指定されても何の制限もなく表示されてしまうことになります。ショートコードがどこで使用できるかの制限もされず、パスの精査もせずに表示されるコードを書くと言うことは、意図せずに脆弱性を生み出します。

    ご自身の書いているコードの内容が分からないまま、どこかからのコピペで実装することは非常に危険です。ましてやコードを改造して使用するとなれば最低限脆弱性が発生しない書き方を行う必要があります。

    ご自身で実装されることは否定しませんので、このコードが何を行っていて、どのような実装を行うと危険性があるのか、きちんと学んだうえで理解して実装されることをお勧めいたします。

    ご参考になれば。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「ブログカードの画像パスが取得されない」には新たに返信することはできません。