Harikir blog and DataBase

The site post list displaying improved by additional coding to the code of “Flex Post” plugin -ID14897 [2020/06/16]

80f3d755 3019 49c6 bdae 47d137c87826

執筆者:

harikiri

カテゴリ:

,
Post Views: 780

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
  • 修正概要は，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の改造開始)

関連記事:

  1. [Data Link] FDA DRUG APPROVAL LIST 2019 – ID6607 [2020/01/09] Post Views: 516 FDAで承認されたすべての医薬品について，モダリティー毎に詳細を見ることができる．例えば，Antibodyでは5つが承認されているこがわかります． ADAKVEO BEOVU SKYRIZ […]…
  2. [WordPress] Flex Posts – Widget and Gutenberg Block プラグイン – Gutenberg エディター対応　[2020/02/07] Post Views: 699 はじめに 僕は、WordPress歴が1年とNewcomerなので、余りしがらみも無く新しいエディタ Gutenbergを使用しています。 Synology NAS WordPress G […]…
  3. The site background color was set to the white – ID14231 Post Views: 775 背景色 自分が目が悪く見えづらいのに、これまで当サイトの「background color」は、肌色系にしていた。これは、最新バージョンWordPressの標準テーマであるTwenty T […]…
  4. The site font-family were consisted more harmonizing – ID14235 Post Views: 801 WordPressでは、サイトの表示は、使用しているプラグインの数が増えてくると、そのプラグインが独自で設定している「フォント」が使われるため、一貫性が低くなって見栄えが悪くなる。 例えば […]…
  5. Preparing the contact form in HARIKIRI-STYLE site with reCAPTCHA v3 and function of form text storing to database Post Views: 804 「お問い合わせ」フォーム サイトの「お問い合わせ」フォームにbot対策として、Googleの最新技術であるreCAPTCHA v3を追加しました。 Googleがサービスしている「Goog […]…
  6. [Site Link] 貿易するには欠かせない諸条件を定義 – インコターム; Incoterms – 2010/2020 [2020/12/10] Post Views: 1,032 インコタームについてわかり易く解説されているサイトをリンクします。最新版の2020が発出され2020/01から適用可能となっているようです。追加や削除されたものもあるようですが、201 […]…
  7. [Bio-Equip] BioProfile FLEX 2 の簡単な説明- 細胞培養環境自動分析装着 [2020/06/01] Post Views: 842 BioProfile FLEX 2 バイオ医薬品の製造では、細胞培養状態を適切に制御することは、その細胞が生産する目的物質の品質管理には欠かせない。管理すべき測定項目が多いことが、バイオ医 […]…
  8. [WordPress] Scroll Top – Next Previous Post Links – Back…プラグイン Post Views: 717 Scroll Top – Next Previous Post Links – Back… プラグイン 機能 投稿やページが長文になるとトップに戻りたい […]…
  9. Plugin Maintenance – AMPサイトでのプラグインの運用評価を記録 [2021/04/04] Post Views: 963 パンくずリスト Breadcrumbプラグイン 編集履歴 2021/03/10 Mr.HARIKIRI…
  10. [用語] RSS; Rich Site Summary – Post Views: 618 RSSとは RSSは、コンテンツ配信技術またはその仕様。 ブログでの更新情報の配信 ニュース配信サイトでの最新ニュースの配信 放送局では番組情報の配信 企業においてプレスリリースや新製品情 […]…

投稿をさらに読み込む