テーマをCocoonに変更しました!

Simplicityの固定ページにショートコードを使って特定のカテゴリを表示する方法

wordpress

<?php
// 一覧記事取得関数 --------------------------------------------------------------------------------
// "num" = 表示記事数, "cat" = カテゴリ番号
// 呼び出し元での指定も可能 -> [getCategoryArticle num="x" cat="y"]
function getCatItems($atts, $content = null) {
	extract(shortcode_atts(array(
	  "num" => '2',
	  "cat" => '12'
	), $atts));
	
	// 処理中のpost変数をoldpost変数に退避
	global $post;
	$oldpost = $post;
	
	// カテゴリーの記事データ取得
	$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
	
	if($myposts) {
		// 記事がある場合↓
		$retHtml = '<div class="getPostDispArea">';
		// 取得した記事の個数分繰り返す
		foreach($myposts as $post) :
			// 投稿ごとの区切りのdiv
			$retHtml .= '<div class="getPost">';

			// 記事オブジェクトの整形
			setup_postdata($post);

			// サムネイルの有無チェック
			if ( has_post_thumbnail() ) {
				// サムネイルがある場合↓
				$retHtml .= '<div class="getPostImgArea">' . get_the_post_thumbnail($page->ID, 'thumbnail') . '</div>';
			} else {
				// サムネイルがない場合↓※何も表示しない
				$retHtml .= '';
			}
			
			// 文章のみのエリアをdivで囲う
			$retHtml .= '<div class="getPostStringArea">';
			
			// 投稿年月日を取得
			$year = get_the_time('Y');	// 年
			$month = get_the_time('n');	// 月
			$day = get_the_time('j');	// 日
			
			$retHtml .= '<span>この記事は' . $year . '年' . $month . '月' . $day . '日に投稿されました</span>';
			
			// タイトル設定(リンクも設定する)
			$retHtml.= '<h4 class="getPostTitle">';
			$retHtml.= '<a href="' . get_permalink() . '">' . the_title("","",false) . '</a>';
			$retHtml.= '</h4>';
			
			// 本文を抜粋して取得
			$getString = get_the_excerpt();
			$retHtml.= '<div class="getPostContent">' . $getString . '</div>';
			
			$retHtml.= '</div></div>';
			
		endforeach;
		
		$retHtml.= '</div>';
	} else {
		// 記事がない場合↓
		$retHtml='<p>記事がありません。</p>';
	}
	
	// oldpost変数をpost変数に戻す
	$post = $oldpost;
	
	return $retHtml;
}
// 呼び出しの指定
add_shortcode("getCategoryArticle", "getCatItems");
?>

スタイルシートで綺麗にする

.getPostDispArea .getPost {
    border: 2px solid #9a9a9a;
    padding: 15px;
    margin: 10px 0px;
    background-color: #e4f4ff;
}

.getPostDispArea .getPost:after {
    content: '';
    display: table;
    clear: both;
}

.getPostImgArea {
    width: 20%;
    float: left;
}

.getPostStringArea {
    width: 80%;
    padding-left: 15px;
    float: left;
}

h4.getPostTitle {
    font-weight: bold;
}

固定ページに下記のコードを記述するだけでカテゴリー一覧を表示

[getCategoryArticle]

記事の表示数を三つにして、カテゴリー番号の5を表示したい場合は下記のように指定します

[getCategoryArticle num="3" cat="5"]

詳しい説明は以下のサイトに書かれています

WordPressの固定ページにショートコードで特定のカテゴリーの投稿記事(サムネイル、タイトル、投稿日、記事概要のみ抜粋)の一覧を表示する方法 | 神奈川県相模原市のWEB制作(ホームページ)、WEBマーケティング インクループ株式会社

今回は、WordPressの固定ページにショートコードで特定のカテゴリーの投稿記事(サムネイル、タイトル、投稿日、記事概要のみ抜粋)の一覧を表示する方法を掲載します。WordPressのfunction.phpに本記事で掲載するプログラムをコピペするだけで記事の一覧が表示できます!

Shortcodes Ultimateをどこにでも表示出来るようにする
...
ブログ管理者などによく売れてる本です

コメント

タイトルとURLをコピーしました