関連記事のレイアウトを２列に変更したい

うちのサイトがタイムリーながら、最近2列にしました（笑）

ちなみにカスタマイザーで関連記事って3列とかになりましたっけ？
トップの記事リストやらはなったと思うんですけど、見落としてるのかなぁ

ひとまず関連記事を変更するファイルとしてはrelated-entries.phpです。そういやサムネイルの方もあったけど、いじったかなぁ・・・。たぶん使ってないのでいじくってないような気がします。

うちのサイトのは、2列にするにあたり色々とギミックを入れてるので原形があまり残っていないぐらいにカスタマイズしましたが、2列でも3列でもあるいはもっと複数でもflexを利用すれば可能です。

考え方としては、中身の各アイテムを囲む親セレクターに
display: flex;
flex-flow: row wrap;
/*お好みで*/
justify-content: space-between;
等を入れておきます。

その中身のアイテムには、
flex: 1 49%; /*2列の場合。場合によっては45%〜48%とか*/
flex: 1 33%; /*3列の場合。場合によっては30%〜32%とか*/

などを入れれば勝手に揃います。もちろん中身の中身(サムネイルやら記事を読むやらの部分)は色々調整する必要がありますけれども。

cssで言うと、
#related-entriesが親になります。ここにdisplay: flex;等を入れます。
で、中身は.related-entryなのでここにflex: 1 n%;等を入れます。

(3列の場合)最大サイズを入れる場合は、
flex: 1 auto;
width: 180px;
max-width: 100%;

ぐらいで良いでしょうか。オススメとしてはレスポンシブになるので、

flex: 1 33%;

のみかなぁと思います。

flexは自動で幅を調整するので、clearもmargin・padding(これらは場合によっては必要)も不必要です。もちろんfloatも必要ありません。

この方法にはひとつ問題がありまして、「関連記事」と言うテキストがh3タグで、親である#related-entriesの中に挿入されてしまいます。なので、そ「関連記事」部分の幅も33%等になるので、これをjQueryで外に出してます。

( function ($) {
	$(function () {
		$("#related-entries h3").prependTo("#under-entry-body");
	} );
} )(jQuery);

こんな感じです。#under-entry-bodyの先頭に関連記事の部分を移動させるわけです。これで、#related-entriesの下に一瞬「関連記事」が表示されますがたいていは画面上部からスクロールして降りてきて、関連記事がようやく見れるので問題ないかなぁと思ったりも。

またflex関係についてはベンダープレフィックスを入れないと一部のごく一部の某なんちゃらソフトの何とかEとかが表示できなかったりするので、ベンダープレフィックスは必要です。-webkit-とか-msとかのやつです。
また古いブラウザには対応してません（笑）
僕のスタンスとしては古いブラウザは無視、あるいは「古いブラウザはレイアウトが崩れるがいい」ぐらいに思っているので気にしてませんけれども、気にされているようであれば別の方法で実装するべきです。

今月の29日よりWindows10が発売されますが、標準のブラウザはIE(あ、書いてもた)からedgeに刷新されます。なのでIEとかの対応とかは今までのように考えなくても良いのではないかと思います。それでもIEを使う人はいるでしょうから一概には言えませんが…。

css3 flex とかでぐぐってみると色々と情報は出てくると思います。

お二方ともありがとうございました。ちょといろいろ試してわからなかったら、また相談します。

突然すみません。
僕もタイトルを２列にしたかったのでこのページを読み
Hidekichiさんのサイトも拝見させて頂きました。
（凄く素敵なサイトで感動しました）
僕の場合は最初の２記事だけ画像有で
３つ目の記事から画像を無しで表示したいと考えています。
まだまだ初心者なのでお手柔らかにアドバイス頂けると助かります。
宜しくお願いします。

>僕の場合は最初の２記事だけ画像有で
>３つ目の記事から画像を無しで表示したいと考えています。

CSS4が来たらcssだけでできそうですが、現在はおそらくjQueryかphpを直接イジる必要があるかと思います。cssだけでもごちゃごちゃと書けばイケそうですが、たぶんスクリプト使うほうが楽かと。

related-entries.phpか、カスタマイザーの設定によってはrelated-entries-thumbnail.php←こっちかもしれませんが、

<?php while ($query -> have_posts()) : $query -> the_post(); ?>

これの前に$r_countなり何かしらの変数を用意して、$r_count = 0;とでもしておきます。

<?php endwhile;?>
の前に、$r_count++; としておけば、$r_countはwhileでループする間、数字をプラスしていくので、

<div class="related-entry-thumb">
の前に、if ($r_count < 2) として条件を付け、サムネイル表示する箇所である

</div><!-- /.related-entry-thumb -->
までを囲んでおけば、サムネイルが$r_count、0と1の時だけ入れられます。それ以外はサムネイルの情報が入らないので画像は表示されませんが、cssの方で問題が出る可能性があります。

サムネイルがfloatして左に寄っているだけであれば、そのサムネイルがなくなることによって.related-entry-contentが横いっぱいに伸びればいいんですけど、そのような設定がされていない場合はそれがしやすいように、直接画像をhtmlに出力しないよりは、何かしらのセレクタを、

<div class="related-entry">
//　　　　　↓
<div class="related-entry exclude-img">

のように追加して、css側で、

.exclude-img .related-entry-thumb {
  display: none;
}

などとすれば画像は消え、仮に.exclude-imgの中の.related-entry-contentが横いっぱいにならない場合でも、

.exclude-img .related-entry-content {
  width: 100%;
}

などとして対処できると思います。

<?php
  $r_count = 0
  while ($query -> have_posts()) : $query -> the_post();
  
  if ($r_count < 2) {
    echo "<div class='related-entry'>";
  } else {
    echo "<div class='related-entry exclude-img'>";
  }
?>
  <div class="related-entry-thumb">
  //...
  </div><!-- /.related-entry-thumb -->
  <div class="related-entry-content">
  //...
  </div><!-- /.related-entry-content -->
</div><!-- /.elated-entry -->
<?php
  $r_count++;
  endwhile;
?>

これでイケるかな？試してないんでアレなんですが（笑）
※ コードタグを入れるにおいて、クォートなどが変換されている可能性がありますので注意

例えば、最初の子要素と、次の子要素だけ画像が必要ないというのは、cssでサックリとイケルんですけど、1つ目と2つ目だけが必要で、後のは要らないとなったら、その数だけ:nth-of-type(n)とかで非表示設定を書かないといけないのでとても面倒です。

jQueryの場合は、.each()を利用して、

(function($){
  $(function(){
    $(".related-entry").each(function(i, value){
      if (i > 2){
        $(this).addClass("exclude-img");
      }
    });
  });
})(jQuery);

でいけるかなぁ。cssは上のPHPと同様です。試してないので、イケルかはアレですが、それぞれの.related-entryをチェックして、0と1以外のものは.exclude-imgを加えます。cssで.exclude-img img{ display: none; }であれば、画像は表示しないはず。

注意点としては、他に.related-entryが利用されている場合は、その箇所も適用されてしまいますから、どこの.related-entryかを指定しないといけないという場合もあるかも知れません。関連記事部分が1つだけなら上のスクリプトでイケるような気がします。
イケない感じであれば、 .each()あたりを、jsStudioで調べて色々試してみてください。

jQueryでやるメリットは、親テーマをいじらなくても子テーマのjavascript.jsとstyle.cssでいけるので、ある意味アップデートにも対応できます。仕様が変わったらそれに合わせる必要がありますが。
また関連記事は、下の方にあってファーストビューには無いと思うので、多少チラツキがあっても気にならないと言うことぐらいでしょうか。

cssで.exclude-img img{ display: none; }であれば、画像は表示しないはず。
ここは、.exclude-img .related-entry-thumb { display: none; }の方が良いかも知れません。

Hidekichiさん、わいひらさん、どうもありがとございます。
これから少しずつアドバイスを頂いたように試行錯誤でチャレンジしていきたいと思いますが
かなり僕にはハードルが高いので時間はかかると思いますが
また途中経過など書き込ませて頂きたいと思いますのでよろしくお願いします。

先ほどローカルで試してみた所、.related-entryに.exclude-imgを付与するPHPは成功しました。
jQueryは、

☓ if (i > 2){
◯ if (i > 1){

で大丈夫でした。

Hidekichi さんありがとございます。
phpｎやり方でやりたいと思い
教えて頂いた通りやっているのですが関連記事と書かれた部分から真っ白状態でサイドバーも真っ白状態でなかなか上手くいきません。
無能ですみません。

やったのは

<?php while ($query -> have_posts()) : $query -> the_post(); ?>
の前に以下のソースを入れました。

<?php
  $r_count = 0
  while ($query -> have_posts()) : $query -> the_post();
  
  if ($r_count < 2) {
    echo "<div class='related-entry'>";
  } else {
    echo "<div class='related-entry exclude-img'>";
  }
?>
  <div class="related-entry-thumb">
  //...
  </div><!-- /.related-entry-thumb -->
  <div class="related-entry-content">
  //...
  </div><!-- /.related-entry-content -->
</div><!-- /.elated-entry -->
<?php
  $r_count++;
  endwhile;
?>

ここまでしか分かりませんでした。
あれこれと試行錯誤でやってはいるものの前に進めない状態です。

あ、僕がレスしたスクリプトを全部を追記するのではなくて必要な部分をそれぞれの位置に追加します。

$r_count = 0; ←;忘れてました（笑）これもエラーになるので真っ白になるのはこれのせいかと。

と、if {…} else {…}部分、endwhileの前の$r_count++;

だと思います。

つまり、やってることは、$r_countが0→1→2→3→4…関連記事のmax表示数まで、と増えていく時に、2より小さいものはそのまま、1以上のカウントの時はexclude-imgを.related-entryに追加してるわけです。

セレクタにclassが追加できたら後はcssでイジるだけなので。ちなみに、このスクリプトは画像を表示表示するだけのものなので、2列にするのであればわいひらさんのレス参考と、それ用にcssをいじくる必要があります。

ちなみに、同じことをjQueryではしています。なので、子テーマjavascript.jsにそのまんまコピペ(と、if (i > 2)の2を1に変更)でいける分jQueryの楽ですし親テーマをいじらなくて済むのでアップデートにも対応できますよ。

ただ、jQueryが何かしらエラーを吐いたら表示もできない可能性はありますが・・・。
アップデートで泣くか、何かしらのjavascriptエラーで泣くかがデメリットです。

jQueryの場合、今みてみたらIDが入っていたので、記事下の関連記事の場合、jQueryの中身を以下のようにします。

$(“#under-entry-body .related-entry”).each(function(i, value){
if (i > 1){

後は同じ。これでphpと等価の機能です。等価？、まぁやってる事自体は同じですと言うことです。

Hidekichi さん本当にご説明ありがとございます。
とりあえずjQueryでやってみたら上手く出来ました。
これからボチボチCSSで整えて行きたいと思います。

しかしjQueryって凄いパワーなんですね。
たったそれだけのソースで出来ちゃうなんてほんと感動です。