web-dev-qa-db-ja.com

カテゴリー選択付きドロップダウン

私はメニューのドロップダウンでディレクトリのウェブサイトを作成し、ユーザーはカテゴリとサブカテゴリをナビゲートできるようにしました。 [ウェブサイト]

私はwp_dropdown_categories()を使用してメニューを表示し、javascript shared here を使用してユーザーがカテゴリを選択してそのページに移動できるようにしています。 [すべてのカテゴリ]を選択しても、何も起こりません。その機能はどのように追加できますか？

$args = array(
    'show_option_all'    => 'All Categories',
    'show_option_none'   => 'BROWSE',
    'orderby'            => 'NAME', 
    'order'              => 'ASC',
    'show_count'         => 0,
    'hide_empty'         => 1, 
    'child_of'           => 0,
    'exclude'            => 1,
    'echo'               => 1,
    'selected'           => $cat_id2->term_id,
    'hierarchical'       => 1, 
    'name'               => 'cat',
    'id'                 => '',
    'class'              => 'postform',
    'depth'              => 1,
    'tab_index'          => 0,
    'taxonomy'           => 'category',
    'hide_if_empty'      => false,
);

wp_dropdown_categories( $args );

JS

<script type="text/javascript">
var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;
categoriesdropdown
2
MF1

これはあなたが使うコードのバリエーションです。私は get_categories() を使って同じ目標を達成しています。私はあなたの必要性のためにそれを許容できるように私のコードをわずかに調整しなければなりませんでした。

ただし、これを機能させるために必要な変更は他にもあります。 All Categoriesオプションを選択すると、表示する必要があるものが表示されるページに移動します。このページはあなたがしなければならないでしょう 手動で 作成する

ご存じかもしれませんが、Wordpressにはインデックスアーカイブページはありません。 （チェックアウトしてください この記事 /私は同じ主題についてやっています）。これが意味するところは、domain.com/category/は404を返すということです。

それで、これをすべてうまくいくようにするには、page.phpのコピーを作成し、page-category.phpのような名前に変更する必要があります（カスタムページテンプレートの作成方法については codex を参照）。このページにアクセスしたときに表示したい内容を表示するには、 カスタムクエリ を作成します。

あなたは今バックエンドであなたのページを作成する必要があります。 domain.com/category/にアクセスしたときにこのページが表示されるように、スラッグcategoryを使用することをお勧めします。 （ちょうど覚えておいてください、あなたは できません このページのための子ページを作成します、それは階層を壊します）。 domain.com/category/が選択されたときに私はまたAll Categoriesに行くようにコードを作りました

それ以外は、コードは正常に機能するはずです。あなたはたぶんURL構造をチェックする必要があるだけでなく、あなたのニーズを満たすためにget_categories()のパラメータを設定することもできます。これがドロップダウンコードです。

<select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> 
    <option value=""><?php echo esc_attr(__('Select Category')); ?></option> 

    <?php 
        $option = '<option value="' . get_option('home') . '/category/">All Categories</option>'; // change category to your custom page slug
        $categories = get_categories(); 
        foreach ($categories as $category) {
            $option .= '<option value="'.get_option('home').'/category/'.$category->slug.'">';
            $option .= $category->cat_name;
            $option .= ' ('.$category->category_count.')';
            $option .= '</option>';
        }
        echo $option;
    ?>
</select>

編集

私は実際に役に立つアイデアをここに持っていました。私は最近、特定のカテゴリの下にあるすべての投稿タイトルを含むリスト内のすべてのカテゴリを表示するという回答をしました。これと同じ考えをpage-category.phpテンプレートでも使うことができます。

ユーザーがAll Categoriesオプションを選択すると、すべてのカテゴリと投稿のタイトルを一覧表示するこのページに移動します。

これが完全なコードです。（コードの説明については、私の投稿を参照してください here）

Functions.phpで

add_action( 'transition_post_status', 'publish_new_post', 10, 3 );

function publish_new_post() {
   delete_transient( 'category_list' );
}

あなたのテンプレートであなたがあなたのリストを表示する必要があるところ

<?php
if ( false === ( $q = get_transient( 'category_list' ) ) ) {

    $args = array( 
        'posts_per_page' => -1
    );

    $query = new WP_Query($args); 

    $q = array();

    while ( $query->have_posts() ) { 

        $query->the_post(); 

        $a = '<a href="'. get_permalink() .'">' . get_the_title() .'</a>';

        $categories = get_the_category();

        foreach ( $categories as $key=>$category ) {

            $b = '<a href="' . get_category_link( $category ) . '">' . $category->name . '</a>';    

        }

        $q[$b][] = $a; // Create an array with the category names and post titles
    }


    /* Restore original Post Data */
    wp_reset_postdata();

set_transient( 'category_list', $q, 12 * HOUR_IN_SECONDS );
}

foreach ($q as $key=>$values) {
        echo $key;

        echo '<ul>';
            foreach ($values as $value){
                echo '<li>' . $value . '</li>';
            }
        echo '</ul>';
    }


?>
4
Pieter Goosen

私はこれをコメントとして加えるつもりでしたが、私の担当者のポイントはまだ十分に高くありません:)

私はあなたが持っているものをテスト/ウォーキングするのに約20分を費やしました。私の最初のテストではあなたが説明した問題を再現しましたが、いくつかのブレークポイント（changeイベントと特定のLOC）を設定して内蔵のChromeデバッグツールを使って式を見ると、問題は発生しなくなりました。問題が解決したか、Chrome Inspectツールを使用したことでセッションに何らかの状態変化が発生したため、正しく機能するようになったと思います。

あなたはあなたのJS：に一つのエラーを持っているように見えますそれぞれの場所であなたはコードを持っています：

dropdown(x).onchange = onCatChange(x);

（例えば567、4840、4851行目）このコードは、値が0（ 'All'エントリが選択されている）とおそらく-1（ 'Browse'エントリが選択されている）のときにエラーを投げています。 BROWSEを選択すると、最上位のAllエントリがデフォルトで再度設定されるため（エラーが発生します）。

おそらく場合によっては、このエラーがスローされると、Javaエラー処理のブラウザ設定に応じて実行が停止します。そして、デバッグツールをオンにする際に、実行モードの変更を切り替えて、コードがこの失敗まで続くようにしたのでしょうか。ただのアイデアです。

また、Dropdown 1で "Activities"を、Dropdown 2で "Bowling"を選択し、次にDropdown 2の選択を "All Activities"に変更すると、URLは次のようになります。

http://www.mydetroitjewishdirectory.com/category/activities/bowling/

しかし、ページの内容は単純なテキスト "category"を表示するように変更されます。

とにかく、これがあなたを助けてくれることを願っています！

ポール

2
Paul Zee

おそらく上記のスクリプトを以下のように修正することができます。

var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
    else if ( dropdown.options[dropdown.selectedIndex].value == 0 ) {
        location.href = "<?php echo get_option('home'); ?>";
    }
}
dropdown.onchange = onCatChange;

-1（BROWSE CATEGORIES）も含める場合は、2番目の条件を次のように変更できます。dropdown.options[dropdown.selectedIndex].value <= 0

2
Howdy_McGee