ワードプレスのテーマを自作しよう！

　画像をブログに挿入する際のタグをショートコードを使って簡略化したいと思います。まず、画像挿入のパターンを挙げます。
　

・画像のみ

<img src="http://～/1.jpg" alt="" width="150" height="150" />

　

・画像＋大画像へのリンク（aタグ）有り

<a href="http://～/1d.jpg">
    <img src="http://～/1.jpg" alt="" width="150" height="150" />
</a>

　

・画像＋キャプション

<div class="wp-caption" style="width: 150px">
  <img src="http://～/1.jpg" alt="" width="150" height="150" />
  <p class="wp-caption-text">キャプション</p>
</div>

　

・画像＋キャプション＋大画像へのリンク

<div class="wp-caption" style="width: 150px">
  <a href="http://～/1d.jpg">
    <img src="http://～/1.jpg" alt="" width="150" height="150" />
  </a>
  <p class="wp-caption-text">キャプション</p>
</div>

　

・画像＋大画像へのリンク（aタグ）有り＋配置指定

<a href="http://～/1d.jpg">
    <img src="http://～/1.jpg" alt="" width="150" height="150" class="alignright" />
</a>

　

・画像＋キャプション＋配置指定

<div class="wp-caption alignleft" style="width: 150px">
  <img src="http://～/1.jpg" alt="" width="150" height="150" />
  <p class="wp-caption-text">キャプション</p>
</div>

　

・画像＋キャプション＋大画像へのリンク＋配置指定

<div class="wp-caption alignleft" style="width: 150px">
  <a href="http://～/1d.jpg">
    <img src="http://～/1.jpg" alt="" width="150" height="150" />
  </a>
  <p class="wp-caption-text">キャプション</p>
</div>

　
　注意したいのは配置指定をした場合、キャプション無しならimgタグ、キャプション有りだとdivタグにalign～が付くことです。
　上に挙げたパターンで殆どの画像挿入はカバーできると思いますが、あとは画像のタイトルがimgタグに付く位でしょうか。このように見てくると画像挿入のパラメータは下の様に整理されます。
　
メイン設定項目

• 画像のURL
• 大画像へのリンク（aタグ）
• キャプション
• 配置指定（alignright等）

サブ設定項目

• 画像の大きさ（width=”" height=”"）
• 画像のタイトル

　
　画像のURL以外のパラメータは全て任意設定ですが、その中で、大画像へのリンク、キャプション、配置指定はHTMLソース生成ががらっと変わるので重視すべきものです。
　という訳で、まず完成コードを示します。これをfunctions.phpに追加しました。

function gazo_hyoji($atts) { 
  extract(shortcode_atts(array(　/*ショートコード内のパラメータを取り出す*/
    'n' => '', /* 画像名 未指定時の初期値 */
    'an' => '', /* リンクする大画像名 */
    'c' => '', /* キャプション */
    'w' => '', /* width */
    'h' => '', /* height */
    'al' => '', /* アライメント */
    't' => '', /* タイトル */
  ),$atts));

  $img_ali = '';/* 初期化 */
  $div_ali = '';

  if($al != '') :/* アライメント指示有りの場合 */
    if($al == 'l') :
      $ali_syu = 'left';
    elseif($al == 'r') :
      $ali_syu = 'right';
    endif ;

    if($c == '') :
      $img_ali = 'class="align'.$ali_syu.'" ';
      $div_ali = '';
    else :
      $img_ali = '';
      $div_ali = ' align'.$ali_syu;
    endif ;
  endif ;

  $haba = '';/* 初期化 */

  if($w != '') :
    $haba = $w;
    $w = 'width="'.$w.'" ';
  endif ;

  if ($h != '') $h = 'height="'.$h.'" ';
  if ($t != '') $t = 'title="'.$t.'" ';

  $url_base = site_url().'/../gazo/';
  $gazo_data = '<img src="'.$url_base.$n.'" alt="" '.$t.$w.$h.$img_ali.'/>';

  if($an != '') :
    $an_1 = '<a href="'.$url_base.$an.'">';
    $an_2 = '</a>';
    $gazo_data = $an_1.$gazo_data.$an_2;
  endif ;

  if($c != '') :
    $cap_1 = '<div class="wp-caption'.$div_ali.'" style="width: '.$haba.'px">';
    $cap_2 = '<p class="wp-caption-text">'.$c.'</p></div>';
    $gazo_data = $cap_1.$gazo_data.$cap_2;
  endif ;

  return $gazo_data;
}
add_shortcode('gazo','gazo_hyoji');/* gazoショートコードが呼ばれたらgazo_hyoji関数を実行する */

　
　注意する点は画像のURLの指定方法です。site_url()を使ってＷＰのインストールdirを基準にして相対指定で画像を呼び出しています。管理人は画像を扱う際、基本的にはメディアライブラリを使いません。従って
　

＜レンタルサーバ内dir構造＞
(DocumentRoot)/wp/(WPのインストールdir)/～
                 /gazo/test/1.jpg ← 画像保管(本番用)
                 
＜ローカルパソコン内dir構造＞
        c:/www/wp/(WPのインストールdir)/～
                 /gazo/test/1.jpg ← 画像保管(バックアップ)

の様な位置に画像があります。その為、

$url_base = site_url().'/../gazo/';

という風に画像URLを設定しました。この場合、入力パラメータとして

[gazo n="test/1.jpg"]

の様に指定すればHTMLソースでのURLは、

http://(ドメイン)/(WPのインストールdir)/../gazo/test/1.jpg

となります。不格好なのですが、こうすることによってローカルでもネット（レンタルサーバ）でも画像の読み出しができます。当然その場合は両方に画像ファイルを同様のdir構造で置いておくことが前提ですが、どっちみちファイルのバックアップでコピーは取るのですから有効利用という位置付けです。
　
　後はこのSCをAddQuicktagプラグインを使って登録すれば投稿画面でボタンをクリックするだけでパッとSCの雛型が出ます。こんな風に↓。

[gazo n="" an="" c="" t="" w="" h="" al=""]

　それでは実際に画像挿入をしてみます。
　

・画像のみ、タイトル有り

　ショートコードは

 [gazo n="test/tori1.jpg" t="てすと" w="180" h="100"]

　

・画像＋キャプション＋大画像へのリンク＋配置指定（右寄せ）、タイトル有り

　ショートコードは

 [gazo n="test/tori1.jpg" an="test/tori1d.jpg" c="図1.キャプション例です。" t="てすと" w="180" h="100" al="r"]

　
　これでかなり自由度の高い画像挿入ができるようになりました。