プラグインを使わずWordPressのカテゴリー任意のページにオリジナルのコンテンツを表示させる

NO IMAGE

WordPressでカテゴリーを新規作成すると、そのスラッグでカテゴリーページが自動作成され、そのカテゴリーに属しる記事がサムネイルで表示されます。

大変便利なデフォルトの機能ですが、コンテンツの量が増えてくると「こんな感じでランディングページみたいにしたい」とか、「表示形態を変えてサムネイル表示はしない」等、カスタマイズしたくなってきます。

この記事では、カテゴリーページの表示方法を変更して、オリジナルの記事一覧のページを作る方法をご紹介します。

LION MEDIAのカテゴリーページのテンプレファイルをローカルに落とす

LION MEDIAでカテゴリーの記事一覧を表示させるためのデフォルトのテンプレートのphpファイルは、archive.php です。

この archive.php のファイルの場所は 〇〇○/wp-content/themes/lionmedia/archive.php に格納されています。

この archive.php のファイルをローカルの任意の場所にそのままの名前でダウンロードし、保存しましょう。

スポンサーリンク

オリジナルで表示したいカテゴリーIDを調べる

カテゴリーIDの確認は、次の方法で行います。

ダッシュボード→投稿→カテゴリーを開き、ID番号を確認したいカテゴリーを編集状態にしてURLで確認するか、PCであれば、カテゴリー一覧場面で確認したいカテゴリーにオンマウス をするとIDが確認できます。

IDは

・・・.php?taxonomy=category&tag_ID=60&post_type=post&・・・

この場合、この文字列中の tag_ID=60 と書かれている60という数値が、そのカテゴリーのIDナンバーで、次にテンプレートファイルを作る際必要なので、メモをとっておきましょう。

スポンサーリンク

ダウンロードしたテンプレートファイルをリネームする。

上記で確認したIDを各カテゴリー毎に用意したテンプレートファイルのファイル名をリネームしカテゴリーページを作成します。

オリジナルにしたいカテゴリーページのファイル名を category-〇〇○.php の「〇〇○」に、カテゴリーのIDを入れて保存しましょう。

上記の例で言えば 60 なのでファイル名は「category-60.php」になります。
※カテゴリーのスラッグを入れる方法もありようですが、自分のLION MEDIAでは効果がありませんでした。ので、効果のあるなし含め適宜その方法は合わせて利用ください。

スポンサーリンク

テンプレートファイルの編集をする

作ったカテゴリファイルの50行目付近 <main> の直後の行から、100行目付近の</main>の前までが表示部分です。

<?php get_header(); ?>
<?php
if (is_category() && !is_paged() && get_option('fit_function_categoryTop') == 'value2' ):
$cat_meta = get_option("cat_meta_data");
$cat_id = get_query_var('cat');
?>
  <div class="categoryDescription bgc<?php if (isset($cat_meta[$cat_id])) { echo esc_html($cat_meta[$cat_id]);} ?>">
    <div class="container">
      <div class="categoryDescription__explain">
        <h1 class="categoryDescription__heading u-txtShdw">
		  <span class="categoryDescription__sub">CATEGORY</span>
		  <?php single_cat_title(); ?>
        </h1>
        <?php if (!is_paged() && term_description() && get_option('fit_theme_term') != 'value1' ) : ?>
        <p class="categoryDescription__text u-txtShdw"><?php echo category_description(); ?></p>
        <?php endif; ?>
      </div>
      <ul class="categoryDescription__post">
      <?php
	  $args = array(
	  		'meta_key'=> 'post_views_count',
			'orderby' => 'meta_value_num',
			'order' => 'DESC',
			'posts_per_page' => '1',
			'cat' => $cat_id,
	  );
	  $my_query = new WP_Query( $args );
	  while ( $my_query->have_posts() ) : $my_query->the_post();
	  ?>
        <li class="categoryDescription__item">
          <span class="categoryDescription__ribbon">Pickup</span>
          <?php if(has_post_thumbnail()) {the_post_thumbnail('icatch');} else {echo '<img src="'.get_template_directory_uri().'/img/img_no.gif" alt="NO IMAGE"/>';}?>
          <a class="categoryDescription__link" href="<?php the_permalink(); ?>">
            <h3 class="categoryDescription__title u-txtShdw"><?php the_title(); ?></h3>
          </a>
        </li>
      <?php endwhile; wp_reset_postdata(); ?>
      </ul>
    </div>
  </div>
<?php endif; ?>
<?php fit_breadcrumb(); ?>
<img src="https://kusayakyuu.site/wp-content/uploads/2019/12/0101.jpg" alt="" id="slide0">
   
  <!-- l-wrapper -->
  <div class="l-wrapper">
	
    <!-- l-main -->
    <main class="l-main<?php if ( get_option('fit_theme_archiveLayout') == 'value2' ):?> l-main-single
    <?php if ( get_option('fit_theme_singleWidth') == 'value2' ):?> l-main-w740<?php endif; ?>
    <?php if ( get_option('fit_theme_singleWidth') == 'value3' ):?> l-main-w900<?php endif; ?>
    <?php if ( get_option('fit_theme_singleWidth') == 'value4' ):?> l-main-w100<?php endif; ?>
    <?php endif; ?>">

<!--▼ここから内部▼-->







<!--▲ここまで内部-->
    </main>
    <!-- /l-main -->
    
	<?php if ( get_option('fit_theme_archiveLayout') != 'value2' ):?>
    <!-- l-sidebar -->
      <?php get_sidebar(evols); ?>
    <!-- /l-sidebar -->
	<?php endif; ?>
    
  </div>
  <!-- /l-wrapper -->


<?php get_footer(); ?>

デフォルトでこの辺のサムネイル取得のコードが記載ありますが、使用しないのであれば削除して、任意のコードを書いて保存しましょう。

完了したら、〇〇○/wp-content/themes/lionmedia/ の階層にアップロードすれば完成です。

表示されているかそのカテゴリーページを見て確認しましょう。

WordPressカテゴリの最新記事