【WordPressテーマ：Habakiri】のカスタマイズ例

WordPress Popular Postsでサイドバーに設置したウィジェットの左側の余白を削除して左寄せにする
1. 設置バージョン例：Habakiri1.0
投稿記事内の関連記事を画像付きで表示した際の画像をアイキャッチ画像じゃなくて予めカスタムフィールドやアップロードしておいた画像を表示する
1. 設置バージョン例：Habakiri1.0
投稿記事内の関連記事数を変更する
1. 設置バージョン例：Habakiri1.0
WordPressの最強有料テーマ

WordPress Popular Postsでサイドバーに設置したウィジェットの左側の余白を削除して左寄せにする

設置バージョン例：Habakiri1.0

記載日：2016年11月30日

対象テンプレート名：wpp.css

プラグイン＞編集＞WordPress Popular Postsを選択＞wordpress-popular-posts/style/wpp.cssを開いて以下のコードを確認します

.wpp-list {	
}

上記のコードに以下のスタイルを追加します

.wpp-list {	
	padding-left:5px;
}

変更を保存して、きちんと左寄せになっているか確認すれば完了です！

スポンサードサーチ

投稿記事内の関連記事を画像付きで表示した際の画像をアイキャッチ画像じゃなくて予めカスタムフィールドやアップロードしておいた画像を表示する

設置バージョン例：Habakiri1.0

記載日：2016年11月30日

対象テンプレート名：content-summary.php

外観＞テーマの編集＞content-summary.phpを開いて以下のコードを確認する

<div class="entry--has_media__media">
　<?php Habakiri::the_post_thumbnail(); ?>
<!-- end .entry--has_media__media --></div>

デフォルトの表示設定は、元に戻せるようにコメントアウトしておいて、その下にコードを挿入します。デフォルトでは、画像に記事へのリンクが設置されていないので、おまけで画像に記事へのリンクも設置しておきます。

<div class="entry--has_media__media">
　<!--<?php Habakiri::the_post_thumbnail(); ?>-->
　<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="{画像URL}"  onerror="this.src='{代替画像}'" alt="<?php the_title(); ?>" /></a>
<!-- end .entry--has_media__media --></div>

変更後、保存して記事ページにて確認後、正しく表示されていれば完了です！

「onerror」で仮に掲載画像が無い場合は代替画像が表示されるようにコードが埋め込まれていますので、代替画像もアップロードしておいた方がいいでしょう。

投稿記事内の関連記事数を変更する

設置バージョン例：Habakiri1.0

記載日：2016/11/30

対象テンプレート名：class.related-posts.php

外観＞テーマの編集＞class.related-posts.phpを開いて以下のコードを確認する

		$args = array(
			'post_type'      => get_post_type( $post->ID ),
			'posts_per_page' => apply_filters( 'habakiri_relates_posts_per_page', 3 ),
			'orderby'        => 'rand',
			'post__not_in'   => array( $post->ID ),
			'tax_query'      => array_merge(
				array(
					'relation' => 'OR',
				),
				$tax_query
			),
		);

上記コード内の「habakiri_relates_posts_per_page’, 3」の「3」という値が表示される件数をコントロールしているので、値を任意の表示したい件数に変更します。例えば「10」件表示にしたい場合は以下の様に変更します。

		$args = array(
			'post_type'      => get_post_type( $post->ID ),
			'posts_per_page' => apply_filters( 'habakiri_relates_posts_per_page', 10 ),
			'orderby'        => 'rand',
			'post__not_in'   => array( $post->ID ),
			'tax_query'      => array_merge(
				array(
					'relation' => 'OR',
				),
				$tax_query
			),
		);

変更後、保存して記事ページにて確認後、正しく表示されていれば完了です！

スポンサードサーチ