Habakiri(WordPressテーマ)記事一覧の表示方法を変更

habakari

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

[スポンサーリンク]

変更

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

Habakiri・(WordPressテーマ)

 
 

PC・タブレット

【タイトル】【公開日】【画像】のみ表示

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

wp-content/themes/habakiri/style.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;}
}

 
 

追記

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

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

<article <?php post_class( array( ‘article’, ‘article–summary’ ) ); ?>>

<article <?php post_class( array( ‘article’, ‘article–summary’, ‘ctimi’ ) ); ?>>

にclassを追加します「ctimi」
 
 

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', '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

wp-content/themes/habakiri/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;}
}

これで完成です。
 
 

この投稿へのコメント

コメントはありません。

コメントを残す