web-dev-qa-db-ja.com

ホームページに改ページ付きの全文を表示する方法

'Hatch'テーマ を使っています。私はHTML/CSSには慣れていますが、WordPressには慣れていません。
私のホームページに最近の投稿が表示されていますが、それは問題ありません。

ただし、ページ付けを使用してすべての投稿をすべて表示できる「ブログ」という新しいページを作成したいと思います。

テンプレートを作成する必要があると思いましたか。または、カテゴリを「ブログ」にしようとしましたが、その特定のカテゴリの表示を変更する方法がわかりません。

私は、ループを起こさなければならないことを理解するために、私は同様の質問を読みました、しかし私はどこに知りません。

私のサイトはLizettePhotography.comです。

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

はい。私はあなたのサイトを見ました。あなたは結婚式、肖像画、イベントやブログを表示するためにカテゴリを使用しているようです。これらのカテゴリの他の投稿をあなたのブログに表示したくないと仮定します。したがって、カテゴリの使用は適切でしょう。

これが私のやり方です。

1.テーマファイルのpage.phpテンプレートを複製し、その名前をcategory-に変更します（カテゴリIDを挿入してください）。あなたのサイトに基づいて、私はあなたのブログカテゴリIDが4であると決定しました。したがって、category-4.php。

私たちがあなたのテーマの中でarchive.phpを複製していないのは、ブログのフォーマットがまだそこにないからです。 page.phpを使うことで、メインページと右側のサイドバーのレイアウトを保持します。

注：カテゴリテンプレートについては、 このページのwordpress codex を参照してください。

2.あなたが選んだエディタでcategory-4.phpを開いてください（私はEditraを使います）。 div id "content"内のすべてを以下のコードで置き換えます。それからそれが正しく機能するかどうか見るためにあなたのサイトをテストしなさい。それがうまくいけばCSSスタイリングを行います。次のステップでは、番号付きページ付けを追加するためのコードを紹介します。

    <!-- 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; ?>

注：上記のコードはwordpress codexからのものです。これは既にあなたのカテゴリ「blog」に合わせました。

3.この[ ページネーションチュートリアルWP tut を使用して、ループの後にページネーションを追加します。簡単に参照できるようにコードを抽出しました。

          <?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,
              ));
          } ?>

チュートリアルで提供されているCSSコードを使用して、ページ区切りリンクをスタイルすることができます。

コードをテストしなかったことに注意してください。これが役に立つことを願っています。

1
Logen