固定ページの中に「あるカテゴリーの記事」を入れる方法について

「ワードプレス　新着記事　ショートコード　特定のカテゴリ」
で検索されると良いかもしれません。

ありがとうございます。

以下のコードを子テーマのfunctions.php内に追加して、トップページ（固定ページ）にショートコードを追記したところ、「あるカテゴリの記事」の出力まではできました。この方法だと、リストでの表示になりました。

function getCatItems($atts, $content = null) {
    extract(shortcode_atts(array(
        "num" => '5',
        "cat" => ''
    ), $atts));
    global $post;
    $oldpost = $post;
    $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
    $retHtml='<ul>';
    foreach($myposts as $post) :
        setup_postdata($post);
        $retHtml.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
    endforeach;
    $retHtml.='</ul>';
    $post = $oldpost;
    return $retHtml;
}
add_shortcode("list", "getCatItems");

希望としては、Simplicityで設定している、「タイル2列」のスタイルを適用したいのですが、どこを修正したらいいのか教えていただけると助かります。

https://goo.gl/Ffawtz

よろしくお願いします。

リストの中に画像を出力するphpを書いたり、それぞれクラス名を付けたりすると、後は固定ページのカスタム
CSSで2列にするスタイルを書けば出来ると思います＾＾

functions.phpの書き方はわかりませんけど、、

ありがとうございます！

やはり、CSSでSimplicityの「タイル2列」のスタイルを適用するということになりますよね。

以前、こちらのフォーラムに以下の質問をした際、わいひらさんより、現在のリスト取得関数を上書きする方法を教えていただきました。

特定のカテゴリーの一覧リストを2列で表示したい

今回、表示させたいカテゴリーの記事は上記で教えていただいた方法で「タイル2列」の表示に設定しています。

子テーマのfunctions.phpで設定している「一覧リスト表示」をそのまま出力できる方法はないですよね？
ご存知でしたら教えていただければと思います。

わいひらさん

コメントありがとうございます！
自前でタイル表示になるようなショートコード用の処理をしないといけないんですね。
どうしてもこのカスタマイズをやりたいと思っておりますが、どこから手を付けていいのか分からず、何かヒントになるようなサイトが合ったら教えて頂くことはできますか？
色々すみません・・

いとうさん

ヒントをもらってもエラーを出す可能性はかなり高いので、ローカル環境で構築してするとかが必要そうです…。カスタマイズしてもらうと、ほとんどエラーは出ないので助かりますけどね❦

functions.phpでショートコードを書くのはPHPの知識がかなり必要なので、HTMLで出力した方が初心者的には、やりやすいと思いますよっ＾＾

• ワイヒラさんが作ったコードがあるのでマネをして、ワカラナイ部分は検索しながらできる
  • 時間はかかるけど、検索でヒットしやすいなど
  • 他のコードもみるので、少なからず知識もつく
• 元のCSSを使ったり、確認しながらスタイルをあわせていけば素人でもできたり＾＾

ただアップデートをしたとき対処は必要ですが、やりたい表示は可能です

<div class="news">
    <?php
    $lastposts = get_posts('numberposts=4&category=1');
    foreach($lastposts as $post) : setup_postdata($post);
    ?>
	<div class="entry-news clearfix">
        <figure class="news-thum">
            <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
            <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb320', array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?></a>
            <?php else: // サムネイルを持っていない ?>
            <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" class="entry-thumnail no-image list-no-image" width="320" height="180" /></a>
            <?php endif; ?>
        </figure>
		<div class="entry-card-content">
			<h2 class="new-title"><a id="post-<?php the_ID(); ?>" href="<?php the_permalink(); ?>" class="entry-title entry-title-link"><?php the_title(); ?></a></h2>
	        <p class="post-meta">
	            <span class="post-date"><i class="fa fa-clock-o fa-fw"></i><?php the_time('Y/m/d') ?></span> <span class="category"><i class="fa fa-folder fa-fw"></i></span><?php 
	            $category = get_the_category(); 
	            if ( $category[0] ) {
	            echo '<a href="' . get_category_link( $category[0]->term_id ) . '" class="news-cat">' . $category[0]->cat_name . '</a>';
	            }
	            ?>
	        </p>
			<p class="entry-snippet">
				<?php echo mb_substr($post->post_content,0,250).'...'; ?>
				<a href="<?php the_permalink(); ?>" >more</a>
			</p>
		</div>
	</div>
    <?php endforeach; ?>
</div>

以前どなたかのカスタマイズの書き込みがあって、テーマのphpとにらめっこ・検索からコードを参考にして作ったものをSimplicityのタイル2列のタグを見ながら変更したものです。

HTMLもCSSも苦手なので、修正箇所はあると思いますが、こんな感じです。

.entry-news {
	width: 320px;
	border: 1px solid #ddd;
	margin: 0 5px;
}
.news a {
	text-decoration: none;
	transition: 1s;
	color: #555;
}
.news .entry-title {
	font-size: 18px;
}
.new-title {
	padding-left: 0.2em;
	margin: 0.2em 0 0 0;
}
.post-meta {
	text-align: left;
	font-size: 15px;
}
.post-meta a {
	text-decoration: underline;
}

/*画像の幅指定と角丸*/
.news-thum .entry-thumnail {
	width: 320px;
	height: 180px;
	border-radius: 3px;
}

@media screen and (min-width: 500px) {
	.news {
		display: flex;
		flex-wrap: wrap;
	}
	.entry-news {
		width: calc(50% - 24px);
		margin-bottom:2.2em;
	}
	}
}

自分の環境でしか試してなく、細かい面は気にしてませんし、古いブラウザも無視してます。お好みの感じになるように、あと修正してくださいねっ。

かなり文字化けしてますね＾＾；

すみません・・・

<div class="news">
    <?php
    $lastposts = get_posts('numberposts=4&category=1');
    foreach($lastposts as $post) : setup_postdata($post);
    ?>
	<div class="entry-news clearfix">
        <figure class="news-thum">
            <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
            <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'thumb320', array('class' => 'entry-thumnail', 'alt' => get_the_title()) ); ?></a>
            <?php else: // サムネイルを持っていない ?>
            <a href="<?php the_permalink(); ?>" class="entry-image entry-image-link" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-image-320.png" alt="NO IMAGE" class="entry-thumnail no-image list-no-image" width="320" height="180" /></a>
            <?php endif; ?>
        </figure>
		<div class="entry-card-content">
			<h2 class="new-title"><a id="post-<?php the_ID(); ?>" href="<?php the_permalink(); ?>" class="entry-title entry-title-link"><?php the_title(); ?></a></h2>
	        <p class="post-meta">
	            <span class="post-date"><i class="fa fa-clock-o fa-fw"></i><?php the_time('Y/m/d') ?></span> <span class="category"><i class="fa fa-folder fa-fw"></i></span><?php 
	            $category = get_the_category(); 
	            if ( $category[0] ) {
	            echo '<a href="' . get_category_link( $category[0]->term_id ) . '" class="news-cat">' . $category[0]->cat_name . '</a>';
	            }
	            ?>
	        </p>
			<p class="entry-snippet">
				<?php echo mb_substr($post->post_content,0,250).'...'; ?>
				<a href="<?php the_permalink(); ?>" >more</a>
			</p>
		</div>
	</div>
    <?php endforeach; ?>
</div>

申し訳ないです、、

ありがとぉございます＾＾

かうたっくさん、親切に教えていただきありがとうございます。
初心者の私には、HTMLで出力した方が良さそうですね。

#53370を固定ページに記載し、#53369のCSSを子テーマのstyle.cssに書きましたが、なぜかうまく表示されませんでした。
やり方が間違っているのでしょうか？

https://goo.gl/JCYFX4

#53370を固定ページに記載し、#53369のCSSを子テーマのstyle.cssに書きましたが、なぜかうまく表示されませんでした。

固定ページを読み込んでいるPHPファイルにコードを書けば反映されます＾＾

※投稿画面でPHPのコードは使えない

固定ページを開くとPC上では右側、スマホでは投稿記事下にファイル名の記載があったような。。
固定ページを指定しているPHPファイルに書きます

そのPHPファイルをダッシュボードの外観より編集すれば反映する感じです。

CSSは、子テーマのスタイルシートでも反映しますけど、そのページだけの記載なので全体のスタイルとして使用される場所に書くより、固定ページ下にあるカスマムCSSに貼っても良いですね＾＾

※カスマムCSSに書けば、そのページのみスタイルを読み込む
他の投稿ページはそのスタイルを読み込まないから、微妙だけど表示速度的に良いため

#53370 を独立したPHPファイルとして作成し、それをショートコードで読み込んでもやりやすいかと思います。

[WordPress]ショートコードでPHPテンプレート（ファイル）を呼び出す

いいね！

かうたっくさん
いのぽんさん

ご助言ありがとうございました！
無事、カスタマイズが終了しました。
ショートコードは本当に便利ですね。