カテゴリー
CSS plugin site setting Synology WordPress

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

本編 >

The site post list displaying improved by additional coding to “Flex Post” plugin – ID14897 [2020/06/16]
スポンサーリンク

by Google Ads ID:8603

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

ページネーション(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 Amazon ID:22170
  • by Amazon ID:22170
  • by Amazon ID:22170
  • by Amazon ID:22170

フォントの修正は，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;
}
スポンサーリンク
  • ABS使用可 造形サイズ175×175×175mm オープンフィラメント可 オートキャリブレーション機能付き レーザー刻印機能拡張可 金属系PLA拡張可 3FJSPXJP00G - ダビンチ Jr.Pro X+ XYZプリンティングジャパン by AMAZON ID21509
  • XYZプリンティング3Dプリンター|ダヴィンチ1.0 pro|オートキャリブレーション機能付|オープンフィラメント可|ABS対応|造形サイズ20×20×20cm|レーザー刻印機能拡張可|積層ピッチ0.02mm~|高性能|3F1AWXJP00F - ダビンチ 1.0 Pro - XYZプリンティングジャパン by AMAZON ID21511
  • 3Dプリンター ダヴィンチ Jr. 1.0(造形サイズ15×15×15cm) - 環境に優しい土に返るPLAフィラメント - ダビンチ Jr. 1.0 XYZプリンティングジャパン by AMAZON ID21513

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

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

スポンサーリンク

by Google Ads ID:19417(C)

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

スポンサーリンク
  • by Amaozn ID13196
  • by Amazon ID19245
  • by Amazon ID13339
  • by Amazon ID13211
<?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)

スポンサーリンク
  • WD 内蔵 SSD M.2 2280 / WD BLACK SN750 NVMe 500GB / WDS500G3X0C by AMAZON - ID14311
  • FIDECO M.2 NVMe PCIE SSDケース USB3.1 Gen2 by AMAZON ID20626
  • Onvian【2個セット】USB A to USB C 3.1オス-Type-Cメス usb type c 変換アダプタ 両面USB3.1 10Gbps高速データ伝送 高交換性 合金製 by AMAZON - ID20727
<?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の改造開始)
スポンサーリンク
WD 内蔵 SSD M.2 2280 / WD BLACK SN750 NVMe 500GB / WDS500G3X0C by AMAZON - ID14311

ここまで

< 本編はここまで。

Update ID21920

Raid, Synology, WordPress
[Synology] DS918+ , 3 x 8TB HDD Raid 5に最後の1台のHDDを追加する – ID16478 [2020/05/30]

目次1 RAID5 (3 x 8TB HDD)へHDD追加2 準備3 ストレージマネージャ4 「概要」画面5 「ボリューム」画面6 「ストレージプール」画面7 「HDD/SSD」画面8 ストレージプール画面に戻る8.1 […]

BIOLOGICS, company, moderna, mRNA, vaccine
[Vc] Moderna – COVID-19 ワクチン臨床(Phase I, dose-escalation, open-label trial, 45 healthy adults) プレリミナリー結果 ID19527 [2020/07/24]※

Moderna社のCOVID-19/Phase I Preliminary Report HomePage An mRNA Vaccine against SARS-CoV-2 — Preliminary Report […]

BIOLOGICS, equipment-harvest, merckmillipore, process, production
[Bio-Equi] TFF – MerckMillipore – ID23123 [2020/9/19]

MerckMillipore TFF タンジェンシャル・フロー・フィルトレーションによるバッファー置換と濃縮を行う機材 Merck site 種類 Pellicon sigle pass TFF 循環をせずに一定量のろ液 […]

AAV, BIOLOGICS, BioReliancd, brammer, catalent, CMO, company, Lonza, TAKARA BIO, WuXi, Yposkesi
[Bio-rAAV] 遺伝⼦治療における代表的な委託製造施設 (CMO) – ID1881 [2020/07/17]

rAAV vectorを製造するCMOリスト 企業サイト サイト 製造サイト 特徴 関係 WuXi Advanced Therapies US 1,000L 遺伝子治療医薬品の開発と製造、AAV vector suspe […]

AAV, BIOLOGICS, equipment-chromato, purification, resin, thermo
[Bio-Equip] Thermo Fisher 「CaptureSelect」 – AAV1~AAXをキャプチャリングできるAffinity resin – ID2320

Bio-Equipment 動画による説明 : CaptureSelect AAV8, AAV9, AAVX ラクダ抗体を利用したAffinity Resin技術 Binding Capacity: >10e13~ […]

BIOLOGICS, company, material, supplier
[Bio-Membrane] Clarification, Sterile, UF/DF – Supplierまとめ – ID18241 [2020/06/30]

Membrane/System Supplierのまとめ 総合メーカーとしては、2強のMerckMilliporeとSartoriusが残っています。Sartoriusは、CDMOサービスを開始しています。 PALLと3 […]

スポンサーリンク
WD 内蔵 SSD M.2 2280 / WD BLACK SN750 NVMe 500GB / WDS500G3X0C by AMAZON - ID14311

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

plugin, Synology, WordPress
[WordPress] 「AMP」まとめ – ID22520 [2020/09/13]

AMPの記事まとめ AMPページに対応すべく奮闘しています。当サイトで記事にしたAMP関連と情報リンクをまとめました。 AMP: a well-lit path to optimizing for Google’s pa […]

mail, plugin, Synology, WordPress
[WordPress] Synology (新)NASに立ち上げたWordPressから外へメールを飛ばす – WP Mail SMTP by WPFormsプラグインとGMail APIの設定 – ID22422 [2020/09/13]

目次1 はじめに2 準備3 プラグインのインストール4 API プロジェクトの作成4.1 OAuthクライアント IDの作成 はじめに レンタルサーバーでWordPressの運用と違い、Synology NASにWord […]

plugin, Synology, Theme, WordPress
[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – ID22353 [2020/09/11]※

目次1 はじめに2 システム構成3 プラグイン・リスト はじめに 現在、見られているこのサイトの表示に関わるWordPressテーマ、およびプラグインのリストを公開します。これからWordPressでサイトの構築をされる […]

plugin, Synology, WordPress
[WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る – ID22304-UM [2020/09/9]

ナレッジベース 不要な他のPluginを削除して、AMPから再検証する作業を全てのページに施しました。その後、AMPページとしてGoogle Adsの表示が不可になっていました。<br>AMP Pluginを […]

Page: 1 2 … 18
スポンサーリンク
WD 内蔵 SSD M.2 2280 / WD BLACK SN750 NVMe 500GB / WDS500G3X0C by AMAZON - ID14311

最新記事(WordPress, ID:14681)

plugin, Synology, WordPress
[WordPress] 「AMP」まとめ – ID22520 [2020/09/13]

AMPの記事まとめ AMPページに対応すべく奮闘しています。当サイトで記事にしたAMP関連と情報リンクをまとめました。 AMP: a well-lit path to optimizing for Google’s pa […]

mail, plugin, Synology, WordPress
[WordPress] Synology (新)NASに立ち上げたWordPressから外へメールを飛ばす – WP Mail SMTP by WPFormsプラグインとGMail APIの設定 – ID22422 [2020/09/13]

目次1 はじめに2 準備3 プラグインのインストール4 API プロジェクトの作成4.1 OAuthクライアント IDの作成 はじめに レンタルサーバーでWordPressの運用と違い、Synology NASにWord […]

plugin, Synology, Theme, WordPress
[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – ID22353 [2020/09/11]※

目次1 はじめに2 システム構成3 プラグイン・リスト はじめに 現在、見られているこのサイトの表示に関わるWordPressテーマ、およびプラグインのリストを公開します。これからWordPressでサイトの構築をされる […]

plugin, Synology, WordPress
[WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る – ID22304-UM [2020/09/9]

ナレッジベース 不要な他のPluginを削除して、AMPから再検証する作業を全てのページに施しました。その後、AMPページとしてGoogle Adsの表示が不可になっていました。<br>AMP Pluginを […]

plugin, WordPress
[WordPress] blogに載せる写真のメタデータは、EWWW Image Optimizerで取り除く – ID321 [2020/08/20]※

EWWW Image Optimizerプラグイン WordPressのblogで載せる写真は、そのままのサイズでアップしてはいけません。メタデータはそのまま残っているためです。メタデータのGeotabには、位置情報が記 […]

IT, Synology, WordPress
[Synology] RT2600acのVPN Plus Serverの導入 – 個人でも高いセキュッリティが得られる高速WiFiルーター – ID37

目次1 出先からRT2600acにアクセスするには1.1 VPN経由1.2 VPNのインストール(VPN Server側)1.3 L2TPの設定 (VPN Server側)1.4 iPhoneの設定 出先からRT2600 […]

Page: 1 2 … 22
スポンサーリンク
WD 内蔵 SSD M.2 2280 / WD BLACK SN750 NVMe 500GB / WDS500G3X0C by AMAZON - ID14311

最新記事(Synology, ID:14676)

plugin, Synology, WordPress
[WordPress] 「AMP」まとめ – ID22520 [2020/09/13]

AMPの記事まとめ AMPページに対応すべく奮闘しています。当サイトで記事にしたAMP関連と情報リンクをまとめました。 AMP: a well-lit path to optimizing for Google’s pa […]

mail, plugin, Synology, WordPress
[WordPress] Synology (新)NASに立ち上げたWordPressから外へメールを飛ばす – WP Mail SMTP by WPFormsプラグインとGMail APIの設定 – ID22422 [2020/09/13]

目次1 はじめに2 準備3 プラグインのインストール4 API プロジェクトの作成4.1 OAuthクライアント IDの作成 はじめに レンタルサーバーでWordPressの運用と違い、Synology NASにWord […]

plugin, Synology, Theme, WordPress
[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – ID22353 [2020/09/11]※

目次1 はじめに2 システム構成3 プラグイン・リスト はじめに 現在、見られているこのサイトの表示に関わるWordPressテーマ、およびプラグインのリストを公開します。これからWordPressでサイトの構築をされる […]

security, Synology
[Synology] 自宅に設置したNASにWordPressを構築してblog配信する場合、高まるネット・リスクとその対策 – ID22342 [2020/09/11]

目次1 はじめに2 ドコモ口座の不正引き落としサイバー事件3 ドコモ口座について4 考えられるパスワードの漏出5 Synology NAS製品での対策6 まとめ はじめに これまで、DS918+を導入しblogを公開して […]

Synology
[Synology製品紹介] NVR DVA3219 – 顔認識システム – これからのセキュリティ対策は、中小企業でも顔認識も可能かも – ID22315 [2020/09/10]

目次1 NVR DVA32192 用途3 セキュリティ4 コスト5 システム構築6 用途7 管理方法8 能力 NVR DVA3219 NVR DVA3219は、Synology Surveillance Stationの […]

plugin, Synology, WordPress
[WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る – ID22304-UM [2020/09/9]

ナレッジベース 不要な他のPluginを削除して、AMPから再検証する作業を全てのページに施しました。その後、AMPページとしてGoogle Adsの表示が不可になっていました。<br>AMP Pluginを […]

Page: 1 2 … 20
スポンサーリンク
WD 内蔵 SSD M.2 2280 / WD BLACK SN750 NVMe 500GB / WDS500G3X0C by AMAZON - ID14311

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

BIOLOGICS, company, COMPANY-FAVOR, KM Bio
気になる企業 – KMバイオロジクス – ID3360

KMバイオロジクス 化学及血清療法研究所(化血研)から事業譲渡により、明治HDの子会社としてKMバイオロジクスが発足した(2016)。

HEALTH
[健康] 自己免疫疾患 – 「PAD4」という酵素 – ID7269

PAD4 自己免疫疾患において、関節リウマチの位置づけは小さくない。 関節リウマチ患者の血清中に存在するケラチンやフィラグリンに対する自己抗体が、シトルリン化されたペプチドと反応することが明らかにされている。 関節リウマ […]

ART
作品 – ID6806

幾何学に興味が出て来始めてきた頃。紙に起こして画像取り込みした後CGで色付け (CG by iPad 2)

BIOLOGICS, key-word, vaccine
[用語] VLP; ウイルス様粒子 – ID19459

VLP; Virus Like Particle; ウイルス用粒子。ウイルスの殻であるカプシドタンパク質は、それをコードする遺伝子を宿主細胞に組込んで生産させると、生産されたカプシドタンパク質は、自然にウイルス粒子に構成 […]

acepodia, company, COMPANY-FAVOR
気になる企業 – Acepodia – ID6990

HER2抗原陽性の固形がんの治療にNK細胞-Antibody (Antibody Cell-Conjugation:ACC technology)を使用した臨床試験の開始がFDAにより承認された(2020/01/09) […]

BIOLOGICS
[Bio-Edu] 免疫グロブリンG; IgG – ID8697

免疫グロブリンには、複数のタイプが存在する。微生物やウイルス感染の初期2周後に生体内では、IgMという免疫ブロプリンが産生され、初期免疫が開始される。IgMは、IgGの基本構造を1単位とすると5単位で構成されている。分子 […]

Page: 1 2 … 135
スポンサーリンク
WD 内蔵 SSD M.2 2280 / WD BLACK SN750 NVMe 500GB / WDS500G3X0C by AMAZON - ID14311

スポンサーリンク

- 以下のツールに敬意を示します -
Support to AMP (Accelerated Mobile Pages) by official AMP plugin for WordPress, and compatible powered by
Post viewing : Flex Posts - Widget and Gutenberg Block

スポンサーリンク

by Google Ads ID:19430 (D)