カテゴリー
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 ID24747
  • by Google Ads ID23293
  • by Google Ads ID:11145
スポンサーリンク
by Google Ads ID8603

はじめに

サイトの表示具合は、設定されているCSSを変更して自分好みに変更したり、自作のプラグインにCSSコードを埋め込んだり、色々と方法があるようです。CSSをいじる場合は、小テーマを作って、それを編集するようにします。子テーマを作る理由は、テーマのアップデートによって上書きされてしまうので、それを避けるためです。私も専門家ではありませんが、これからは、徐々にサイトの表示具合をカスタマイズしていきたいと思っていますが、その手法もいろいろあり、それらを学んで行こうと思います。

スポンサーリンク
by Google Ads ID8603
スポンサーリンク
  • Synology DS517 by Amazon ID:22173
  • Synology DS920+ by Amazon ID:22172
  • オムロン BY50S用パック by Amazon ID:22171
  • オムロン BY50S by Amazon ID22170
  • Synology 高機能無線ルーター 800Mbps + 1,733Mbps(11a/b/g/n/ac対応) 高セキュリティ VPN Plus対応 RT2600ac by Amazon ID24327
  • エレコム LANケーブル CAT6A 5m 爪折れ防止コネクタ ホワイト LD-GPA/WH5 by Amazon ID24327

自作プラグイン

スポンサーリンク
by Rakuten ID:15895

まだ、表示幅の埋め込みしかできていません。当サイトでしようしている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 Google Ads ID8603

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

幅の修正のオリジナルは、functions.phpにグローバル変数として設定されており580px(下の「functions.php」を参照)でしたが、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
スポンサーリンク
by Google Ads ID8603

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

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

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

スポンサーリンク
by Google Ads ID19417

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' );
//

?>
スポンサーリンク
by Google Ads ID8603

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

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

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;?>
スポンサーリンク

by Google Ads ID8603

完成した – content.php

  • 前後の投稿へのナビゲータ
  • 投稿の編集リンクの表示

以下、完成した 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 -->
スポンサーリンク
by Google Ads ID8603

Font-weight

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

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

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

スポンサーリンク
by Google Ads ID8603

編集履歴

2020/04/08 文言整備、ソース記載、タイトル修正
2020/05/01 文言整備
2021/02/25 追記 (「はじめに」)

関連記事(WordPress, Tag:customize)

スポンサーリンク
  • by Amazon ID13339
  • by Amaozn ID13196
スポンサーリンク
  • 【Amazon.co.jp 限定】HP USBメモリ 128GB USB 3.1 スライド式 金属製 HPFD796L-128 GJP by Amazon - ID 24751
  • 3Dプリンター ダヴィンチ Jr. 1.0(造形サイズ15×15×15cm) - 環境に優しい土に返るPLAフィラメント - ダビンチ Jr. 1.0 XYZプリンティングジャパン by AMAZON ID21513
  • 3Dプリンター|ダヴィンチ1.0 pro|オートキャリブレーション機能付|オープンフィラメント可|ABS対応|造形サイズ20×20×20cm|レーザー刻印機能拡張可|積層ピッチ0.02mm~|3F1AWXJP00F - XYZプリンティングジャパン by AMAZON ID21511
  • ABS使用可 造形サイズ175×175×175mm オープンフィラメント可 オートキャリブレーション機能付き レーザー刻印機能拡張可 金属系PLA拡張可 3FJSPXJP00G - ダビンチ Jr.Pro X+ XYZプリンティングジャパン by AMAZON ID21509
  • zedela 5-in-1 USB-Cハブ【3ポート5Gbps by Amazon - ID 24751
スポンサーリンク

用語の解説、関連タグ付き投稿の抽出

content.php

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

customize

[WordPress] 自作プラグイン、Twenty Twentyテーマ幅の修正、子テーマのcontent.phpをいじる – ID11199 [2020/03/01]
[WordPress] author-bio の幅設定 – CSS for TwentyTwenty [工事中] – ID10899 [2020/02/26]
[WordPress] 親テーマを変更せずテーマをカスタマイズ – 子テーマを作り変更したを加える – 手始めは、content.phpの編集 – ID7726 [2020/07/23]

functions.php

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

my-plugin

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

width

[WordPress] 自作プラグイン、Twenty Twentyテーマ幅の修正、子テーマのcontent.phpをいじる – ID11199 [2020/03/01]
スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID23293
  • by Google Ads ID:11145
スポンサーリンク
by Google Ads ID8603

Update ID21920

hotel, TRIP
[Hotel] クロスホテル – 僕が知っている昔のビジネスホテルとは全く違っていた! – ID29361 [2021/04/18]

Post Views: 6 目次1 クロスホテル2 駐車場3 外観とエントランス4 ロビー5 部屋からの眺め6 食事6.1 ホテル内・ティーラウンジ バルテール7 ツーベッドの部屋8 ダブルベッドの部屋9 大浴場10 ま […]

スポンサーリンク
by Google Ads ID19417
cafe, gourmet, LIFE, town
[Life] T-SITE in HirakataでWordPress/ blogのメンテ – ID2937 [2019/11/05]

Post Views: 19 目次1 T-SITE2 特徴あるデザインのT-SITE3 TSUTAYAとSTAR BUCKS4 Grounds Baker5 JIN DIN ROU5.1 飲茶定食5.2 その他6 編集履 […]

AAV, BIOLOGICS, production
[rAAV] rAAVのUSP/DSP – 製造方法 – emptyとfullの比重, 2015 – SM-ID2585 [2019/10/05]

Post Views: 126 目次1 rAAVの製造2 基本情報2.1 粒子の比重2.2 パーツの分子量2.3 超遠心以外の精製方法3 文献4 超遠心分析 rAAVの製造 2015年時点のrAAV製造、Upstream […]

更新された投稿の最新順

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

スポンサーリンク
  • by Google Ads ID:11145
  • by Google Ads ID23293
  • by Google Ads ID24747
スポンサーリンク
by Google Ads ID8603

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

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

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

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

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

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

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

スポンサーリンク
by Google Ads ID19417
Page: 1 2 19
スポンサーリンク

スポンサーリンク
  • by Google Ads ID23293
  • by Google Ads ID:11145
  • by Google Ads ID24747
スポンサーリンク
by Google Ads ID8603

最新記事(WordPress, ID:14681)

WordPress
[WP] UMをSimple WP Membershipに変更 – ID29745 [2021/05/13]

Post Views: 1 目次1 はじめに2 編集履歴 はじめに WordPressサイトでメンバーシップ機能を実現するプラグインの話です。Ultimate Member (UM) プラグインについては、当サイトをいず […]

security, Synology, WordPress
[Synology] Threat Preventionとファイヤーフォールの連携 – ID28980 [2021/03/22]

Post Views: 4 目次1 はじめに2 ルーチンワークの概要3 ルーチンワークの詳細3.1 Threat Preventionの操作3.2 ネットワークセンターの操作4 まとめ5 Alert5.1 ET POLI […]

スポンサーリンク
by Google Ads ID19417
plugin, site setting, WordPress
Plugin Maintenance – AMPサイトでのプラグインの運用評価を記録 – ID28378 [2021/04/04]

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

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

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

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

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

Page: 1 2 23
スポンサーリンク

スポンサーリンク
  • by Google Ads ID:11145
  • by Google Ads ID24747
  • by Google Ads ID23293
スポンサーリンク
by Google Ads ID8603

最新記事(Synology, ID:14676)

security, Synology, WordPress
[Synology] Threat Preventionとファイヤーフォールの連携 – ID28980 [2021/03/22]

Post Views: 4 目次1 はじめに2 ルーチンワークの概要3 ルーチンワークの詳細3.1 Threat Preventionの操作3.2 ネットワークセンターの操作4 まとめ5 Alert5.1 ET POLI […]

network, Synology
[Synology] DS918+/DS920+の2つのネットワークインターフェースを一つに束ねると通信速度を早くできるらしい – でも、Windowsとのファイル転送(SMB)で遅くなったのはなぜ? – ID29535 [2021/05/01]

Post Views: 5 目次0.1 はじめに0.1.1 Bondの作成0.1.2 SMBによる転送速度が遅くなった!?1 解決1.1 まとめと今後1.2 編集履歴 はじめに Bondの作成 DS918+/DS920+ […]

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

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

Raid, re-install, security, Synology
[Synology] 写真の管理 / Photo Station & Moments – ID26326 [2020/12/31]

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

スポンサーリンク
by Google Ads ID19417
plugin, Synology, WordPress
[WordPress] 高速化プラグイン「AMP」と定期的に全てのページの静的キャッシュ作成プラグイン「WP Super Cache」で再構成した- ID22640 [2020/12/11]

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

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

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

Page: 1 2 21
スポンサーリンク

スポンサーリンク
  • by Google Ads ID23293
  • by Google Ads ID24747
  • by Google Ads ID:11145
スポンサーリンク
by Google Ads ID8603

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

key-word
[用語] ゲノム刷り込み – ID24581

全身性エリテマトーデス

english
今日の英語 – 責任者か担当者か – charge/involve – ID21874 [2020/08/28]

Post Views: 23 目次1 be in charge of/責任者2 be involved in/関わっている be in charge of/責任者 責任者である I am in charge of the […]

スポンサーリンク
by Google Ads ID19417
plugin, Synology, WordPress
[Synology] NAS – WordPressからサイト外にメールを送信する – ID4235 [2020/09/13]

Post Views: 52 この記事は、少し古いです。代わりに以下の記事をご覧ください。この記事は、参考資料として「Appendix」を保存するために、このまま維持することにしました。 代わりの記事では、2020/09 […]

スポンサーリンク

スポンサーリンク
by Google Ads ID:11143(2)

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