日別アーカイブ: 2011年5月27日

ショートコードを使って画像を貼り込む

以前、スラッグを使ってリンクを貼るで書いたのと同じ方法で、画像を貼り込むことも出来ます。出力をimgタグにするだけなんで、簡単です。

そもそもWordPressにはメディア管理機能があるんですが、個人的にはファイル等をscpを使って自分で配置して表示したいので、ショートコードを使って画像を表示しています。さらに、TwitPicをよく使うので、それにも対応しました。

まず、普通に自分のサーバーに置いてある画像を表示する部分はこう書いています。右寄せやCSSのクラスなど、いろいろとオプションを指定できるようにしています。

function effy_img($atts,$content=null)
{
  extract(shortcode_atts(array(
      'path'   => '',
      'align'  => '',
      'clear'  => 'none',
      'class'  => '',
      'alt'    => ''
      ),$atts));
  if(trim($path)=='')
    return "";
  if($alt=='')
    $alt = $path;

  return "<img src='".effy_files_url($path)."' ".
         "style='clear:$clear;' alt='$alt' ".
         "class='align$align $class' />";
}
add_shortcode('img','effy_img');

さらに、サムネイルをクリックすると拡大画像のURLへ飛ぶためのショートコードもつくっています。これも昔の自作CMSで似たような機能を作っていたので実装してみました。

たとえば、[s-img path="2009/12/31f.jpg"]と書けば、このようにリンク付きのサムネイルを貼り込むことができます。

2009/12/31f.jpg
function effy_s_img($atts,$content=null)
{
  extract(shortcode_atts(array(
      'path'   => '',
      'target' => '_blank',
      'align'  => '',
      'clear'  => 'none',
      'class'  => '',
      'alt'    => ''
      ),$atts));
  if(trim($path)=='')
    return "";
  if($alt=='')
    $alt = $path;

  $s_img_path = dirname($path).'/s-'.basename($path);
  $a_url = effy_files_url($path);
  $img_url = effy_files_url($s_img_path);
  return "<a href='$a_url' target='$target'>".
         "<img src='$img_url' style='clear:$clear;' ".
         "alt='$alt' class='align$align $class' />".
         "</a>";
}
add_shortcode('s-img','effy_s_img');

そして、TwitPicに投稿した画像の表示。

function twitpic_img($atts,$content=null)
{
  extract(shortcode_atts(array(
      'id'     => '',
      'target' => '_blank',
      'align'  => '',
      'clear'  => 'none',
      'size'   => '',
      'class'  => '',
      'alt'    => ''
      ),$atts));
  if(trim($id)=='')
    return "";

  $size = in_array($size,array('large','full','big')) ? 'full' : 'thumb';
  $img_url="http://twitpic.com/show/".$size."/".$id;
  return "<a href='http://twitpic.com/$id' target='$target'>".
         "<img src='$img_url' alt='$alt' style='clear:$clear;' ".
         "class='align$align $class' />".
         "</a>";
}
add_shortcode('twitpic','twitpic_img');

こんな感じで、自作の子テーマのfunctions.phpに書いておけば、素早く画像を貼り込めるようになりました。

例えば、[twitpic id="52aqa6" align="right"]と書けば、右側にこのように貼り込めます。

普通は画像を表示しようとすると投稿のソースにHTMLでimgタグが書かれてしまって汚くなるのですが、ショートコードを使うとソースが汚くならなくて済むので、お気に入りです。