トップページの表示方法をカスタマイズ

表示自体はcssだけでイケると思いますが、

> 読んで損はさせないネタ記事
> と
> twitterあれこれ

は、それぞれのループで最新5つとかを抽出する必要があると思うので、そこらはわいひらさん同様何かしらのスクリプトの追加あるいはプラグインのようなものが必要と思います。
これらスクリプトにより、

Aのリスト
  そのアイテム
  そのアイテム
  そのアイテム
  そのアイテム
Bのリスト
  そのアイテム
  そのアイテム
  そのアイテム
  そのアイテム

こういう出力ができたらスタイル自体はcssでできると思います。

サンプル: リンク先みたいな感じにする | codepen

こんな感じでしょうか。
.post-metaは面倒だったのでjQueryでやってます。

わいひらさん、Hidekichiさんご回答ありがとございます。
只今勉強しながら思考錯誤で頑張ってトライしています。

Hidekichiさんの作って頂いたサンプルはまさに僕の理想としているその物です。
Hidekichiさんの作って頂いたサンプルを元にトライしています。
もう少し時間をください。

途中経過です。

いろいろ検索しながらカテゴリ別サムネイル付きの表示まで辿りついたのですが
Hidekichiさんのサンプル見たいにやりたく試行錯誤でやっているのですが
CSSのclassやIDの付ける場所が分かりません。
下のソースだとまだ不十分ってことなのでしょうか？
どうか教えて下さいませ。（すみません）

それとJSの箇所で「おまけ」とありますが
それも必要と言う事なのでしょうか？
ド素人なので内容が理解出来なくて本当に恐縮です。

<?php
    $cat = 'スラッグ';
    $num = '5';
    global $post;
 
    $term_id = get_category_by_slug($cat)->term_id;
    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
    if ($myposts) {
        echo '<strong>Category: ' .get_the_category_by_ID($term_id). '</strong>';
        foreach($myposts as $post):
            setup_postdata($post);
            echo '<div class="postlist-category"><a href=' .get_permalink(). '>';
            if ( has_post_thumbnail() ) {
                echo ''.get_the_post_thumbnail($page->ID, 'thumbnail'). '';
            } else {
                echo '<i class="ico-camera-alt"></i>';
            }
            echo '</a></div><div class="postlist-category-inner">';
            echo '<span class="postlist-datetime">' .get_the_time('Y/n/j H:i:j').'</span>';
            echo '<p><a href='.get_permalink().'><strong>'. the_title("","",false).'</strong></a></p>';
            echo '<p>' .mb_substr( strip_tags( $post -> post_content ), 0, 32 ). '...</p></div>';
        endforeach;
    echo '<p><a href=' .get_category_link($term_id). '>カテゴリの一覧 ≫</a></p>';
    } else {
    echo '<p>記事がありません。</p>';
    }
 
?>

ソースコードが変換されたので再度投稿させて頂きます。

<?php
$cat = ‘movie’;
$num = ‘3’;
global $post;

$term_id = get_category_by_slug($cat)->term_id;
$myposts = get_posts(‘numberposts=’ .$num. ‘&category_name=’ .$cat);
if ($myposts) {
echo ‘Category: ‘ .get_the_category_by_ID($term_id). ‘‘;
foreach($myposts as $post):
setup_postdata($post);
echo ‘<div class=”postlist-category”>‘;
if ( has_post_thumbnail() ) {
echo ”.get_the_post_thumbnail($page->ID, ‘thumbnail’). ”;
} else {
echo ‘<i class=”ico-camera-alt”></i>’;
}
echo ‘</div><div class=”postlist-category-inner”>’;
echo ‘<span class=”postlist-datetime”>’ .get_the_time(‘Y/n/j H:i:j’).'</span>’;
echo ‘<p>‘. the_title(“”,””,false).’</p>’;
echo ‘<p>’ .mb_substr( strip_tags( $post -> post_content ), 0, 32 ). ‘…</p></div>’;
endforeach;
echo ‘<p>カテゴリの一覧 ≫</p>’;
} else {
echo ‘<p>記事がありません。</p>’;
}

?>

またまた上手く出来ませんでしたｗｗｗ
わいひらさん　汚してしまって恐縮です。
上のソース削除して頂いても結構です。

ソース元のリンク張らさせて頂きます。
http://jikitourai.net/thumbnail-category-list-wordpress

連続投稿になってしまいましたがお許し下さい。

いやいやあまりの感動と嬉しさでついつい書き込みしちゃいました。

Hidekichiさんのソースそのままでトップページみたら理想のスタイルに反映されてました。

CSSだけでこうも変わるものだと改めてビックしてしまいあまりの興奮にタバコ吸い過ぎてしまいました。

あとカテゴリ表示も頑張ってトライ中です！

> JSの箇所で「おまけ」とありますが
> それも必要と言う事なのでしょうか？

おまけは各タイトルの
っぉゃゅょ()【】、。
みたいののカーニングをしてます。

例えば
【なにかしらの文字】
とすると【】の前後にスペースが開いたりしてるのを調整しているわけです。バージョンとした場合にもョが真ん中すぎるとかあってできたらもう少しジの方へ寄ってて欲しいとかあるじゃないですか？
無いかも知れませんが(笑)
そういうのをしています。サンプルのリストの上に書いておいたんですけどね(笑)

わいひらさんへ
ソースの修正ありありがとございました。

Hidekichiさんへ
分かりやすい説明ありがとございます。
勉強不足及び低レベルですみません。

HidekichiさんのCSSは色々とレベル高すぎなんで只今検索しながらCSS3を少し勉強していますが
完成するにはまだまだ遠い道のりになりそうです。

一つ教えて下さい
figure class=”entry-thumb
と言うのは付けなければイケないものなんですよね。
よろしくお願いします。

必要なのは.entry-thumbで、そのclassが入っているタグが何であるかは大した意味はないです。
例えば、目の不自由な方やcssをそのまま利用できない方向けに、そこが何であるのかを指定するためのものだろうと思うので、わいひらさんが言うように、divにしてもよいですし、pでも良いです。

もし仮に.entry-thumbを無くすという話になるのであれば、サンプルの例自体も変える必要が出てきます。

わいひらさん　へ
ちょっと僕の勘違いで変な質問してしまいすみませんでした。（ペコ・・）

Hidekichさん　へ
いつもわかりやすご説明して頂いて恐縮です。
あれから髪の毛が剥げるほどいろいろ試行錯誤でやっているのですがなかなかサンプル通り上手く行きません。

少し頭の整理もしたいので少し教えて下さい。
そもそも
上に書いたソースコード(PHP)にCSSだけでは基本的に無理なのでしょうか？

やっぱ1つ目の記事を大きく表示されるようにPHPを作り直さなければ無理って事なのでしょうか？

お時間のある時にでもどうなのかだけでも教えて下さい。
よろしくお願いします。

上のphpソースが適用されない状態で、サンプルのcssは正常に動作していたんですよね？
つまり最初のが大きく表示されて、他のは小さくのような感じで。

で、やられたいこととしては、何かしらのカテゴリをいくつかまとめて記事を表示したいってことですよね？

例えば
タイトル:野球
記事大
記事　記事
記事　記事

タイトル:サッカー
記事大
記事　記事
記事　記事

みたいな感じで。メインループの後に、サブループを作ってそこにメインと同じタグで出力するようにすれば良いのではと思います。
参考: 複数のループを使用する | wordpressカスタマイズ辞典

list.phpのif (have_posts()) :からの改変だと、カテゴリ毎に記事の一覧を表示して、自由に変更する | flipclapここのようにまんますれば各カテゴリーのタイトルだけは抜き出せます。後はこれをベースにして、元のループと同じタグを出力し、できあがったhtmlの構造が同じようになればcssはおのずと適用されます。

ベースにしてカスタマイズするにしても、どうすれば何が取得できるかなど色々と調べる必要があります。たいていはオリジナルのループを参考にして書いていけばよいわけですが、わかるだろうか…という一抹の不安も。

完全に元のループをカスタマイズすることになるので、自身で色々解決できる技量が必要です。まずは、ベースを試してみて、どうなるかを確認しつつ、html要素の親になる部分から順番に追記していき、どこをどうすればどうなるという挙動を確認していく必要もあるかと思います。

simplicityのループは、それぞれの部分のテンプレートを読み込んで表示しています。なので、このテンプレートの読み出しを間違わなければたいていは上手く行くような気もするんです。もし各カテゴリーごとに任意の件数をsimplicity同様に一覧表示できたとします。

しかし、それだけだと今度はcssが上手く適用できないと思います。それはsimplicityのメインのループは

[div id=”list”]ここ[/div]

に書いてあるからです。つまり、#listの中身をカテゴリ分けするわけですから、サンプルのままのcssではそれぞれのカテゴリーの最初の記事を大きくするということができないわけです。よって、まず考慮することとしては、#listを.listに修正しその中にそれぞれの.entryが入るようにするか、あるいはカテゴリを大きく何かしらの(例えば.list-cat)クラスで囲み、サンプルの#listを.list-catで書き直す必要が出てきます。

サブループで作る場合は、そのループの前に.listが入るようにして、サンプルのcssの#listを.listに直し、元々のsimplicityの#listを.listに直せばよいだけです。

[div id=”list”]simplicityのメインループ[/div] ←ここのidをclassに変える
[div class=”list”]ここにサブループ[/div]
サンプルcssの#listを.listに全て変更

こんな感じです。

どちらにしても、手を加えなくてはいけなくなるので、単純に何からのソースを貼り付けるだけで何とかなるようなカスタムではないことを念頭に、色々と頑張ってみて下さい。

Hidekichi さん　詳しくご説明大変ありがとございます。

これで頭もスッキリしました。
後は時間をかけながらゆっくり勉強しながらトライしていきたいと思いますのでよろしくお願いします。