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

by Google Ads ID8603

ポストのリスト・プラグインをソースコードで修正

ページネーション(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つの記事を表示するようにしました。

by Google Ads ID8603

フォントの修正は，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;
}

by Google Ads ID8603

プラグインのソースコードの修正

• コード修正したファイル
  • 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

by Google Ads ID19417

• フローチャート表示用に改造を開始
• <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>

by Google Ads ID8603

修正前(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>

by Google Ads ID8603

編集履歴

編集履歴
2020/04/29 はりきり(Mr)
2020/06/07 追記 (ページネーション機能が正常になったこと)
2020/06/16 追記 (Flex Post Version 1.70でexcerpt非表示への対応、List-2の改造開始)

スポンサーリンク

by Google Ads ID8603

Update ID21920

2020年2月5日

KNOWLEDGE

[Kw] コンサル会社 – デロイトトーマツ – ID8628 [2020/02/05]

Post Views: 24 デロイトトーマツ https://www2.deloitte.com/jp/ja.html

スポンサーリンク

by Google Ads ID19417

2020年5月7日

Gear

Gear – 電動ノコギリ – 隣宅との間で巨大化した木を切り倒す方法と注意点 – ID15368 [2020/05/07]

1、2年前までは草だと思っていた物が、気が付けば高さ12m(最大の幹直径20cm)の木になっていた。ここまで大きくなった木は、手引きのこではもう切り倒すことはできず、切り倒すための電動ノコギリを購入し切り倒した。その電動ノコギリの選び方、その他必要な備品と切り倒すときの注意点及び実際の作業について記録した

2020年4月15日

english

今日の英語 – コロナで自宅待機の相手にいうことば – hope you stay safe and well – ID13531

ビジネス相手にフレンドリーなセンテンス

更新された投稿の最新順

スポンサーリンク

by Google Ads ID8603

最新記事(WPプラグイン,ID:14818)

2021年3月10日

plugin, site setting, WordPress

Plugin Maintenance – AMPサイトでのプラグインの運用評価を記録 – ID28378 [2021/04/04]

Post Views: 7 All in One SEOプラグイン (2021/03/13) メタディスクリプション記述のみに使用していたが、このプラグインから依存を完全になくすために、まずは、その記述内容を抜き出し、W […]

2021年2月28日

plugin, WordPress

[WordPress : 只今検証中] – Simple WordPress Membership – メンバーシップ プラグインをAMPに搭載できるか!? – メンバーのレベルに応じた閲覧制限をページに設ける – ID22131 [2021/02/28]

Post Views: 12 目次1 Simple WordPress Membership1.1 Error in AMP validation2 アドオン3 Partial Proteiction4 編集履歴 Sim […]

2020年12月23日

adsense, plugin, WordPress

[WordPress] CLS; Cumulative Layout Shift – 2021/03からGoogle検索評価のスコアに加わる – ID26235 [2020/12/23]

Post Views: 17 目次1 はじめに2 Cumulative Layout Shift3 ページのレスポンスを測定するツールサイト4 編集履歴5 関連記事 はじめに 当サイトを立ち上げた頃には、もっぱらplug […]

2020年12月17日

plugin, WordPress

[WordPress] Widget Logic プラグイン – ID26082 [2020/12/17]

Post Views: 19 目次1 Widget Logicプラグイン2 条件の例 Widget Logicプラグイン 2020/12現在、updateがされておらず、WordPress の最新Version ではテス […]

スポンサーリンク

by Google Ads ID19417

Page: 1 2 … 19 Next »

スポンサーリンク

by Google Ads ID8603

最新記事(WordPress, ID:14681)

2021年3月10日

plugin, site setting, WordPress

Plugin Maintenance – AMPサイトでのプラグインの運用評価を記録 – ID28378 [2021/04/04]

Post Views: 7 All in One SEOプラグイン (2021/03/13) メタディスクリプション記述のみに使用していたが、このプラグインから依存を完全になくすために、まずは、その記述内容を抜き出し、W […]

スポンサーリンク

by Google Ads ID19417

2021年2月28日

plugin, WordPress

[WordPress : 只今検証中] – Simple WordPress Membership – メンバーシップ プラグインをAMPに搭載できるか!? – メンバーのレベルに応じた閲覧制限をページに設ける – ID22131 [2021/02/28]

Post Views: 12 目次1 Simple WordPress Membership1.1 Error in AMP validation2 アドオン3 Partial Proteiction4 編集履歴 Sim […]

2021年2月22日

site setting, WordPress

[Synology] DS920+のblog server – 15時間のアクセス普通について、今回の原因とは、そしてその対応 – ID27934 [2021/02/22]

Post Views: 20 目次1 はじめに2 対応した作業3 編集履歴 はじめに なぜか、RT2600acのポート転送にWeb Serverへの設定が消えていたことで、HARIKIRI-INSIGHTのBlogへのア […]

2020年12月23日

adsense, plugin, WordPress

[WordPress] CLS; Cumulative Layout Shift – 2021/03からGoogle検索評価のスコアに加わる – ID26235 [2020/12/23]

Post Views: 17 目次1 はじめに2 Cumulative Layout Shift3 ページのレスポンスを測定するツールサイト4 編集履歴5 関連記事 はじめに 当サイトを立ち上げた頃には、もっぱらplug […]

2020年12月17日

plugin, WordPress

[WordPress] Widget Logic プラグイン – ID26082 [2020/12/17]

Post Views: 19 目次1 Widget Logicプラグイン2 条件の例 Widget Logicプラグイン 2020/12現在、updateがされておらず、WordPress の最新Version ではテス […]

2020年11月16日

security, WordPress

[WordPress] AMP対応化で、使用しているその他のプラグインによるエラーが出ないようにするために – プラグイン別 [2020/11/16] ID24858

Post Views: 18 目次1 はじめに2 基本的な設定方法3 WordPress プラグイン別3.1 Content of Table Plus はじめに AMPプラグインをインストールしている場合、投稿/ページ […]

Page: 1 2 … 23 Next »

スポンサーリンク

by Google Ads ID8603

最新記事(Synology, ID:14676)

2021年3月14日

folder, Synology

[WP] ブログにおけるメタディスクリプションの意義と設定方法 – ID28775 [2021/03/14]

Post Views: 11 目次1 はじめに2 メタディスクリプションの機能3 メタディスクリプションの設定4 お勧めのプラグイン5 編集履歴 はじめに メタディスクリプションは、検索エンジンで表示されるページの1つの […]

2020年12月30日

Raid, re-install, security, Synology

[Synology] 写真の管理 / Photo Station & Moments – ID26326 [2020/12/31]

Post Views: 20 目次1 はじめに1.1 必要なもの2 補完的に活用する3 バックアップ4 Windows10のiCloudフォトからバックアップを取る5 MomentsからPhoto Stationのフォル […]

2020年11月7日

plugin, Synology, WordPress

[WordPress] 高速化プラグイン「AMP」と定期的に全てのページの静的キャッシュ作成プラグイン「WP Super Cache」で再構成した- ID22640 [2020/12/11]

Post Views: 10 目次1 はじめに2 ページのAMP化のみでもレスポンス改善は十分高い3 キャッシュプラグインを追加する4 プラグインは専用機能がいい4.1 WP Super Cacheの設定のほんとのところ […]

2020年10月19日

Synology

[Synology] 以前からeo光(1Gコース)なのに速度が遅く感じられていた(100Mbps) – 6A型(CAT6)のネットケーブルで改善 (300 ~ 500Mpbs) – ID24316 [2021/03/30]

Post Views: 16 目次1 eo光の速度の測定2 コースごとの測定3 ケーブル交換前の速度4 ケーブル交換後の速度5 その他のコースで測定6 使用したケーブル7 回線テスト eo光の速度の測定 もう数年以来、ネ […]

スポンサーリンク

by Google Ads ID19417

2020年10月4日

Synology

[Synology – Plex] Plex Serverに繋がらなくなったときの対処法 – ID24032 [2020/10/04]

Post Views: 20 目次1 はじめに2 課題3 対処方法4 Plexの管理画面でできること5 まとめ はじめに Plexは、自宅のサーバーにあるメディア(音楽、動画)をインターネット経由でもストリーム配信できる […]

2020年9月13日

plugin, Synology, WordPress

[WordPress] 「AMP」まとめ – ID22520 [2021/02/11]

Post Views: 20 目次1 AMPの記事まとめ2 Google Search Console2.1 AMP3 AMPの「更新済みURL」が作成されない問題と対策4 編集履歴 AMPの記事まとめ AMPページに対 […]

Page: 1 2 … 20 Next »

スポンサーリンク

by Google Ads ID8603

その他記事(ALL-RANDOM, ID:16786)

2020年4月22日

english

今日の英語 – be your own kind of beautiful – あなただけの美しさになる – ID14086

気になった英語のフレーズや単語を自分の物にするためには、コアイメージを持つことが早道です。

スポンサーリンク

by Google Ads ID19417

2021年3月24日

Gear

[Gear] アップル Apple Apple Watch Nike Series 6（GPSモデル）- [MG173J/A] – 血中酸素濃度は、睡眠時無呼吸症候群を持つ我が身では生活改善に助かる – スマホ用非接触の充電器では充電はできないョ ID28789 [2021/04/17]

老齢の身には助かる、健康の維持増進のための機能が満載です。特に僕にとっては。

2020年2月25日

plugin, Synology, WordPress

[WordPress] All in One SEO プラグイン – ID10704 [2021/03/13]

Post Views: 16 参照 : サイトのレンスポンス速度を改善させるプラグインの一つ All in One SEOプラグインに追加概説を参考 [2020] Site Kit by Googleの設定と使い方を徹底 […]

by Google Ads ID:11143(2)