攻めは飛車角銀桂守りは金銀三枚

人生、なすがママ、きゅうりがパパ

はてなブログでWordPressのショートコードを実現してみる

WordPressには「ショートコード」という便利な機能があります。

ショートコードとは
en.support.wordpress.com
ってことで、Google先生に訳してもらうと

ショートコードとは、WordPress固有のコードで、少しでも手間をかけずに素晴らしいことをすることができます。 ショートコードは、ファイルを埋め込み、通常は1行に複雑で醜いコードをたくさん必要とするオブジェクトを作成することができます。 ショートコード=ショートカット。

とわかったような、わからないような説明。

手短にいうと [ ] で括られた短い名前を決めて、小難しい内容を簡単に入力できるようにしましょうってことです・・・余計にわからんね。

ということで例。

ふつうはこうやってWordPressの文章は書いていきます。
[moji-red]文字を赤色に変えます。[/moji-red]
赤色になったかいな?

という風に「moji-red」というショートコードを「文字を赤くする」という設定しておいておくと実際に文字が赤くなります。

それをはてなブログでやってしまおうと大胆な行動に出る。

はてなブログでショートコードを実現する

はてなブログでショートコードを実現すると偉そうなことを言っているが実際はショートコードの文字列を置換するだけで行けるはず。

ということではてなブログの「デザイン」→「カスタマイズ」を開き、「フッター」に以下のコードを追加するだけ。

<script>
//ショートコードをHTMLに展開する
function    replaceShortCode( shortCode, before, after )
{
    var ret = document.getElementsByTagName( "body" );
    ret = new String( ret[0].innerHTML ).split( "[/" + shortCode + "]" ).join( after ) ;
    ret = new String( ret ).split( "[" + shortCode + "]" ).join( before ) ;
    document.getElementsByTagName( "body" )[0].innerHTML =ret;
}
//ショートコードを登録する
replaceShortCode('moji-red','<font color="red">','</font>');
replaceShortCode('moji-blue','<font color="blue">','</font>');
</script>

replaceShortCode()の呼び出しはショートコード分、自分で用意しておくように。

あとは記事中に[moji-red]ここは赤文字[/moji-red]、[moji-blue]ここは青文字[/moji-blue]と書けば文字の色が変わるはず。
例:[red]ここは赤文字[/red]、[blue]ここは青文字[/blue]

意外と簡単。
使ってもらうのは自由ですが、でもちゃんとデバッグしてないので何かおかしくなっても責任は取れません。

こんなもんかいな?

引数なぁ・・・めんどくさいので誰かやって、できればreplaceShortCode()をもっとかっこよくして何かグローバルなサービスで公開して誰でも簡単に使えるようにしてもらえれば助かります。

じゃあがんばって。

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

以上、はてなブログでWordPressのショートコードのようなものを実現してみるでした。