記事の定型文をショートコード化する

記事の最後はツイッターなどのSNSリンクを貼ったり、定型文で終わる人も多いですよね。でもいちいちリンクを貼るのがめんどくさい!という無精者のあなた(と私)にぴったりなショートコードを作ってみました。

スポンサーリンク

ショートコードとは?

WordPress.comによると、「ワードプレスのために作られた、複雑なコードを1行で済ませることができるショートカット」とあります。つまりこれを使いこなせば、どんどん時短ができるという優れもの!

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

今回参考にさせてもらったのはWeb Design Recipeさんの「22のWordPressカスタマイズハック」です。いつもありがとうございます!

〆のTwitterリンク部分をショートコード化

今回は毎回記事の最後で「ではRyo@nydewebdesignでしたー♪」としている名前&リンク部分をショートコード化したいと思います。

function.phpに追記

function.phpに好きな関数を定義して、下記のショートコードを加えます。(function.phpを触る前にバックアップを取ることをお忘れなく!)

function follow_me () {
return '<a href="//twitter.com/nydewebdesign">Ryo@nydewebdesign</a>';
}
add_shortcode('follow', 'follow_me');

functionの後のfollow_meは好きな関数名にして、Twitterのリンクは自分のものに変更してください。add_shortcodeの後の”follow”の部分が[ ]内に入るコード名です。 これで記事内で [ follow]と書けばRyo@nydewebdesignと表示されます。※実際は[の後の空白は削除してください。今はショートコードが作動しないようにわざと空白を入れています。

ツイッターの鳥さんアイコンを追加

せっかくなので、名前の左にツイッターのアイコンも足してみます。今回は500種類以上のWebアイコンが使えるFont Awesomeを利用します。 Font Awesomeはファイルをダウンロードする方法CDN(コンテンツデリバリーネットワーク)で使用する方法がありますが、後者のほうがエンドユーザーに優しいそうなので、そちらを使用しています。 <head>要素内に「https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css」の1行を足せばFont Awesomeが使えるようになります。簡単ですねー。参考:https://www.bootstrapcdn.com/fontawesome/

header

Font Awesomeのもっと詳しい使い方はHAM MEDIA MEMOさんの「楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips」がとても参考になります。

アイコンを関数内に追加

twitter_icon

ツイッターアイコンは<i class="fa fa-twitter"></i>と書けばOKです。あとでcssで修正することも考えて、関数全体をspanで囲っておきます。

twitter_function

最後にcssでアイコンをツイッターの色にして完成!ついでにマウスを合わせた時にリンク全体がピンクになるようにしました。

twitter_css02

これで[ follow]と書けばRyo@nydewebdesignと表示されます╭( ・ㅂ・)و ̑̑ グッ !

ちょっとした時短ですが、毎日書くことを思えばかなりお得!何か他にも便利なショートコードを見つけたら紹介したいと思います。

では、Ryo@nydewebdesignでしたー♪

スポンサーリンク

 

シェアする

  • このエントリーをはてなブックマークに追加

フォローする