WordPressテーマCocoonにあわせてオリジナルのカテゴリページを作る方法

WordPressテーマCocoonについて Cocoon

PHPの知識がある方向けの内容です。WordPressテーマCocoonのカテゴリページをカスタマイズする方法をご紹介します。

Cocoon親テーマからプログラムをコピーする

Cocoon親テーマの中に、部品分けされてコードが記述されているので利用すると簡単にオリジナルのカテゴリページが作る事ができます。Cocoon親テーマが入っている themes > cocoon-master > tmp ディレクトリにあるPHPファイルを参照しながら、使いたい部分のコードをコピーします。

Cocoon子テーマ直下にcategory.phpをつくる。

cocoon-child-master直下のディレクトリに、category.phpファイルをつくります。とりあえず、内容は無しで空のPHPファイルで構いません。WordPressはページのURLの付け方ににルールがあります。WordPressでカテゴリページ専用のURLはです。

子テーマを有効化している場合は子テーマのディレクトリが優先されます。子テーマにはcategory.phpが存在しないので、自分で作成して追加したcategory.phpが「カテゴリページ」として実行されます。

作ったcategory.phpに内容を記述していきます。

Cocoon子テーマ用のオリジナルのカテゴリページを作る

<?php
/**
 * cocoon-child-master 用 * オリジナルカテゴリページ *
 * category.php
 * @author: studybank.net
 * @link: https://https://studybank.ne/
 *
 *  テーマの元
 * Cocoon WordPress Theme
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 *
 */


  //WPヘッダーの取得
   get_header();
 
?>
    <?php
      //---------------------------------
      //パンくずリストがメイントップの場合
      //---------------------------------
      if (is_single_breadcrumbs_position_main_top()){
        get_template_part('tmp/breadcrumbs');
      }
    ?>


    <?php
      $cat = get_the_category();
      $catname = $cat[0]->cat_name;
    ?>
    <p class="category-lab-text"><?php echo $catname; ?></p>
<?php
/**
 *-----------------------------------
 * /Cocoon親テーマからコピー部分
 * ----------------------------------
 * */
if ( !defined( 'ABSPATH' ) ) exit;
//カテゴリIDの取得
$cat_id = get_query_var('cat');
$eye_catch_url = get_the_category_eye_catch_url($cat_id);
$content = get_the_category_content($cat_id);
if ($eye_catch_url || $content): ?>
<article class="category-content article">
  <header class="article-header category-header">
    <?php //カテゴリタイトル
    get_template_part('tmp/list-title'); ?>
    <?php if ($eye_catch_url): ?>
      <div class="eye-catch-wrap">
        <figure class="eye-catch">
          <img src="<?php echo esc_url($eye_catch_url); ?>" class="eye-catch-image wp-category-image" alt="<?php echo esc_attr(get_the_category_title($cat_id)); ?>" decoding="async">
          <?php //カテゴリラベル
          // echo get_original_image_tag($eye_catch_url, $width, $height, '"eye-catch-image wp-category-image', get_the_category_title($cat_id));
          if (apply_filters('is_eyecatch_category_label_visible', true)) {
            echo '<span class="cat-label cat-label-'.$cat_id.'">'.single_cat_title( '', false ).'</span>';
          } ?>
        </figure>
      </div>
      <?php do_action('category_eye_catch_after'); ?>
    <?php endif ?>
    <?php //カテゴリシェアボタン
    get_template_part('tmp/category-sns-share-top'); ?>
  </header>
  <?php if ($content): ?>
    <div class="category-page-content entry-content">
      <?php echo $content; ?>
    </div>
  <?php endif ?>
</article>
<?php else: ?>
  <?php //カテゴリタイトル
  get_template_part('tmp/list-title');
  //カテゴリシェアボタン
  get_template_part('tmp/category-sns-share-top'); ?>
<?php   endif
  //-----------------------------------------
 
  /**
   * -----------------------------
   * オリジナル カテゴリ内容
   * ------------------------------
   * */
?>
  <div class="textlink-area-wall">
    <p><strong><?php echo $catname; ?> 記事タイトル一覧</strong></p>
    <ul class="textlink-area">
<?php
      //------------------------
      // タイトル一覧を表示する
      //---------------------
     if(have_posts()):
         while(have_posts()):the_post();   ?>
           <li class="textlink-li"><a class="textlink" href="<?php the_permalink(); ?>"><p class="postlink-title"><?php the_title(); ?></p></a></li>
<?php
         endwhile;
     endif;//end
?>
      </ul>
    </div><!-- //.textlink-area-wall -->
  <p><strong class="category-lab-text"><?php echo $catname; ?> 最新記事</strong></p>
  <div class="under-entry-content">
<?php
    //----------------------------
    // オリジナル
    //カテゴリの最新記事を5つ取得表示
    //-----------------------------
    $information= get_posts( array(
    'category' => 'カテゴリID',
   'post_per_page' => 5     ));     if( $information): ?>         <div class="related-list" id="list">           <?php           foreach( $information as $post ):             setup_postdata( $post );           ?>           <a class="entry-card-wrap a-wrap border-element cf" href="<?php the_permalink(); ?>">             <article class="related-entry-card e-card cf" >               <figure class="related-entry-card-thumb card-thumb e-card-thumb">                 <?php the_post_thumbnail(array(160, 90)); /*アイキャッチ画像の縮小 */ ?>               </figure>               <div class="related-entry-card-content card-content e-card-conten" >                   <h2 class="related-entry-card-title card-title e-card-title"><?php the_title(); ?></h2>                   <div class="entry-card-snippet card-snippet e-card-snippet">                     <?php                       if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 140) {                         $content = mb_substr(strip_tags(get_the_content()), 0, 120, 'UTF-8');                         echo $content . '…';                       } else {                         echo strip_tags(get_the_content());                       }                     ?>                   </div><!-- //class="text" -->                </div><!-- class="related-entry-card-content card-content e-card-conten" -->             </article>           </a>           <?php               endforeach;               wp_reset_postdata();           ?>         </div>         <?php else: ?>         <p>表示できる情報はありません。</p>     <?php endif; ?>     </div><!--//.under-entry-content --> <hr> <?php       //-----------------------------       //Cocoon親テーマからコピー       //---------------------------- ?>     <div class="under-entry-content">       <?php //関連記事上ページ送りナビ       if (is_post_navi_position_over_related()) {         get_template_part('tmp/pager-post-navi');       } ?>       <?php //投稿関連記事上ウイジェット       if ( is_active_sidebar( 'above-single-related-entries' ) ): ?>         <?php dynamic_sidebar( 'above-single-related-entries' ); ?>       <?php endif; ?>       <?php get_template_part('tmp/related-entries'); //関連記事 ?>       <?php //関連記事下の広告表示       if (is_ad_pos_below_related_posts_visible() && is_all_adsenses_visible()){         get_template_part_with_ad_format(get_ad_pos_below_related_posts_format(), 'ad-below-related-posts', is_ad_pos_below_related_posts_label_visible());       }; ?>       <?php //投稿関連記事下ウイジェット       if ( is_active_sidebar( 'below-single-related-entries' ) ): ?>         <?php dynamic_sidebar( 'below-single-related-entries' ); ?>       <?php endif; ?>     </div>     <?php //パンくずリストがメインボトムの場合     if (is_single_breadcrumbs_position_main_bottom()){       get_template_part('tmp/breadcrumbs');     } ?>     <?php //メインカラム追従領域     get_template_part('tmp/main-scroll'); ?> <?php //-------------------------------- ?> <?php get_footer(); ?>

最後にカテゴリページで追加した要素のCSSを子テーマのディレクトリ内のstyle.cssに追加します。

/*-----------------------
カテゴリページ
------------------*/
.category-lab-text{
  display:inline-block;
  clear:both;
  background-color: #187cff;
  color:#fff;
  padding:0 10px;
  font-size:1rem;
  margin: 1rem 0;
}
/*-----------------------
カテゴリ一覧:テキストリンク
-----------------------*/
.textlink-area-wall{
  display:block;
  margin:2rem 0 7rem;
  padding:0;
  width:100%;
}
.textlink-area-wall p strong {
  display:inline-block;
  background-color: #187cff;
  color: #fff;
  padding: 0 14px;
  margin: 1rem 0;
}
.textlink-area { 
	display: flex;
	flex-direction: column;
  flex-wrap: wrap;
	clear:both;
	width: 100%;
	height: auto;
	margin: 1rem auto;
	padding: 5px 0;
	background-color: #fff;
	box-shadow: 0 0 .6rem -0.2rem #9f9f9f;
	box-sizing: border-box;
	list-style:none;
}
.textlink-li {
	display:flex;
	align-items: center;
	clear:both;
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: .2em 0;
	list-style:none;
	/*list-style: inside;
	list-style-type: decimal;/*数字*/	
  /*counter-increment: listCounter;*/
}
.textlink-li:nth-child(1n) {
	background-color: #fff;
}
.textlink-li:nth-child(2n) {
	background-color: #e5f0f2;
}
.textlink-li .marker {
	display:block;
	font-size: 70%;
	width: 85px;
	background-color: #799dc1;
	border: solid 4px #799dc1;
	color:#fff;
  content:  "LESSON: " counters(listCounter, '.', decimal) ' ';
}
.textlink:hover,
.postlink-title:hover {
	color: #0975aa;
}
/*
----------
数字マーカーをつける
olとliで設定が必要
----------
.textlink-li::marker, 
.textlink-li:nth-child(1n)::marker, 
.textlink-li:nth-child(2n)::marker {
	font-size: 80%;
	color:#71c6ff;
  content:  "LESSON: " counters(listCounter, '.', decimal) ' ';
}*/
.textlink {
	display: inline-flex;
  flex-wrap: wrap;
	clear:both;
	width: auto;
	height: auto;
	min-height: 50px;
	min-height: 40px;
	justify-content: center;
	align-items: center;
	margin: 2px 5px 2px 10px;
	line-height:110%;
	text-align: left;
	color:#35393c;
	text-decoration: none;
}
.textlink-li:nth-child(2n) a.textlink{
	color:#0975aa;
	text-decoration: none;
}
@media screen and (max-width:800px) {
	.textlink-li{
		display:block;
		padding: 0 0 1em;
	}
	.textlink-li .marker {
		display:block;
		font-size: 65%;
		margin:0 0 1em;
		padding: 0 0 0 5px;
		border: none;
	}
}

これでオリジナルのカテゴリページが完成しました。

WordPressでオリジナルのカテゴリページを作る方法

WordPressの投稿の取得について参考になるサイト

「WordPress get_posts」この便利な PHP関数で投稿リストを表示する方法
投稿、固定ページ、またはカスタム投稿タイプのリストを作成したいですか?本チュートリアルでは、WordPressのget_posts関数を使用してリストの作り方について説明します!
タイトルとURLをコピーしました