［スポンサーリンク］
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;}
}これで完成です。