Zeigen Sie neue Beitragskategorien in getrennten divs an

(1) Hallo schlaue Leute, das ist das erste Mal, dass ich eine Vorlage erstelle … Ich habe eine kleine Skizze von meinem Ziel gemacht: Bildbeschreibung hier eingeben

Ich konnte es machen, indem ich die Schleife vor jedem Div-Abschnitt startete und den Post jeder bestimmten Kategorie zog:

$params = array('posts_per_page' => 4, 'post_type' => 'product', 'product_cat' => 'Pies', ); $wc_query = new WP_Query($params); 

Aber crearly, das funktioniert nur mit bestimmten Kategorien, also brauche ich es, um die Produkte einer neu erstellten Kategorie automatisch hinzuzufügen (wie Katze 4 nach Katze 3 …)

Wie kann ich das erreichen?

(2) Ich möchte einen “mehr” -Button am unteren Rand jedes Kategorie-DIVs hinzufügen, so dass er die restlichen Beiträge der Kategorie anzeigt, wie folgt:

wenn mehr umgeschaltet wird

Kann das mit WordPress gemacht werden? Oder erstelle ich eine JQuery-function, die ‘posts_per_page’ erhöht? Ich schätze deine Zeit und Hilfe sehr.

Solutions Collecting From Web of "Zeigen Sie neue Beitragskategorien in getrennten divs an"

Sie sollten zuerst eine Abfrage durchführen, um alle Ihre Kategorien abzurufen. Dies kann getan werden mit:

 $categories = get_categories(array('hide_empty'=> 0,)); 

Jetzt, wo Sie eine Liste Ihrer Kategorien als Objekt haben, müssen Sie eine foreach ausführen, um ihren Inhalt auszugeben:

 foreach ($categories as $category) { $params = array( 'posts_per_page' => -1, 'post_type' => 'product', 'cat' => $category->term_id, ); $wc_query = new WP_Query($params); //From here you can start outputting your query if ($wc_query->have_posts()) { ?> 
while ($wc_query->have_posts()) { $wc_query->the_post(); ?> < ?php } wp_reset_postdata();?> term_id;?>").style.height = "auto";">More
< ?php } }

Vergessen Sie nicht, wp_reset_postdata() wenn Sie mit Ihrer Abfrage fertig sind.

Jetzt lasst uns es stylen, sollen wir?

 .product-list-grid { width:100%; height:100px; padding:10px; float:left; display:block; position:relative } .product-grid { float:left; width:auto; height:80px; display:block } .product-grid img { float:left; } .more-products { position:absolute; bottom:10px; right:10px; } 

Nachdem Sie auf die Schaltfläche " More geklickt haben, werden alle Ihre Produkte angezeigt. Denken Sie daran, dass Sie die Anzahl der abgefragten Produkte ändern müssen, um alle verfügbaren Produkte zurückzugeben, wenn dies funktioniert.