WordPress）外観テーマを「Iconic One」に変更。「Iconic One」カスタマイズ。

先日、自宅のWindowsPCローカルにWordPressを入れた。

外観テーマを一旦「Semplicemente」に変更したが、

今回、外観テーマを「Iconic One」に変更してみた。

※ この記事の以下の設定は、「はてなブログのアイキャッチ画像をメディアライブラリを使わずに記事一覧とブログカードに反映させる。」対策を行う前のもの。

≪テーマ：Semplicemente≫

≪テーマ：Iconic One≫

≪テーマ：Iconic One（画像サイズ小さく：非推奨）≫

記事一覧の画像サイズを少し小さくする。「\wp-content\themes\iconic-one\functions.php」の以下の部分を修正。

//	add_image_size('excerpt-thumbnail', 200, 140, true);
	add_image_size('excerpt-thumbnail', 140, 140, true);

しかし、この方法では「\wp-content\uploads\hatena」に余分なサイズの画像が自動生成されてしまう。（※ 防ぐ方法はこの記事の後半に。）

≪テーマ：Iconic One（要約文をなくしてシンプルに）≫

記事一覧の要約文をなくしてシンプルにする。

外観 > カスタマイズ > ［追加CSS］に、以下を追加。

.entry-summary {
	display: none;
}

画像が記事タイトルの左側になるようにする。

「\wp-content\themes\iconic-one\inc\extra-functions.php」に、以下の関数を追加。

function iconic_one_thumbnail() { ?>
			<?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>
		<?php }

「\wp-content\themes\iconic-one\content.php」に、「iconic_one_thumbnail()」をコールする部分を追加。

<h2 class="entry-title">
	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'iconic-one' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark">
	<?php iconic_one_thumbnail(); ?>
	<?php the_title(); ?></a>
</h2>

≪テーマ：Iconic One（記事一覧に日付を表示）≫

記事一覧に日付を表示するようにする。

「\wp-content\themes\iconic-one\content.php」に、「echo get_the_date();」を追加。

合わせて、「カテゴリ:」の文字を削除。以下の'Category:'を'&ensp;'に変更。

<footer class="entry-meta">
	<span class="date updated"><?php echo get_the_date(); ?></span>
	<?php if ( is_home() && ( get_theme_mod( 'iconic_one_catg_home' , '1' ) == '1' ) ) : ?>
		<span><?php _e('Category:','iconic-one'); ?> <?php the_category(' '); ?></span>
	<?php elseif( !is_home() ): ?>
		<span><?php _e('Category:','iconic-one'); ?> <?php the_category(' '); ?></span>
	<?php endif; ?>

日付の形式はダッシュボードの「設定 > 一般」で変更。

≪テーマ：Iconic One（余分なサイズの画像自動生成を停止する）≫

「\wp-content\uploads\hatena」の余分なサイズの画像が自動生成されるのを停止する。

「\wp-content\themes\iconic-one\functions.php」の以下をコメントアウトする。

//	set_post_thumbnail_size( 660, 9999 ); // Unlimited height, soft crop
//	add_image_size('excerpt-thumbnail', 200, 140, true);
//	add_image_size('excerpt-thumbnail-mobile', 380, 200, true);

この設定をすると、記事一覧の画像が大きくなってしまう。以下の「追加CSS」で解決する。

≪テーマ：Iconic One（記事一覧のアイキャッチ画像を縮小して正方形に）≫

記事一覧のアイキャッチ画像を縮小して正方形にする。