Nehmen wir an, du erstellst einen eigenen Inhaltstype wohnung, dann kannst du ihn mit folgender Abfrage in einem Template ausgeben:
// WP_Query arguments
$args = array (
'post_type' => array( 'wohnung' ),
'posts_per_page' => '6',
'orderby' => 'date',
);
// The Query
$query = new WP_Query( $args );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
// do something
}
} else {
// no posts found
}
// Restore original Post Data
wp_reset_postdata();
Nun möchtest du jede einzelne Wohnung in einem Block ausgeben. Dazu fügen wir in der Loop ein <div>-Tag und die Ausgabe des Titels hinzu:
…
// The Loop
if ( $query->have_posts() ) {
echo '<div class="angebote">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="wohnung">';
the_title();
echo '</div>'; //.wohnung
}
echo '</div>'; //.angebote
} else {
echo <code>Keine Angebote vorhanden!</code>;
}
…
Damit das als Block ausgeben wird, ergänzen wir das Stylesheet des Themes entsprechend:
.angebote {
display:block;
height:600px;
width: 800px;
}
.wohnung {
float: left;
width: 30%;
height: 100px;
background: #aaa;
color: #fff;
margin: 5px;
padding: 5px;
}
Nun fügen wir die Custom Fields von Advanced Custom Fields hinzu. Advanced Custom Fields bietet hierfür die Funktion the_field(); an.
…
echo '<div class="angebote">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="wohnung">';
the_title();
echo '<div class="postmeta">'.get_the_field('zimmer').'</div>';
echo '<div class="postmeta">'.get_the_field('schlafzimmer').'</div>';
// für beliebige viele weitere Custom Fields wiederholen
echo '</div>'; //.wohnung
}
echo '</div>'; //.angebote
…
auch dafür braucht es noch ein wenig CSS:
.postmeta {
width:100%;
border-top: 1px solid white;
}
Alternativ kannst du bei der Gestaltung auch Flexbox verwenden. Eine gute Zusammenfassung findest du hier.
Der Code ist nicht getestet und ohne Gewähr, sollte aber die Vorgehensweise verdeutlichen.
