web-dev-qa-db-fra.com

Définir la section héros/éclaboussure comme un article de blog

J'ai une section héros sur la page d'accueil de mon blog que je voudrais être le post principal , puis plusieurs posts avec un style différent en dessous, voir la disposition ci-dessous: layout .

Je ne sais pas trop comment aborder cela et j'ai besoin de conseils sur la meilleure façon de porter cela dans WordPress. Voici le code que j'ai jusqu'à présent dans mon fichier index.php. J'ai réussi à publier les messages sous le héros , mais je ne sais pas comment aborder le message principal dans la section héros/splash.

<div id="main">

    <!-- hero starts here --> 

        <div class="hero">
                <div class="hero-wrapper">
                    <div class="article-info">
                        <p class="topic"><a href="">Culture</a></p> 
                        <h1 class="hero-title"><a href="">Title</a></h1>
                    </div>
                </div>
         </div>


    <!-- Hero end here --> 


    <div class="main-container">

     <!-- Posts starts here -->
        <div class="posts">

            <div class="posts__post">
                <article>

                  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                    <a class="posts__post--preview" href=""><img src="https://placeimg.com/470/310/tech" /></a>
                    <a class="posts__post--tag" href=""><p>Motivation</p></a>
                    <a class="posts__post--title" href="" ><h1>A Good Autoresponder, some more text here</h1></a>
                    <p class="posts__post--meta"> 10 days ago</p>
                </article>

              <?php endwhile; else : ?>
              <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
              <?php endif; ?>

            </div>

   </div>

    <!-- Posts ends here -->

    <!-- Main ends here -->

Ce à quoi je pense:

  1. Que se passe-t-il si j'ajoute un nouveau poste principal? Le post précédent sera-t-il enfoncé?
theme-developmentlooptemplates
2
sam

Le code ci-dessous passe en revue les publications pour trouver une publication avec un ID == 1, puis l’imprime. Deuxième boucle afficher les 6 derniers messages (le message du héros ne sera plus affiché à cause du blocage de if)

<div id="main">

    <!-- hero starts here -->

    <?php
    global $post;
    $args = array("posts_per_page" => -1);
    $the_query = new WP_Query($args);

    while ( $the_query->have_posts() ) :   $the_query->the_post();
      if ($post->ID == 1 ): ?>
        <div class="hero">
          <div class="hero-wrapper">
            <div class="article-info">
              <p class="topic"><a href=" ">Culture</a></p>
              <h1 class="hero-title"><a href="">Hero post: <?php the_title(); ?></a></h1>
            </div>
          </div>
        </div>
      <?php endif; ?>
    <?php endwhile;

    wp_reset_postdata(); ?>

    <div class="main-container">

   <!-- Posts starts here -->
    <div class="posts">
      <div class="posts__post">
        <?php $args = array("posts_per_page" => 6);
        $the_query = new WP_Query($args);
          while ( $the_query->have_posts() ) :   $the_query->the_post();
            if($post->ID !== 1): ?>
            <article>
              <a class="posts__post--preview" href=" "><img src="<?php the_post_thumbnail_url(); ?>"></a>
              <a class="posts__post--title" href="" ><h2>Non hero: <?php the_title(); ?></h2></a>
              <p class="posts__post--excerpt"><?php the_excerpt(); ?></p>
              <?php echo "<p>post ID: " . $post->ID . "</p>"; ?>
            </article>
            <?php endif;
          endwhile; ?>
      </div>

    </div>
  </div>
</div>

P.S. Désolé, j'ai mal compris votre question, maintenant ça devrait aller. P.S.2 Vous ne devriez pas éditer le fichier "index.php", si vous voulez le faire correctement, lisez sur la hiérarchie des modèles, etc. Schéma utile: enter image description here

1
Krystian Kupiec

Il n’est pas nécessaire de faire des choses difficiles si vous utilisez la fonctionnalité sticky , qui vous permet d’ajouter un ou plusieurs posts à coller dans la pile. Avec une case à cocher dans l'administrateur, vous pouvez ainsi déterminer quelle publication doit être le "héros".

Vous utilisez ensuite une simple boucle pour afficher tous vos messages. Les stickies resteront toujours au top, même lorsque vous ajoutez de nouveaux messages.

Si vous définissez width:100%; sur le message avec la classe sticky et width:48%; float:left; sur les autres messages, vous disposez de la configuration souhaitée.

METTRE À JOUR

Si vous souhaitez que vos portions html soient séparées, vous aurez besoin d'une boucle différente qui renvoie simplement le premier post collant, comme ceci ( docs ):

$sticky = get_option( 'sticky_posts' );
$query = new WP_Query( array( 'p' => $sticky[0] ) );
if ( $query->have_posts() ) {
  while ( $query->have_posts() ) {
    $query->the_post(); 
    ... do loop stuff ..
    }
  wp_reset_postdata(); // resetting for the main query
  }
1
cjbj

La boucle de page d'accueil standard met en priorité les posts collants. Vous n'avez donc peut-être pas besoin d'un code HTML spécial pour le post de héros, mais simplement du ciblage CSS.

Ce code dans un plugin ou dans votre functions.php garantira qu'un seul post peut être collant:

add_action( 'post_stuck', 'wpse239911_only_one_sticky' );

function wpse239911_only_one_sticky( $post_id ) {
    remove_action( 'post_stuck', 'wpse239911_only_one_sticky' );
    // prevent loop
    delete_option( 'sticky_posts' );
    stick_post( $post_id );
}

Chaque fois qu'un message est rendu collant, la fonction est activée, effaçant ainsi la liste des messages collants, puis rendant à nouveau le message qui a déclenché l'action.

La suppression de l'action garantit que l'appel de stick_post ne nous plonge pas dans un abîme éternel.

1
Andy Macaulay-Brook