カテゴリー
Synology Theme WordPress

[WordPress] 親テーマを変更せずテーマをカスタマイズ – 子テーマを作り変更したを加える – 手始めは、content.phpの編集 – ID7726 [2020/07/23]

[WordPress] 親テーマを変更せずテーマをカスタマイズ – 子テーマを作り変更したを加える – 手始めは、content.phpの編集 – ID7726 [2020/07/23]
スポンサーリンク
  • by Google Ads ID23293
  • by Google Ads ID:11145
  • by Google Ads ID24747
スポンサーリンク
by Google Ads ID8603

親テーマと子テーマ

いつまで続くか分からない当サイトの構築ですが、プラグインやphpファイルの変更など、他のblogerさんの記事を参考にさせてもらっていいます。

今回は、WordPressテーマ: Twenty Twentyを親テーマとして子テーマを作りました。

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

作った子テーマが有効になっていれば、「テーマの編集」画面の右上にある「編集するテーマを選択」にその子テーマのリストが出てきます。図1のように、twentytwenty_child (この名前は、実質的にフォルダ名)があるので、このテーマが有効化していれば、表示されます。以下、図1の説明です。

style.cssの編集

表示の体裁を変更する場合は、style.cssのコードの変更、コードの追加が必要です。以下のコードは、当サイトの目次の体裁を定義したものです。

スポンサーリンク
by Google Ads ID19417
/** 見出し
*/
/* h2
#contentを付けると左端に表示されるのが、幅に従った左端に改善できる
*/

h1,
.heading-size-1 {
	font-size: 3.2rem;
/*	font-weight: 800;
	line-height: 1.138888889;
*/
}

h2 {
	font-weight:600;
	font-size:3.0rem;
	color: #fff;
  background: #2a49a8;
  padding: 15px 30px;
}
h3 {
	font-weight:500;
	font-size:2.8rem;
	/* 見出しの飾り */
  padding: 0.25em 0.5em;
  color: #2a49a8;
  background: transparent;
  border-left: solid 50px #2a49a8;
}
h4 {
	font-weight:500;
	font-size:2.6rem;
/* 見出しの飾り */
	border-bottom: solid 3px black;
	
}
h5 {
	font-weight:500;
	font-size:2.4rem;
/* 見出しの飾り */
	/* border-bottom: solid 3px black; */
	
}

h6 {
	font-weight:500;
	font-size:2.2rem;
/* 見出しの飾り */
	/* border-bottom: solid 3px black; */
	
}

content.phpの編集

表示の構造自体を変更する場合は、content.phpのコードの変更、コードの追加が必要です。

content.phpが、WordPressにおける投稿や固定ページの表示を行っているメインのphpプログラムです。図1の例では、content(org).phpやcontent([番号])が、確認できると思います。

これは、プログラミングに際し、僕が格闘した結果の残骸です。捨てられずに残しています。content(org).phpは、オリジナルファイルです。元に戻す場合は、このファイルをcontent.phpに名前を変更したして置き替えます。

基本的に、子テーマでのこれらの修正は、親テーマの上書きになっているようです。

ファイルの複製や名前の変更は、WordPressからはできません。端末ソフトを使ってサーバーに入り、コマンドにより名前を変更したり、複製したりする必要があります。

当サイトでは、自宅のSynology NASにWordPressを導入しているので、Synology NASにログインして、DiskStation Managerのもとで、名前の変更、複製をします。その後、WordPressにログインして、「テーマの編集」画面に入れり、該当するするphpファイルのプログラムの内容を修正・追加していきます。

修正した後は、左下にある更新ボタンで修正内容を保存します。その結果は、直ぐにblogに反映されるので、サイトをSafariやChromeで表示して確認します。

このcontent.phpでのコードのミスは、即座に表示を崩していまうことを意味しますが、以下に記述したように元のコードに戻したり、追加したコードを削除して元に戻せば表示も元に戻ります。

画面が崩しれたりした場合、「テーマの編集」画面から、Ctrl + zにより元に戻して、更新ボタンを押せば、元に戻ります。

WP テーマ編集
図1. content.phpの編集
content.phpの編集と言っても、使用しているThemeごとに異なります。当サイトでは、WorpPress version 5以降で公式テーマになっているTwenty Twentyを使っています。標準のcontent.phpでは、表示のが味気ないので、coverタイプ (content-cover.php)をcontent.phpに置き換えています。同じTwenty Twentyのcontentではが、コードを確認してみるとだいぶ作りが異なっていました。

functions.phpの編集

オートセーブとリビジョン機能

親テーマでは、標準で有効となっている編集時のオートセーブ機能とリビジョン機能ですが、子テーマの「functions.php」にコードを追加することで、無効化することが可能です。以下のリンクをご参照ください。

macoblogさんより

https://macoblog.com/wp-writing-autosave/

まとめ

親テーマと子テーマの関係性が、まだよくわかっていません。

  • 親テーマと子テーマは、themeフォルダに別フォルダで保管される。
    • 今回の場合、元からあった親テーマである「twentytwenty」と今回作ったフォルダとしての子テーマ「twentytwenty_child」を作りました
  • 編集するfunctions.phpやhead.phpなどのファイルを、親テーマからコピペしておく。
    • 同じ定義のものは、親テーマで定義されるので、小テーマでは削除します。ほとんどが削除されたになります。
  • 親テーマと子テーマの関わりをfunctions.phpに記載とておく。
    • 小テーマが使われるように定義 : 参照
  • 子テーマにない定義、値など
    • 親テーマの定義、値などを小テーマが引き継ぐ
編集情報
ID 7726
2020/01/21 Mr.はりきり
2020/07/23 追記(concent.phpの編集)

以上

スポンサーリンク
  • by Amazon ID19245
  • by Amazon ID13211
スポンサーリンク
  • 【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
スポンサーリンク

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

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]

NAS

[WordPress] 2020年初心者ガイダンス・WordPressを構築し快適に運用するための必須プラグイン一覧 (2020/03/10現在) – ID10673
[Data Link] NASとは何ですか? by Synology – ID9090
[WordPress] Google AdSense登録の手順 ID8940 [2020/08/24]
[WordPress] アバターを作る方法 – Gravatar – ID8936 [2020/02/09]
Synology NASのセキュリティを強化する方法のリンク – ID8870
[WordPress] 初期設定でblogサイトに作ってしまったサブディレクトリを外す方法 – Google AdSenseには、サブディレクトリは不要 – ID8814

twenty twenty

WordPress

[WordPress] 2020年初心者ガイダンス・WordPressを構築し快適に運用するための必須プラグイン一覧 (2020/03/10現在) – ID10673
[WordPress] Google Adsense導入 – 必要な手順とセッティング – 広告プラグインを選ぶ – 運用の実際 – ID9539 [2021/01/04]
[WordPress] Google AdSense登録の手順 ID8940 [2020/08/24]
[WordPress] アバターを作る方法 – Gravatar – ID8936 [2020/02/09]
[WordPress] 初期設定でblogサイトに作ってしまったサブディレクトリを外す方法 – Google AdSenseには、サブディレクトリは不要 – ID8814
[WordPress] Flex Posts – Widget and Gutenberg Block プラグイン – Gutenberg エディター対応 – ID8804

子テーマ

[WordPress] 親テーマを変更せずテーマをカスタマイズ – 子テーマを作り変更したを加える – 手始めは、content.phpの編集 – ID7726 [2020/07/23]
スポンサーリンク
  • by Google Ads ID23293
  • by Google Ads ID:11145
  • by Google Ads ID24747

Update ID21920

TRIP
[Trip] 新日本海フェリー – 「舞鶴」から「小樽」- さらば大阪 – アラ還は旅立つ – ID29888 [2021/06/13]

Post Views: 7 目次1 新日本海フェリー1.1 部屋1.2 デラックスA和室2 乗船場と「あかしあ」3 船内4 レストラン5 お風呂6 お土産7 まとめ8 編集履歴 新日本海フェリー 近畿から北海道に車を運ぶ […]

BIOLOGICS
[Bio-Process] 配列からベクターDNAを作るまでの概要 – ID16682

Post Views: 0 遺伝子配列からベクターDNAを作る 遺伝子配列 コドン最適化 遺伝子合成 合成遺伝子をベクターにカセットする 大腸菌にトランスフェクションして増やす ampicillin agar plate […]

スポンサーリンク
by Google Ads ID19417
BIOLOGICS, culture, education
[Bio Edu] Quality by Design – ID29705 [2021/05/11]

Post Views: 0 目次1 Quality by Design2 QbDの全体像3 編集履歴 Quality by Design Quality by Design (QbD)とは、医薬品の開発から始まり、コマー […]

更新された投稿の最新順

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

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

最新記事(WordPress, ID:14681)

plugin, site setting, WordPress
はりきり(Mr)のプログ・書き方のスタイル – 適当にやっているが、スタイルはある- ID30216 [2021/05/30]

Post Views: 6 目次1 はりきり(Mr)のブログ・メンテナンス・スタイル2 編集履歴 はりきり(Mr)のブログ・メンテナンス・スタイル 適当です。毎日、決まった時間に発信することはありません。ボリュームもまち […]

plugin, WordPress
[WordPress] [link] 記事表示のカスタマイズ – パンクズリストを表示させる – ID30029 – [2021/05/19]

Post Views: 9 パンクズリスト パンクズリストは、サイトで移動した履歴です。フォルダーのパスのようなものです。 パングスリストをサイトに表示させる方法が、「kinsta」に解説されています。方法は多数あります […]

スポンサーリンク
by Google Ads ID19417
WordPress
[WP] Ultimate MemberをSimple WP Membershipに変更 – ID29745 [2021/05/13]

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

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

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

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

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

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

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

最新記事(Synology, ID:14676)

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

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

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

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

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

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

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

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

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

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

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

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

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

Gear, hard
[Gear] iPad Pro 11で使用できるSDカードリーダー – 標準のフォルダー・アプリにSDメモリを表示して、写真データを移動 – ID26190 [2020/12/21]

iPad Pro 11に使用できるSDカードリーダーとClass 10 min SDカードの組み合わせでその挙動を確認した

english
今日の英語 – 誕生からの記念日を祝うプロモーション – We’re turning 5 years old! Celebrate our birthday with 60% off WPForms Pro + win free prizes. – ID29070 [2021/03/25]

誕生から今までの期間を表す 「turning」- よく”turning point”とか言いますよね。そのイメージを記憶できます

BIOLOGICS, mAb, Novartis
[抗体医薬] イラリス; Canakinumab – 高IgD血症として知られている難病治療薬 by Novartis/中外 – ID23132 [2020/06/23]

Post Views: 33 目次1 最初に2 適応症3 臨床試験以外の薬理活性など 最初に 高IgD症候群(Hyper IgD Syndrome:HIDS)は、別名メバロン酸キナーゼ欠損症(Mevalonate Kin […]

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

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