質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • PHP

    19209questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    6669questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Advanced Custom FieldsのRepeater Fieldを使って年分けした沿革を作りたい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 156

ttaishi

score 14

現在、Advanced Custom FieldsのRepeater Fieldを使って
「沿革」と命名した繰り返し項目があります。
「沿革」内には「日付:デイトピッカー」「事柄:テキスト」の項目を設定しています。

これまでは、Advanced Custom Fieldsのマニュアルにあるように、
標準的な方法で表示していました。

<ul>
<?php if(have_rows('沿革')): ?>
<?php while(have_rows('沿革')): the_row(); ?>
<li><?php the_sub_field('日付'); ?> <?php the_sub_field('事柄'); ?></li>
<?php endwhile; ?>
<?php endif; ?>
</ul>

しかし、表示項目が長くなってきたのもあって、
年別に出力し、アコーディオンメニューの処理を行いたいと考えています。

出力イメージは下記のような内容です。

<ul>
<li>
<h1>2017年</h1>
<ul>
<!--ここからがRepeater Fieldで出力したい部分です-->
<li>2017.01.01 テキストテキスト</li>
<li>2017.01.01 テキストテキスト</li>
<!--ここまでがRepeater Fieldで出力したい部分です-->
</ul>
</li>
<li>
<h1>2016年</h1>
<ul>
<!--ここからがRepeater Fieldで出力したい部分です-->
<li>2016.01.01 テキストテキスト</li>
<li>2016.01.01 テキストテキスト</li>
<!--ここまでがRepeater Fieldで出力したい部分です-->
</ul>
</li>
</ul>

しかし、Advanced Custom FieldsのRepeater Fieldをデイトピッカーの情報で
年別に出力する方法について、様々なキーワードで検索をしてみても、実装するにあたってのヒントが見つけられずにいます。

どうか皆様のお力添えを頂きた、質問させて頂きました。
何卒よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

確かリピーターフィールドも get_field() で変数に配列として格納できるはずなので一旦変数に入れて加工してから出力すれば良いと思います。

$history = get_field('沿革');

if ($history) {
    // 年別にグルーピング
    $yearly_history = array_reduce($history, function ($carry, $item) {
        if (empty($carry)) {
            $carry = array();
        }

        list($year, $month, $date) = explode('.', $item['日付']);

        if (!isset($carry[$year])) {
            $carry[$year] = array();
        }

        $carry[$year][] = $item;

        return $carry;
    });

    // 年を降順ソート
    krsort($yearly_history);

    // 出力
    echo '<ul>';

    foreach($yearly_history as $year => $items) {
        echo '<li>';
        echo '<h1>' . $year . '年</h1>';
        echo '<ul>';

        foreach($items as $item) {
            echo '<li>'. $item['日付'] . ' ' . $item['事柄'] . '</li>';
        }

        echo '</ul>';
        echo '</li>';
    }

    echo '</ul>';
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/08 02:04

    yhg様

    ご回答をありがとうございます。

    イメージしていた以上に便利なループ処理をご教授頂き感謝致します。

    無事に実装が完了しました!

    キャンセル

+1

phpのみ、ACFの機能のみでは実装できません。

cssのみ、もしくはjavascript、jQueryを利用するなりして
実装する方法が実に多様にあります。

ですので、どの処理が好みなのか見当がつかないので、
見本となる回答がつけにくいです。

"jquery アコーディオン"、"css アコーディオン"などのキーワードで
検索すればそれこそ選びきれないほど出てくるので
その中からご希望に沿うものを選んで実装されると良いと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/07 13:12

    stampdoor様

    ご回答をありがとうございます。

    現在の困り後に関して、説明が分かりづらく申し訳ありません。

    アコーディオンなどの処理に関しては、困っておらず、
    カスタムフィールドの吐き出しの方が困っています。

    デイトピッカーで入力した年月日を元に、
    年別で繰り返しフィールドを出力したいと考えています。

    出力する方法が分かれば、アコーディオンなどの最終処理は何とかできると思います。

    キャンセル

  • 2018/05/07 23:43

    下記の回答のいずれかを選択すると良いかと思います。

    kanashiro様の解決方法では、
    処理方法としては確実ですが新たにacfのフィールドを作るので、
    現存するフィールドを置換するのに手間がかかってしまうので
    フィールド数が現実的な範囲であれば選択しても良いと思います。

    yhg様が書いた内容は正解のように見えますが、
    リピーターフィールドをget_field()で取得できたかどうか
    定かではなかったため断言出来ないです。

    とにかく、「新たに判断基準になるフィールドを足す」か「現在のフィールドを元にソートし直す」しかないので、acfのベーシックな使い方以外の出力になると思います。

    キャンセル

  • 2018/05/08 02:10

    stampdoor様

    今回はyhg様のアドバイス内容で、無事に実装が完了しました!
    当方の確認に先んじて、他の方のアドバイスをご判断下さりありがとうございました!

    キャンセル

0

 リピーターフィールドの中にリピーターフィールドを使用しました。

★コードは下記の通りです。★

<ul>
               <?php if(get_field('沿革')): ?>    
                <?php while( has_sub_field('沿革') ): ?>

                    <li><a href="#"  class="toggle-menu">
                                <?php the_sub_field('年代'); ?></a>
                    <?php if(get_sub_field('項目')): ?>

                          <ul class="child">
                 <?php while( has_sub_field('項目') ): ?>
                            <li><?php the_sub_field('日付'); ?> <?php the_sub_field('事柄'); ?></li>
                     <?php endwhile;?>
                          </ul>
                    <?php endif; ?>
                   </li>

                <?php endwhile; endif; ?>
      </ul>

◆そして、下記 javascript を header 内に追記◆

<script type="text/javascript">
  jQuery(function() {
     jQuery(".toggle-menu").click(function(){
        jQuery(this).next('.child').slideToggle();
        if (jQuery(this).hasClass("close")) {
            jQuery(this).removeClass("close");
        } else {
            jQuery(this).addClass("close");
        }
        return false;
    });

});

</script>

◆CSSを追記◆

ul.child {
    display: none;
}


これで解決できればいいです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/08 02:07

    kanashiro様

    ご回答をありがとうございます。

    今回当方の説明べたのせいで、困りごとが伝わりづらかったと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    19209questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    6669questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。