(記事内リンクにPR含む場合があります)

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

WordPressカスタマイズ

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

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

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

しかし毎回おなじようなHTMLコードを記述したりコピーするのは非効率で面倒だと思いました。でも通常は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]

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

WordPressのショートコード実行方法

記事内にショートコードを書いて実行してみましょう。このプログラムの実行の注意点は次のとおり。テスト環境がなければ、最初はプレビューで見てみるのが安全だと思います。

  • [interlink “http://○○.com/●●/”]のように記述
  • URLは必ず内部リンクであること。外部リンクはNG
  • URLは必ず公開済みで存在してるものを記述
  • 記事にアイキャッチ画像が設定されてること
  • ブログのメインカラムが620px以下の場合、CSSを調整して下さい

さて上の画像のように問題なく表示されましたか。表示がずれるようであれば、CSSを調整してくださいね。

今後の課題

課題はいろいろありすぎます。外部リンクについても作りたいけどサムネイルを作成するサービスを利用する必要がありそうですね。あとソーシャルボタンの付け外しをオプションで選べるようにしないと処理が重すぎます。

アイキャッチ画像のサイズは「array(120,120)」の部分です。要するに「縦と横のうち長い方を120pxになるよう縮小表示」してます。しかし何度か使ってる内に「縦が120pxになるよう縮小表示」できればなお良いと思ってます。

この違いわかりますか。横の長さは常識的であれば何pxでもよく、縦だけ120pxに統一したいのです。もしこの解決法を知ってる人がいればぜひ教えて下さい!他にも課題は山積みですが、改良版できたらまたアップします。

【参考の外部サイト】
WordPressのショートコードを自作してみる | webOpixel

WordPressで作っておくと便利なショートコード何個か – かちびと.net
ゆめぴょんでした。ちゃおっ!

タイトルとURLをコピーしました