恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

WordPressでJSONファイルを読み込む方法

投稿日:

wp_php

 

今日はWordpressにJSONファイルを読み込む方法を紹介します。

試しに下記のJSONファイルを使ってみます。

{
	"test":{
		"alphabet":{
			"texts":[
                "ABC",
                "DEF",
                "GHI"
            ],
			"type":"ALPHABET"
		},
		"katakana":{
			"texts":[
                "アイウエオ",
                "カキクケコ",
                "サシスセソ"
            ],
			"type":"カタカナ"
		},
		"hiragana":{
			"texts":[
                "あいうえお",
		"かきくけこ",
                "さしすせそ"
            ],
			"type":"ひらがな"
		}
    },
    "type_name":["alphabet","katakana","hiragana"]
}

 

次に、functions.phpに以下のコードを記述します。

<?php
function get_json($path){
    $json = file_get_contents($path); //変数にjsonファイルの内容をすべて文字列に読み込む
    $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN'); //文字化けしないように
    $arr = json_decode($json,true); //受け取ったデータを連想配列にする(trueがないとなりません)
    return $arr;
}
?>

 

これでJSONファイルを読み込む準備が整いました。

次に、JSONファイルを読み込みたいphpファイルの場所でパスをつないで上述の関数を呼び出します。

<?php
if(strstr($home_url,'localhost')){
  //ローカル環境(相対パス)
  $json_arr = get_json($template_path."/json/test.json");
}else{
  //サーバー環境(絶対パス)
  $json_arr = get_json($absolute_path."/common/test.json");
}
?>

 

URLの条件分岐等でサーバーとローカルのパスを絶対パスと相対パスに使い分けていますが、この部分は絶対パスでエラーが出る場合はローカルに修正する等環境によって書き換えてください。

これで変数にJSONファイルを配列として変数に格納することができました。

あとはこの変数を使って自由にループ処理等で使うことができます。
foreachで出力するならこんな感じになります。

<?php
$names = $json_arr["type_name"];
foreach($names as $name){
    $texts = $json_arr["test"][$name]["texts"];
    $type = $json_arr["test"][$name]["type"]
    echo '<h2>'.$type.'</h2>'
    foreach($texts as $text){
        echo '<p>'.$text.'</p>';
    }
}
?>

 

結果のHTML

  <h2>ALPHABET</h2>
  <p>ABC</p>
  <p>DEF</p>
  <p>GHI</p>
  <h2>カタカナ</h2>
  <p>アイウエオ</p>
  <p>カキクケコ</p>
  <p>サシスセソ</p>
  <h2>ひらがな</h2>
  <p>あいうえお</p>
  <p>かきくけこ</p>
  <p>さしすせそ</p>

 

コンテンツ量が多いサイトではデータを一か所にまとめておくことで管理のしやすさや修正の手間が省けて非常に便利なのでぜひ使っていきましょう。

この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。