WordPressの「埋め込み URL」のエラーの最もオススメな解決方法

WordPressの投稿内にURLを入れる「埋め込みURL」という方法で以下のようなエラーが出ることが頻繁にあります。

これは本来URLによっては下のようにブログカードといわれるタイトル＋概要＋アイキャッチなどのわかりやすいリンクで表示されるものになっています。

この問題について解決方法を色々調べた結果、これがベストではないかという弊社におけるベストアンサーを説明します。

原因

WordPressの埋め込みの機能は、対象のURLが下記のようなケースで機能します。

• デフォルトのWordPress（カスタマイズしていて動かなくなっているケースあり）
• oEmbedという埋込統一規格に対応しているサイト

複数のサイトで試すと対応しているケースの方が少ないようです。

原因がわかったところで具体的に埋め込みURLが機能しないURLへリンクを貼る場合に、リッチな見え方にするにはどうすればよいでしょうか？

解決方法

プラグインやfunction.php の編集など色々な方法があるようなのですが、メンテナンス性も考えると対応していないURLについては「カスタムHTML」でブログカード風の表示ができるようにリンクを入れて、カスタムCSSでデザインを整えるという方法が良いです。

具体的な方法はこちらをご参照下さい。

簡単に手順を整理すると、

1. カスタムCSSを保存
2. ブックマークレットを保存
3. リンクしたいURLを開いた状態でブックマークレットをクリック
4. WordPressの投稿画面で「カスタムHTML」でブックマークレットで生成されたコードを貼り付け

になります。1は初回のみなので通常は2～４の３ステップで完了です。

カスタムCSSを保存

/** ブログカード 開始 **/

.blogCard {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 12px;
  margin-bottom: 1.6rem;
}
.blogCardCont {
  position: relative;
  margin-bottom: 5px;
  min-height: 100px;
}
.blogCardCont p {
  font-size: 12px;
  overflow: hidden;
  margin: 0;
}
.blogCardTxt {
  margin-right: 110px;
}
.blogCardTxt p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.blogCardTitle {
  margin-bottom: 5px;
  overflow: hidden;
  -webkit-line-clamp: 2 !important;
}
.blogCardTitle a {
  font-size: 17px;
  line-height: 1.4;
  color: #3d3f44;
  font-weight: bold;
  text-decoration: none;
}
.blogCardTitle a:hover {
  text-decoration: underline;
}
.blogCardImg {
  position: absolute;
  top: 0;
  right: 0;
}
.blogCardImg__wrap {
  float: right;
  width: 15%;
  min-width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.blogCardImg__wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: 100%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
.blogCardFooter {
  font-size: 12px;
}
.blogCardFooter a {
  color: #9aa5ab;
}
.blogCardFooter a img {
  margin-right: 5px;
}
.blogCardTitle a i,
.blog article .blogCardFooter a i {
  display: none;
}
.blogCard.blogCard--noimg .blogCardCont {
  min-height: auto;
}
blogCard.blogCard--noimg .blogCardTxt {
  margin-right: 0;
}

/** ブログカード 終了 **/

ブックマークレットを保存

このリンクをブックマークバーに保存します。

ブックマークレット

リンクしたいURLを開いた状態でブックマークレットをクリック

WordPressの投稿画面で「カスタムHTML」でブックマークレットで生成されたコードを貼り付け

投稿画面でカスタムHTMLを選び、そこにブックマークレットで表示されたコードを貼り付けて完了です。

最終的にこのような内容になります。

この表示のデザインに関してはカスタムCSSのところで微調整が可能です。

以上となります。是非「埋め込みURL」をどんなURLでもできるようにチャレンジしてみて下さい！