emanon(エマノン)でブログカードを設定したい

emanon(エマノン)でブログカードを設定したい

2021年9月10日
スタビジ

emanon(エマノン)でブログカードを設定したい

こんなテーマに関する記事です。


スタビジ

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

スタビジ

ワードプレスのテーマで、「emanon business」を使用した場合、残念ながら、
 ブログカード
が備わっていません。

昨今のワードプレスのテーマは、ブログカードも備わっているものが多いのですが、なぜか、emanon の場合、有料プラグインのほうにも、その機能がありません。 
残念ですね。

ですので、ブログカードを使いたい場合の方法としては、
 ・ブログカードのプラグインを使う
もしくは、
 ・プラグイン無しで、phpファイル等の設定で対応する
の2択になります。

ただ、
 ブログカードのプラグインを使う
という場合、いろいろ調べてみると、プラグインにもよりますが、
 ページの表示が遅くなる
という書き込みもあります。

ページ表示スピードが遅いと、離脱率の問題の他、SEO的にもよくありませんので、ここは、
 プラグイン無しで、phpファイル等の設定で対応する
という方法で考えてみたいと思います。

実際の設定は、下記のサイトの内容で設定しています。

内部リンクと外部リンクのどちらにも対応した「ブログカード」をプラグインを使わずにWordPressの投稿記事内にショートコードで設置する方法を考察を交えて紹介し…
dis-play.net

下記に忘備録的に、内容をサマリーしています。

スポンサーリンク

プラグイン無しで、phpファイル等の設定で対応する

スタビジ

設定すべき内容としては、下記の4点です。

・OpenGraph.phpの設置
・functions.phpの編集
・CSSコードの設定
・投稿文面に、ショートコードを記載する

OpenGraph.phpの設置

OpenGraph.phpという、画像取得用のphpファイルをサーバーに置く必要があります。
手順は、下記の通りです。

下記サイトから、ファイルをダウンロードします。

Helper class for accessing the OpenGraph Protocol. Contribute to scottmac/opengr…
github.com

緑色の「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);

ブログカードのプラグインを使う

スタビジ

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

Pz-LinkCard

さいごに

スタビジ

せっかく有料のテーマを購入したのに、上記のような設定をするのは、正直、面倒です。

私も、最初、法人サイト向けのテーマとして、「emanon business」を購入しましたが、ブログカードの設定はもちろん、他にも気になる箇所があった為、現在は、下記のテーマを使用しています。

結果、「emanon business」は、お蔵入りとなりました。
(「Emanon Premium」というテーマもあるようですが、他の有料テーマに比べると、値段設定が高めですね。)

現在、使用しているテーマはこちら。ご参考までに。▼

■swell(有料)
 非常に使いやすく、ユーザー数も多いテーマです。ネットで、「swell 事例」で検索すると、結構、使われていることがわかります。LPや、ワンカラムの全幅デザインも簡単に設定できます。

WordPressテーマ「SWELL」

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

「自分色に染めた、自分だけのサイトを作る楽しさ」を感じてもらうために作った一風変わった無料WordPressテーマyStandard。カスタマイズありきのシンプ…
wp-ystandard.com

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

スタビジ