WordPressのブログカードを外部リンクで利用する3つの方法

 ブログカードは近年、とてもよく使われます。
 記事タイトルや概要、アイキャッチ画像をまとめて表示するのがブログカードです。

 ブログカードを使うとデザイン的にスタイリッシュなだけでなく、クリック率が向上します。

 しかし、WordPressのブログカードは、内部リンクにしか対応していません。
 今回の記事では、WordPressのブログカードを外部リンクに対応させる方法について解説します。

スポンサーリンク

ブログカードとは?

 ブログカードとは、ブログ記事のタイトルや概要、アイキャッチ画像を読みやすくまとめて表示する形式のことです。
 WordPress4.4からブログカードが実装されました。

 ブログカードは通常のリンクより目を引きやすく、クリック率の向上が期待できます。
 また、ブログカードはデザイン的にもスタイリッシュです。
 記事概要が表示されているため、クリックする前に記事の内容がある程度わかるのも特徴。

 ブログカードを導入してリンクの視認性を向上させ、スタイリッシュにしましょう。

WordPress搭載のブログカード機能の使い方

 WordPressのブログカード機能の概要は以下の通りです。

  • WordPress4.4以降から実装
  • 内部リンクかWordPress.orgをブログカード化
  • ブロックにURLを記述するだけ
  • URLの前後に空白や余分なテキストは入れない

 内部リンクをブログカード化するには、URLをブロックに貼り付けるだけです。
 もしくは、以下の手順でブログカード化しましょう。

  1. 「+」アイコンでブロック追加メニューを表示
  2. ブロック追加メニューの検索窓で「WordPress」と検索
  3. 「WordPress」ブロックを追加
  4. URLを貼り付けて「埋め込み」をクリック

 ただし、デフォルトでは、WordPressは外部リンクをブログカード化できません。

外部リンクをブログカード化する3つの方法

 外部リンクをブログ化する方法は3つあります。

  1. プラグインを導入
  2. 「Cocoon」というテーマを利用
  3. functions.phpでブログカードを実装

 プラグインを導入する方法はもっとも手軽です。
 しかし、ブログカードプラグインである「Pz-LinkCard」は重いとの評判も。
 そこで、今回の記事ではPz-LinkCard以外のブログカードプラグインも紹介します。

 テーマにこだわりがないなら、Cocoonを利用しましょう。
 Cocoonは多機能・高機能なテーマで、シンプルなデザインが特徴です。
 しかも、無料で導入できます。
 Cocoonは、URLを貼り付けるだけで外部リンクもブログカード化できます。

 「プラグインは増やしたくない」「テーマも違うものが使いたい」といった場合、functions.phpをカスタマイズしてブログカードを実装しましょう。

 それぞれの方法は後述します。

①プラグインを利用してブログカードを生成

 プラグインを利用して、外部リンクのブログカードを生成する方法を紹介します。

Pz-LinkCard

 Pz-LinkCardは外部リンクのブログカードを表示できるプラグインです。
 ショートコードでURLを指定することで、リンクをブログカード形式で表示します。
 ブログカードの色や、新しいタブで開くかどうかを設定できます。

 日本人が作ったプラグインで、設定画面も日本語です。

 まず、Pz-LinkCardをインストールしましょう。
 管理画面から「プラグイン」→「新規追加」を開き、検索窓に「Pz-LinkCard」と入力します。
 表示されたPz-LinkCardの「今すぐインストール」をクリックし、インストールできたら有効化しましょう。

 設定画面は「設定」→「Pz カード設定」からできます。

 「基本」「配置」「表示」「文字」などさまざまな設定があり、自由にデザインを変更できます。

 ショートコードは、デフォルトでは以下のように設定されています。

[blogcard url="http://popozure.info" title="記事タイトル" content="記事概要"]

 記事タイトルと概要は、手動で入力することが必要です。

 なお、自動でURLだけの行をリンクカードに変換する設定もあります。
 Pz-LinkCard設定画面の「エディタ」タブを開き、「URL行を変換」にチェックを入れて保存してください。

 URLを貼り付けるとき、そのURLがリンクにならないように注意しましょう。
 リンク(青文字表示)になった場合は、リンクアイコンをクリックしてリンクを削除してください。

Simple Blog Card

 Simple Blog Cardも日本人が作ったプラグイン。
 設定画面はシンプルかつ日本語なので、英語が苦手な人も安心です。
 こちらも、ショートコードで外部リンクのブログカードを生成します。

 導入は管理画面から「プラグイン」→「新規追加」を開き、検索窓に「Simple Blog Card」と入力しましょう。
 表示されたら「今すぐインストール」をクリックし、有効化してください。

 設定画面は「設定」→「Simple Blog Card」から開けます。
 設定項目はとてもシンプルでわかりやすいです。

 ブログカードの挿入はショートコードで行います。

[simpleblogcard url="記事URL"]

 設定画面でCSSを編集し、ブログカードのデザインをカスタマイズしましょう。

②テーマ「Cocoon」のブログカード機能を使う

 CocoonはWordPressの多機能・高機能な無料テーマです。
 わいひら氏が開発したテーマで、ブロガーに高い人気を誇ります。

 Cocoonは内部リンクだけでなく、外部リンクもURLを貼り付けるだけでブログカード化してくれます。
 プラグインの導入も、functions.phpの編集も必要ありません。

 以下の記事でCocoonも紹介しています。
 テーマにこだわりがないなら、Cocoonはとてもおすすめです。

 Cocoonのダウンロードは、以下のブログカードからどうぞ。

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

③functions.phpでブログカードを実装

 「[WordPress]外部リンクをカード形式で表示する方法はコレで決まり!」から、functions.phpの実装方法を紹介します。

 functions.phpのブログカード実装には3ステップあります。

  1. OpenGraphファイルの設置
  2. functions.phpに関数を追加
  3. CSSでデザインをカスタマイズ

 まず、ドメイン直下のディレクトリに「opengraph.php」を配置します。
 こちらから「Code」ボタンをクリックして、「Download ZIP」でダウンロードしてください。

 次に、functions.phpに以下のコードを追加します。

/* リンクをカード形式で表示するための関数 */
function show_Linkcard($atts) {
  extract(shortcode_atts(array(
    'url'=>"",
    'title'=>"",
    'excerpt'=>""
  ),$atts));

  //OGP情報を取得
  require_once 'OpenGraph.php';
  $graph = OpenGraph::fetch($url);

  //OGPタグからタイトルを取得
  $Link_title = $graph->title;
  $src        = $graph->image;

  //OGPタグからdescriptionを取得
  $Link_description = wp_trim_words($graph->description, 60, '…' );
  if(!empty($excerpt)){
    $Link_description = $excerpt; //値を取得できない場合は直にexcerpt=""を入力
  }

  $xLink_img = '<img src="'. $src .'" />';

  //HTML出力
  $sc_Linkcard .='
  <div class="blogcard ex">
  <a href="'. $url .'" target="_blank">
   <div class="blogcard_thumbnail">'. $xLink_img .'</div>
   <div class="blogcard_content">
    <div class="blogcard_title">'. $Link_title .'</div>
    <div class="blogcard_excerpt">'. $Link_description .'</div>
    <div class="blogcard_link">'. $url .'</div>
   </div>
   <div class="clear"></div>
  </a>
  </div>';

  return $sc_Linkcard;
}
//関数利用時のフォーマット
add_shortcode("sc_Linkcard", "show_Linkcard");

 最後にCSSでデザインをカスタマイズします。

/* リンクをカード形式で表示させる場合のスタイル */
.blogcard {
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  word-wrap: break-word;
  box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.025);
  color: black;
}
.blogcard.ex {
  background-color: #f7f7f7;
}
.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all 0.2s ease;
  color: black;
}
.blogcard a:hover {
  opacity: 0.6;
  color: #0066ca;
}
.blogcard_thumbnail {
  float: left;
  padding: 20px 10px;
  width: 100%;
}
.blogcard_thumbnail img {
  margin-bottom: 0px !important;
}
.blogcard_title {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4;
  padding: 20px 20px 10px;
}
.blogcard_excerpt {
  font-size: 0.85em;
  line-height: 1.6;
  padding: 0 17px 15px 20px;
}
.blogcard_link {
  font-size: 0.65em;
  padding: 0 17px 15px 20px;
  text-align: left;
}

.blogcard_link .icon-external-link-alt::before {
  font-size: 0.75em;
}

@media screen and (max-width: 768px) {
  .blogcard {
    margin: 40px 0;
  }
  .blogcard_title {
    font-size: 0.95em;
    padding-bottom: 17px;
  }
  .blogcard_excerpt {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .blogcard_thumbnail {
    overflow: hidden;
    width: 200px; 
    height: 200px;
    position: relative;
    margin-right: 10px;
    background-color: #2b2b2b;
  }
  .blogcard_thumbnail img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
  }
}

 ブログカードを生成するには、以下のショートコードでURLを編集しましょう。

[sc_Linkcard url="記事URL"]

内部リンクをブログカード化したくないときの対処法

 内部リンクのURLをブログカード化したくない場合、「!(半角びっくりマーク)」を先頭に付けましょう。

ブログカードになる https://xxx.com/yyy
ブログカードにならない !https://xxx.com/yyy

ブログカードが表示されない原因と対処法

 ブログカードが表示されない原因と対処法について解説します。

外部リンクを貼っている

 WordPress4.4以降に実装されたブログカードは、内部リンクにのみ対応しています。
 外部リンクを貼っても、デフォルトではブログカード化されません。
 ただし、WordPress.orgの記事だけは例外的にブログカード化されます。

 ブログカード化されない場合は、外部リンクを疑いましょう。

ブロックにURL以外も入力している

 ブログカード化されるためには、ブロックにURLだけを入力することが必要です。
 URL以外にスペースや記号を入力するとブログカード化されない場合があります。

 URLだけを入力するようにしましょう。

まとめ

 WordPress4.4からブログカードが実装されました。
 ブログカードはリンクの視認性を高め、クリック率向上に役立ちます。

 しかし、残念ながらデフォルトでブログカードになるのは内部リンクだけです。
 外部リンクは何らかの方法を使わないとブログカードになりません。

 外部リンクをブログカードにする方法は「プラグイン」「テーマ」「functions.php」の3つです。
 プラグインの導入がもっとも簡単で、次におすすめなのがCocoonというテーマの利用です。

 テーマにこだわりがあり、プラグインも増やしたくない場合はfunctions.phpをカスタマイズしましょう。

 WordPressで外部リンクもブログカード化し、スタイリッシュな記事に仕上げてくださいね。

タイトルとURLをコピーしました