特定のカテゴリーだけ一覧リストのスタイルを「タイル3列」にしたい

やり方は色々あります。

例えば、子テーマfunctions.phpに、

function addScript_masonry() {
	if ( is_category() && is_category(array('サンプル')) ) {
		wp_enqueue_style( 'masonry-style', get_stylesheet_directory_uri(). '/masonry.css');
		wp_enqueue_script( 'jquery-masonry', '/wp-includes/js/jquery/jquery.masonry.min.js', array( 'jquery' ), '20160927', true );
	}
}
add_action('wp_enqueue_scripts', 'addScript_masonry');

このように書くと、カテゴリーで、かつそのカテゴリーが「サンプル」の場合に、子テーマのmasonry.cssとmasonryを読み込みます。masonryはタイル状に並び替えるためのスクリプトです。Simplicityもこれを使っています。

次にmasonryを動作させる、スクリプトを子テーマjavascript.jsに書きます。
どういう時にmasonryが動作するかがわかれば良いので、bodyタグに付けられるカテゴリーIDを調べます。

(function($) {
	$(function() {
		if ($("body").hasClass("category-4")) {
			$('#list').masonry({ //<!-- #listは記事一覧を囲んでる部分 -->
				itemSelector: '.entry', //<!--.entryは各記事を囲んでる部分-->
				isAnimated: false, //<!--アニメーションON-->
			});
		}
	});
})(jQuery);

bodyがcategory-4(サンプルの時につけられるカテゴリID)を持っている場合、リスト一覧の親要素である#listにmasonryを動作させると言う事です。これらは親テーマjavascript.jsに同じことが書いてあります。それを子テーマjavascript.jsで特定の場合に動作させるということです。

次にmasonryで3列を表示させる時のスタイルを作ります。
子テーマにmasonry.cssを追加して、

#main .entry {
    width: 214px;
    margin: 10px 5px 0 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    float: left;
    clear: none;
    overflow: visible;
    box-sizing: border-box;
}

#list .entry .entry-thumb {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    text-align: center;
    margin-bottom: 0;
    width: 100%;
}

.entry-thumb img {
    width: 100%;
    height: auto;
    margin-bottom: 6px;
}

.entry-card-content {
    margin-left: 0;
    clear: both;
}

.entry h2 a {
    margin-top: 0;
    font-size: 16px;
    line-height: 110%;
}

.entry .post-meta {
    margin: 0;
    font-size: 12px;
}

.entry-snippet {
    font-size: 11px;
    padding: 0 5px;
    word-wrap: break-word;
}

.entry-read a {
    font-size: 12px;
    padding: 0 5px;
}

.entry .post-meta .category {
    display: none;
}

.entry h2 {
    padding: 0 5px;
    word-wrap: break-word;
    line-height: 100%;
}

.entry-read a.entry-read-link {
    padding: 5px 0;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    width: auto;
}

@media screen and (max-width:471px) {
    #main .entry {
        width: 100%;
        margin: 5px 0;
    }
    .entry-thumb img {
        width: 100%;
        height: auto;
    }
    .entry h2 a {
        font-size: 16px;
    }
    .post-meta {
        font-size: 14px;
    }
}

を書きます。これはSimplicityでタイル3列を表示させる時にheadタグ内に読み込まれるstyleの一部です。

masonryの読み込み、masonryの設定、masonryのcssが揃えば、あるカテゴリーの時だけ3列にすることは可能です。
この方法でのcssはstyleタグで書かれるわけではないので、子テーマのmasonry.cssを変更すれば色々とスタイルができます。
また、simplicityのタイル3列のデフォルトの場合は上記の通りで同じような表示になるだけで、カスタマイズすれば独自の表示にもできるかと思います。

参考リンク: masonry(公式)

masonryはgridで表示させるためのjavascript(jQuery)ですが、現在最新のモダンブラウザ(firefox, chrome)ならcssだけでgridができます。

サンプル: 1カラム<->2カラムでgrid表示テスト | codepen
サンプル: トップリスト一覧 gridレイアウト カードタイプ2|3列 レスポンシブ | codepen

これらサンプルは、アドレスの/pen/部分を/full/に変更すればフルページで見れます。実機で見れるかどうかはfullのアドレスで確認してみて下さい。

cssのgridの対応状況は、can i use | gridで確認できます。IE, edge、デフォルトのアンドロイドブラウザー以外は表示できるようです。
最新のスタイルなので、今後対応されていくかと思いますが、現状でcssのgridを利用するかmasonryでやるかは見る人の対応状況次第です。
個人的にはcssのgridで良いかと思いますが、見れない人も一定数いるだろうと思うので、masonryの方が今の所は汎用性がありそうです。

functions.phpに書いたwp_enqueue_style部分は、
wp_enqueue_style( 'masonry-style', get_stylesheet_directory_uri(). '/masonry.css', array('simplicity-style'));

こんなふうにして、子テーマstyle.cssの後に読み込ませたほうがよいかも知れません。ここらは必要に応じて(子テーマstyle.cssのスタイルがmasonry.cssを上書きしてしまう場合など)、変更して下さい。

今ふと思ったんですが、

if ( is_category() && is_category(array('サンプル')) ) {
は、
if ( is_category(array('サンプル')) ) {

で良いと思います。なんで重複させていたのかはわかりません(笑)
気の迷い、色々しながら書いてるなど理由はたくさんありますが、もし何かしら気がついたことがあれば色々添削して下さい。

サンプル: 特定のカテゴリーだけmasonryにする – cssサンプル | codepen

こんな感じで、新規作成したmasonry.cssの中身をいじればある程度自由にスタイルすることができます。

Hidekichi さま
丁寧な回答を迅速に下さり、本当にありがとうございます。

おかげさまで、実現することができました。

ソースコードにつきましては、本当にそのままを使わせていただいております。

masonry.cssをどうやって読み込んでいるのかがわかりませんでした。
javascriptだったのですね！！

本当にありがとうございました。

> masonry.cssをどうやって読み込んでいるのかがわかりませんでした。
> javascriptだったのですね！！

masonry.cssはjavascriptで読み込んでいるというわけではないんですが、タイル3列をsimplicityがどのように実現しているのかと言われればその通りです。

Simplicityの場合、カスタマイザーの設定がタイル2列だったり3列だったりする場合に、その設定からheadタグの中にstyleタグにてそれらの場合のcssを書き出し、masonryのスクリプトを読み込んでいます。
色々カスタマイズはできるようにはなっていますが、masonryを実行するスクリプトが親テーマに書かれているため、細かな動作をmasonry公式のサンプルにあるようにするためには修正が必要ながら親テーマに書いてあるのが問題になります。

親テーマのアップデートごとに親テーマのjavascript.jsを修正すればよいのですが、面倒ですよね。なので場合によっては今回の方法のように、子テーマで利用できるようにしておくと便利は便利です。

まぁ親テーマのjavascript.jsは、$(セレクタ).load()とか、$(セレクタ).size()などが使われているため、jQuery3系を使おうと思えば常に修正はしないといけないんですけれども。僕が3系を使っているので毎回の修正が面倒なのはよくわかります。なのでメインのサイトはアップデートしてません。

masonryも、独自のオプションを付けない限りはデフォルトで使えば良いだけなんですけどね。