WordPressの固定ページにシミュレーターを挿入する方法

2016年7月20日 · by Satoko.Y · in Wordpress

WordPressの固定ページにシミュレーターを挿入する方法です。

WordPressの固定ページに特定のカテゴリーの投稿一覧を表示するという方法で挿入してみたいと思います。

その方法として、

・プラグイン【Exec-PHP】で固定ページ内でphpが使えるようにする
・phpファイルを作成して固定ページ内にInclude

などがあるそうですが、今回は、「phpファイルを作成して固定ページ内にInclude」でやってみます。

１．投稿ページにシミュレーターを作成する

記事内でJavaScriptを動作させるプラグイン【Inline Javascript Plugin】をインストール/有効化したうえで、

投稿ページにJavaScriptでシミュレーターを作成します。

↓↓こんな感じに書きました↓↓

[inline]
[script type="text/javascript"]

function keisan(){

// 設定開始

var tax = 8; // 消費税率

// メーカー/Kw数
var price1 = parseInt(document.form1.goods1.value); // 選択したものの値段出力
document.form1.field1.value = price1; // 値段を表示

// 屋根形状
var price2 = parseInt(document.form1.goods2.value); // 選択したものの値段出力
document.form1.field2.value = price2; // 値段を表示

// 屋根材
var price3 = parseInt(document.form1.goods3.value); // 選択したものの値段出力
document.form1.field3.value = price3; // 値段を表示

// 合計を計算
var total1 = price1 + price2 + price3;

// 設定終了

document.form1.field_total1.value = total1; // 合計を表示

var tax2 = Math.round((total1 * tax) / 100);
document.form1.field_tax.value = tax2; // 消費税を表示

document.form1.field_total2.value = total1 + tax2; // 税込合計を表示

}

[/script]
[/inline]

<form action="#" name="form1">
<table>
<tbody>
<tr>
<th>カテゴリ</th>
<th colspan="2">--</th>
<th>金額</th>
</tr>
<tr>
<td>メーカー/Kw数</td>
<td colspan="2"><select name="goods1" onchange="keisan()">
<option value="0">--なし--</option>
<option value="100">パナソニック/5kw</option>
<option value="200">長州産業/5kw</option>
<option value="300">ソーラーフロンティア/5kw</option>
<option value="400">トリナソーラー/5kw</option>
</select></td>
<td><input name="field1" size="8" type="text" value="0" /> 円</td>
</tr>
<tr>
<td>屋根形状</td>
<td colspan="2"><select name="goods2" onchange="keisan()">
<option value="0">--なし--</option>
<option value="100">切妻</option>
<option value="200">寄棟</option>
<option value="300">片流れ</option>
</select></td>
<td><input name="field2" size="8" type="text" value="0" /> 円</td>
</tr>
<tr>
<td>屋根材</td>
<td colspan="2"><select name="goods3" onchange="keisan()">
<option value="0">--なし--</option>
<option value="100">瓦</option>
<option value="200">スレート</option>
</select></td>
<td><input name="field3" size="8" type="text" value="0" /> 円</td>
</tr>
<tr>
<td colspan="3" align="right">合計</td>
<td><input name="field_total1" size="8" type="text" value="0" /> 円</td>
</tr>
<tr>
<td colspan="3" align="right">消費税</td>
<td><input name="field_tax" size="8" type="text" value="0" /> 円</td>
</tr>
<tr>
<td colspan="3" align="right"><strong>税込合計</strong></td>
<td><input name="field_total2" size="8" type="text" value="0" /> 円</td>
</tr>
</tbody>
</table>
</form>

[inline]

[script type="text/javascript"]

function keisan(){

// 設定開始

var tax = 8; // 消費税率

// メーカー/Kw数

var price1 = parseInt(document.form1.goods1.value); // 選択したものの値段出力

document.form1.field1.value = price1; // 値段を表示

// 屋根形状

var price2 = parseInt(document.form1.goods2.value); // 選択したものの値段出力

document.form1.field2.value = price2; // 値段を表示

// 屋根材

var price3 = parseInt(document.form1.goods3.value); // 選択したものの値段出力

document.form1.field3.value = price3; // 値段を表示

// 合計を計算

var total1 = price1 + price2 + price3;

// 設定終了

document.form1.field_total1.value = total1; // 合計を表示

var tax2 = Math.round((total1 * tax) / 100);

document.form1.field_tax.value = tax2; // 消費税を表示

document.form1.field_total2.value = total1 + tax2; // 税込合計を表示

}

[/script]

[/inline]

<table>

<tbody>

<tr>

</tr>

<tr>

<option value="100">パナソニック/5kw</option>

<option value="300">ソーラーフロンティア/5kw</option>

<option value="400">トリナソーラー/5kw</option>

</select></td>

</tr>

<tr>

</select></td>

</tr>

<tr>

</select></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</form>

そして、”Simulator”というカテゴリースラッグも作成し、この記事のカテゴリーを”Simulator”にしておいてください。

↓↓参考にさせていただいたサイト↓↓

WordPressにJavaScriptを投稿しても動かない！
http://mislead.jp/836.html
自動計算フォームAタイプ（消費税あり）
http://www.tagindex.com/javascript/form/comp1a.html

WordPressブログ管理者必見！『スラッグ』を活用しよう
http://www.infact1.co.jp/staff_blog/webmarketing/4853/

２．function.phpにPGMを追記

記事内/固定ページ内にphpファイル（任意のファイル）を読み込ませるには、記事内にショートコードを書く。

そのショートコードを有効にするために、テーマ内（≪フォルダ名≫/wp-content/themes/≪使用しているテーマ≫/）のfunctions.phpの最後に以下を追記。

function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
    include(get_theme_root() . '/' . get_template() . "/$file.php");
    return ob_get_clean();
}
 
add_shortcode('myphp', 'Include_my_php');

function Include_my_php($params = array()) {

extract(shortcode_atts(array(

'file' => 'default'

), $params));

ob_start();

include(get_theme_root() . '/' . get_template() . "/$file.php");

return ob_get_clean();

}

add_shortcode('myphp', 'Include_my_php');

３．phpファイルを作成

シミュレーター1つを表示するので、カテゴリー：Simulator の記事1つを取得するためのphpファイルを作成。

<div>
 <?php $blog_posts = query_posts('category_name=Simulator&showposts=1');
 foreach($blog_posts as $post): ?>
 <p><a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title; ?></a></p>
 <?php endforeach; ?>
</div>

<div>

<?php $blog_posts = query_posts('category_name=Simulator&showposts=1');

foreach($blog_posts as $post): ?>

<p><a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title; ?></a></p>

<?php endforeach; ?>

</div>

※2行目の category_name=〇〇にカテゴリースラッグを,showposts=〇には表示させる件数を入れます。
※3行目は、記事タイトルを表示し、その記事へリンクさせる記述です。

４．ショートコードを固定ページのシミュレーター挿入部分に記入する

phpファイルをテーマ内（≪フォルダ名≫/wp-content/themes/≪使用しているテーマ≫/）にアップロードできたら、一覧を表示したい固定ページの記事内にショートコードを記述。

読み込ませたいphpファイル(今回は yamaguchi_add.php)を作成し、同ディレクトリ（≪フォルダ名≫/wp-content/themes/≪使用しているテーマ≫/）にアップロード。
固定ページ内の任意の場所に以下のショートコードを記述。（ファイル名が yamaguchi_add.php の場合）

[myphp file=’yamaguchi_add’]

以上で固定ページにシミュレーターを挿入することができました！！！

システムHP用シュミレーター画像