wordpress カスタムフィールドを使って時間割を更新しやすくする方法

wordpress カスタムフィールドを使って時間割を更新しやすくする方法

こんばんは、taisonです。
昨日マネーフォワードというアプリをダウンロードして使ってみたのですが、ものすごい便利ですね!
資産周りのデータを一括管理できるってこんな便利なことなのか!と思いました。

銀行データなどの連携もid、パスワード入れて連携ボタン押すだけでめちゃくちゃ簡単!
気になる人はぜひ使ってみて下さい。

さて、話を戻しまして今回の記事。
wordpressの記事の中にも一括管理したいデータってありますよね。

それはエクセルのような表型データだったり時間割のような表だったり。
(表しか言ってないな)

今回はカスタムフィールドを使ってこれらの管理をしやすくしちゃいましょう。

やり方は簡単!名前と値を打ち込んで更新ボタンを押すだけです。
さぁ、行ってみましょう!

まずカスタムフィールドの項目を作る

先日カスタムフィールドの値を記事内に、、、という記事を書きました。

wordpress初心者でも楽勝!カスタムフィールドの項目を取得してページ上に表示してみる

やることは同じくショートコードを用いるのですが、今回は表型にしていきたいので、一つの名前に対して複数の値を設定していきます。
試しに時間割を作ってみましょう。

1週間の予定を入れるテーブルを作る

まず先に表の枠組みをtable要素で作ります。


<h3>一日の予定</h3>
<table>
	<tbody>
        <tr>
			<th>9:00</th>...<th>15:00</th>
	    </tr>
	    <tr>
			[week] //tdは入れない
	    </tr>
	</tbody>
</table>

tdを入れるtr要素は先にショートコードを入れておきます。([week]ってやつ)
ここにtd要素と共に、カスタムフィールドの値を入れていく訳ですね。

カスタムフィールドに名前と値の項目を作る

次にカスタムフィールドに項目を作りましょう。
今回は一つの名前に複数項目を設定するので、以下のようにまとめます。

名前: kamoku
:算数,理科,国語,体育,社会,道徳,図工

半角カンマ(,)で区切るのが重要です。このカンマは区切るポイントとして指定するので、打つ場所を間違えないよう配置しましょう。
ちなみにこの時間割をコピペすると昼飯抜きの時間割になるので、嫌な人は適宜調整してください。

これで記事側の準備はok

function.phpに値を取得するコードを書く

次はfunction.phpに移動して、コードを追記していきます。

function.phpに移動しましたでしょうか?
それでは実際に呼び出すコードを書いていきます。


function dayOfTheWeeks($atts){
	if( post_custom('kamoku')){
	$items = explode(",", post_custom('kamoku'));
$html="";
	foreach($items as $value){
	$html.= "".$value."; 
} 
return $html; 
} 
} 
add_shortcode('week','dayOfTheWeeks');

さあ、恒例の文章で紐解きます。

kamokuの項目に値があったら、(if)
データを,で区切って一つずつ仮メモリー($items)に入れます。($items explode)
仮メモリーデータをメモリー(value)に移して、データの数(今回は7)だけ処理を繰り返したら終了(foreach)
値を出力します。(return)

これでfunction.phpの設定は完了です。

記事に戻って反映を確認してみる

ここまで出来たら一度表示されているか確認してみましょう。

紐付けるデータの名前を間違えていなければ、この段階で表示されているはずです。
(functionでミスってたらその時点で白画面エラーですから)

無事、表示出来ましたでしょうか?出来たらちょっと応用編

科目を一週間分用意して出力を便利にしたい

例えば先ほどの時間割が1日分でなく、1週間分決まっているとします。毎日この科目をさっきのショートコードで更新してると、なんだか時間を無駄にしている気持ちになりますよね。
そんな時はちょっとコードを修正してラクをしちゃいましょう。

 


<h3>一日の予定</h3>
<table>
	<tbody>
            <tr>
		<th>9:00</th>...<th>15:00</th>
	    </tr>
	    <tr>
		[week name="week1"] //tdは入れない
	    </tr>
                 .
                 .
                 .
                 .
	    <tr>
		[week name="week7"] //tdは入れない
	    </tr>
	</tbody>
</table>

まず7日分の表示領域を確保。さっきのテーブルにtrとショートコードを付け足してください。
name=”week○”の数字部分は1から7まで順番に数字を振ってください。

次にカスタムフィールド項目を7つ用意します。

名前: week1からweek7まで
: 算数,理科,国語,体育,社会,道徳,図工(それぞれの値に順不同で設置)

コピペすると当然1週間の科目時間がまったく一緒になります。嫌な人は、、、

さて、次はfunction.phpです。

ショートコードに値を自由に変えられる処理を追加する

先ほどのショートコードにちょっと追加します。


function weekschedule($atts){
	extract(shortcode_atts(array(
		'id' =>get_the_ID(),
		'name' => ""
	), $atts));

	$item = get_post_meta($id,$name, true);
	if( post_custom($name)){
	$items = explode(",", post_custom($name));
$html="";
	foreach($items as $value){
	$html.= "".$value."
"; } return $html; } } add_shortcode('week','weekschedule');

同じく文章で紐解きます。

まず値入力装置を作って$itemを変更できるようにする(extract)
$itemの名前($name)を判別してその項目に値があったら、(if)
データを,で区切って一つずつ仮メモリー($items)に入れます。($items explode)
仮メモリーデータをメモリー(value)に移して、データの数(今回は7)だけ処理を繰り返したら終了(foreach)
値を出力します。(return)

太字が変更箇所です。
前は直接判定する所(ifのpost_custom)にカスタムフィールドの名前を””で囲って入れていましたが、今回は変動するため、$nameという変数をextractで作って設置しています。

先ほどショートコードを書く際に、week○に数字を当てていたのは、そのためです。
名前をきっかけにその値を取り出す作戦。これで、一日の時間を無駄にしなくてすみますね。
(まあweb上で時間割更新する人なんてそうそういないだろうが 汗)

コードが書けたら、同じようにページで表示確認をしてみてください。

コードを活用してwordpressをどんどん便利にしていきましょう

今回のキモとしては、定期変更する部分を記事本文とある意味切り分ける。という所にあります。
定期変更するのを、wordpressで毎回本文いじってやるのは結構疲れますからねぇ。

なるべく見やすい場所で、位置関係を気にせず更新できるのは、なかなかのメリットではないでしょうか。

便利、快適にできるところはどんどん変えていきましょう。
それを手軽にできるのがwordpressの利点ですから。
それでは、また!

wordpressカテゴリの最新記事