この記事の目次
【The Thor(トール)】ブログカードが「No Image」となるときの対処法
この記事では、WordPressのテーマである「The Thor(トール)」のブログカードが「No Image」となるときの対処法についてまとめます。
これまでThe Thorのブログカードを使用する際に、下記のような悩みを持っていました。
この記事のターゲット
- 「The Thor(トール)」のブログカードが「No Image」となるけど、好きな画像に置き換えたい
- 「The Thor(トール)」のブログカードで好きなタイトルや文章に変更したい
The Thor(トール)の標準機能のブログカードについて
The Thor(トール)のテーマでは、あらかじめ外部サイトリンク用の「ブログカード」のショートコードが用意されています。
外部サイトリンク用の「ブログカード」のショートコードを挿入し、そこにURLを追加するだけでブログカードが簡単に作成できます。
しかし、アイキャッチ画像がない一部のサイトでは、The Thor(トール)の機能でブログカードを作成してもアイキャッチ画像が「No Image」と表示されてしまします。
- 例えば以下のようなリンクがその一例です。
時は大正、日本。炭を売る心優しき少年・炭治郎は、ある日鬼に家族を皆殺しにされてしまう。さらに唯一生き残った妹の禰豆子は鬼…
おったんこの記事では、The Thor(トール)の機能で作成したブログカードのアイキャッチ画像が「No Image」と表示されてしまう対応策として、自作のブログカードを用いることにしました。
- 完成したブログカードの一例は下記のとおりです。
おったんThe Thorで自作のブログカードを作成する手順
The Thorで自作のブログカードを作成する手順は、下記のとおりです。
ブログカードの作成にあたっては下記サイトを参考にさせて頂きました。
この記事では、WordPressで内部リンクのブログカード化を誰でも簡単に実装する方法（作り方）を解説しています。はてな…
- function.phpにブログカードのショートコード用のコードを追記
- 追加CSSにブログカードのCSSを追記
- 記事にブログカードのショートコードを追加
①function.phpにブログカードのショートコード用のコードを追記
自作のブログカードは、The Thorの標準機能の同じようにショートコードを用いて作成できるようにします。
function.phpに下記のコードを追記します。
| <?php | |
| //---------------------------------------// | |
| // 内部リンクのブログカード化（ショートコード） | |
| // ここから | |
| //---------------------------------------// | |
| // 記事IDを指定して抜粋文を取得する | |
| function ltl_get_the_excerpt($post_id){ | |
| global $post; | |
| $post_bu = $post; | |
| $post = get_post($post_id); | |
| setup_postdata($post_id); | |
| $output = get_the_excerpt(); | |
| $post = $post_bu; | |
| return $output; | |
| } | |
| //内部リンクをはてなカード風にするショートコード | |
| function nlink_scode($atts) { | |
| extract(shortcode_atts(array( | |
| 'url'=>"", | |
| 'title'=>"", | |
| 'excerpt'=>"", | |
| 'img'=>"" | |
| ),$atts)); | |
| $id = url_to_postid($url);//URLから投稿IDを取得 | |
| $img_width ="90";//画像サイズの幅指定 | |
| $img_height = "90";//画像サイズの高さ指定 | |
| $no_image = 'noimageに指定したい画像があればここにパス';//アイキャッチ画像がない場合の画像を指定 | |
| //タイトルを取得 | |
| if(empty($title)){ | |
| $title = esc_html(get_the_title($id)); | |
| } | |
| //抜粋文を取得 | |
| if(empty($excerpt)){ | |
| $excerpt = esc_html(ltl_get_the_excerpt($id)); | |
| } | |
| if(empty($img)){ | |
| //アイキャッチ画像を取得 | |
| 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.'" />'; | |
| } | |
| }else { | |
| $img_tag = "<img src='" . $img . "' alt='{$title}' width=" . $img_width . " height=" . $img_height . " />"; | |
| } | |
| $nlink .=' | |
| <a href="'. $url .'" target="_blank" rel="noopener noreferrer" class="blog-card"> | |
| <div class="blog-card-box"> | |
| <div class="blog-card-thumbnail">'. $img_tag .'</div> | |
| <div class="blog-card-content"> | |
| <div class="blog-card-title">'. $title .' </div> | |
| <div class="blog-card-excerpt">'. $excerpt .'</div> | |
| </div> | |
| </div> | |
| <div class="blog-card-site">'. $site .'</div> | |
| </a>'; | |
| return $nlink; | |
| } | |
| add_shortcode("nlink", "nlink_scode"); | |
| //---------------------------------------// | |
| // ここまで | |
| // 内部リンクのブログカード化（ショートコード） | |
| //---------------------------------------// | |
| ?> |
②追加CSSにブログカードのCSSを追記
次にブログカード用のCSSのコードを追加します。CSSの追加は、テーマのカスタマイズ画面から行います。
テーマのカスタマイズ画面を開くには、WordPressの管理者画面の「ダッシュボード」開きます。（もしくは、画面上部にある管理者メニュー「Customize」リンクから直接テーマのカスタマイズ画面を開くことも可能です。）
ダッシュボードのメニュー画面で「外観」を選択して、その中にあるテーマをカスタマイズするためのページのリンクである「カスタマイズ」をクリックします。
テーマの「カスタマイズ」の画面が開けたら、画面の左のメニューの一番下にある「追加CSS」のメニューをクリックします。
下記のように「カスタマイズ中 追加CSS」という画面が開ければCSSのコードを追加する準備は完了です。
ブログカード用のCSSのコードは、下記の通りです。
| /*------------------------- | |
| ブログカード | |
| -------------------------*/ | |
| a.blog-card { | |
| border: 1px solid #e1e1e1; | |
| box-shadow: 2px 2px #ddd; | |
| display: block; | |
| padding: 10px 20px 35px 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%; | |
| } | |
| a.blog-card::before { | |
| background-color: #5c8ece; | |
| border: solid 1px #5c8ece; | |
| color: #FFF; | |
| content: 'おすすめのリンク'; | |
| font-size: 15px; | |
| display: block; | |
| padding: 2px 15px; | |
| position: absolute; | |
| top: -15px; | |
| left: 20px; | |
| border-radius: 3px 3px 3px 3px; | |
| } | |
| a.blog-card::after { | |
| border: solid 1px #939393; | |
| color: #939393; | |
| content: '詳細はこちら'; | |
| font-size: 15px; | |
| font-weight: 600; | |
| display: block; | |
| padding: 2px 15px; | |
| position: absolute; | |
| bottom: 13px; | |
| right: 20px; | |
| border-radius: 3px 3px 3px 3px; | |
| } | |
| a.blog-card:hover { | |
| box-shadow: none; | |
| opacity: .8; | |
| } | |
| .blog-card-box { | |
| display: -webkit-flex; | |
| display: -moz-flex; | |
| display: -ms-flex; | |
| display: -o-flex; | |
| display: flex; | |
| } | |
| .blog-card-title { | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: #428bca; | |
| } | |
| .blog-card-thumbnail { | |
| flex: 1; | |
| margin-right: 10px; | |
| padding-top: 25px; | |
| } | |
| .blog-card-thumbnail img { | |
| width: 100%; | |
| } | |
| .blog-card-content { | |
| flex: 2.5; | |
| } | |
| .blog-card-excerpt { | |
| border-bottom: dashed 1px #666; | |
| color: #555; | |
| font-size: 14px; | |
| padding-bottom: 10px; | |
| } | |
| .blog-card-site { | |
| color: #b2b2b2; | |
| font-size: 12px; | |
| padding-left: 5px; | |
| } | |
| .blog-card-site img { | |
| margin-right: 5px; | |
| vertical-align: bottom; | |
| width: 0px; | |
| } | |
| @media (max-width: 980px) { | |
| .blog-card-excerpt { | |
| border: none; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| a.blog-card { | |
| padding: 10px 10px 20px 10px; | |
| } | |
| a.blog-card::before { | |
| font-size: 11px; | |
| padding: 2.5px 8px; | |
| top: -15px; | |
| left: 10px; | |
| } | |
| a.blog-card::after { | |
| font-size: 12px; | |
| padding: 2px 13px; | |
| right: 10px; | |
| } | |
| .blog-card-thumbnail { | |
| margin-right: 10px; | |
| padding-top: 10px; | |
| } | |
| .blog-card-title { | |
| font-size: 14px; | |
| } | |
| .blog-card-excerpt { | |
| display: none; | |
| } | |
| } | |
| /*------------------------- | |
| ブログカードここまで | |
| -------------------------*/ |
③記事にブログカードのショートコードを追加
function.phpとCSSにコードの追記が完了したら、自作ブログカードが正しく表示できるかテストをしてみましょう。
追加するコードは下記のとおりです。
| [nlink url="リンク" title="タイトル" excerpt="抜粋文" img="画像のパス"] |
それぞれのパラメータは下記のようにブログカードの各パーツに対応しています。
- 実際に作成した完成したブログカードの例は下記のとおりです。
おったんCSSを変更して好みのデザインにカスタマイズしてください
テキストエディタにクイックタグボタンを追加する方法
この方法でブログカードを追加するためには、毎回ショートコード追加しなければなりません。
毎回コードを打ち込むか、他の記事からコピーするのは面倒なので標準のブログカードの機能のようにテキストエディタにブログカード用のクイックタグボタンを追加します。
function.phpにクイックボタン用のコードを追記
テキストエディタにブログカード用のクイックボタンを追加するためには、function.phpにコードを追加する必要があります。
function.phpに追加するコードは下記のとおりです。
テキストの画面からブログカードのボタンを確認する
記事の投稿画面からテキストへ切り替えて「ブログカードボタン」が追加されているか確認をしましょう。
また、クリックした際にブログカード用のショートコードが入力されるかテストしてみましょう。
下記のようにショートコードのテンプレートが挿入されればOKです。
おったんまとめ
この記事では、WordPressのテーマである「The Thor(トール)」のブログカードが「No Image」となるときの対処法についてまとめました。
自作のブログカードでは、自分でパラメータを設定しなければならない手間があるものの、細かい設定が可能です。
ブログカードのアイキャッチ画像が問題なく表示される場合は、The Thor(トール)の標準機能のブログカードの機能で十分ですので、細かい設定が必要な場合にのみ使い分ければよいです。
この記事が、「The Thor(トール)」のブログカードの設定にお困りの方に参考になれば幸いです。
＊The Thorのテーマのカスタマイズで横スクロールの表(テーブル)を美しくカスタマイズする方法もご紹介していますので良かったら参考にしてみてください。
【THE THOR】横スクロールの表(テーブル)を美しくカスタマイズする方法 この記事では、WordPressの「THE THOR」のテーマで、スマホなどでよく見かける横スクロールができる表（テーブル）を作成する方法についてまとめ[…]
