wordpressでテンプレートフォルダのパスをショートコードに登録するぜ完全版

2010年11月16日

記事内でテンプレートフォルダまでのパスを表示させるためのショートコードを登録する方法。

テーマフォルダ内の画像を掲載したい！

wordpressの投稿記事本文の中で、テーマフォルダ内の画像を使いたいときがあると思います。

僕の場合、企業サイトをwordpressで構築するときに、そういったケースがちょこちょこあります。通常、静的なページはwordpressの投稿ではなく「ページ」として作成しますが、ページ本文の中で使用する画像を、普通に投稿画面からアップしてしまうと、クライアントが記事を編集する際などに、間違って削除してしまう可能性があります。だから、クライアントが削除できない場所である「テーマフォルダ」内に画像を入れておき、その画像をページ本文の中で使うという手法を使います。

画像のパス・・・どうする？

・・・だが、ちょっと面倒なことが起きます。テンプレートフォルダに置いてある画像を記事本文内に掲載する時に、パスをhttpからのフルパスで指定してしまうと、テスト環境から本番環境へ移行する際（ドメインが変わる場合）、そこの部分を全て書き換えなくてはいけなくなるのです。

移行するときに、どうせsite_urlとかも書き換えなきゃいけないので、sqlコマンドなどでドメイン部分を一括で置換すればいい話なのですが、そしたら、この記事が終わっちゃうので、それはナシ！・・・というか、みなさん、「置換」って、ほんとに置換されてるか不安になりませんか？僕は、なんとなく不安なので、いちいちデータをチェックしてしまい、逆に時間がかかる始末です。・・・そう、Dreamweaverでテンプレートを更新する時に、大量のファイルが書き換えられていく、あのなんとも言えない不安な気持ちに似ています。

かと言って、投稿内でPHPを使えるようにするプラグインは、できれば使いたくない・・・そう、そういうのを入れずに、bloginfo(‘template_url’)が記事内で使えるようになればいいんです。

というわけで、ショートコードを登録する

無駄な前置きでしたが、記事内でテンプレートフォルダのパスを表示させるためのショートコードを登録してみます。

function shortcode_templateurl() {
    return get_bloginfo('template_url');
}
add_shortcode('template_url', 'shortcode_templateurl');

上記コードをfunctions.phpに追加すれば、記事内に[template_url]と記述しておくと、自動的にblobinfo(‘template_url’)の値に置き換えられるようになります。これは簡単ですね。

それだとビジュアルエディタで画像が表示されない

ただ、画像のパスにショートコードを含めると、ビジュアルエディタで画像がリンク切れで表示されなくなります。まあ、そうなるのは当たり前なんですけど、「クライアントに使いやすく」がモットーなので、何とかしたい！・・・そんな時、ズバリの記事を見つけました。

[wp] 自作したショートコードをビジュアルエディタ内で置換する | WebTecNote

・・・ああ、なんだかすごく難しそうだけど、要するに、functions.phpにコードを追加して、jsファイルを1つ追加すればいいってことみたいです。

functions.phpに追加

class EditorPlugin {
    function EditorPlugin() {
        add_action('init', array(&$this, 'addplugin'));
    }
    function sink_hooks(){
        add_filter('mce_plugins', array(&$this, 'mce_plugins'));
    }
    function addplugin() {
       if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
         return;
       //リッチエディタの時だけ追加
       if ( get_user_option('rich_editing') == 'true') {
         add_filter("mce_external_plugins", array(&$this, 'mce_external_plugins'));
       }
    }
    // TinyMCE プラグインファイルを読み込む: editor_plugin.js
    function mce_external_plugins($plugin_array) {
       //プラグイン関数名＝ファイルの位置
       $plugin_array['ShortcodeConv'] = get_bloginfo('template_directory').'/js/editor_plugin.js';
       return $plugin_array;
    }
}
$myeditorplugin = new EditorPlugin();
add_action('init',array(&$myeditorplugin, 'EditorPlugin'));

上記コードは、functions.phpに追加。WebTecNoteさんの記事のコードを特に変えることなく、そのままコピペすれば大丈夫です。

テーマフォルダに/js/editor_plugin.jsを作成

(function() {
    tinymce.create('tinymce.plugins.ShortcodeConv', {
        getInfo : function() {
            return {
                longname : 'Template Image Directory short-code convert',
                author : 'Tenderfeel',
                authorurl : 'http://tenderfeel.xsrv.jp',
                infourl : 'http://tenderfeel.xsrv.jp',
                version : "1.0"
                };
        },
        init : function(ed, url) {
            var t = this;
            ed.onBeforeSetContent.add(function(ed, o) {
                o.content = t._do_code(o.content);
            });
            ed.onPostProcess.add(function(ed, o) {
                if (o.get)
                    o.content = t._get_code(o.content);
            });
        },
            _do_code : function(co) {
                //http://[wp-root]/wp-includes/js/tinymce/
                return co.replace(/\[template_url\]/g, function(a,b){
                        str = tinymce.baseURL.replace(/(.+?)wp-includes\/js\/tinymce/i,'$1wp-content/themes/【テーマフォルダ名】');
                    return str;
                });
            },
            _get_code : function(co) {
                str = tinymce.baseURL.replace(/(.+?)wp-includes\/js\/tinymce/i,'$1wp-content/themes/【テーマフォルダ名】');
                reg = new RegExp('<img([^>]+)('+str+')([^>]+)>','g');
                //a = RegExp全文 b～c = ()の中身
                return co.replace(reg, function(a,b,c,d) {
                    if ( c != "")
                        return '<img'+b+'[template_url]'+d+'>';
                    return a;
                });
            }
        });
    tinymce.PluginManager.add('ShortcodeConv', tinymce.plugins.ShortcodeConv);
})();

上記は、テーマフォルダに/js/editor_plugin.jsとして保存すればOK。コード内の【テーマフォルダ名】の部分は、お使いのフォルダ名に書き換えてください。コード内の著作権情報はWebTecNoteさんのものです。