私も大のお気に入りで、このブログでも使用しているTCDさんのテーマ『MAG』ですが、デフォルトのままだと『関連記事カードリンク』を新しいタブで開くことができません。
ここでは『関連記事カードリンク』を同一のタブではなく、新しいタブで開く方法について説明します。
子テーマに記述するの？ それとも親テーマに記述するの？
早速、作業に入りたいのですが、ちょっとその前に・・・
以前、こちらの記事（ ）で子テーマの作成方法について説明しました。
[clink url=”http://integritydesign.jp/wordpress-child-theme/”]
親テーマのアップデートも何のその、カスタマイズしたい部分にだけ上書きすることができるとても便利な子テーマですが、『functions.php』の扱いに関しては注意が必要です。
『style.css』などと違い、『functions.php』はコードを追加することはできるけれど、上書きすることはできません。
『functions.php』の場合は単なる上書きではなく、親テーマの『fuctions.php』にある関数と、子テーマの『fuctions.php』にある関数の両方を読み込んでしまう為、同名の関数が２回実行されることとなり、エラーとなってしまうのです。
つまり、親テーマに記述してあることを子テーマに再度記述してしまうと、WordPress 自体表示されなくなってしまうのです！！
ということで、今回は『functions.php』の記述の一部を変更したいので、親テーマに直接書き込んでいくことにしましょう。
該当箇所を探す
WordPress の 管理画面 ＞ 外観 ＞ テーマの編集 の順にクリックします。
編集するテーマは、上記の説明のとおり子テーマではなく親テーマの『MAG』を選択し、テーマのための関数（functions.php）をクリックします。
482行目あたりにある『カードリンクパーツ』の中の、526行目あたりの『アイキャッチ画像を取得』の部分に追記していきます。
クリックすると拡大します。
記述するコード
【修正前のコード】
//アイキャッチ画像を取得
if(has_post_thumbnail($id)) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),'size-card');
$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.'" />';
}
$clink ='<div class="cardlink"><a href="'. $url .'"><div class="cardlink_thumbnail">'. $img_tag .'</a></div><div class="cardlink_content"><span class="timestamp">'.$date.'</span><div class="cardlink_title"><a href="'. $url .'">'. $title .' </a></div><div class="cardlink_excerpt">' . $excerpt . '</div></div><div class="cardlink_footer"></div></div>';
return $clink;
}
add_shortcode("clink", "clink_scode");
【修正後のコード】
//アイキャッチ画像を取得
if(has_post_thumbnail($id)) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),'size-card');
$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.'" />';
}
$clink ='<div class="cardlink"><a href="'. $url .'" target="_blank"><div class="cardlink_thumbnail">'. $img_tag .'</a></div><div class="cardlink_content"><span class="timestamp">'.$date.'</span><div class="cardlink_title"><a href="'. $url .'" target="_blank">'. $title .' </a></div><div class="cardlink_excerpt">' . $excerpt . '</div></div><div class="cardlink_footer"></div></div>';
return $clink;
}
add_shortcode("clink", "clink_scode");
８行目の <a href=”‘. $url .'”> の後ろに半角スペースを空けて『 target=”_blank” 』を追記します。
修正箇所は２ヶ所です。右にスクロールすると、２つ目の <a href=”‘. $url .'”> が現れるので、そちらにも同様に『 target=”_blank” 』を追記します。
難しければ、修正前の８行目の記述 を 修正後の８行目の記述 にそっくりそのまま差し替えてしまいましょう。
【修正前】
【修正後】
最後に
これで、記事関連リンクカードをクリックすると、同一のタブではなく新しいタブで表示されるようになりました。
作業自体はそれほど難しくないのですが、functions.php に関しては、わずかなミスでも WordPress が表示されなくなってしまいます。
私も、画面が真っ白になって顔面蒼白になったことがあります。十分に気を付けましょう。