第4話

2017.03.28 公開

[WordPress] テキストリンク作成用のショートコードを自作してみた

WordPress

こんにちは！Takuya.B（@TB_IQ)です。

先日のブログデザイン崩壊から、ちょこちょことブログデザインをイジっています。

ブログの記事本文中で、自分の過去の記事、または他のサイト・ブログのリンクを貼りたいという場合、これまでであればブログカードを利用していました。

しかし、色々調べてみると、クリック率などの関係上ブログカード形式よりもテキストリンクの方が良いということを知りました。

はてなブログなどではよく見る上の写真のような形式もwordpressで実装するにはどうすればよいのだろうと、色々調べていたのですが、方法がわからなかったので、とりあえず自分で色々と調べて実装してみました。

Contents

1 今回作ったのはこれ！
- - 1.0.1 ▼これな↓
2 実装したコードはこちら
3 番外編：プラグイン wptouch を使っているので…
4 まとめ

今回作ったのはこれ！

今回、下記のテキストリンクをショートコードで作成できるようにしました。

▼これな↓

このように上部に『関連記事』と表示させ、ページタイトルを表示させています。これはfunction.phpでショートコードを作成しています。

ちなみにこの『関連記事』の部分は変更することが可能です。

例えば、

このように『関連記事』ではなく『プロフィール…』と表示させることも可能です。

実装したコードはこちら

それでは、実際にどのようにしてショートコード化しているのか、解説します。

サンプルコード(function.php)

まず、サンプルコードは以下の通りです。

function kanren($atts) { //(1)
    extract(shortcode_atts(array("url" => 'http://', 'title' => '関連記事'), $atts));
    $pagename = getPageTitle($url);
    return '<div class="kanren-header">'.$title.'</div><div class="kanren"><a href="'.$url.'"><i class="fa fa-hand-o-right" aria-hidden="true"></i>'.$pagename.'</a></div>';
}

function getPageTitle( $url ) { //(2)
    $html = file_get_contents($url); 
    $html = mb_convert_encoding($html, mb_internal_encoding(), "auto" ); 
    if ( preg_match( "/<title>(.*?)<\/title>/i", $html, $matches) ) { 
        return $matches[1];
    } else {
        return false;
    }
}

add_shortcode("kanren", "kanren"); //(3)

これをfunction.phpに追加します。コードについて順番に説明します。

(1) kanren関数について

まず、ショートコードを入力した時に呼び出されるkanren関数についてです。

function kanren($atts) {
    extract(shortcode_atts(array("url" => 'http://', 'title' => '関連記事'), $atts));
    $pagename = getPageTitle($url);
    return '<div class="kanren-header">'.$title.'</div><div class="kanren"><a href="'.$url.'"><i class="fa fa-hand-o-right" aria-hidden="true"></i>'.$pagename.'</a></div>';
}

これについては以下のページを参考にしました。

このkanren関数ではwordpressのshortcode_atts関数とphpのextract関数を用いています。

【関連】PHP: extract - Manual

上の2つの解説じゃよくわからんという方（まさに私のことだが）は次のリンクがわかりやすいです。

【関連】302 Found

ショートコードで入力したurlプロパティの値をgetPageTitle関数の引数に渡しています。titleプロパティの値はそのまま出力され、値が空の場合は関連記事と出力しています。

そして、最終的にreturnでhtmlタグの文字列として出力しています。

(2) getPageTitle関数について

getPageTitle関数は引数に指定したurlのサイトのタイトルを取得する関数です。

function getPageTitle( $url ) {
    $html = file_get_contents($url); 
    $html = mb_convert_encoding($html, mb_internal_encoding(), "auto" ); 
    if ( preg_match( "/<title>(.*?)<\/title>/i", $html, $matches) ) { 
        return $matches[1];
    } else {
        return false;
    }
}

こちらのコードは以下のサイトから拝借しました。

【関連】301 Moved Permanently

(3) ショートコードの生成

最後にショートコードを生成して完了です。

add_shortcode('kanren', 'kanren');

add_shortcode関数の第1引数はショートコードに使用する文字列を表し、第2引数は関数名を表しています。

CSS

現在表示しているリンクのCSSは以下の通りです

.kanren-header {
    display: inline-block;
    background-color: #333;
    color: white;
    padding: 5px;
}

.kanren {
    background-color: whitesmoke;
    border: 1px solid gray;
    line-height: 2;
    padding-left: 10px;
    margin-bottom: 54px;
}

.kanren i {
    margin-right: 5px;
}

今回のサンプルコードをそのまま使うのでしたら、このCSSも使って下さい。適当にイジって自分好みにデザインすることをオススメします。