
WordPressの固定ページにシミュレーターを挿入する方法
WordPressの固定ページにシミュレーターを挿入する方法です。
WordPressの固定ページに特定のカテゴリーの投稿一覧を表示するという方法で挿入してみたいと思います。
その方法として、
・プラグイン【Exec-PHP】で固定ページ内でphpが使えるようにする
・phpファイルを作成して固定ページ内にInclude
などがあるそうですが、今回は、「phpファイルを作成して固定ページ内にInclude」でやってみます。
1.投稿ページにシミュレーターを作成する
記事内でJavaScriptを動作させるプラグイン【Inline Javascript Plugin】をインストール/有効化したうえで、
投稿ページにJavaScriptでシミュレーターを作成します。
↓↓こんな感じに書きました↓↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
[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> |
そして、”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/
2.function.phpにPGMを追記
記事内/固定ページ内にphpファイル(任意のファイル)を読み込ませるには、記事内にショートコードを書く。
そのショートコードを有効にするために、テーマ内(≪フォルダ名≫/wp-content/themes/≪使用しているテーマ≫/)のfunctions.phpの最後に以下を追記。
1 2 3 4 5 6 7 8 9 10 |
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'); |
3.phpファイルを作成
シミュレーター1つを表示するので、カテゴリー:Simulator の記事1つを取得するためのphpファイルを作成。
1 2 3 4 5 6 |
<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行目は、記事タイトルを表示し、その記事へリンクさせる記述です。
4.ショートコードを固定ページのシミュレーター挿入部分に記入する
phpファイルをテーマ内(≪フォルダ名≫/wp-content/themes/≪使用しているテーマ≫/)にアップロードできたら、一覧を表示したい固定ページの記事内にショートコードを記述。
読み込ませたいphpファイル(今回は yamaguchi_add.php)を作成し、同ディレクトリ(≪フォルダ名≫/wp-content/themes/≪使用しているテーマ≫/)にアップロード。
固定ページ内の任意の場所に以下のショートコードを記述。(ファイル名が yamaguchi_add.php の場合)
[myphp file=’yamaguchi_add’]
以上で固定ページにシミュレーターを挿入することができました!!!
↓↓参考にさせていただいたサイト↓↓
【wordpress】固定ページに特定カテゴリーの投稿一覧をプラグインなしで表示させる方法
http://kawatama.net/web/1123