Hinzufügen von aktuellen Wordpress-Post, mit vorgestellten Bild und Auszüge zu HTML-Site

Question

Ich habe diese Frage in mehreren Foren recherchiert und haben die relevanteste Antwort hier gefunden: Add "Recent Posts" from a wordpress blog to a html static page.

Was ich suche ist eine Erweiterung dieser Antwort, die es mir ermöglichen wird, ein vorgestellten Bild und post_excerpt zu enthalten. Ich habe Google und dieses Forum vergeblich gesucht. Jede Hilfe, die Sie zur Verfügung stellen können, wäre sehr willkommen.

Mein Ziel ist es, einen RSS-Feed in meine HTML-Site einzufügen, die aus meinem Blog stammt, der sich in einem Unterverzeichnis meiner Site befindet.

Das oben erwähnte PHP-Snippet funktioniert perfekt zum Anzeigen und Verknüpfen mit den neuesten Posts. Ich möchte jedoch sowohl ein Post-Bild als auch einen Post-Auszug im Feed anzeigen.

Answer 1

Ich habe eine Antwort auf diese Frage gefunden und möchte sie mit der Community teilen. Hoffentlich werden andere es nützlich finden.

Hier ist der Code, den wir den gewünschten Effekt zu erzeugen verwendet:

<section class="feed float-right"> 
    <h3>The Latest From Our Blog</h3> 
<?php 

include('blog/wp-load.php'); // Blog path 

$args = array('showposts' => 4); 

$the_query = new WP_Query($args); 

if($the_query->have_posts()): 

echo '<ul>'; 

while ($the_query->have_posts()) : $the_query->the_post(); 
    echo '<li><a href="'.get_the_permalink().'">'.get_the_post_thumbnail().' '.get_the_title().'</a> <p>'.get_the_excerpt($limit).'</p></li>'; 
endwhile; 

echo '</ul>'; 

endif; 

wp_reset_query(); 

?> 

</section> 

Der obige Code im HTML oder PHP-Seite platziert ist, wo Sie die Feed angezeigt werden soll. Wir haben Abschnitte für diese Implementierung verwendet, aber Divs werden auch funktionieren. Die Styling-Informationen war wie folgt:

.feed { 
    width: 100%; 
    height: 350; 
    padding-bottom: 25px; 
} 

.feed h3 { 
    width: 90%; 
    margin: 20px auto; 
    padding-left: 35px; 
    font-family: 'Open Sans Condensed', sans-serif; 
    font-size: 23px; 
    font-weight: 400; 
    color: #fff; 
} 

.feed ul { 
    width: 90%; 
    margin: auto; 
    list-style: none; 
    font-family: 'Open Sans Condensed', sans-serif; 
    font-size: 15px; 
    font-weight: 400; 
    color: #fff; 
} 

.feed ul li { 
    position: relative; 
    float: left; 
    width: 45%; 
    margin-bottom: 30px!important; 
    margin-right: 5%; 
} 

.feed ul li a { 
    color: inherit; 
} 

.feed ul li p { 
    line-height: 18px; 
} 

.attachment-post-thumbnail { 
    position: relative; 
    float: left; 
    width: 140px!important; 
    height: 90px!important; 
    margin: auto 30px 30px auto; 
    border-radius: 4px; 
} 

Sie können hier das Endergebnis sehen: https://www.moverspalmbeachcounty.com/