ブログカードの画像パスが取得されない
-
お世話になります。
自作のブログカードを使用しているのですが、なぜか画像パスが取得(表示)されません。
画像パスなしでショートコードを使うと、その投稿のアイキャッチ画像を取得しますが、画像パスを任意の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件中)
5件の返信を表示中 - 1 - 5件目 (全5件中)
- トピック「ブログカードの画像パスが取得されない」には新たに返信することはできません。