【Simplicity2】リンクカード（ブログカード）のフッターに「内部リンク」「外部リンク」の別を文字で表示する方法

公開日：2018年1月30日
更新日：2018年1月31日

カテゴリー:使い方など

【Simplicity2】リンクカード（ブログカード）のフッターに「内部リンク」「外部リンク」の別を文字で表示する方法

WordPressの無料テーマ【Simplicity2】。これに出会ってから本当にいろいろ勉強になって大変助かってます。もちろん当サイトも【Simplicity2】を使わせていただいてますし、私の作るサイトは現状100%使用しています。

【Simplicity2】にはリンク表示をスタイリッシュにしてくれる「リンクカード（ブログカード）」機能があって、通常のリンクがすごく見栄えよくなるようになっています。

そして更にサイト内のページへ移動するための「内部リンク」とサイト外の記事へのリンクを表示する「外部リンク」が別々になっているのもうれしいところです。

当然ながら「内部リンク」と「外部リンク」には別々のCSSセレクタが付与されているのでデザインを別にするのもCSSで簡単にできるところが本当に優れていると思います。

でも・・・１つ気になるのが「デザインを変えても普通に見たら何も変わらない（分からない）のでは？ということ。デザインが違うんだから分かるだろ！！っていうのは作り手の話であって、閲覧する人は明記されてなかったらわかりませんからね。

そこで今回は内部・外部それぞれのリンクカードに文字列を追加して「目で見てサイト内リンクなのかサイト外リンクなのかを区別」できるように少しカスタマイズしてみました。

内部リンクの例としては

【Simplicity2】の外部リンクを「はてなブログカード」から「独自キャッシュ」へ変更

な感じでカードのフッターに「サイト内のページへ移動します」という文字列を、外部リンクはでカードのフッターに「※※※　注意：クリックすると外部のサイトへ移動します　※※※」という文字列が表示されるようにしてみました。

ページ上部へ戻る▲

リンクカード（ブログカード）のフッターに「内部リンク」「外部リンク」の別を文字で表示する方法

親テーマ内の「lib/blog-card.php」というファイルを編集します（この書き方で？？な方はやらない方が無難です）。

内部リンクカードのカスタマイズ

テーマの編集画面を開いたら２８行目付近にある

$title = $post_data->post_title;//タイトルの取得

へ

$naibu = "サイト内のページへ移動します";//内部リンクの文字列

を追加します（文字の内容は適当に変更してください）

そして１００行目付近にある「//取得した情報からブログカードのHTMLタグを作成」の下のコード内に「$naibu」という変数を追記します。今回はフッターの「はてブ」数の右に表示されるように

<div class="blog-card-footer">'.$site_logo_tag.$hatebu_tag.$date_tag.'</div>

を

<div class="blog-card-footer">'.$site_logo_tag.$hatebu_tag.$naibu.$date_tag.'</div>

へ変更します。これで内部リンクカードのはてブ右側に文字列が追加できます。

外部リンクカードのカスタマイズ

同じファイル内の４５５行目付近にある「//og:imageが相対パスのとき」の上あたりに

$gaibu = "※※※　注意：クリックすると外部のサイトへ移動します　※※※";//外部リンクの文字列

を追記します（文言は適当に変更してくださいね）

そして５１０行目付近の「//取得した情報からブログカードのHTMLタグを作成」のフッター部分を

<div class="blog-card-footer">'.$site_logo_tag.$hatebu_tag.'</div>

から

<div class="blog-card-footer">'.$site_logo_tag.$hatebu_tag.$gaibu.'</div>

へ変更します。要領は内部リンクと同じですね。

HTMLタグの出力をするためにいろいろなデータを変数化した上でカードにしているのでこのようにしないとエラーが出ます。変数名は他の変数名と重複しなければ何でも大丈夫です。

親テーマを編集する必要があるのでテーマを更新する都度直す必要がありますが、これで訪問してくれる方から見て「内部リンク」なのか「外部リンク」なのかの判別がしやすくなるのではないかと思います。

何もわざわざ明示しなくても・・・・と思う方がいるかもしれませんが、少なくとも外部リンクに関しては「何かトラブルなどがあっても責任負えませんよ」ということを示すことができるわけですから、ページの内容に関する責任を自身の範囲外とすることができますし、何より外部リンク先の内容が変更されてしまっても混乱を招くことが少なくなるのでは？と思ってカスタマイズしました。

ヒントは公的サイトによくあるテキストリンクに「〇〇〇（外部サイト）」と書かれていることが多くて、「ここから先は今見ているサイトとは関係ない方が作ったページへ飛ぶんだね」と確認でき、私自身親切な表示方法だなぁと感じたことでした。

興味のある方は試してみてくださいね。ちなみにWordPressのバージョン4.9以降ではこうしたカスタマイズで間違っているとロールバック（無理やり保存せずに元の画面に戻る）されるようになっていますから安心してカスタマイズできますよ。

デザインだけ変更したいという方は

Simplicity標準装備のブログカードをお洒落にカスタマイズ～デザイン6種【テンプレートｰ１】

あたりのサイトを参考にするとすごく素敵なカード表現ができると思います（いろいろな例が画像とコード付きで紹介されていて非常に参考になりました）。