MENU
HOME
TOP

WordPressプラグインなし横並びの関連記事を追加する「STINGER PLUS2」

使ってないテーマで変ですが、 STINGER PLUS2に追加してみたものです。

なので、基本はコピペで完了しますが、テーマによってはコンテンツ幅が違ったりするので多少修正するところもあるかも知れません。分からなかったらコメントください。

関連記事ファイルの作成

以下の物をコピーして、テーマのディレクトリにアップロードします。ただ、これもFTPソフトの使い方が分からない人も多いようなので、今回はテーマの編集からやってしまいましょう。

<div class="related-entries-wrap">
<h3 class="related-entries-title">関連記事</h3>
<ul class="related-entries">
<?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 8, //表示記事数
'category__in' => $category_ID,
'orderby' => 'rand',
);
$query = new WP_Query($args); ?>
<?php if( $query -> have_posts() ): ?>
<?php while ($query -> have_posts()) : $query -> the_post(); ?>
<li class="related">
<!-- サムネイル表示 -->
<div class="related_thumbnail">
<?php if( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'thumbnail' ); ?>
</a>
<?php else: ?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="150" height="150" />
</a>
<?php endif; ?>
</div>
<!-- タイトル表示 -->
<div class="related_content">
<p>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</p>
</div>
</li>
<?php endwhile;?>
<?php else:?>
<p>NO CONTENTS
</p>
<?php endif; wp_reset_postdata(); ?>
</ul>
</div>

で、まず 管理画面の外観からテーマの編集をクリックします。ここではSTINGER PLUS2の例でいきます。

なので、親テーマの方を選択してsingle.phpを探します。ほんでもって次は、表示したいところで、とりあえず<!– 関連記事- -><?php get_template_part( ‘kanren’ );?>の下にしましょう。

ここ大事なので大きい画像で

スタイルを整える

これも管理画面の外観からテーマの編集で、style.cssを開きます。一番下でも記述してください。

/*関連記事のスタイル 画面幅共通*/
.related-entries-wrap {
	margin: 26px 0;
}
.related-entries-title {
	font-size: 18px;
	border-bottom: dotted 2px #ccc;
	margin: 10px 0;
}
.related-entries-title::before {
	content: "\f115";
	font-family: FontAwesome;
	margin-right: 10px;
}
.related-entries {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    list-style: none;
    padding: 0 !important;
    justify-content: space-between;
}
.related-entries li {
	width: 24%;
	margin: 1% 0;
	justify-content: space-around;
	transition: all 0.3s ease-in-out;
	list-style: none;
}
.related_thumbnail img {
    width: 100%;
    margin-bottom: 5px;
    border-radius: 5px;
}
.related_content p {
	line-height: 1.2;
	font-weight: bold;
}
.related_content a {
	font-size: 13px;
	color: #333;
	text-decoration: none;
}
.related:hover {
	opacity: .7;
}
/*記事が少ないときに要素崩れるための防止策*/
@media only screen and (min-width: 760px) {
	.related-entries::before, .related-entries::after {
	    content: "";
	    display: block;
	    width: 24%;
	}
	.related-entries::before {
		order: 1;
	}
}
@media only screen and (max-width: 760px) {
	.related-entries li {
		width: 49%;
	}
}

これは、子テーマでいいかな。

動作確認

ここで肝心な、動作の確認です。PCとタブレット端末だとこんな感じ。ただ、ノーイメージのパスはテーマによって変更する必要があります。

モバイルは2列にしてます。ブレークポイントは760にしてます。この辺は好みで変更して下さい。

既存の関連記事を非表示

あえて既存の物は編集せず、追加しました。なので、既に表示されてる関連記事は消しておきましょう。STINGER+2 管理を開きます。

で、このセクション投稿・固定記事設定なる項目を選択。

んで、投稿の関連記事を非表示にするにチェック。

最後にsaveで完了です。

スポンサーリンク

Profile

閲覧どうもありがとうございます。 ネット系で気になったことや、やってみたことをゆる~く配信してます。 まだまだ初心者なので、、お見苦しいとこがありますが、どうぞよろしく。

コメントを閉じる

コメント一覧

  • こんばんは^^

    >スタイルを整える
    で、つまづいています^^;

    私の表示内容と違うのです・・・ 

    私の、子テーマ
    style.cssは、

    1 /*
    2 Theme Name: STINGER PLUS2 Child
    3 Template: stingerplus2

    って表示されていて

    けんじさんのような↓ 表示になっていなくて

    1 /*関連記事のスタイル 画面幅共通*/
    2 .related-entries-wrap {
    3 margin: 26px 0;

    それでも、一番下にコピペしてみたら、×印がついてしまいました。

    子テーマの style cssは、一つしかありませんよね?

    ご教示よろしくお願いします

    • macaronさん、コメントありがとうございます。

      ちょっと待ってください確認しますね。

      ちなみに /*関連記事のスタイル 画面幅共通*/というのは僕が作ったやつです。

      えっとですね、

      それでも、一番下にコピペしてみたら×印がついてしまいました

      というのが、ごめんなさい ちょっとわからないのです。

      あと、子テーマのstyle.cssは一つしかありません。

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。