カテゴリー
CSS plugin Synology Theme WordPress

[WordPress] 自作プラグイン、Twenty Twentyテーマ幅の修正、子テーマのcontent.phpをいじる – ID11199 [2020/03/01]

本編 >

[WordPress] 自作プラグイン、Twenty Twentyテーマ幅の修正、子テーマのcontent.phpをいじる – ID11199 [2020/03/01]
スポンサーリンク

by Google Ads ID:8603

自作プラグイン

Twenty Twentyテーマの投稿のデフォルト幅を、以下の手順で自作プラグインとしてインストールして、広くなるように設定する

  • 参考1からWordPressのTwenty Twentyテーマのデフォルトの投稿幅を広くするコードを、参考1のmy-plugin.phpの指定の箇所にコピペする
  • my-plugin.phpは、WordPressのブラインインとしてインストールできるようにパッケージされているので、ダウンロードしたファイルの組合せで、アップロードしてインストールする。
  • 以上の操作で、設定が反映される。

参考1
WordPress5.3 新デフォルトテーマ Twenty Twenty をチェックしています

https://nendeb.com/819

参考2
WordPress (自分専用)マイ・プラグインを作ろう

https://nendeb.com/1
スポンサーリンク
  • by Amazon ID:22170
  • by Amazon ID:22170
  • by Amazon ID:22170
  • by Amazon ID:22170

完成したプラグインのコード

幅の修正のオリジナルは、580pxでしたが、iPad Pro 11で閲覧して違和感のない広さに設定しました。

その結果、860pxになっています。以下のコードでは、コメントには、オリジナルの値580pxを残していますが、実際の設定コードは860pxに変更しています。

functions.php

グローバル変数 $content_width

	// Set content-width.
	global $content_width;
	if ( ! isset( $content_width ) ) {
		$content_width = 580;
	}

my-plugin.php

<?php
/*
Plugin Name: my-plugin
Plugin URI:
Description: My Plugin For WordPress.
Version: 1.0.2
Author: nendeb
Author URI: http://nendeb.com/
License: GPLv2 or later
*/


// ここからコードをいれてください。

// Start_01,WordPress Theme: Twenty Twenty の表示幅
/* コンテンツ幅は 580px と だいぶ狭いなと思うので 簡単に変更できるかテストしてみました。
公開画面と管理画面のCSS と $GLOBALS[‘content_width’] を上書きしてみます。
*/

/*
 * 公開画面での Content幅を 860px へ変更する
 * @since Twenty Twenty 1.0
 * License: GPLv2 or later
 */
function twentytwenty_org_style() {
    echo '<style>
    .section-inner.thin,
    .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide){
        max-width: 86rem;
    }
    </style>';
}
add_action( 'wp_head', 'twentytwenty_org_style', 99 );
 
 
/*
 * 管理画面での Content幅を 860px へ変更する
 * @since Twenty Twenty 1.0
 * License: GPLv2 or later
 */
function twentytwenty_admin_style() {
    // Content幅 860 + 30 -> 860 + 0 : Admで確認した画面がUserの画面と異ならないようにした
    echo '<style>
    .wp-block {
        max-width: 860px;
    }
    .wp-block[data-align="wide"] {
        max-width: 860px;;
    }
    .wp-block[data-align="full"] {
        max-width: none;
    }
    </style>';
}
add_action( 'admin_print_styles', 'twentytwenty_admin_style', 99 );
 
 
/*
 * content_width を 860px へ変更する
 * @since Twenty Twenty 1.0
 * License: GPLv2 or later
 */
function twentytwenty_content_width() {
    // This variable is intended to be overruled from themes.
    $GLOBALS['content_width'] = 860;
}
add_action( 'after_setup_theme', 'twentytwenty_content_width', 0 );

// End_01











// ここまで


if ( ! function_exists( 'nendebcom_hide_myplugin_updateplugin' ) ) :
/*
 * サンプル
 * my-pluginの更新を非表示
 *
 * Note : https://nendeb.com/350
 */
function nendebcom_hide_myplugin_updateplugin( $data ) {
	if ( isset( $data->response['my-plugin/my-plugin.php'] ) ) {
		unset( $data->response['my-plugin/my-plugin.php'] );
	}
	return $data;
}
add_filter( 'site_option__site_transient_update_plugins', 'nendebcom_hide_myplugin_updateplugin' );
endif; // nendebcom_hide_myplugin_updateplugin





if ( ! function_exists( 'nendebcom_plugin_last_load' ) ) :
/*
 * サンプル
 * my-plugin を最後に読み込むようにする。
 * Note : https://nendeb.com/10
*/
function nendebcom_plugin_last_load() {

    $this_activeplugin  = '';
    $this_plugin        = 'my-plugin/my-plugin.php';    //最後に読み込みたいプラグイン
    $active_plugins     = get_option( 'active_plugins' );
    $new_active_plugins = array();

    foreach ( $active_plugins as $plugins ) {
        if( $plugins != $this_plugin ){
            $new_active_plugins[] = $plugins;
        }else{
            $this_activeplugin = $this_plugin;
        }
    }

    if( $this_activeplugin ){
        $new_active_plugins[] = $this_activeplugin;
    }

    if( ! empty( $new_active_plugins ) ){
        update_option( 'active_plugins' ,  $new_active_plugins );
    }
}
add_action( 'activated_plugin', 'nendebcom_plugin_last_load' );
endif; // nendebcom_plugin_last_load
スポンサーリンク
  • 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

子テーマのfunctions.phpをいじる

子テーマの作り方は、以下の関連記事をご参照ください。

子テーマのディレクトリ直下にある「functions.php」に以下のコードを挿入します。

functions.php

  • 子テーマ定義
  • 自動保存無効化
  • Headに(adsense)組み込み
    • AMP対応したページ/投稿には、headerにJavaScriptコードは使えません。挿入しても無効化されます。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
  );
}

// 自動保存を無効にする処理
function autosave_off() {
  wp_deregister_script('autosave');
}
add_action( 'wp_print_scripts', 'autosave_off' );
// For no support to AMP, AMP do not allow insertion to Header
// 以下は、<Head>と</head>の間にGoogle Adsenseコードを挿入
// ただし、AMPでは、無秩序に挿入は許されないため、AMPを使用する場合は削除
function km_script () {
 echo '<div><script data-ad-client="ca-pub-1277399675163968" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></div>';
}
add_action( 'amp_post_template_head', 'km_script' );
//

?>

ログインしているときに処理する

編集の最中に、投稿内容をブラウザで表示させて確認する場合、「編集」リンクを投稿の最初や最後の方に表示できると便利です。以下は、投稿の最初に表示させるカスタマイズです。同時に前後の投稿ナビゲーションも表示させます。

content.phpに、以下のコードを挿入します。

<?php if (is_user_logged_in()) : ?>

	<div>
	<?php
	if ( is_single() ) {
	
		get_template_part( 'template-parts/navigation' );
			
	}

		// 編集
		edit_post_link();

	?>
	</div>

<?php endif;?>

完成した – content.php

スポンサーリンク
  • 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
  • 前後の投稿へのナビゲータ
  • 投稿の編集リンクの表示

以下、完成した content.phpのコード

<?php
/**
 * The default template for displaying content
 *
 * Used for both singular and index.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

?>

<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

	<?php

	get_template_part( 'template-parts/entry-header' );

	if ( ! is_search() ) {
		get_template_part( 'template-parts/featured-image' );
	}

	?>

	<div>
	<?php 
	// 全ページに表示 : カテゴリメニュー
	get_template_part( 'template-parts/info-course' );  
	?>
	</div>

<?php if (is_user_logged_in()) : ?>

	<div>
	<?php
	if ( is_single() ) {
	
		get_template_part( 'template-parts/navigation' );
			
	}

		// 編集
		edit_post_link();

	?>
	</div>

<?php endif;?>



	<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">

		<div class="entry-content">

			<?php
			if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
				the_excerpt();
			} else {
				the_content( __( 'Continue reading', 'twentytwenty' ) );
			}
			?>

		</div><!-- .entry-content -->

	</div><!-- .post-inner -->

	<div class="section-inner">
		<?php
		wp_link_pages(
			array(
				'before'      => '<nav class="post-nav-links bg-light-background" aria-label="' . esc_attr__( 'Page', 'twentytwenty' ) . '"><span class="label">' . __( 'Pages:', 'twentytwenty' ) . '</span>',
				'after'       => '</nav>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			)
		);

		// 編集
		edit_post_link();

		// Single bottom post meta.
		twentytwenty_the_post_meta( get_the_ID(), 'single-bottom' );

		if ( is_single() ) {

			get_template_part( 'template-parts/entry-author-bio' );

		}
		?>

	</div><!-- .section-inner -->

	<div>
	<?php
	?>
	</div>

	<?php

	// 全ページに表示 : カテゴリメニュー
	get_template_part( 'template-parts/info-course-end' );

	if ( is_single() ) {

		get_template_part( 'template-parts/navigation' );

	}

	/**
	 *  Output comments wrapper if it's a post, or if comments are open,
	 * or if there's a comment number – and check for password.
	 * */
	if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) {
		?>

		<div class="comments-wrapper section-inner">

			<?php comments_template(); ?>

		</div><!-- .comments-wrapper -->

		<?php
	}
	?>

</article><!-- .post -->

Font-weight

font-weightの値は、100から900まで100刻み(未確認、1刻みでも可能かもしれない)で設定できます。

  • 400 : 普通の太さ
  • 700 : bold
  • 普通文字を500すれば、見やすくななる(ブロガーさんの提案)

https://masaa.net/2018/12/28/post-181227-4/

編集履歴

2020/04/08 文言整備、ソース記載、タイトル修正
2020/05/01 文言整備

スポンサーリンク
  • by Amazon ID13339
  • by Amaozn ID13196
  • by Amazon ID13211
  • by Amazon ID19245

関連記事(WordPress, Tag:customize)

ここまで

< 本編はここまで。

Update ID21920

KNOWLEDGE
[用語] 角膜上皮幹細胞疲弊症 – ID23088 [2020/09/18]

結膜と角膜の境界にある角膜輪部(黒目の最も外側)には、角膜上皮幹細胞が存在している。先天的または、後天的に失われて角膜再生が低下し透明性が悪くなり視力を低下させる。 ジャパン・ティッシュ・エンジニアリング(J-TEC)は […]

AAV, BIOLOGICS, education, gene-therapy
[Bio-Edu] Plasmid – バイオロジクスには欠かせないトラディショナルな遺伝子組換え技術、そして rAAVを作るまで! – ID12915 [2020/08/05]※

目次1 はじめに2 まずは、遺伝子組換え技術2.1 大腸菌とPlasmid2.2 制限酵素2.3 DNAリガーゼ (ligase)3 大腸菌にタンパク質を作らせる4 Competent Cell4.1 製品4.1.1 X […]

BIOLOGICS, mAb
[抗体/情報] 年々増える抗体医薬 – Antibody Societyでは抗体医薬がリストされている – ID15492 [2020/05/08]

目次1 Antibody Societyサイトの紹介2 編集履歴 Antibody Societyサイトの紹介 抗体医薬の承認数は増加するばかりです。バイオ紙ミラー以外の新薬に関する承認済みやレビュー中のリストは、「An […]

Synology, WordPress
[WordPress] 自宅NASに設置のWordPressのプラグイン更新を出先から行う場合に、毎回出てくるパスワード入力を省略する設定 – ID89

出先から自宅NASのWordPressのプラグインを更新する 自宅サーバーに構築したWordPressのプラグイン更新には,デフォルトでパスワードを求めて来ます。以下のようにwp-config.phpを編集すれば、パスワ […]

analysis, BIOLOGICS
[Bio-Edu] 進化するPCR – droplet digital PCRまで – 原理を解説する ID19081 [2020/07/16]

PCR Polymerase chained reaction デジタルPCRとは。そして更に、ドロップレットPCRの原理は、シンプルで美しい。 ~20,000ウェルの微細なナノウェルにDNA分子をランダムに分配する 0 […]

Synology, WordPress
[Synology] NAS上に暗号化された共有フォルダーの設定と運用方法、その考え方 – ID2758 [2020/04/18]※

目次1 暗号化の意義1.1 データ流出のケースは大きく2つ1.1.1 1. ローカル・ネットワークからの流出1.1.2 2. 物理的な流出2 暗号化方式2.1 用語2.1.1 暗号キー2.1.2 キーマネージャ2.1.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)

HEALTH, kidney
[Data Link] フェブリク投与ガイド – ID8187

製品情報 https://medical.teijin-pharma.co.jp/iyaku/product/fe/fet/index.html がん化学療法に伴う高尿酸血症 フェブリク錠投与ガイド(RMPに基づく適正使 […]

BIOLOGICS, gene-therapy
[Gene Therapy]承認された遺伝子治療薬 – まとめ – ID10658 [2020/06/09]

2020年3月現在、承認された遺伝子治療薬の数は、一桁であるが、既に世界は、「抗体医薬」から「遺伝子治療薬」にカジを大きく切っている。 ほぼ全ての抗体医薬に関する技術は、コモディティ技術となり、新規参入CDMO/CMOが […]

BIOLOGICS, guidance
[Bio-Edu] Good Manufacturing Practice (GMP) guidelines – ID4226

目次1 EudraLex – Volume 4 – Annex-131.1 主な要求事項2 IMPD EudraLex – Volume 4 – Annex-13 Eudr […]

Gear
[Gear] iPad Pro 10.5は、もう2年使い込んだ。同時に使用を開始したスマートキーボードも接触が不良になったが、アツプルペンシルはまだ使える。- ID2048

スマートキーボード初代は不良品 スマートキーボード初代は、3枚折タイプだが、経年使用による折りたたみをちょうど2年間の繰り返しの結果、その3枚折(君)は、正に「ふにゃふにゃ」になってしまった。それはまだ使用できれば良いの […]

BIOLOGICS, company, equipment-filtration, merckmillipore, process, production
[Bio-Equi] Sterile Filter – MerckMillipore – ID18259

MerckMillipore Sterile Filter Labスケールでは、小型のOpticapやMillipacを使用します。 Merck site 種類 Durapore 01 μm & 0.22μm f […]

BIOLOGICS, education
[Protein] Prothrombin – ID2643

ヒトプロトロンビン  分子量 72,000 Da 血中濃度 100mg~150mg/dl ドメインこうせい: 2つのKrigleドメインに続きセリンプロテアーゼドメインがつながる。 文献 Prothrombin […]

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)