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

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

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

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

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

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

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

内部リンクの例としては

Google Analyticsで見たレポートでちょっと気になることがありました。それは「はてなブログカード」経由でアクセスされたページは参照元が分からないということ。そこでSimplicityの外部リンクを独自キャッシュでのリンクカードに変更しました。

な感じでカードのフッターに「サイト内のページへ移動します」という文字列を、外部リンクは

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

スポンサーリンク

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

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

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

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

$title = $post_data->post_title;//タイトルの取得
の上あたりに
$naibu = “サイト内のページへ移動します”;//内部リンクの文字列
を追加します(文字の内容は適当に変更してください)

そして100行目付近にある「//取得した情報からブログカードの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>
へ変更します。これで内部リンクカードのはてブ右側に文字列が追加できます。

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

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

$gaibu = “※※※ 注意:クリックすると外部のサイトへ移動します ※※※”;//外部リンクの文字列
を追記します(文言は適当に変更してくださいね)

そして510行目付近の「//取得した情報からブログカードの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以降ではこうしたカスタマイズで間違っているとロールバック(無理やり保存せずに元の画面に戻る)されるようになっていますから安心してカスタマイズできますよ。

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

4,104 円 (税込) 送料込
Rakhitha Nimesh Ratnayake プライム・ストラテジー オライリー・ジャパンワードプレスニヨルウェブアプリケーションカイハツ ラーキサ ニーメシュ ラーネヤク プライム ストラテジー 発行年月:2014年11月26日 予約締切日:2014年11月25日 ページ数:364p サイズ:単行本 I..
【中古】WordPressレッスンブック ステップバイステップ形式でマスタ-できる /ソシム/エ・ビスコム・テック・ラボ (単行本)

【中古】WordPressレッスンブック ステップバイステップ形式でマスタ-できる /ソシム/エ・ビスコム・テック・ラボ (単行本)

351 円 (税込) 送料込
◆◆◆ディスク有。中古商品のためキズ、日焼け、使用感等ある場合が御座いますが概ね良好な状態になります。迅速・丁寧な発送を心がけております。【毎日発送】商品状態著者名:エ・ビスコム・テック・ラボ発行者:ソシム発売日2010年09月
楽天ウェブサービスセンター CS Shop
トップへ戻る