Fukasawaで関連記事を表示する方法ってないのかな？

こんな疑問に答えます。

最初に言っておくと、コピペOKなのですが、やや難しいかもしれません。

とはいえ、使っているとなれてくるので、なんどもトライしてくださいね。

[imgad]

目次

WordPressのFukasawaで関連記事を表示する方法【コピペ可】

下記をコピペでOKです。

singular.php


<?php if ( is_single() ) : ?>
  <h2 class="relation">関連記事</h2>
  <div class="relatedWrap">
    <?php if(has_category() ) {
      $cats =get_the_category();
      $catkwds = array();
      foreach($cats as $cat){
      $catkwds[] = $cat->term_id;
      }
    } ?>
    <?php $args = array(
      'post_type' => 'post',
      'posts_per_page' => '8',
      'post__not_in' =>array( $post->ID ),
      'category__in' => $catkwds,
      'orderby' => 'rand'
    );
      $my_query = new WP_Query( $args );?>
    <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
      <a href="<?php the_permalink(); ?>">
        <div class="rcolumn cf">
        <img src="<?php the_post_thumbnail_url(); ?>">
        </div>
        <h3 class="title"><?php the_title(); ?></h3>
      </a>
    <?php endwhile;?>
  </div>
<?php endif; ?>

Fukasawaに関連記事を表示させるの手順

上記のコードを貼るところは少しややこしく、Fukasawaのデータを開かなくてはいけません。

FTPなどを使って取り出すことも可能ですが、ややこしすぎるので一旦の解決策として、下記の手順で進めていきましょう。

注意点

今からやる方法は、おすすめしません。本来であれば元のデータをいじくれば解決する話ですが、難しいかもしれないので今回は簡単な方法でやっていきます。

データをいじる

ダッシュボード

まずはダッシュボード（記事を書く画面）を開き、下記の画像の手順で、[外観]→[テーマエディター]を開いてください。

fukasawa

初めて開く方は、[テーマエディター]を開くとおそらく下記の画面が出てくると思いますが、[理解しました]をクリックしてください。

理解しました

すると下記の画面が開かれます。

Fukasawa

そこから右側の singlar.php（単一テンプレート） を開きます。

早速コードを追加していくのですが、その前にバックアップをしておきましょう。

バックアップをしておかないと、書き換えを間違えた時に取り返しのつかないことになります。

  • Mac：command + Aで全選択・command + cでコピー
  • Windows：Ctrl + Aで全選択・Ctrl + cでコピー

コピーしたら、どこでもいいので貼り付け（ペースト）しておいてください。

今回はMacのメモに貼り付けています

バックアップ

バックアップが完了したらsinglar.php（単一テンプレート）の92行目までスクロールしてください。

そこに先ほど説明したコードを貼り付けてください

singular.php


<?php if ( is_single() ) : ?>
  <h2 class="relation">関連記事</h2>
  <div class="relatedWrap">
    <?php if(has_category() ) {
      $cats =get_the_category();
      $catkwds = array();
      foreach($cats as $cat){
      $catkwds[] = $cat->term_id;
      }
    } ?>
    <?php $args = array(
      'post_type' => 'post',
      'posts_per_page' => '8',
      'post__not_in' =>array( $post->ID ),
      'category__in' => $catkwds,
      'orderby' => 'rand'
    );
      $my_query = new WP_Query( $args );?>
    <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
      <a href="<?php the_permalink(); ?>">
        <div class="rcolumn cf">
        <img src="<?php the_post_thumbnail_url(); ?>">
        </div>
        <h3 class="title"><?php the_title(); ?></h3>
      </a>
    <?php endwhile;?>
  </div>
<?php endif; ?>

こんな感じに下記のように貼り付けたら、左下の[ファイルを更新]を押します。

Fukasawa

そして一度投稿記事のページを見てみると下記のようになってるはずです。

画像はあなたが設定したものなので、ちゃんと表示されているか確認してください。

ですが、デザインが崩れているので治しましょう。

CSSを追加していく

CSSを追加していく

１つの例として上記を完成とします↑

そして下記の手順のとおり、[外観]→[カスタマイズ]を開いてください。

すると下記のような画面が開くと思います。そして、下の方の[追加CSS]を開きます。

Fukasawa

上記が開いたら、コードを書く画面が表示されるので、下記のコードをコピー&ペースとしましょう。

CSS


@media screen and (max-width: 460px){
    .relatedWrap a {
        width: 100%!important;
    }
}
#related {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    background-color: #fff;
}
.relation {
    text-align: center;
    margin: 10% auto 0;
    border: none;
    background-color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
}
.relatedWrap {
    width: 100%;
    margin: 1% 0 5%;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    flex-wrap: wrap;
}
.relatedWrap a {
    width: 24%;
    cursor: pointer;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px 1px #bbb;
    transition: .3s;
    margin-bottom: 10px;
}
.rcolumn {
    width: 100%;
}
.rcolumn > img {
    width: 100%!important;
    height: 120px!important;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}
h3.title {
    color: #666666;
    padding: 3% 4%;
    box-sizing: border-box;
    line-height: 1;
			font-size: 14px;
    text-align: justify;
    word-break: break-all;
    text-justify: inter-ideograph;
}

すると下記のように表示できたと思います。これで完了です。

Fukasawa完了

WordPressのFukasawaで関連記事を表示する方法：まとめ

まず、関連記事を表示させるなら下記のコードです。

関連記事を表示させる

singular.php


<?php if ( is_single() ) : ?>
  <h2 class="relation">関連記事</h2>
  <div class="relatedWrap">
    <?php if(has_category() ) {
      $cats =get_the_category();
      $catkwds = array();
      foreach($cats as $cat){
      $catkwds[] = $cat->term_id;
      }
    } ?>
    <?php $args = array(
      'post_type' => 'post',
      'posts_per_page' => '8',
      'post__not_in' =>array( $post->ID ),
      'category__in' => $catkwds,
      'orderby' => 'rand'
    );
      $my_query = new WP_Query( $args );?>
    <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
      <a href="<?php the_permalink(); ?>">
        <div class="rcolumn cf">
        <img src="<?php the_post_thumbnail_url(); ?>">
        </div>
        <h3 class="title"><?php the_title(); ?></h3>
      </a>
    <?php endwhile;?>
  </div>
<?php endif; ?>

関連記事をきれい(CSS)にする

CSS


@media screen and (max-width: 460px){
    .relatedWrap a {
        width: 100%!important;
    }
}
#related {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    background-color: #fff;
}
.relation {
    text-align: center;
    margin: 10% auto 0;
    border: none;
    background-color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
}
.relatedWrap {
    width: 100%;
    margin: 1% 0 5%;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    flex-wrap: wrap;
}
.relatedWrap a {
    width: 24%;
    cursor: pointer;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px 1px #bbb;
    transition: .3s;
    margin-bottom: 10px;
}
.rcolumn {
    width: 100%;
}
.rcolumn > img {
    width: 100%!important;
    height: 120px!important;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
}
h3.title {
    color: #666666;
    padding: 3% 4%;
    box-sizing: border-box;
    line-height: 1;
			font-size: 14px;
    text-align: justify;
    word-break: break-all;
    text-justify: inter-ideograph;
}

必ず作業する時はどこかにコピペ（バックアップ）をしてから作業をしてください。

Fukasawaのカスタマイズ関連

【WordPress】Fukasawaの使い方とカスタマイズ【無料テーマ】
【WordPress】Fukasawaの使い方とカスタマイズ【無料テーマ】
【コピペ可】WordPressのFukasawaをおしゃれにカスタマイズ【CSS】
【コピペ可】WordPressのFukasawaをおしゃれにカスタマイズ【CSS】
【WordPress】Fukasawaのコピーライトを消す方法【コピペ可】
【WordPress】Fukasawaのコピーライトを消す方法【コピペ可】

人気記事サラリーマンの副業でおすすめな在宅ワークは７つだけ【実録】

人気記事フリーランス向けの求人サイトとサービス【全て無料】

あわせて読みたい記事
『いつかは仕事を辞めたい』なら今すぐやっておくべきたった1つのこと
あなたに向いてる仕事がすぐにわかるたった1つの方法
SHARE