yuichi.co

ゆういちのノートブック

【Stinger7】関連記事とNEWPOSTの抜粋文字をなくしてタイトル上に投稿時間をカスタマイズ

 2751

関連記事とNEWPOSTの抜粋文字をなくしてタイトル上に投稿時間をカスタマイズ

@yuichico_です。Stinger7カスタマイズで、単一記事下の関連記事と右サイドバーのNEWPOSTの抜粋文字を削除してその上に投稿時間を表示されるようにします。抜粋文字を表示してもいいですが、スッキリ見せるためには、削除しても問題ないと思います。コピペでできますので、試してみてください。2つの完成画像です。

新しい記事の上に投稿時間をもってくる完成図

関連記事の上に投稿時間をもってくる完成図



ダウンロードしてインストール

リンク Stinger7親テーマと子テーマのダウンロードとインストールのやり方

子テーマは必須です。必ずインストールしてください。

子テーマへアップロード

kanren-thumbnail-on.php、newpost-thumbnail-on.php、newpost.phpの3つを子テーマへアップしてください。

リンク Stinger7で特定の親テーマのファイルを子テーマへアップロードする方法

カスタマイズ

以前トップページのタイトルの上に投稿時間をカスタマイズする記事を書きました。やり方はほとんど同じですので、やってみてください。

リンク 【Stinger7】トップページの抜粋文字をなくしてタイトルの上に投稿時間をつける方法

関連記事

kanren-thumbnail-on.phpへ記述してある文字を全て削除してから以下をコピーして貼り付けましょう。

<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?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' => 5,
		'category__in' => $category_ID,
		'orderby' => 'rand',
	);
	$st_query = new WP_Query( $args ); ?>
	<?php
	if ( $st_query->have_posts() ): ?>
		<?php
		while ( $st_query->have_posts() ) : $st_query->the_post(); ?>
			<dl class="clearfix">
				<dt><a href="<?php the_permalink() ?>">
						<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
							<?php the_post_thumbnail( 'thumbnail' ); ?>
						<?php else: // サムネイルを持っていないときの処理 ?>
							<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
						<?php endif; ?>
					</a></dt>
				<dd>
                        	        <div class="blog_info <?php st_hidden_class(); ?>">
						<p><i class="fa fa-clock-o"></i>
							<?php the_time( 'Y/m/d' ); ?></p>
					</div>
					<h5><a href="<?php the_permalink(); ?>">
							<?php the_title(); ?>
						</a></h5>

				</dd>
				
			</dl>
		<?php endwhile; ?>
	<?php else: ?>
		<p>関連記事はありませんでした</p>
	<?php endif; ?>
	<?php wp_reset_postdata(); ?>
</div>

NEW POST

newpost-thumbnail-on.phpへ記述してある文字を全て削除してから以下をコピーして貼り付けましょう。

<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?php
	$args = array(
		'posts_per_page' => 5,
	);
	$st_query = new WP_Query( $args );
	?>
	<?php if ( $st_query->have_posts() ): ?>
		<?php while ( $st_query->have_posts() ) : $st_query->the_post(); ?>
			<dl class="clearfix">
				<dt><a href="<?php the_permalink() ?>">
						<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
							<?php the_post_thumbnail( 'thumbnail' ); ?>
						<?php else: // サムネイルを持っていないときの処理 ?>
							<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
						<?php endif; ?>
					</a></dt>
				<dd>
                        	        <div class="blog_info <?php st_hidden_class(); ?>">
						<p><i class="fa fa-clock-o"></i>
							<?php the_time( 'Y/m/d' ); ?></p>
					</div>
					<h5><a href="<?php the_permalink(); ?>">
							<?php the_title(); ?>
						</a></h5>

				</dd>
			</dl>
		<?php endwhile; ?>
	<?php else: ?>
		<p>新しい記事はありません</p>
	<?php endif; ?>
	<?php wp_reset_postdata(); ?>
</div>

文字の変更

NEW POSTというローマ字を 新しい記事 という日本語の表記に変えましょう。newpost.phpを開いてください。以下をコピーして子テーマのnewpost.phpへ貼り付けてください。

<?php if ( $GLOBALS["stdata13"] === '' ) {
	if ( isset($GLOBALS['stdata5']) && $GLOBALS['stdata5'] === 'yes' ) {
		echo '<h4 class="menu_underh2"> 新しい記事</h4>';
		get_template_part( 'newpost-thumbnail-off' ); 
	}else{
		echo '<h4 class="menu_underh2"> 新しい記事</h4>';
		get_template_part( 'newpost-thumbnail-on' ); 
	}
}
?>

CSS

外観→テーマ編集→style.cssの一番下へ以下をコピーして貼り付けてください。

文字、文字幅、画像

/* 新しい記事(NEW POST)の文字の大きさ */
#side h5 {
    font-size: 16px;
}
/* 新しい記事(NEW POST)と関連記事の画像の外枠を少し丸くする */
.kanren dt img {
    border-radius: 10px;    /* CSS3 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}
/* 新しい記事(NEW POST)と関連記事の文字と文字の幅を調整する */
.kanren .clearfix dd h5 a {
    line-height: 28px;
}

関連記事

/* 関連記事下の細い線 */
.post h4.point {
    border-bottom: 1px solid #3498db;
}
/* 関連記事左のアイコン */
.fa-th-list:before {
    content: "\f103";
    font-weight: bold;
}

関連記事の文字下に青い細い線を引いたのと、文字を太くして、文字左にアイコンをFontawesomeの angle-double-down に変えました。

まとめ

だいぶ、スッキリしましたね。stingerシリーズは抜粋文字があることが特徴ですが、個人的にタイトルだけあればわかるので、削除しました。参考にしてみてください。

Stinger7 カスタマイズ