Custom Field Templateのショートコードの利用

カスタムフィールドテンプレートを使って
カスタムフィールドテンプレートを使って

タイトルはかなり端折りましたが記事の内容は「Custom Field Templateの「[cft] and [cftsearch] Shortcode Format」内でカスタム投稿をカスタムフィールドの値で並べ替えて○件表示」について。

一つ前の記事に続き自分のメモ用の意味でも記事にします。
今回も同じ様な内容ですが前が長くなったので別の記事にした次第。

簡単に思えた配列の表示でまたまた手こずったのですが、ここで悩んだおかげで値がloop内に読み込まれているかどうかの確認などを試せました。

もっとも、確認できた後はできる前より更に悩ましい気持ちに。なにせそこにデータがあるのに取り出せない訳ですから…。

Custom Field Templateの「[cft] and [cftsearch] Shortcode Format」内でカスタム投稿をカスタムフィールドの値で並べ替えて○件表示

使うテンプレートの場所によってはうまく動作できませんでしたが、カスタムフィールドテンプレートのショートコード設定を使ってループを表示する事もできます。
「Custom Field Template」のショートコードを利用した、page.php内では動作する「カスタム投稿をカスタムフィールドの値で並べ替えて○件表示」についてです。○件はもちろん任意の件数で。
ちなみに恐らく力技ですのでスマートではありません。理由は恐らく使用した点プレートやloopの記述にあるかと思いますので。

「[cft] and [cftsearch] Shortcode Format」内にphpを書きますので、「PHPを使用する」にチェックを入れておく必要があります。

記述

例えば、「カスタム投稿(スラッグは「items」カスタムフィールドに[価格]を設定し、[価格]の大きい順(降順)に並び替えて10件表示」させます。

コードは以下の通り。


<?php $loop = new WP_Query( 'post_type=>items&meta_key=価格&orderby=meta_value_num&order=DESC&posts_per_page=10'); while ( $loop->have_posts() ) : $loop->the_post(); ?>
//ループの内容
<?php endwhile; ?>

この記述でカスタム投稿「items」がカスタムフィールドの「価格」の内容によって並び替えられます。
あとはショートコードを書き出したい箇所に設置すれば完了です。

チェックボックスの値の表示

カスタムフィールドにチェックボックスを設定した場合、データは配列の形式になります。


<?php echo post_custom('キー名:カスタムフィールドの項目名'); ?>

テキストボックスなど配列でない場合は上記のコードで取り出せます。しかし配列は取り出せません。ちなみに、配列に適用すると「Array」と表示されます。


<?php
$mywords = post_custom('キー名:カスタムフィールドの項目名');
foreach ($mywords as $myword) {
	echo $myword;
} ?>

今回いろいろ調べて次々に方法を試し、最終的には上記のコードで表示ができました。

カスタムフィールドのチェックボックスの値毎に装飾を変える

先ほどのチェックボックスの値ごとに装飾を加えたかったので、無理矢理設定したらできたという内容です。
分かり易いように例を挙げます。


[色]
label = 使用した全ての色を選択してください
type = checkbox
value = 赤#黄#青#緑#紫

上記のようにカスタムフィールド設定します。
ここで表現したいのは、チェックボックスで選択した色に応じて背景色を変える事です。


[色]
label = 使用した全ての色を選択してください
type = checkbox
value = <span class="red">赤</span>#<span class="yellow">黄</span>#<span class="blue">青</span>#<span class="green">緑</span>#<span class="purple">紫</span>

結論を言えば、上記のようにカスタムフィールドの項目自体に< span class=”クラス名” > を付けてしまう方法です。なおこの設定をしても記事投稿画面に表示される実際のチェックボックスには< span > は表示されませんので邪魔にはなりません。

あとはcssでクラスごとの色を設定すればOKです。もちろんインラインcssで設定してしまう手もありますが。

結び

思いつきで試した事がうまくいくとうれしいものですが、正規の方法でない場合どこに付加がかかるかわかりません。表示できても問題があるのはいただけませんから。

しかしながら何かしらの方法で実現できた経験は重要かと思います。引き出しが増える訳ですから。あとは適宜思い出せれば、ですが。

3人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄