子テーマを作ると、親テーマをベースに必要な個所を子テーマで上書きしていく形でテーマをカスタマイズしていけます。
まずは子テーマ作成から始めてください。子テーマを作って、子テーマに対してカスタマイズをしていきます。
スタイルシート
子テーマを有効化してソースを見るとわかりますが、親テーマのCSS、子テーマのCSSの順で読み込んでいます。
<link rel='stylesheet' id='twentyseventeen-style-css' href='https://058.jp/twentyseventeen/wp/wp-content/themes/twentyseventeen/style.css?ver=4.9.8' type='text/css' media='all' /> <link rel='stylesheet' id='child-style-css' href='https://058.jp/twentyseventeen/wp/wp-content/themes/mytwentyseventeen/style.css?ver=4.9.8' type='text/css' media='all' />
つまり、mytwentyseventeen/style.css で上書きしたいところを宇川記していけばよいということです。
テンプレートファイル
twentyseventeen/ の内部と同じ配置で、mytwentyseventeen/ の内部にファイルを追加すれば、テンプレートファイルも上書きしていけます。
例えば以下のように、mytwentyseventeen/template-parts/footer/site-info.php というファイルを作り、中身を自由に書けば、フッターの「Proudly powered by WordPress」を上書きできます。
themes |-- mytwentyseventeen ← 子テーマ | |-- functions.php | |-- style.css | `-- template-parts | `-- footer | `-- site-info.php ← 子テーマにファイルがあればこちらが使われる `-- twentyseventeen ← 親テーマ |-- 404.php |-- archive.php (略) |-- style.css `-- template-parts |-- footer | |-- footer-widgets.php | `-- site-info.php ← これを上書きしたい |-- header | |-- header-image.php
子テーマを作ったあとすることは、以下のような感じです。
- 上書きしたいテンプレートファイルを子テーマに持たせる。
- 親テーマそのままでよかったら子テーマに持たせない。
- 機能のカスタマイズは、子テーマの functions.php かプラグインで対応する。
こんにちは!
丁重な解説がとてもありがたく、助かっております。
もれなく作業したはずなのですが、、、何かが抜けているようで子テーマを有効にした時点でエラー出てしまいます。
何か見落としてる部分ありましたら、教えて下さいませ。
どうか、よろしくお願い致します。
目的は、「スマホ画面のメニューバーをスクロール時も常に表示したい。」です。
(できれば下部に)
PS 本来だったら、業者さんにお願いする内容だそうです。
理解の範疇を超えたら、将来、業者にお願いしようと思います・・・。
全くの素人です。
行った事(ワードプレス は、サーバに保存しています。)
●サーバー内の「themes」フォルダに子テーマ「mytwentyseventeen」を追加
●「themes」フォルダ下の階層に「functions.php」・「style.css」を追加
文言
***functions.php の文言***
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
<?php
add_action( 'wp_enqueue_scripts', 'my_wp_enqueue_scripts' );
function my_wp_enqueue_scripts() {
$parent_style = 'twentyseventeen-style';
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));
}
***style.css***
/*
Theme Name: My Twenty Seventeen
Template: twentyseventeen
*/
●親テーマより「global.js」を子テーマにコピペし文言を追加
インストールはしていません。
以下のように書いているのが間違いないのであれば、phpの文法エラーだと思います。
<?php
~~
<?php
~~
2個目の <?php は不要なはずなので、その6行目は削除してはどうでしょうか。
ご確認頂きまして、ありがとうございます!
エラーが消え、子テーマがインストール出来ました。
デモ画面では、スマホでもメニューが固定出来ました。
私のスマホだとうまく表示されないのですが。。。サイズの問題かと思います。
ただ、子テーマがインストール出来反映出来たのが、大きな前進です。
今まで、何度トライしても出来なかったので。
まずは、うまく出来たので報告させて頂きます^^
ありがとうございました!!!