wordpress自作テーマ作成【パート3】

2022/5/3 wordpress

このエントリーをはてなブックマークに追加
Pocket

最小構成でwordpressのテーマを作成します。

パート3では以下の行程を進めます。

条件および方針

0. wordpressをサーバーに設置済とする。

1. トップページ(index.html)、投稿ページ(single.html)、固定ページ(page.html)、アーカイブページ(archive.html)を作成する

2. wordpressのthemesディレクトリに作成したファイルをいれる

3. 作成したファイルの書き換え、ファイルの追加　←　パート1はここまで

4. 記事詳細ページの作成(single.php)　

5. 固定ページの作成(page.php)　←　パート2はここまで

6. アーカイブの作成(archive.php)　←　本記事はここまでやります

7. その他の設定とまとめ

 

6. 記事詳細ページの作成(archive.php)

・archiveでカテゴリ別に投稿記事を表示させる。
・記事のカテゴリ－の初期値をnewsとする。(日付順の表示も楽にできる)

 

6-1. archive.php、archive-news.php、archive-other.php、functions.phpの作成

・カテゴリごとに読み込むテンプレート変更できます。

・functions.phpでアーカイブの表示件数を調整します。

○archive.php

<?php
  $post = $wp_query->post;//記事データ取得
  if ( in_category('news') ) {//カテゴリがnewsなら下記を実行
    include(TEMPLATEPATH.'/archive-news.php');
  } elseif ( !(in_category('news')) ) {//カテゴリがnews以外なら下記を実行
    include(TEMPLATEPATH.'/archive-other.php');
  }
?>

 

 

○archive-news.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>wordpressテーマ自作</title>
  <meta name="description" content="ディスクリプションだよ">
  <meta name="keywords" content="キーワード1, キーワード2">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/archive.css">
  <?php wp_head(); ?>
</head>
<body>
<header>
  <div class="headerWrap">
    <div class="centerBox">
      <p>ここからheader</p>
      <h1>wordpress自作テーマ概略</h1>
      <div class="menuBtn">
        <span></span>
        <span></span>
        <span></span>
      </div>
       <nav class="headerMenu">
        <ul>
          <li>
            <a href="">トップページ</a>
          </li>
          <li>
            <a href="">記事一覧へのリンク</a>
          </li>
          <li>
            <a href="">固定ページへのリンク</a>
          </li>
         </ul>
      </nav>
      <p>ここまでheader</p>
    </div>
  </div>
</header>
<main>
  <div class="mainWrap">
    <div class="centerBox">
      <p>ここからmain</p>
      <div class="rowWrap">
        <div class="contentWrap">
          <p class="text">アーカイブ(news)</p>
<?php
  //投稿記事があれば下記を実行
  if(have_posts()){
?>
          <ul>
<?php
  //記事取得分だけ繰り返す
   while(have_posts()) {
     the_post();//記事データを取得
?>
            <li>
              <a href="<?php echo get_permalink(); ?>"><p><span> <?php the_time('Y年n月j日'); ?></span><span><?php $category = get_the_category(); $cat_name = $category[0]->cat_name; echo $cat_name; ?></span><?php the_title(); ?></p></a>
            </li>
<?php
   }
?>
          </ul>
<?php
  }
?>
          </div>
          <div class="sideBar">
            <p>サイドバーを書く</p>
            <?php get_sidebar(); ?>
          </div>
        </div>
        <p>ここまでmain</p>
      </div>
    </div>
  </div>
</main>
<footer>
  <div class="footerWrap">
    <div class="centerBox">
      <p>ここからfooter</p>
      <p>ここまでfooter</p>
    </div>
  </div>
  <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-2.0.0.min.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script>
  <?php wp_footer(); ?>
</footer>
</body>
</html>

 

○archive-other.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>wordpressテーマ自作</title>
  <meta name="description" content="ディスクリプションだよ">
  <meta name="keywords" content="キーワード1, キーワード2">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/archive.css">
  <?php wp_head(); ?>
</head>
<body>
<header>
  <div class="headerWrap">
    <div class="centerBox">
      <p>ここからheader</p>
      <h1>wordpress自作テーマ概略</h1>
      <div class="menuBtn">
        <span></span>
        <span></span>
        <span></span>
      </div>
       <nav class="headerMenu">
        <ul>
          <li>
            <a href="">トップページ</a>
          </li>
          <li>
            <a href="">記事一覧へのリンク</a>
          </li>
          <li>
            <a href="">固定ページへのリンク</a>
          </li>
         </ul>
      </nav>
      <p>ここまでheader</p>
    </div>
  </div>
</header>
<main>
  <div class="mainWrap">
    <div class="centerBox">
      <p>ここからmain</p>
      <div class="rowWrap">
        <div class="contentWrap">
          <p class="text">アーカイブ(other)</p>
<?php
  //投稿記事があれば下記を実行
  if(have_posts()){
?>
          <ul>
<?php
  //記事取得分だけ繰り返す
   while(have_posts()) {
     the_post();//記事データを取得
?>
            <li>
              <a href="<?php echo get_permalink(); ?>"><p><span> <?php the_time('Y年n月j日'); ?></span><span><?php $category = get_the_category(); $cat_name = $category[0]->cat_name; echo $cat_name; ?></span><?php the_title(); ?></p></a>
            </li>
<?php
   }
?>
          </ul>
<?php
  }
?>
          </div>
          <div class="sideBar">
            <p>サイドバーを書く</p>
            <?php get_sidebar(); ?>
          </div>
        </div>
        <p>ここまでmain</p>
      </div>
    </div>
  </div>
</main>
<footer>
  <div class="footerWrap">
    <div class="centerBox">
      <p>ここからfooter</p>
      <p>ここまでfooter</p>
    </div>
  </div>
  <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-2.0.0.min.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script>
  <?php wp_footer(); ?>
</footer>
</body>
</html>

 

○functions.php

//アーカイブ表示件数
function change_posts_per_page($query) {
  if ( is_admin() || ! $query->is_main_query() ){//管理画面あるいはメインクエリでなければ即終了
    return;
  }
  if ( $query->is_category('news') ) { /* カテゴリがnewsのとき表示件数を10件にセット */
    $query->set( 'posts_per_page', '10' );
  }
  if ( $query->is_home() ) {/* トップページの表示件数を5件にセット */
    $query->set( 'posts_per_page', '5' );
  }
}
add_action( 'pre_get_posts', 'change_posts_per_page' );

・その他のページの表示件数はwordpressの管理画面の1ページに表示する最大投稿数から設定できる

 

6-2. アーカイブにページネーションの追加

・記事ループの下にページネーション表示用の関数を挿入する

○archive-news.php, archive-other.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>wordpressテーマ自作</title>
  <meta name="description" content="ディスクリプションだよ">
  <meta name="keywords" content="キーワード1, キーワード2">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/normalize.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/archive.css">
  <?php wp_head(); ?>
</head>
<body>
<header>
  <div class="headerWrap">
    <div class="centerBox">
      <p>ここからheader</p>
      <h1>wordpress自作テーマ概略</h1>
      <div class="menuBtn">
        <span></span>
        <span></span>
        <span></span>
      </div>
       <nav class="headerMenu">
        <ul>
          <li>
            <a href="">トップページ</a>
          </li>
          <li>
            <a href="">記事一覧へのリンク</a>
          </li>
          <li>
            <a href="">固定ページへのリンク</a>
          </li>
         </ul>
      </nav>
      <p>ここまでheader</p>
    </div>
  </div>
</header>
<main>
  <div class="mainWrap">
    <div class="centerBox">
      <p>ここからmain</p>
      <div class="rowWrap">
        <div class="contentWrap">
          <p class="text">アーカイブ(news)</p>
<?php
  //投稿記事があれば下記を実行
  if(have_posts()){
?>
          <ul>
<?php
  //記事取得分だけ繰り返す
   while(have_posts()) {
     the_post();//記事データを取得
?>
            <li>
              <a href="<?php echo get_permalink(); ?>"><p><span> <?php the_time('Y年n月j日'); ?></span><span><?php $category = get_the_category(); $cat_name = $category[0]->cat_name; echo $cat_name; ?></span><?php the_title(); ?></p></a>
            </li>
<?php
   }
?>
          </ul>
<?php
  }
?>

?>
<?php if (function_exists("pagination")) {//ページネーションが存在しているなら
pagination($wp_query->max_num_pages);//ページネーション実行
} ?>
          </div>
          <div class="sideBar">
            <p>サイドバーを書く</p>
            <?php get_sidebar(); ?>
          </div>
        </div>
        <p>ここまでmain</p>
      </div>
    </div>
  </div>
</main>
<footer>
  <div class="footerWrap">
    <div class="centerBox">
      <p>ここからfooter</p>
      <p>ここまでfooter</p>
    </div>
  </div>
  <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-2.0.0.min.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/js/index.js"></script>
  <?php wp_footer(); ?>
</footer>
</body>
</html>

 

○functions.php

・ページネーション表示用関数の中身を記述する
ページネーションの複雑なところだけ解説します。

$pages・・・全ページ

$paged・・・現在のページ

$showitems・・・ページ数の表示個数を表す式。$rangeの数値を設定することでページネーションの数字の部分を何個にするか調整できます。

 

①<ページ送り(戻る)>

・if($paged > 1 && $showitems < $pages)
現在のページが2ページ目かつページ数の表示個数が全ページ数より少ないとき

 

②<数字の部分>

if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
このままだと分かりにくいので分解します。

・!($i >= $paged+$range+1 || $i <= $paged-$range-1)
書き換えると($paged-$range-1<$i<$paged+$range+1 )こんな式になります。
これでもイメージがわかない場合は$pagedと$rangeに実際に数字を入れてみると良いかも。

・$pages <= $showitems
全ページ数が表示個数より小さいとき(イメージが分かない場合はページ送りの時と背反の条件の時と考えると良いかも)

 

③<ページ送り(進む)>

・if ($paged < $pages && $showitems < $pages)
現在のページが最後のページから一つ前かつページ数の表示個数が全ページ数より少ないとき

//アーカイブ表示件数
function change_posts_per_page($query) {
  if ( is_admin() || ! $query->is_main_query() ){//管理画面あるいはメインクエリでなければ即終了
    return;
  }
  if ( $query->is_category('news') ) { /* カテゴリがnewsのとき表示件数を10件にセット */
    $query->set( 'posts_per_page', '10' );
  }
  if ( $query->is_home() ) {/* トップページの表示件数を5件にセット */
    $query->set( 'posts_per_page', '5' );
  }
}
add_action( 'pre_get_posts', 'change_posts_per_page' );

//
//ページネーション
if( !function_exists('pagination') ){
  function pagination($pages = '', $range = 1)
  {
    $showitems = ($range * 2)+1;

    global $paged;
    if(empty($paged)) $paged = 1;

    if($pages == '')
    {
      global $wp_query;
      $pages = $wp_query->max_num_pages;
      if(!$pages)
      {
        $pages = 1;
      }
    }

    if(1 != $pages)
    {
      echo "<div class='pagination'>";
      echo "<ul class='pagenationList'>";
      
      //①
      if($paged > 1 && $showitems < $pages) echo "<li class='pagenationListItem'><a class='pagenationListLink' href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a></li>";

      for ($i=1; $i <= $pages; $i++)
      {
        //②
        if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
        {
          echo ($paged == $i)? "<li class='pagenationListItem'><span class='pagenationListLink now'>".$i."</span></li>":"<li class='pagenationListItem'><a class='pagenationListLink' href='".get_pagenum_link($i)."' class='inactive' >".$i."</a></li>";
        }
      }

      //③
      if ($paged < $pages && $showitems < $pages) echo "<li class='pagenationListItem'><a class='pagenationListLink' href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a></li>";
      
      echo "</ul>\n";
      echo "</div>\n";
    }
  }
}

 

これでアーカイブページにページネーションが表示されます。

 

パート4に続く

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

, , ぱん