web-dev-qa-db-ja.com

ZurbのFoundationタブをWordpress Navとして使う（アクティブタブ）

これは、人気の高いSASS/JS Framework、Foundation by Zurbでの作業経験がある方々に向けられた質問です。新しいWordpressテーマの構造の中核として使用しようとしていますが、質問がありました。

Foundationに組み込まれているのは、ボタン、フォーム、そしてもちろん有名な12列グリッドのスタイルです。ただし、タブ付きコンテンツを表示するために使用できるjQueryタブも付属しています。私のテーマのナビゲーションを表示するためにこれらを使用したいのですが、どこから始めればよいのかわかりません。

現在、私は以下の場所にあります。

<nav class="row" role="navigation">

        <dl class="tabs">
            <dd class="active">
                <a href="#home">Home</a>
            </dd>
            <dd class>
                <a href="#about">About</a>
            </dd>
            <dd class>
                <a href="#contact">Contact</a>
            </dd>
        </dl>

        <ul class="tabs-content">
            <li id="homeTab">Home Page?</li>
            <li id="aboutTab" style="display: none;">About Page?</li>
            <li id="contactTab" style="display: none;">Contact Page?</li>
        </ul>

    </nav>

繰り返しになりますが、私はFoundationフレームワークから始めたところですが、これは実際のタブを表示するのに適しています...ただし、これはタブ内の純粋なコンテンツ用です - サイトの新しい部分へのリンクではありませんそのセクションのアクティブなタブが表示されます。

ユーザーがそれをクリックすると、それがサイトのその部分をロードして、ページごとに正しい「アクティブな」タブを表示するように、どのように私がこの基礎タブ論理を使って、それをWordpressと混ぜることができるか。

例：

  • ユーザーが「ニュース」>記事をクリックしてsingle.phpにいる。 [ニュース]タブは、サイトの[ニュース]セクションに表示されている間は[アクティブ]のままにする必要があります。
  • ユーザーが「連絡先」をクリックすると、連絡先フォームを含むWordpressページがロードされます。 「連絡先」タブがアクティブです。
  • 等

すべての支援は大歓迎です。 Foundation Frameworkの内容がわからない場合は、 ここをクリックして ドキュメントセンターとタブのセクションにアクセスしてください。私は正直なところ負けていて、それはおそらく私の目の前にあります...誰かがそれを見ているかどうかを確認するためにコンバージョンを開きたいと考えました。笑

皆さんありがとう！

menusnavigationtabs
1
thatguycraig

Foundationタブは、表示するコンテンツが既に<li>要素に存在することを前提としています。あなたはその仮定をたどって、そしてあなたのウェブサイト全体を前もって前もってロードすることができました、しかしそれはおそらくそれが直すよりもっと多くの問題を引き起こすことになるでしょう。他に何もしなければ、それはロードするために永遠にかかるでしょう。

1つのオプション（リンク先のFoundationページ）は、タブのスタイルを使用して、通常のWordpressと同じようにページの残りの部分を読み込むことです。 ＆Phpこれはあなたがこの部分を守ることを意味します：

<nav class="row" role="navigation">
    <dl class="tabs">
        <dd class="active">
            <a href="<?php echo get_bloginfo('url'); ?>/home/">Home</a>
        </dd>
        <dd>
            <a href="<?php echo get_bloginfo('url'); ?>/about/">About</a>
        </dd>
        <dd>
            <a href="<?php echo get_bloginfo('url'); ?>/contact/">Contact</a>
        </dd>
    </dl>
</nav>

... <ul>は必要ありません。表示したいページにリンクするようにhrefの値を変更します。

これはすべてのページがアクティブとしてマークされた「Home」タブでロードされるという問題を抱えているので、あなたはそれをphpループに変えてあなたが現在どのページにいるかチェックするかもしれません：

<nav class="row" role="navigation">
    <dl class="tabs">
    <?php
    // listing out all the pages we want in the navigation with 
    // their slugs & titles
    $pages = array(
        "home" => "Home",
        "about" => "About",
        "contact" => "Contact"
    );

    // finding out what page we're on by slug
    global $post;
    $post_slug = $post->post_name;

    // looping through the pages to create each tab
    foreach ( $pages as $slug => $title )
    {
        // find out if we're on this page and set up the active class
        $active = ( $slug == $post_slug ) ? "class='active'" : "";

        // echo each dd item with a link to the page
        echo "<dd ".$active.">
            <a href='". get_bloginfo('url') ."/".$slug."/'>".$title."</a>
        </dd>";
    }
    ?>
    </dl>
</nav>

もう1つの選択肢は、Ajaxを使用してコンテンツを動的にロードすることです。私はAjaxに精通していないので、他の人がその方法を知っていて解決策を提供できるかもしれません。

0
guiniveretoo