【WordPress】はじめてのショートコード作成&設置方法！内部リンク装飾

WordPressのショートコードをはじめて作成しました。思ってたより簡単でした。今回のショートコードは、URLから内部リンクを生成するだけ。タイトル、アイキャッチ画像、ソーシャルボタン付きです。

ゆめぴょんです。こんちはっ(^^)/

ブログを書いてるとブログ内の関連記事を紹介したい場合がよくあります。そんな時は内部リンクを貼ることになるのですが普通のリンクだと味気ないので装飾したいと思ったのがきっかけです。

しかし毎回おなじようなHTMLコードを記述したりコピーするのは非効率で面倒だと思いました。でも通常はWordPressの記事内にはプログラムは書けないようです。そして見つけたのがショートコードの存在。

WordPressのショートコードとは
内部リンク装飾
内部リンク装飾のショートコード作成方法
WordPressのショートコード実行方法
今後の課題

WordPressのショートコードとは

結論から言うと上の画像のような内部リンクを下のように1行書くだけで実現できます。同じ作業を記号化するプログラムです。

［interlink “http://wispyon.com/201306-ranking/”］

このようにWordPressの記事内に書いて実行できる関数というかコードをショートコードといいます。

内部リンク装飾

まずはHTMLとCSSで希望する装飾を作ってみます。

今回は左側にアイキャッチ（記事の最初の画像）の縮小画像を、右側にタイトルを表示して、両方に内部リンクをつけます。その全体を薄い色で囲みます。

そして「あとで読む」系のソーシャルボタン「はてなブックマーク（はてブ）」「Pocket」「ツイッター」の3つだけ付けることにしました。

※）ちなみにこの記事で一番苦戦？したのは上のショートコードの表示です。普通に書くと実行されてしまうので、]や[を書く場合は2回ずつ、つまり］］のように書くか全角にすれば楽です。

内部リンク装飾のショートコード作成方法

WordPressのショートコードは、PHPというプログラム言語で記述します。

今回は細かいショートコードの作成方法は他のサイトにお任せします。例えば私が参考にした2サイトをこの記事の一番下に紹介してます。

試行錯誤の結果、完成したプログラムは下のとおり。URLがなかったり間違ってたりアイキャッチがなかったりした場合のエラー処理は何もしていません。コメント文もありません。

とにかく手っとり早く作りました。あまりにひどい部分はご指摘頂けるとうれしいです。

さてこのコードをテーマファイル「functions.php」の一番下にでもコピーしてください。そのファイルがわからない人は、WordPress管理画面の左メニューから「外観」→「テーマ編集」を選択して、右のファイル一覧から探せると思います。

「functions.php」ファイルはWordPressで最も重要なファイルの1つなので、修正を加える前には必ずバックアップをとってくださいね。そして問題が起こったらすぐに元に戻してください。修正は自己責任でお願いします。

[php]
function ilink_scode($u) {
if (isset($u[0]) && $u[0]) {
$url = $u[0];
$id = url_to_postid($url);
$title = esc_html(get_the_title($id));
}else{ return; }

if (has_post_thumbnail($id)) {
return sprintf(
‘<div class="linkbox"><a href="’. $url .’">’ . get_the_post_thumbnail($id,array(120,120),array("alt"=>$title, "class"=>"", "align"=>"left")) . ‘<p>’. $title .'</p></a><div class="nlsns"><div class="nlsns_hatebu"><a href="http://b.hatena.ne.jp/entry/’ . $url .’/" class="hatena-bookmark-button" data-hatena-bookmark-title="’ . $title . ‘" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"> <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script></div>
<div class="nlsns_tw"><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-via="yume_pyon" data-url="’ . $url .’/" data-text="’ . $title . ‘">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
<div class="nlsns_pocket"><a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="’ . $url .’/" data-pocket-count="horizontal" data-pocket-align="left" >Pocket</a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></div></div></div><br style="clear:both" />’ );
}else{ return; }
}
add_shortcode("interlink", "ilink_scode");
[/php]

コード一番最後の1行だけが、上のプログラムをショートコードに登録してる部分です。要するに記事内で[[interlink]]というショートコードを書くと、プログラム「ilink_scode」が呼び出されます。

分かる人は不要なソーシャルボタンを外したり、又は加えたりしてください。

もう1つ、次の装飾用のCSS（スタイルシート）もテーマファイル「style.css」の一番下にコピーしてください。簡単なコードなのでインデントとかしてませんが、その辺のつっこみはなしでお願いします（汗）

[css]
.linkbox{overflow:hidden;width:600px;border:1px dashed #000;background:#ffffdd}
.linkbox img{margin:5px 22px 5px 15px}
.linkbox p{margin:10px;padding:0;color:#00f;font-size:16px}
.linkbox .nlsns{width:400px;height:20px;margin:10px 0 0 190px}
.linkbox .nlsns div{display:inline}
.twitter-share-button {width:110px !important}
.nlsns_pocket{vertical-align:-2px}
[/css]

さて、どちらのファイルも保存を忘れずに！