WordPress・Habakiriの記事一覧の表示方法を変更

Habakiri(WordPressテーマ)では、ブログ記事一覧(カテゴリ・アーカーブ)の表示を変更する方法です。

スマホで見ると記事と記事の間が広いので、隙間を減らします。

変更ファイル

wp-content/themes/habakiri/content-summary.php

wp-content/themes/habakiri/style.css

content-summary.php

wp-content/themes/habakiri/content-summary.php

<?php
/**
* Version    : 1.0.0
* Author     : inc2734
* Author URI : http://2inc.org
* Created    : August 28, 2015
* Modified   :
* License    : GPLv2 or later
* License URI: license.txt
*/
?>
<article <?php post_class( array( 'article', 'article--summary' ) ); ?>>
<?php if ( Habakiri::get( 'is_displaying_thumbnail' ) === 'false' ) : ?>
<div class="entry">
<?php Habakiri::the_title(); ?>
<div class="box">
<div class="bottom-text">
<p  class="hidden-xs"><?php echo get_the_date('Y.n.j'); ?></p>
</div>
</div>
<!-- end .entry --></div>
<?php else : ?>
<div class="entry--has_media entry">
<div class="entry--has_media__inner">
<div class="entry--has_media__media">
<?php Habakiri::the_post_thumbnail(); ?>
<!-- end .entry--has_media__media --></div>
<div class="entry--has_media__body">
<?php Habakiri::the_title(); ?>
<div class="box">
<div class="bottom-text">
<p  class="hidden-xs"><?php echo get_the_date('Y.n.j'); ?></p>
</div>
</div>
<!-- end .entry--has_media__body --></div>
<!-- end .entry--has_media__inner --></div>
<!-- end .entry--has_media --></div>
<?php endif; ?>
</article>

本文を表示させて場合は、下記を消さないでください

<div class="entry__summary">
<?php the_excerpt(); ?>
<!– end .entry__summary –></div>

メタタグを表示させる場合は、下記を消さないでください

<?php get_template_part('modules/entry-meta'); ?>

css

/** * カテゴリ 隙間無くす content-summary.php */
.article{padding : 0 0 5px 0px !important; margin:10px 0 10px 0 !important; }
 
/** * 公開日を右下に配置 content-summary.php */
@media screen and (min-width: 768px) {
.box { position: relative;  height: 100px;}
.bottom-text { position: absolute; bottom: 0;right: 0;}
}

content-summary.php

articleに上記CSSを適応させてると、TOPページにスライダー使用時に上部に隙間ができます

wp-content/themes/habakiri/content-summary.php

classを追加します「ctimi」

<article <?php post_class( array( 'article', 'article--summary', 'ctimi' ) ); ?>>
<?php
/**
* Version    : 1.0.0
* Author     : inc2734
* Author URI : http://2inc.org
* Created    : August 28, 2015
* Modified   :
* License    : GPLv2 or later
* License URI: license.txt
*/
?>
<article <?php post_class( array( 'article', 'article--summary', 'ctimi' ) ); ?>>
<?php if ( Habakiri::get( 'is_displaying_thumbnail' ) === 'false' ) : ?>
<div class="entry">
<?php Habakiri::the_title(); ?>
<div class="box">
<div class="bottom-text">
<p  class="hidden-xs"><?php echo get_the_date('Y.n.j'); ?></p>
</div>
</div>
<!-- end .entry --></div>
<?php else : ?>
<div class="entry--has_media entry">
<div class="entry--has_media__inner">
<div class="entry--has_media__media">
<?php Habakiri::the_post_thumbnail(); ?>
<!-- end .entry--has_media__media --></div>
<div class="entry--has_media__body">
<?php Habakiri::the_title(); ?>
<div class="box">
<div class="bottom-text">
<p  class="hidden-xs"><?php echo get_the_date('Y.n.j'); ?></p>
</div>
</div>
<!-- end .entry--has_media__body --></div>
<!-- end .entry--has_media__inner --></div>
<!-- end .entry--has_media --></div>
<?php endif; ?>
</article>

css

style.css

/** * カテゴリ 隙間無くす content-summary.php */
.ctimi{padding : 0 0 5px 0px !important; margin:10px 0 10px 0 !important; }
 
/** * 公開日を右下に配置 content-summary.php */
@media screen and (min-width: 768px) {
.box { position: relative;  height: 100px;}
.bottom-text { position: absolute; bottom: 0;right: 0;}
}

これで完成です。



こちらの記事も読まれてます。