Anzeige eines benutzerdefinierten Post-Typs mit get_template_part in einem bestimmten Layout

Ich bin neu in WordPress Custom Themes und versuche diese Website ( http://www.divecarib.com/ ) als Übung neu zu erstellen. Ich versuche, den richtigen Weg zu finden, um Folgendes zu erreichen:

Ich habe einen benutzerdefinierten Post-Typ namens Feature erstellt. Ich verwende die function get_template_part, um den Titel und den Inhalt dieses Post-Typs in meiner front-page.php aufzurufen. (“Feature” ist im Grunde eines der 3 Service-Highlights auf der Startseite der oben genannten Website)

Ich möchte, dass diese Features in 3 Listenelemente angeordnet werden, die wie die obige Website horizontal ausgerichtet sind. Jedes Listenelement enthält ein Div, das das h2- und p-Tag für die Überschrift bzw. den Inhalt enthält. Der UL sitzt in einem Artikel.

Momentan konnte ich das Layout erreichen, das ich wollte, aber bei der Überprüfung des Codes mit Chrome-Tools sehe ich mehrere Dinge, die nicht funktionieren. Zuallererst, anstatt 3 LIs innerhalb eines UL zu erhalten, muss der Elternartikel dreimal wiederholt werden, was zu 3 ULs mit jeweils nur 1 LI führt. Es sieht im Web genauso aus, aber es wirft Probleme auf. Die Elternelemente wickeln die Kinder nicht mehr wie zuvor (vor der Implementierung dieser Struktur in den PHP-Dateien habe ich das HTML in den Adminbereich von WordPress gestellt und get_content () verwendet; und alles hat funktioniert.) Ich benutze genau das Gleiche Stylesheet ohne Änderungen, also habe ich erwartet, dass die Dinge gleich aussehen, aber ich kann jetzt nicht die Hintergrundfarbe auf den Artikel anwenden, weil es die Kinder nicht umschließt.

Außerdem gibt es leere p-Tags vor und nach dem eigentlichen p-Tag, das den Inhalt des Post-Typs enthält.

Danke für die Hilfe aktuellen Code ist unten.

Titelseite.php

'feature', 'posts_per_page' => 3 ); $loop = new WP_Query($args); if ( $loop -> have_posts() ) : /* Start the Loop */ while ( $loop -> have_posts() ) : $loop -> the_post(); /* * Include the Post-Format-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ //get_template_part( 'template-parts/content', get_post_format() ); ?> wp_reset_postdata();

Inhalt-Feature.php

 <article id="post-" > 

style.css

  #page{ background-image: url('../../../wp-includes/images/mainImage.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; margin: 0; } #content{ margin:0 auto; max-width:980px; } #primary{ max-width: 742px; margin: auto 72px auto auto; } main h1{ text-align: center; color: white; font-weight: bold; } main ul li{ list-style: none; max-width: 215px; display: inline-block; text-align: left; margin: 0 10px; line-height: 100%; color: #26729B; float:left; } main ul li p{ font-family:Arial; font-size: 14px; } main ul li h2{ line-height: 120%; font-weight: bold; font-size: 1.6em; } main ul{ text-align: center; padding: 0px; margin: 0 auto; } main > div > p{ text-align: center; padding:0px 0px 15px 0px; margin:0px; color: #434A52; font-size: 36px; } main > article { background-color: rgba(255, 255, 255, 0.66); padding:0px; } 

Bild zeigt zusätzliche p Tags: Bildbeschreibung hier eingeben

Solutions Collecting From Web of "Anzeige eines benutzerdefinierten Post-Typs mit get_template_part in einem bestimmten Layout"

Was immer Sie in content-feature.php wird für jeden Artikel / Post / Feature wiederholt. Wenn Sie möchten, dass sich alle innerhalb derselben

    Sie alles andere in die Hauptvorlage front-page.php . Damit:

    Titelseite.php

     if ( $loop -> have_posts() ) : ?> 
      < ?php /* Start the Loop */ while ( $loop -> have_posts() ) : $loop -> the_post(); get_template_part( 'template-parts/content', 'feature' ); ?> < ?php endwhile;
    //the_posts_navigation();

    Inhalt-Feature.php

     
  • < ?php the_title(); ?>

    < ?php the_content(); ?>
  • Wenn Sie das

    -Tag beibehalten möchten, müssen Sie es möglicherweise für das

    innerhalb Ihrer Schleife austauschen. Es ist nur eine Frage der Strukturierung Ihrer HTML, so dass die sich wiederholenden Teile innerhalb der Schleife sind und die sich nicht wiederholenden Teile außerhalb sind.