エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      2017/03/11

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

 

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を組み込みたい
 
1.Contact Form7の「フォーム」の投稿箇所に直接記述
   →結果:動かない
 
2.違うフォームのプラグイン「MW WP Form」を導入し、同様に投稿欄に直接記述
   →結果:JavaScriptは動いたが、フォームが動かない
 
3.JavaScriptを外部ファイルにし、固定ページにショートコードで取り込み
   →結果:動いたっ!! おぉ!!
 
4.ショートコードでわざわざ取り込まず、固定ページに直接 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がある場所」に詳しく書いています。
 
 
追記するコードは、下記の通り。
ファイル内で、追記する場所が特に決まっているわけではありませんが、一番下あたりに追記しておけば分かりやすいでしょう。
———————————-

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

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

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

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

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

 - WordPress

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

XAMPPのWordPressの更新でFatal error: Maximum execution time of 30 seconds exceededのエラーが発生して失敗する場合の対処方法

XAMPP環境のWordPressアップデート時に「Maximum execution time of 30 seconds exceeded」のエラーが出る。「max_execution_time」を変更して解決する方法の解説。

WordPressの投稿プレビューのURLを変更する方法

プレビューを表示する際のURLを変更する方法の解説。「サイトアドレス (URL)」に基づいて編集されるURLを任意のURLに変更する場合の方法とその解説を行います。

WordPressでダブルクォートなどの文字が自動変換?原因と対処方法

ダブルクォート、シングルクォート、HTMLタグなどが自動変換関数によって入力と違う形で表示されます。原因を2つの関数ごとに説明し、対応方法を3パターン提示します。

Better Delete Revisionを使って WordPressのリビジョンを削除する方法

自動的に溜まるリビジョンは Better Delete Revisionを使うことで簡単に削除することが出来ます。表示の重さを軽減したり、バックアップファイルのスリム化に貢献します。

WordPressのカテゴリやタクソノミーにカスタムフィールド項目を追加する方法

WordPressのカテゴリやタクソノミーに編集する項目を追加する方法の解説。Advanced Custom Fieldsを使うと簡単。テンプレートに記述する方法も解説。

DuplicatorでWordPressを簡単引越し!インストーラー付のバックアップにも

WordPressの引越しや開発環境から本番環境への移行など他の環境に移す作業を簡単にしてくれるプラグインの紹介。インストーラー付のバックアップツールとしても使る。

Custom Post Type UIでカスタム投稿を設定・バージョン1.4対応解説

カスタム投稿をプラグインCustom Post Type UIを使って設定する方法を解説。バージョンアップにより設定する項目も増え、より柔軟な設定ができます。

Category OrderでWordPressのカテゴリを並替えよう

Category Orderは基本機能では並び替えができないカテゴリを並び替える機能を提供するプラグインです。ドラッグ&ドロップで並び替えができる簡単インターフェイスです。

WP Customer ReviewsでWordPressにオリジナルの口コミサイトを構築

口コミサイトを構築するためのプラグイン。独自フォームによるレビュー、評価点を投稿でき、入力項目の追加もできます。

Custom Post Type UIでカスタム投稿を設定し編集する方法解説

カスタム投稿を追加、管理するプラグインCustom Post Type UIの使い方の解説です。プラグインの解説ではあるものの、カスタム投稿の仕様の解説でもあります。