WordPress　各種ループコード

2022 12/21

2022/11/08 2022/12/21

投稿記事一覧

投稿記事表示

通常投稿

通常投稿の記事表示

            <?php if( have_posts() ): while( have_posts() ) : the_post(); ?>
           //ループ開始
            <article class="content-wrapper">
                <header class="content-header">
                    <div class="title-block">
                        <h1><?php the_title(); ?></h1>
                        <time class="pubdate">2018/5/20</time>
                        <div class="tag">
                            <span>タグ1</span><span>タグ2</span>
                        </div>
                    </div>
                    <div class="post-thumb">
                        <img src="images/post-thumbnail2.jpg" alt="">
                    </div>
                </header>
                <div class="content">
                    <?php the_content(); ?>
                </div>
            </article>

            <?php endwhile; else: ?>
            <?php endif; ?>

固定ページの表示

<?php get_header(); ?>

<section class="primary">
    <div class="container">
        <!-- main content -->
        <main>

            <?php if( have_posts() ): while( have_posts() ) : the_post(); ?>
            <!-- Loop Start -->
            <article class="content-wrapper">
                <header class="content-header">
                    <div class="title-block">
                        <h1><?php the_title(); ?></h1>
                    </div>
                </header>
                <div class="content">
                    <?php the_content(); ?>
                </div>
            </article>
            <!-- Loop End -->
            <?php endwhile; else: ?>

            <?php endif; ?>
            
        </main>
        <!-- /main content -->

    </div>
</section>
<!-- /.primary -->

<?php get_footer();

一覧ページ

一覧ページ／テンプレートはarchive.php

<?php get_header(); ?>

<!-- .primary -->
<section class="primary">
    <div class="container container-flex">
        <!-- main content -->
        <main>
            <div class="container">
                <div class="breadcrumb">
                    Home / News /
                </div>
            </div>
            <div class="archive-loop">

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

                <!-- a loop -->
                <div class="archive-item">
                    <header class="content-header">
                        <div class="title-block">
                            <h1><a href="#"><?php the_title(); ?></a></h1>
                            <time class="pubdate">2018/5/20</time>
                            <div class="tag">
                                <span>タグ1</span><span>タグ2</span><span>タグ3</span>
                            </div>
                        </div>
                        <div class="post-thumb">
                            <img src="images/post-thumbnail5.jpg" alt="">
                        </div>
                    </header>
                    <div class="excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                </div>
                <!-- /a loop -->

                <?php endwhile; else: ?>

                <?php endif; ?>

            </div>
        </main>
        <!-- /main content -->

        <?php get_sidebar(); ?>
    </div>
</section>
<!-- /.primary -->

<?php get_footer();

カテゴリー別一覧

カテゴリー別の記事一覧

<!-- get_the_category関数
<?php
$cat = get_the_category(); //get_the_category関数を$catに代入（カテゴリ情報を取得）
print_r($cat); //カテゴリ情報の出力
?>
 -->
<!-- ex -->
<?php
$cat = get_the_category(); //カテゴリ情報を取得
print_r($cat[0]->term_id); //キーが[0]のカテゴリのterm_idを出力
?>

フィールド	意味
term_id	カテゴリID
name	カテゴリ名
slug	カテゴリのスラッグ
term_group	カテゴリのグループ
term_taxonomy_id	カテゴリのタクソノミーID
taxonomy	タクソノミ名
description	カテゴリの説明
parent	親カテゴリのID
count	登録されている投稿数
filter	フィルタ名
cat_ID	カテゴリID
category_count	登録されている投稿数
category_description	カテゴリの説明
cat_name	カテゴリ名
category_nicename	カテゴリーのスラッグ
category_parent	親カテゴリのID

サブループ

メインループ以外の記事一覧を表示するときに使用

ページネーション

通常投稿の記事表示

  <section id="blog">
    <h2>新着一覧</h2>
    <div class="blog__wrapper">

      <div class="blog__list">
        <?php
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $the_query = new WP_Query(array(
          'post_status' => 'publish',
          'paged' => $paged,
          'posts_per_page' => 10, // 表示件数
          'orderby'     => 'date',
          'order' => 'DESC'
        ));


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

            <div class="blog-list__item">
              <div class="blog-list__img">
                <div class="category-badge">
                  <?php
                  $categories = get_the_category();
                  if ($categories) {
                    echo $categories[0]->name;
                  }
                  ?>
                </div>
                <a href="<?php the_permalink(); ?>" class="blog-list__thum">
                  <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail(); ?>
                  <?php else : ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.jpg" alt="画像準備中">
                  <?php endif; ?>
                </a>
              </div>

              <div class="blog-list__text">
                <p class="blog-list-date"><?php echo get_the_date('Y.m.d'); ?></p>
                <p class="blog-list-ttl">
                  <!-- <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> -->
                  <a href="<?php the_permalink(); ?>">
                    <?php echo mb_substr($post->post_title, 0, 25) . '...'; ?>
                  </a>
                </p>
                <div class="blog-list-expt">
                  <?php the_excerpt(); ?>
                </div>
                <!-- <p class="blog-list-expt"></p> -->
              </div>
            </div>

            <?php endwhile; ?><?php endif; ?>
            <div class="pagenation">
              <?php
              if ($the_query->max_num_pages > 1) {
                echo paginate_links(array(
                  'base' => get_pagenum_link(1) . '%_%',
                  'format' => 'page/%#%/',
                  'current' => max(1, $paged),
                  'mid_size' => 1,
                  'total' => $the_query->max_num_pages,
                  'type' => 'list',
                ));
              }
              wp_reset_postdata(); ?>
            </div><!-- /pagenation -->

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

//ページネーション
function the_pagination()
{
  global $wp_query;
  $bignum = 999999999;
  if ($wp_query->max_num_pages <= 1)
    return;
  echo '<nav class="pagination">';
  echo paginate_links(array(
    'base'         => str_replace($bignum, '%#%', esc_url(get_pagenum_link($bignum))),
    'format'       => '',
    'current'      => max(1, get_query_var('paged')),
    'total'        => $wp_query->max_num_pages,
    'prev_text'    => '←',
    'next_text'    => '→',
    'type'         => 'list',
    'end_size'     => 3,
    'mid_size'     => 3
  ));
  echo '</nav>';
}

// ------------------------------------------------------

パンくずリスト

通常投稿の記事表示

<div class="pankuzu">
    <?php if (function_exists('bcn_display')) {
      bcn_display();
    } ?>
  </div>

<!--  -->
<!-- <?php get_template_part('pankuzu'); ?> -->

/*-------------------------------------------
Section " パンくずリスト "   WPではプラグインで対応
-------------------------------------------*/
.pankuzu {
  width: 100%;
  background-color: #f8f8f8;
  height: 50px;
  line-height: 1.1;
  margin-top: 110px;
  position: relative;
}
.pankuzu .pankuzu__wrapper {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.75rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.pankuzu .pankuzu__wrapper a {
  text-decoration: underline;
  margin-right: 3px;
}
.pankuzu .pankuzu__wrapper span {
  margin-left: -3px;
}

.pankuzu span[property=name] {
  display: inline-block;
  padding: 0;
  margin-top: 0px;
  margin-left: 5px;
  vertical-align: middle;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*+++++++++++++++++++++++++
TB/SP Responsive " パンくずリスト "
+++++++++++++++++++++++++*/
@media screen and (max-width: 1024px) {
  .pankuzu {
    margin-top: 110px;
  }
  .pankuzu .pankuzu__wrapper {
    padding-left: 30px;
  }
}
.pankuzu {
  margin-top: 110px;
}

@media screen and (max-width: 1024px) {
  .pankuzu {
    margin-top: 110px;
  }
  .pankuzu .pankuzu__wrapper {
    padding-left: 30px;
  }
}
/*---------------------------*/
@media screen and (max-width: 782px) {
  .pankuzu {
    margin-top: 110px;
  }
}
@media screen and (max-width: 599px) {
  .pankuzu {
    margin-top: 145px;
  }
}

コメント機能

通常投稿の記事表示

子テーマについて

通常投稿の記事表示

ループ内の各種表示タグ

<li class="new-article__item list" data-aos="fade-up">
  <div class="new-article-thum list">
    <!-- サムネイル -->
    <?php if (has_post_thumbnail()) : ?>
      <?php the_post_thumbnail(); ?>
    <?php else : ?>
      <img src="<?php echo get_template_directory_uri(); ?>/assets/images/noimage.jpg" alt="画像準備中">
    <?php endif; ?>
  </div>
  <div class="new-article-text list">
    <p class="new-article__posttime"><span id="na-pt" class="na-pt "></span><?php echo the_time_diff() ?></p>
    <p class="article__title list"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
    <p class="article__date list"><?php echo get_the_date('Y.m.d'); ?></p>
    <p class="article__category list">
      <?php $cats = get_the_category();
      $current_cat = '';
      foreach ($cats as $cat) {
        if (!$current_cat || cat_is_ancestor_of($current_cat, $cat)) {
          $current_cat = $cat;
        }
      } ?>
      <a href="<?php echo get_category_link($current_cat); ?>"><?php echo $current_cat->cat_name; ?></a>
    </p>
  </div>
</li>

            <li class="new-article__item" data-aos="fade-up">
              <div class="new-article-thum">
                <!-- サムネイル -->
                <a href="<?php the_permalink(); ?>">
                  <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail(); ?>
                  <?php else : ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/imges/noimage.jpg" alt="画像準備中">
                  <?php endif; ?>
                </a>
              </div>

              <div class="new-article-text">
                <p class="new-article__posttime"><span  id="na-pt" class="na-pt "></span><?php echo the_time_diff() ?></p>
                <p class="article__title new">
                  <a href="<?php the_permalink(); ?>">
                    <?php
                    if (mb_strlen($post->post_title) > 30) {
                      $title = mb_substr($post->post_title, 0, 30);
                      echo $title . '...';
                    } else {
                      echo $post->post_title;
                    }
                    ?>
                  </a>
                </p>
                <p class="article__date new"><?php echo get_the_date('Y.m.d'); ?></p>
                <p id="na-ctg" class="article__category new main-bg-color">
                  <?php $cats = get_the_category();
                  $current_cat = '';
                  foreach ($cats as $cat) {
                    if (!$current_cat || cat_is_ancestor_of($current_cat, $cat)) {
                      $current_cat = $cat;
                    }
                  } ?><a href="<?php echo get_category_link($current_cat); ?>"><?php echo $current_cat->cat_name; ?></a>
                </p>
              </div>
            </li>

通常投稿の記事表示

Searchform

<div class="search-box header-search footer-search">
  <form method="get" action="/" class="search_container" action=”<?php echo esc_url(home_url('/')); ?>” role="search">
    <input type="text" size="25" placeholder="フリーワード検索" value=”<?php echo get_search_query(); ?>” name=”s”>
    <input type="submit" value=" 検索">
  </form>
</div>

通常投稿の記事表示

Search

<div id="container" class="wrapper">
  <main>
    <?php if (have_posts()): ?>
      <?php if (!$_GET['s']) { ?>
        <p>検索キーワードが未入力です<p>

      <?php } else { ?>
        <h1 class="page-title">
          「<?php echo esc_html($_GET['s']); ?>」の検索結果：<?php echo $wp_query->found_posts; ?>件
        </h1>

        <?php while(have_posts()):the_post(); ?>
          <?php
            $cat = get_the_category();
            $catname = $cat[0]->cat_name;
          ?>
            <div class="search-result__item" data-aos="fade-up">
              <div class="search-result-thum">
                <!-- サムネイル -->
                <a href="<?php the_permalink(); ?>">
                  <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail(); ?>
                  <?php else : ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/imges/noimage.jpg" alt="画像準備中">
                  <?php endif; ?>
                </a>
              </div>

              <div class="search-result-text">
                <!-- 投稿日 ～日、時前-->
                <p class="search-result__posttime"><span class="main-bg-color"></span><?php echo the_time_diff() ?></p>
                <!-- タイトル -->
                <p class="article__title search">
                  <a href="<?php the_permalink(); ?>">
                    <?php
                    if (mb_strlen($post->post_title) > 30) {
                      $title = mb_substr($post->post_title, 0, 30);
                      echo $title . '...';
                    } else {
                      echo $post->post_title;
                    }
                    ?>
                  </a>
                </p>
                <!-- 本文抜粋 -->
                <div class="exerpt-text">
                  <?php
                  if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 60) {
                    $content = mb_substr(strip_tags(get_the_content()), 0, 60, 'UTF-8');
                    echo $content . '…';
                  } else {
                    echo strip_tags(get_the_content());
                  }
                  ?>
                </div>

                <!-- 投稿日 -->
                <p class="article__date new"><?php echo get_the_date('Y.m.d'); ?></p>
                <!-- カテゴリー -->
                <p class="article__category new main-bg-color">
                  <?php $cats = get_the_category();
                  $current_cat = '';
                  foreach ($cats as $cat) {
                    if (!$current_cat || cat_is_ancestor_of($current_cat, $cat)) {
                      $current_cat = $cat;
                    }
                  } ?><a href="<?php echo get_category_link($current_cat); ?>"><?php echo $current_cat->cat_name; ?></a>
                </p>
              </div>
            </div>
        <?php endwhile; ?>

        <?php
          if (function_exists("pagination")) {
            pagination($wp_query->max_num_pages);
          }
        ?>
      <?php } ?>
    <?php else: ?>
      <p>検索されたキーワードに一致する記事はありませんでした</p>

    <?php endif; ?>
  </main>
</div>

通常投稿の記事表示

固定ページ

<?php get_header(); ?>

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

<?php the_content(); ?>

<?php endwhile; endif; ?>

<?php get_footer(); ?>

固定ページ記事内にコード(HTML入力)

アーカイブページ

<?php get_header(); ?>

<?php get_template_part('template-parts/breadcrumbs'); ?>

<section class="archives-contents">

  <div class="wrapper">
    <!-- Topのピックアップ記事の一覧 -->
    <?php
    $page_title = "";
    if (is_category()) {
      $page_title = "カテゴリー<br>「" . single_cat_title("", false) . "」";
    } else if (is_tag()) {
      $page_title = "タグ「" . single_tag_title("", false) . "」";
    } else if (is_date()) {
      $page_title = get_the_date("Y年n月");
    }
    $page_title .= "の記事一覧";
    ?>
    <h2 class="section-title archive"><?php echo $page_title; ?></h2>

    <div class="archive-article-box">
      <div class="archive-article-list">

        <!-- WordPressループで記事一覧を表示 -->
        <?php if (have_posts()) : ?>
          <?php while (have_posts()) : ?>
            <?php the_post(); ?>
            <!-- ループここから -->
            <div>
              <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <?php the_post_thumbnail("medium"); ?>
              <?php the_excerpt(); ?>
            </div>

            <div class="archive-article__item" data-aos="fade-up">
              <div class="archive-article-thum">
                <!-- サムネイル -->
                <?php if (has_post_thumbnail()) : ?>
                  <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                <?php else : ?>
                  <a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/noimage.jpg" alt="画像準備中"></a>
                <?php endif; ?>
              </div>
              <p class="article__title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
              <p class="article__date"><?php echo get_the_date('Y.m.d'); ?></p>
              <p class="article__category main-bg-color">
                <?php $cats = get_the_category();
                $current_cat = '';
                foreach ($cats as $cat) {
                  if (!$current_cat || cat_is_ancestor_of($current_cat, $cat)) {
                    $current_cat = $cat;
                  }
                } ?>
                <a href="<?php echo get_category_link($current_cat); ?>"><?php echo $current_cat->cat_name; ?></a>
              </p>
            </div>


            <!-- ループここまで -->
          <?php endwhile; ?>
        <?php else : ?>
          <p>まだ投稿がありません。</p>
        <?php endif; ?>
      </div>
    </div>
</section>

<!-- ページネーションを表示する関数を呼び出し -->
<?php the_pagenation(); ?>
</div>


<?php get_template_part('template-parts/sns'); ?>

<?php get_template_part('template-parts/newarticle'); ?>

<?php get_template_part('template-parts/ranking'); ?>

<?php get_footer(); ?>

検索結果ページ

各種記事一覧ページ

カスタムフィールド項目を条件とした記事一覧

タグ記事一覧

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

WordPress　各種ループコード

投稿記事一覧

投稿記事表示

通常投稿

固定ページの表示

一覧ページ

カテゴリー別一覧

サブループ

ページネーション

パンくずリスト

コメント機能

子テーマについて

ループ内の各種表示タグ

Searchform

Search

固定ページ

アーカイブページ

検索結果ページ

各種記事一覧ページ

カスタムフィールド項目を条件とした記事一覧

タグ記事一覧

この記事を書いた人

コメント

コメントするコメントをキャンセル

Archives

Categories

WordPress 各種ループコード

投稿記事一覧

投稿記事表示

通常投稿

固定ページの表示

一覧ページ

カテゴリー別一覧

サブループ

ページネーション

パンくずリスト

コメント機能

子テーマについて

ループ内の各種表示タグ

Searchform

Search

固定ページ

アーカイブページ

検索結果ページ

各種記事一覧ページ

カスタムフィールド項目を条件とした記事一覧

タグ記事一覧

この記事を書いた人

関連記事

コメント

コメントする コメントをキャンセル

Archives

Categories

WordPress　各種ループコード

コメントするコメントをキャンセル