wordpressの内部リンクにブログカードを自動生成
wordpressの内部リンクといえば通常はカテゴリーなどのリンクも含みますが、ここではwordpressで用意されているthe_contentフックで処理できる範囲を指します。つまり、wordpressの投稿画面の入力ホームで打ち込むことができる文章のことです。いわゆる本文ですね。ブログのヘッダーやサイドバー、フッターの領域にあるリンクは含みません。
この記事では、内部リンクにブログカードを自動生成するコードを紹介させていただきます。毎回コピペや貼り付けなどやってられるか、という人には必見です。
そもそもwordpressでいうブログカードとは？
ブログカードとは、ボックスやcssなどで装飾を施したリンクのことです。目立たせたリンクとも言えます。辞典には載ってないので明確な定義はありません。いずれ辞典に載る日がやってくるかも。多分、企業か誰かが最初に言い出したのでしょう。ブログカードという名称がブログを運営する人に受け入れられやすかったために拡散し、便宜上ブログカードと呼ばれるようになった感じです。そのため、リンクカードと言う人もいます。
wordpressでブログカードを挿入するメリット
ブログカードは目立つのでサイトの回遊率が上昇する可能性があります。また、作り方によっては広告とよく似ているため、内部リンクとの意識が一般に広がれば、広告のクリック率にも影響を与えるかも知れません。広告がより自然な印象になるためです。ブログ内の関連記事に広告を入れるブログもありますが、これも自然な印象を与えるためですね。
wordpressでブログカードを挿入するデメリット
リンクからブログカードを自動的に生成できないと、毎回手動で貼り付けるのが非常に面倒くさい。忘れて再度wordpressの投稿画面から張り付けるといったことが起こるかも知れません。wordpressにはショートコードというシステムもありますが、これもブログカードを張り付けるたびにショートコードを記入しなければなりません。手間のかかることは何事も面倒くさいです。
マルチサイトにも対応するブログカード
まず、このプログラムは、投稿本文のAタグを見つけ出して自動で整形します。そのため、既にAタグを装飾するタグが存在すると、表示が崩れることもあります。外部リンクに対してはサムネイルを出力できませんが、phpのヒアドキュメントを使っていますので、該当する部分を修正するのは簡単にできます。
またこのコードは、シングルのwordpressでもマルチサイトのワードプレスでも使えるようになっていますが、シングルとマルチサイトでは仕組みが違うため、初期状態ではワードプレスのシングルサイト用に作ってあります。シングルサイトの方が利用者が多いためです。マルチサイトで利用するには、コード内でコメントアウトしてある部分を取り除いて下さい。「/*」と「*/」の部分ですね。この二つを取り除くとマルチサイトでも動作します。
次いで、このブログカードは各記事内で最初に出てくる画像を取り出して、ブログカード内に出力させています。文字数に関しては$character_count変数で指定していますので、この値を変えることで自由に設定できます。
HTMLやcssに関しては、phpのヒアドキュメントを使っていますので、そのままタグを入力し、修正して頂いて構いません。ビルトイン関数などを使う場合は、呼び出し側の関数名を変数に代入してからヒアドキュメント内で引数を入れて呼び出してください。「$a($b);」の形式です。$aが関数名で、$bが引数になります。
ワードプレスのフックを処理するadd_filterは、add_actionでも構いません。どちらでも動きます。ただし、第二引数は９にしておいてください。この部分はフックの呼び出しの優先順位を指定しており、取り除いたり１０以上を指定すると、ブログカード周辺にワードプレスの自動整形によるPタグの閉じタグが勝手に入ってしまいます。ワードプレスはHTMLの構文に間違いがなくてもこういった現象が発生しますので注意して下さい。構文を間違えているからといってSEO的に問題となるわけではないと言われていますが、間違えないほうが良いのは確かです。ただ、タグの使い方によっては閉じタグだけ出現するなんていうおかしな現象は発生しないかも知れません。
ブログカードのコード
function LinkDecoration($the_content){
if(is_single() || is_page()){
$text_wordpress= $FirstImg="";
/*
$sites = get_sites();
foreach($sites as $site){
$bid_wordpress[]=$site->blog_id;
}
*/
preg_match_all('{<a.*?a>}iu', $the_content, $maat);
if(!empty($maat[0])){
foreach($maat[0] as $val){
$url=preg_replace('{.*?href=\"(.*?)\".*}iu', '$1', $val);
/*
foreach($bid_wordpress as $blog){
switch_to_blog($blog);
*/
$id=url_to_postid($url);
if(!empty($id)){
preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/iu', get_post( $id )->post_content, $match);
$text_wordpress= get_post( $id )->post_content;
$text_wordpress=preg_replace('/[\r\n]+|[\t]+/', '', $text_wordpress);
$text_wordpress= strip_tags($text_wordpress);
if(is_single()){$character_count=60;}elseif(is_page()){$character_count=100;}
$text_wordpress= mb_substr($text_wordpress, 0, $character_count, 'utf-8').'...';
if(isset($match, $match[1][0])){
$FirstImg='<img src="'.$match[1][0].'" style="width:150px;height:auto;margin-right:5px;float:left;" />';
}else{$FirstImg="";}
}
/*
wp_reset_query();restore_current_blog();
}
*/
if(!preg_match('/href=\"http/iu', $val) || preg_match('{'.network_home_url().'}iu', $val)){
$tag1[$val]= <<< EOT
<div class="linkbox" style="width:93%;margin:3px 0 10px 0;padding:10px;border:solid 1px #ccc;border-radius:5px;box-shadow:1px 1px 2px gray;">
{$FirstImg}<span class="internal" style="padding:2px 5px 0 5px;margin-right:5px;background:#ff8000;color:#fff;"></span>{$val}
{$text_wordpress}
</div>
EOT;
}elseif(!preg_match('{'.network_home_url().'}iu', $val)){
$url=preg_replace('{(<a[^>]+)(href)}', '$1target="_blank" $2', $val);
$tag2[$val]= <<< EOT
<div>
<span class="reference" style="padding:2px 5px;margin-right:5px;background:skyblue;color:#fff;"></span>
{$url}
</div>
EOT;
}
}
$css = <<<EOT
<style>
.internal:before{content:"関連";}
.reference:before{content:"参考";}
.linkbox:after{content:"";display:block;clear:both;}
</style>
EOT;
$the_content=$the_content.$css;
}
if(!empty($tag1)){
foreach($tag1 as $key => $val){
$the_content=preg_replace('{'.$key.'}iu', $val, $the_content);
}
}
if(!empty($tag2)){
foreach($tag2 as $key => $val){
$the_content=preg_replace('{'.$key.'}iu', $val, $the_content);
}
}
}
return $the_content;
}
add_filter('the_content','LinkDecoration', 9); // 9にしないと</p>の閉じタグが勝手に入って表示がずれる。
まとめ
いかがでしたでしょうか。ワープレのブログカード。そもそも内部リンク自体をブログの記事に直接貼るのも手間がかかります。以前はワープレの関連記事や人気記事プラグインだけで済ませていたブログも多かったのですが、自動化の時代に何か逆行しているような気もします。とりあえず、リンクの挿入でも手間がかかるのに、その装飾までしなければならないなんて面倒だ、という人にはこのワープレ用のブログカードのコードは便利かも知れませんよ。