【ha-Basic】テーマ本文の内部・外部リンクをカード表示にする方法

公開日: カスタマイズいろいろ

【スポンサーリンク】








今回のテーマ制作で絶対にプラグインなしで実装したいというものではあったものの、実は断念した機能です。

多くのテーマでは一見外部・内部リンクをカード表示にする機能が備わっています。

が・・・それらのほとんどは、

  • 内部リンクはきちんとサイト内の情報を読み取って表示している
  • 外部リンクは「はてなブログカード」という外部機能を使って表示している

というもの。

単純に内部リンクは自サイト内の情報なので問題なくデータ取得できるが、外部リンクに関してはうまくいかない場合があるからカード表示用のパーツである「はてなブログカード」に頼ろう!というわけです。

何がいけないの?別にいいんじゃないの?

と思われるかも知れませんね。確かにカード表示されることに違いはないので見た目は何も問題ありません(ありがたい機能です)。

でも私的には大きな問題があると思っています。それは・・

相手に伝わるリンク元が「はてな(hatena-blog-parts)」になってしまうこと

です。この段階でも何がいけないの?何が問題なの?と思う方がいらっしゃるでしょう。

通常外部リンクを記事内に張り、そのリンクをクリックしてリンク先サイトが表示されると、アクセス解析などには「リファラ」といってどのサイト(ページ)からのアクセスなのかがわかるようになっています。

そして特に特別なことをしなければ、その記事がリンク元としてリンク先の方にはわかるようになっています。

悪い言い方ですが、何も後ろめたいものがないのであれば、「どのページから来たんだろう?」と思ったリンク先サイトを管理している方が逆に訪問してくれ、有用な記事のあるサイトであれば逆にリンクを張った記事をリリースしてくれたりします。すごーーく2次的なアクセスアップの効果とは思いますが、長く運営しているサイトではこれが非常に大きな意味を持ってきます(いわゆる被リンク数ってやつです)。

そんな中せっかくリンクを張ったのにリンク元はすべて「はてな」。一部上場企業様ですし、本家「はてなブログ」ユーザーを増やすことがパーツ提供の本当の意義でしょうから仕方ないことではあるのですが、せっかくならカード表示しつつ、きちんとリンク先には自分のページの足跡を残したいものです。

そこで参考にしたのが「Simplicity2」というテーマ。私が【ha-Basic】テーマを作る前にはずっと使用させていただき、このテーマを作るにあたって大変参考にさせていただいたテーマです。このテーマにはちゃんとした?外部リンクをカード表示させる機能が備わっています。

その機能をパク参考にして実装しようとしましたが、いかんせんテーマ作成初心者の私にとっては大きなハードル・・・うまく実装できませんでした。

で本当に残念ですが、プラグインを使って実装することにした・・・というのが経緯です(長くてすみません)。

まあそのままプラグインというのもアレなので、今後さらに研究して何とか内製化をしたいと思っていますので暖かい目で見守ってくださいね。

ここからが今回の本題になります(本題がとっても短いような・・・)。

【ha-Basic】テーマ本文の内部・外部リンクをカード表示にする方法

「PZ-LinkCard」

有名なプラグインに

というのがあります。これを使うと実に簡単に内部・外部カードをリンク化できます。

「Simplicity2」テーマのようにURLをそのまま、またはaタグとアンカーテキストが両方同一のURLだった時にリンクカードにしてくれればいいのに・・・と思ったのですが、カードにしたくない!という機会もあると思います。

そんなとき「PZ-LinkCard」のようにカード化したいものはショートコードで入力するようになっていることで、確実にカードor非カードでの表示分けができますから、使い始めると実に便利でした。

が・・・今回はこのプラグインは使用しませんでした。単純にメジャーなものがあまり・・ということと、ユーザーの要望に応じていろいろな機能が追加されてしまっていて、「ひょっとすると動作に影響が出る?」と勘ぐってしまったからです。

「Content Cards」

「PZ-LinkCard」以外に似たものがないかなぁといろいろ検索した結果よさそうなプラグインがありました。それがこのサイトでも使っている

です。表示方法は特に変わりありませんが、余分な機能が一切ありませんから単純に動作自体はこちらの方が安定するかな?という判断で使用しています。

大きく違うのは、「PZ-LinkCard」が実際のページ情報から表示に不具合が出ないようにいろいろなネタを集めてカード化してくれるのに対して「Content Cards」はOGP情報(SNSなどにページを埋め込む際に利用される情報)から単純にデータを引っ張ってきてカード化するという点。

弱点としてはOGP情報がないページはカード化しても残念な表示になってしまうことです。

ただ、最近ではSEO対策としてではなくSNSへ埋め込まれたときにカード表示されるというのが重要なファクターで当たり前になりつつありますので、ほとんどのサイトではOGPタグが設定されていることから、現時点で特に問題はないように思います。リンクを挿入したときにプレビューで見てカード表示に問題があれば通常のテキストリンクにすればいいだけですからね。

また「Content Cards」プラグインはリンクをカード表示するというよりもリンクを埋め込むという感覚のプラグインなので、非常に大きな埋め込みコンテンツが表示されるのもちょっと難点・・ということで、【ha-Basic】テーマを使って「Content Cards」プラグインを使用した際にはいい感じのカードになるようにCSSコードをあらかじめ挿入してありますので、プラグインを有効化して、ショートコードでリンクを挿入するだけでいい感じになると思います。


どちらのプラグインを使うかはお好みで選んでいただけばいいと思いますので、内部・外部リンクをカード表示にしたいとお考えの方は実装ください。

いつでもご相談・お見積りの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。