ID14897
ポストのリスト・プラグインをソースコードで修正
ページネーション(pagination)
記事のリストには，「Flex Posts」プラグインを使用しています．軽くて良いプラグインですが，ページネーションが機能しませんが(2020/04/29現在)，他のプラグインでも機能しないので，何かのプラグインが悪いか，相性が悪い可能性があります．2020/06/07, その後、不要なプラグインの削除、Flex Postsの更新などがあったせいか、ページネーションは機能するようになりました。
Flex Posts plugin
Layout 1又はList-1の体裁が好みなのですが，featured imageが日本語表示ではバランス的に小さかったり，2カラムの投稿表示であるなど，好みでない部分がありました．
今回，プラグインのソースコードを一通り確認して，修正する箇所を特定して少しいじりました．CSSで間に合う部分は，CSSに追加しました．
1ライン(カラム)で1つの記事を表示するようにしました。
フォントの修正は，CSSに
/* Twenty Twenty Theme
Entry header is changed to transparent
*/
.singular .entry-header, .singular .featured-media:before, .wp-block-pullquote:before {
background-color: transparent;
}
/* FLEX POSTS plugin
* image size of list-1
* /plugin/flex-posts/public/css/flex-posts.cssを参照した
* my customizing 2020/04/26
*/
.fp-thumbnail img.size-thumbnail {
width: 150px;
height: 150px;
}
プラグインのソースコードの修正
- コード修正したファイル
- plugins\flex-posts\public\flex-posts-list-1.php
- plugins\flex-posts\public\flex-posts-list-1.php
- 修正概要は，fp-row, fp-colをClassに追加したり，削除したりして，2カラムになって，1行が短いことを1カラムなるように修正．タイトルフォトをH4からH5に修正
- プラグインのVersion upがあった際には，修正ファイルと置き換えるか，コードを見ながらNew Versionを修正する
修正済み(modified coed)
plugins\flex-posts\public\flex-posts-list-2.php
2020/06/16
- フローチャート表示用に改造を開始
- <center>⬇️</center>を配置
<?php
/**
* Flex posts widget template: List 2
*
* @package Flex Posts
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="fp-row fp-list-2 fp-flex">
<?php while ( $query->have_posts() ) : ?>
<?php $query->the_post(); ?>
<div class="fp-col fp-post">
<?php flex_posts_thumbnail( $medium_size, $instance, $query->current_post ); ?>
<div class="fp-body">
<?php if ( ! empty( $instance['show_categories'] ) ) : ?>
<?php flex_posts_categories_meta(); ?>
<?php endif; ?>
<h4 class="fp-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<center>⬇️</center>
</h4>
<div class="fp-meta">
<?php flex_posts_meta( $instance ); ?>
</div>
<?php if ( ! empty( $instance['show_excerpt'] ) ) : ?>
<div class="fp-excerpt"><?php flex_posts_excerpt( $excerpt_length ); ?></div>
<?php endif; ?>
<?php if ( ! empty( $instance['show_readmore'] ) ) : ?>
<div class="fp-readmore">
<a href="<?php the_permalink(); ?>" class="fp-readmore-link"><?php echo esc_html( $readmore_text ); ?></a>
</div>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<div class="fp-col"></div>
<div class="fp-col"></div>
</div>
plugins\flex-posts\public\flex-posts-list-1.php
2020/06/16
Flex Posts – Widget and Gutenberg Block Version 1.60 to 1.70にupdateして、function flex_post_excerpt()が機能しなくなったため独自に修正とその他微調整。
- オリジナルのflex_posts_excerpt()を削除し、the_excerpt()を配置
- 日付metaの位置をthumbnailの上に変更
<?php
/**
* Flex posts widget template: List 1
*
* @package Flex Posts
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="fp-list-1 fp-flex">
<?php while ( $query->have_posts() ) : ?>
<?php $query->the_post(); ?>
<div class="fp-post">
<div class="fp-meta">
<?php flex_posts_meta( $instance ); ?>
</div>
<div class="fp-row fp-flex">
<?php flex_posts_thumbnail( $thumbnail_size, $instance, $query->current_post ); ?>
<div class="fp-body">
<?php if ( ! empty( $instance['show_categories'] ) ) : ?>
<?php flex_posts_categories_meta(); ?>
<?php endif; ?>
<h5 class="fp-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h5>
<?php if ( ! empty( $instance['show_excerpt'] ) ) : ?>
<div class="fp-excerpt">
<?php
// flex_posts_excerpt($excerpt_length );
the_excerpt();
?>
</div>
<?php endif; ?>
</div>
</div>
<?php if ( ! empty( $instance['show_readmore'] ) ) : ?>
<div class="fp-readmore">
<a href="<?php the_permalink(); ?>" class="fp-readmore-link"><?php echo esc_html( $readmore_text ); ?></a>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
<div class="fp-col"></div>
<div class="fp-col"></div>
</div>修正済み(modified coed)
2020/04/29
<?php
/**
* Flex posts widget template: List 1
*
* @package Flex Posts
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="fp-list-1 fp-flex">
<?php while ( $query->have_posts() ) : ?>
<?php $query->the_post(); ?>
<div class="fp-post">
<div class="fp-row fp-flex">
<?php flex_posts_thumbnail( $thumbnail_size, $instance, $query->current_post ); ?>
<div class="fp-body">
<?php if ( ! empty( $instance['show_categories'] ) ) : ?>
<?php flex_posts_categories_meta(); ?>
<?php endif; ?>
<h5 class="fp-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h5>
<div class="fp-meta">
<?php flex_posts_meta( $instance ); ?>
</div>
<?php if ( ! empty( $instance['show_excerpt'] ) ) : ?>
<div class="fp-excerpt"><?php flex_posts_excerpt( $excerpt_length ); ?></div>
<?php endif; ?>
</div>
</div>
<?php if ( ! empty( $instance['show_readmore'] ) ) : ?>
<div class="fp-readmore">
<a href="<?php the_permalink(); ?>" class="fp-readmore-link"><?php echo esc_html( $readmore_text ); ?></a>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
<div class="fp-col"></div>
<div class="fp-col"></div>
</div>
修正前(before)
<?php
/**
* Flex posts widget template: List 1
*
* @package Flex Posts
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="fp-row fp-list-1 fp-flex">
<?php while ( $query->have_posts() ) : ?>
<?php $query->the_post(); ?>
<div class="fp-col fp-post">
<div class="fp-flex">
<?php flex_posts_thumbnail( $thumbnail_size, $instance, $query->current_post ); ?>
<div class="fp-body">
<?php if ( ! empty( $instance['show_categories'] ) ) : ?>
<?php flex_posts_categories_meta(); ?>
<?php endif; ?>
<h4 class="fp-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h4>
<div class="fp-meta">
<?php flex_posts_meta( $instance ); ?>
</div>
</div>
</div>
<?php if ( ! empty( $instance['show_excerpt'] ) ) : ?>
<div class="fp-excerpt"><?php flex_posts_excerpt( $excerpt_length ); ?></div>
<?php endif; ?>
<?php if ( ! empty( $instance['show_readmore'] ) ) : ?>
<div class="fp-readmore">
<a href="<?php the_permalink(); ?>" class="fp-readmore-link"><?php echo esc_html( $readmore_text ); ?></a>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
<div class="fp-col"></div>
<div class="fp-col"></div>
</div>
編集履歴
2020/04/29 はりきり(Mr) 2020/06/07 追記 (ページネーション機能が正常になったこと) 2020/06/16 追記 (Flex Post Version 1.70でexcerpt非表示への対応、List-2の改造開始)