カテゴリー
development Synology Theme WordPress

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

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

スポンサーリンク: ID6183593457

親テーマと子テーマ

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

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

スポンサーリンク
  • オムロン 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のコードの変更、コードの追加が必要です。以下のコードは、当サイトの目次の体裁を定義したものです。

/** 見出し
*/
/* 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/

スポンサーリンク: ID4219953367

まとめ

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

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

以上

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

NAS

[用語] NAS

Post Views: 7 NAS : Network Attached Storage 関連記事: [Synology] 自宅にNASを設置しWordPressを構築 – blogサイトを立ち上げる &#8 […]

twenty twenty

WordPress

子テーマ

スポンサーリンク ID 7130582967

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