web-dev-qa-db-fra.com

comment afficher le post complet avec pagination sur la page d'accueil

J'utilise le thème 'Hatch' . Je connais le HTML/CSS, mais pas WordPress, je travaille pour la première fois avec cela.
Ma page d’accueil affiche les derniers messages et c’est bien.

Toutefois, je souhaite créer une nouvelle page intitulée "Blog", sur laquelle je peux afficher tous mes messages complets, ainsi que la pagination.

J'ai pensé que je devrais créer un modèle? Ou j’ai essayé de créer une catégorie 'blog', mais je ne sais pas comment changer l’affichage de cette catégorie.

J'ai lu des questions similaires, à ma connaissance, il me faut une boucle, mais je ne sais pas où.

mon site est LizettePhotography.com

code home.php:

<?php
/**
 * Home Template
 *
 * A custom home page template.
 *
 * @package Hatch
 * @subpackage Template
 */

get_header(); // Loads the header.php template. ?>

    <?php do_atomic( 'before_masthead' ); // hatch_before_masthead ?>

    <div id="masthead">

        <?php do_atomic( 'open_masthead' ); // hatch_open_masthead ?>

        <?php $hatch_author_bio = hybrid_get_setting( 'hatch_author_bio' ) ? hybrid_get_setting( 'hatch_author_bio' ) : '1'; ?>

        <div id="author-bio"><?php the_author_meta( 'description', $hatch_author_bio ); ?></div>

        <div id="header-banner" role="banner">

            <?php // Check to see if the header image has been removed
            $header_image = get_header_image();

            if ( ! empty( $header_image ) ) : ?>

                <img src="<?php header_image(); ?>" alt="" />

            <?php endif; // end check for removed header image ?>

        </div>

        <?php do_atomic( 'close_masthead' ); // hatch_close_masthead ?>

    </div>

    <?php do_atomic( 'before_content' ); // hatch_before_content ?> 

    <div id="content">

        <?php do_atomic( 'open_content' ); // hatch_open_content ?>

        <div class="hfeed">

            <?php if ( have_posts() ) : ?>

                <?php $counter = 1; ?>

                <?php while ( have_posts() ) : the_post(); ?>

                        <?php do_atomic( 'before_entry' ); // hatch_before_entry ?>

                        <?php if ( ( $counter % 4 ) == 0 ) { ?>

                            <div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?> last">

                        <?php } else { ?>

                            <div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?>">

                        <?php } ?>                                                  

                                <?php do_atomic( 'open_entry' ); // hatch_open_entry ?>

                                <?php if ( current_theme_supports( 'get-the-image' ) ) {

                                    get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'archive-thumbnail', 'image_class' => 'featured', 'width' => 220, 'height' => 150, 'default_image' => get_template_directory_uri() . '/images/archive_image_placeholder.png' ) );

                                } ?>                    

                                <?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>                     

                                <?php do_atomic( 'close_entry' ); // hatch_close_entry ?>                           

                            </div><!-- .hentry -->

                        <?php do_atomic( 'after_entry' ); // hatch_after_entry ?>

                    <?php $counter++; ?>

                <?php endwhile; ?>

            <?php else : ?>

                <?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?>

            <?php endif; ?>

        </div><!-- .hfeed -->

        <?php do_atomic( 'close_content' ); // hatch_close_content ?>

        <?php get_template_part( 'loop-nav' ); // Loads the loop-nav.php template. ?>

    </div><!-- #content -->

    <?php do_atomic( 'after_content' ); // hatch_after_content ?>

<?php get_footer(); // Loads the footer.php template. ?>
poststheme-developmentloophomepageblog
3
Elizabeth Rimbo

D'accord. J'ai jeté un coup d'oeil sur votre site. Vous semblez utiliser des catégories pour afficher un mariage, des portraits, des événements et un blog. Je vais supposer que vous ne voulez pas que les autres publications de ces catégories apparaissent sur votre blog. Ainsi, l’utilisation de la catégorie serait appropriée.

Voici comment je le ferais.

1. Dupliquez le modèle page.php dans votre fichier de thème et renommez-le category- (insérez votre identifiant de catégorie) .php. Sur la base de votre site, j'ai déterminé que l'identifiant de catégorie de votre blog est 4. Ainsi, category-4.php.

La raison pour laquelle nous ne dupliquons pas le fichier archive.php dans votre thème est que le formatage du blog n’est pas déjà là. En utilisant page.php, nous conservons la page principale et la disposition de la barre latérale droite.

Remarque: Consultez cette page en wordpress codex , pour le modèle de catégorie.

2. Ouvrez category-4.php dans l'éditeur de votre choix (j'utilise Editra). Remplacez tout ce qui se trouve dans l'id div "content" avec le code suivant. Puis testez votre site pour voir s'il fonctionne correctement. Si cela fonctionne, faites le style css. Dans l'étape suivante, je vous montrerai le code pour ajouter une pagination numérotée.

    <!-- Start the Loop. -->


     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <!-- The following tests if the current post is in category 4. -->  
              <!-- If it is, the div box is given the CSS class "post-cat-four". -->  
              <!-- Otherwise, the div box will be given the CSS class "post". -->  
              <? php if ( in_category('4') ) { ?>
           <div class="post-cat-four">  <?php } else { ?>
           <div class="post">  <?php } ?>

          <!-- Display the Title as a link to the Post's permalink. -->  
              <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent 
              Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

          <!-- Display the date (November 16th, 2009 format) and a link to other posts 
              by this posts author. -->  
              <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

          <!-- Display the Post's Content in a div box. -->  
              <div class="entry">    <?php the_content(); ?>  </div>

          <!-- Display a comma separated list of the Post's Categories. -->  
              <p class="postmetadata">Posted in <?php the_category(', '); ?></p>  
              </div> <!-- closes the first div box -->

          <!-- Stop The Loop (but note the "else:" - see next line). -->  <?php endwhile; else: ?>

          <!-- The very first "if" tested to see if there were any Posts to --> 
              <!-- display.  This "else" part tells what do if there weren't any. -->  
              <p>Sorry, no posts matched your criteria.</p>

          <!-- REALLY stop The Loop. -->  <?php endif; ?>

Remarque: le code ci-dessus provient du codex wordpress, que j'ai déjà adapté à votre catégorie "blog".

3. Ajoutez la pagination après votre boucle avec ce didacticiel de pagination de WP tut . J'ai extrait le code pour référence facile.

          <?php global $wp_query;
          $total_pages = $wp_query->max_num_pages;

          if ($total_pages > 1){

            $current_page = max(1, get_query_var('paged'));

            echo paginate_links(array(
                'base' => get_pagenum_link(1) . '%_%',
                'format' => '/page/%#%',
                'current' => $current_page,
                'total' => $total_pages,
              ));
          } ?>

Vous pouvez styliser les liens de pagination avec le code CSS fourni dans le didacticiel.

Veuillez noter que je n'ai pas testé le code. J'espère que ça aide.

1
Logen