
emanon(エマノン)でブログカードを設定したい
こんなテーマに関する記事です。

なぜか、emanon(エマノンには、ブログカードがありません。ですので、ブログカードを表示させる為には、別途、設定方法を考える必要があります。

ワードプレスのテーマで、「emanon business」を使用した場合、残念ながら、
ブログカード
が備わっていません。
昨今のワードプレスのテーマは、ブログカードも備わっているものが多いのですが、なぜか、emanon の場合、有料プラグインのほうにも、その機能がありません。
残念ですね。
ですので、ブログカードを使いたい場合の方法としては、
・ブログカードのプラグインを使う
もしくは、
・プラグイン無しで、phpファイル等の設定で対応する
の2択になります。
ただ、
ブログカードのプラグインを使う
という場合、いろいろ調べてみると、プラグインにもよりますが、
ページの表示が遅くなる
という書き込みもあります。
ページ表示スピードが遅いと、離脱率の問題の他、SEO的にもよくありませんので、ここは、
プラグイン無しで、phpファイル等の設定で対応する
という方法で考えてみたいと思います。
実際の設定は、下記のサイトの内容で設定しています。

下記に忘備録的に、内容をサマリーしています。
目次
プラグイン無しで、phpファイル等の設定で対応する

設定すべき内容としては、下記の4点です。
・OpenGraph.phpの設置
・functions.phpの編集
・CSSコードの設定
・投稿文面に、ショートコードを記載する
OpenGraph.phpの設置
OpenGraph.phpという、画像取得用のphpファイルをサーバーに置く必要があります。
手順は、下記の通りです。
下記サイトから、ファイルをダウンロードします。
緑色の「code」の箇所から、ZIPだファイルをダウンロードします。
ダウンロードしたファイルを解凍して、フォルダ内の、
OpenGraph.php
を使用します。
このファイルを、WordPressのfunctions.phpが置いてある同じ階層にアップロードします。
場所は、
wp-content > themes > テーマのフォルダ > functions.php
と同じ階層です。
テーマのフォルダとしては、「emanon business」(子テーマ)になります。
functions.phpの編集
functions.phpに、「ショートコードを表示させる為のコード」を追加します。
※functions.phpの編集をする際は、万が一のことも考えて、データのバックアップをとっておきましょう。不具合がおきた際は、バックアップデータで復元します。
追加コードは、下記になります。
管理画面の
外観>テーマエディター>
の箇所で、functions.phpを選択して、文末に、下記を追加します。
※上記「【外部リンク対応】ブログカードをプラグインなしで設置する方法【長文】」より引用
/* 外部リンク対応ブログカードのショートコードを作成 */
function show_Linkcard($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'excerpt'=>""
),$atts));
//画像サイズの横幅を指定
$img_width ="170";
//画像サイズの高さを指定
$img_height = "170";
//OGP情報を取得
require_once 'OpenGraph.php';
$graph = OpenGraph::fetch($url);
//OGPタグからタイトルを取得
$Link_title = $graph->title;
if(!empty($title)){
$Link_title = $title;//title=""の入力がある場合はそちらを優先
}
//OGPタグからdescriptionを取得(抜粋文として利用)
$Link_description = wp_trim_words($graph->description, 60, '…' );//文字数は任意で変更
if(!empty($excerpt)){
$Link_description = $excerpt;//値を取得できない時は手動でexcerpt=""を入力
}
//wordpress.comのAPIを利用してスクリーンショットを取得
$screenShot = 'https://s.wordpress.com/mshots/v1/'. urlencode(esc_url(rtrim( $url, '/' ))) .'?w='. $img_width .'&h='.$img_height.'';
//スクリーンショットを表示
$xLink_img = '<img src="'. $screenShot .'" width="'. $img_width .'" />';
//ファビコンを取得(GoogleのAPIでスクレイピング)
$host = parse_url($url)['host'];
$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
if($searchFavcon){
$favicon = '<img class="favicon" src="'.$searchFavcon.'">';
}
//外部リンク用ブログカード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">'. $favicon .' '. $url .' <i class="icon-external-link-alt"></i></div>
</div>
<div class="clear"></div>
</a>
</div>';
return $sc_Linkcard;
}
//ショートコードに追加
add_shortcode("sc_Linkcard", "show_Linkcard");
CSSコードの設定
外観>カスタマイズ>追加SS
の箇所に、下記CSSCSSコードを追加します。
ブログカードのデザインを変更する際は、内容を適宜修正します。
※上記「【外部リンク対応】ブログカードをプラグインなしで設置する方法【長文】」より引用
.blogcard {
line-height: 1;
background-color: #ffffff;
border: 1px solid #eeeeee;
word-wrap: break-word;
margin: 40px;
box-shadow: 0 0 10px 6px rgba(0,0,0,.025);
}
.blogcard.ex {
background-color: #f7f7f7;
}
.blogcard a {
text-decoration: none;
opacity: 1;
transition: all 0.2s ease;
}
.blogcard a:hover {
opacity: 0.6;
}
.blogcard_thumbnail {
float: left;
padding: 20px;
}
.blogcard_title {
font-size: 1em;
font-weight: bold;
line-height: 1.4;
padding: 17px 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 .favicon {
margin-bottom: -4px;
}
.blogcard_link .icon-external-link-alt::before {
font-size:0.75em;
}
事前の準備は、以上です。
投稿文面に、ショートコードを記載する
投稿文面のブログカードを表示させたい箇所に、下記のショートコードを設定します。
[sc_Linkcard url="リンク先URL"]
これでブログカードが表示されるはずです。
文字化けが発生した際の対応
実際に、ブログカードを表示させた際に、文字化けするようであれば、functions.phpファイルの指定箇所に、コードを追加します。
追加タグ
※上記「【外部リンク対応】ブログカードをプラグインなしで設置する方法【長文】」より引用
下記タグを指定の設置箇所に追加します。
$HTML = mb_convert_encoding($HTML,"HTML-ENTITIES","UTF-8");
指定の設置箇所
上記の一行を、
$old_libxml_error = libxml_use_internal_errors(true);
と
$doc = new DOMDocument();
の間に挿入します。
下記参照(挿入後の状態)▼
static private function _parse($HTML) {
$old_libxml_error = libxml_use_internal_errors(true);
$HTML = mb_convert_encoding($HTML,"HTML-ENTITIES","UTF-8");
$doc = new DOMDocument();
$doc->loadHTML($HTML);
ブログカードのプラグインを使う

ブログカードのプラグインを使用する場合は、下記があります。
但し、上記にも記載したように、
サイトの表示速度が遅くなる
という点を踏まえた上での利用になります。
さいごに

せっかく有料のテーマを購入したのに、上記のような設定をするのは、正直、面倒です。
私も、最初、法人サイト向けのテーマとして、「emanon business」を購入しましたが、ブログカードの設定はもちろん、他にも気になる箇所があった為、現在は、下記のテーマを使用しています。
結果、「emanon business」は、お蔵入りとなりました。
(「Emanon Premium」というテーマもあるようですが、他の有料テーマに比べると、値段設定が高めですね。)
現在、使用しているテーマはこちら。ご参考までに。▼
■swell(有料)
非常に使いやすく、ユーザー数も多いテーマです。ネットで、「swell 事例」で検索すると、結構、使われていることがわかります。LPや、ワンカラムの全幅デザインも簡単に設定できます。

■ystandard(無料)
本サイトで使用。無料ですが、高機能です。もちろん、ブログカードも備わっています。機能追加する際のプラグインは有料になります。

以上、ブログカードの設定についての忘備録でした。
