WordPress 任意のファイルを読み込むショートコードの処理

2014/05/22 2014/07/21

任意のファイルを読み込むショートコードを作る

WordPressのショートコードとは？

　
投稿ページや固定ページで PHPの実行結果を編集したい場合にはショートコードを使用します。
　
そのショートコードの詳細な使い方については「WordPress投稿にPHPを記述するショートコードの使い方add_shortcode」に詳しく書いていますのでそちらをご覧ください。
　
　

任意のファイルを読み込むショートコードを作成するに至った経緯

　
フォームのプラグイン「Contact Form 7」とオリジナルの JavaScriptを組み込んだフォームを作成したい、と思ったのがきっかけなのですが、その時の勘所悪げな悪戦苦闘をした記録なのです。
　
ちなみに、これを試したのは、まだ WordPressを初めて日が浅いころでした．．．（と、少し言い訳を。）
　
WordPressのお問い合わせフォームである Contact Form 7、MW WP Formについての解説は、下記に記事を書いていますので参考にしてください。
Contact Form 7使い方詳細解説・WordPressメールフォーム
 WordPressの確認画面付フォーム MW WP Formの使い方詳細解説
　
　
フォームに JavaScriptを組み込みたい
　
１．Contact Form7の「フォーム」の投稿箇所に直接記述
　　　→結果：動かない
　
２．違うフォームのプラグイン「MW WP Form」を導入し、同様に投稿欄に直接記述
　　　→結果：JavaScriptは動いたが、フォームが動かない
　
３．JavaScriptを外部ファイルにし、固定ページにショートコードで取り込み
　　　→結果：動いたっ！！　おぉ！！
　
４．ショートコードでわざわざ取り込まず、固定ページに直接 JavaScriptを書けばいい
　　　→結果：あとの祭り．．．
　
　
WordPressに慣れている方であれば、フォームの部分は「Contact Form7」「MW WP Form」といったプラグインを使ったとしても、その他のデザインなどのページ部分はフォームのショートコードを記述する固定ページ側に記述するものだと理解していると思います。
当然ながら、JavaScriptの記述も固定ページの投稿部分に記述するものだと理解していると思います。
　
しかしながら、まだまだ WordPressに慣れていない私は無理やり「Contact Form7」のフォームの記述部分に書こうとしてしまったわけなのです。
　
　
まず「Contact Form7」でやってみてうまく動かず、続けて「MW WP Form」でやってみてもうまく動かず．．．
　
そして、フォームに直接記述するのが問題なら、JavaScriptの部分を外部ファイルにして読み込めば．．．と思いつくものの、フォームにどうやって組み込めばいいか分からず。
　
そしてついに、固定ページ側で読み込めばいい！ということを思いついたわけです。
そこで、今回の記事の「固定ページの投稿に任意のファイルを読み込むためのショートコード」を作ろう、と思い至ったわけです。
　
最初に紹介した「WordPress投稿にPHPを記述するショートコードの使い方add_shortcode」でショートコードのことについて書きましたが、そもそもショートコードを学んだのは、この任意のファイルを取得するためのものだったのです。
　
　
さてさて。
任意のファイルを投稿ページ、固定ページに読み込むための方法は、まず、ショートコードの関数を追記します。
　
記述するファイルは、下記の「functions.php」です。
/{WordPressがインストールされている場所}/wp-content/themes/{テーマ名}/functions.php
　
functions.phpが置いてある場所については、「WordPressの functions.phpがある場所」に詳しく書いています。
　
　
追記するコードは、下記の通り。
ファイル内で、追記する場所が特に決まっているわけではありませんが、一番下あたりに追記しておけば分かりやすいでしょう。
———————————-

function show_file_func( $atts ) {
  extract( shortcode_atts( array(
    'file' => ''
  ), $atts ) );

  if ($file!='')
    return @file_get_contents( TEMPLATEPATH . '/' . $file );
}
add_shortcode( 'show_file', 'show_file_func' );

function show_file_func( $atts ) {

extract( shortcode_atts( array(

'file' => ''

), $atts ) );

if ($file!='')

return @file_get_contents( TEMPLATEPATH . '/' . $file );

}

add_shortcode( 'show_file', 'show_file_func' );

———————————-
　
投稿ページに記述するショートコードは以下の様に、取り込むファイル名を引数に記述します。
———————————-

[show_file file="fine_name.html"]

1	[show_file file="fine_name.html"]

———————————-
　
また、引数として記述した取り込むファイルは、下記の場所に置きます。
/{WordPressがインストールされている場所}/wp-content/themes/{テーマ名}/
　
　
参考にしたサイトは以下。
　http://kachibito.net/wordpress/easily-display-external-files.html
　
　
この参考したサイトのそのままでは URLは読み込めましたが、ファイルを読み込めませんでしたので、その部分を修正しています。
ただ、逆に URLを指定しての読み込みができなくなりました。
　
そんなわけで、URLを指定する場合は、「http://」があるかなしかで分岐処理を作る必要があるんでしょうね。
．．．と書こうと思いましたが、その分岐の処理も大したことがないので書きました。下記の様になりますね。とりあえず、これを書いておけばいいんじゃないでしょうか。
　
———————————-

function show_file_func( $atts ) {
  extract( shortcode_atts( array(
    'file' => ''
  ), $atts ) );

  if ($file!='') {
    if ( preg_match ( '/^https?:\/\//', $file ) ) {
      return @file_get_contents($file);
    } else {
      return @file_get_contents( TEMPLATEPATH . '/' . $file );
    }
  }
}
add_shortcode( 'show_file', 'show_file_func' );

function show_file_func( $atts ) {

extract( shortcode_atts( array(

'file' => ''

), $atts ) );

if ($file!='') {

if ( preg_match ( '/^https?:\/\//', $file ) ) {

return @file_get_contents($file);

} else {

return @file_get_contents( TEMPLATEPATH . '/' . $file );

}

add_shortcode( 'show_file', 'show_file_func' );

———————————-
　
　
と、この試行錯誤のことをブログに書こうと思ったところでふと気づいたのです。
　
わざわざこんなことしなくても、固定ページに直接 JavaScriptの処理を記述すればよかったのでは？と。
もちろん、JavaScriptを記述するだけなら固定ページに直接記述すれば事足りました。
　
　
でも、でも！！
新しい知識を身に付けたことは喜ぶべきことですっ！！！
　
　

WordPressにはファイルを読み込む処理が用意されている

　
さらに後日談として．．．
もっと簡単な方法があることが判明！！
　
そもそも WordPressには、ファイルを読み込む関数が用意されているのです！
　
そのため、単純にファイルを呼び出して投稿ページなどに表示するだけなら、わざわざショートコードを作らずとも簡単にできてしまうのです。
　
詳しくは、下記を参照してください．．．
WordPress内のファイルを指定する際のパスの書き方なんかも参考になります。
　http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=2789&rand=c80a2

- WordPressの基本設定