メインコンテンツに移動

メインナビゲーション

  • ホーム
  • サイトマップ
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • WordPressのカスタムテンプレートでカテゴリー別の最新記事リンク一覧の表示方法

WordPressのカスタムテンプレートでカテゴリー別の最新記事リンク一覧の表示方法

wordpress
template

やりたいこと:カテゴリー別の最新投稿リンクを10件表示させたいです

  • WordPressがカテゴリー別の投稿一覧表示ができます
    • フロントページに「カテゴリー」ウィジェットがありますが、カテゴリーを選択すれば、カテゴリー別の記事一覧が表示されます
    • この記事一覧がタイトル、コンテンツの一部が表示されています
  • ここでやりたいこと:カテゴリー別の投稿タイトルリンクを10件表示させたいです
    • 投稿のコンテンツ表示しない
    • タイトルにリンクをつける(クリックすると投稿詳細ページへ)

カスタムテンプレートでカテゴリー別の最新投稿リンクを10件表示させます

  • page.phpをコピーして、カスタムテンプレート(例:page-category.php)を作成します
    • ファイルの最初の部分でカスタムテンプレート名を付けます
      <?php
      /* Template Name: Category Page */
      ?>
    • WordPressのカスタムテンプレート名はコメント(/*  */)内で書きます
  • カスタムテンプレートがテーマのフォルダに配置します
    • ここでは、子テーマ(twentyseventeen-child)フォルダに入れます
      カスタムテンプレートをテーマフォルダに配置
  • カテゴリー(例:cat-1)別の投稿を10件取得します
    • ここで直接クエリで投稿一覧取得を行います
      <?php
      	$args = array(
      		'post_type'=>'post',
      		'orderby' => 'date',
      		'order' => 'DESC',
      		'posts_per_page' => 10,
      		'category_name' => 'cat-1',
      		'paged' => get_query_var('paged') ,
      	);
      	query_posts($args); 
      ?>
    • 投稿取得する関数:query_posts($args) を利用
    • 引数:'category_name' => 'cat-1' はカテゴリーのスラッグ名の使用を注意してください
      カテゴリー別の投稿一覧取得:query_posts()関数の使用
  • 固定ページを作成して、作成したカスタムテンプレートを選択すれば、カテゴリー別の投稿一覧が表示されます
    • 固定ページのタイトルが表示されません
    • 固定ページのコンテンツが入力されても、表示されません
    • 固定ページのURLだけの利用となります
  • カスタムテンプレートのコードは以下のようです
    <?php
    /**
     * Template Name: Category Page
     */
    
    get_header(); ?>
    
    <div class="wrap">
    	<div id="primary" class="content-area">
    		<main id="main" class="site-main" role="main">
    
    			<?php
    				$args = array(
    					'post_type'=>'post',
    					'orderby' => 'date',
    					'order' => 'DESC',
    					'posts_per_page' => 10,
    					'category_name' => 'cat-1',
    					'paged' => get_query_var('paged') ,
    				);
    				query_posts($args); 
    			?>
    			<?php if(have_posts() ) : ?>
    				<?php while(have_posts()) : the_post(); ?>
    					<div>
    						<div>
    							<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
    						</div>
    					</div>
    				<?php endwhile; ?>
    			<?php endif; ?>	
    			
    		</main><!-- #main -->
    	</div><!-- #primary -->
    </div><!-- .wrap -->
    
    <?php get_footer();
    

     

Embedded thumbnail for WordPressのカスタムテンプレートでカテゴリー別の最新記事リンク一覧の表示方法
ホーム

古松

検索

Article Category

  • apache(7)
  • css(19)
  • drupal(295)
  • Electron(4)
  • html(34)
  • javascript(27)
  • laravel(4)
  • linux(5)
  • macOS(2)
  • mysql(13)
  • php(19)
  • python(4)
  • SEO(12)
  • video(72)
  • Visual Studio Code(4)
  • windows(13)
  • wordpress(32)