twentyseventeenの子テーマのカスタマイズ

子テーマを作ると、親テーマをベースに必要な個所を子テーマで上書きしていく形でテーマをカスタマイズしていけます。

まずは子テーマ作成から始めてください。子テーマを作って、子テーマに対してカスタマイズをしていきます。

スタイルシート

子テーマを有効化してソースを見るとわかりますが、親テーマの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 かプラグインで対応する。

“twentyseventeenの子テーマのカスタマイズ” への3件の返信

  1. こんにちは!
    丁重な解説がとてもありがたく、助かっております。
    もれなく作業したはずなのですが、、、何かが抜けているようで子テーマを有効にした時点でエラー出てしまいます。
    何か見落としてる部分ありましたら、教えて下さいませ。
    どうか、よろしくお願い致します。

    目的は、「スマホ画面のメニューバーをスクロール時も常に表示したい。」です。
    (できれば下部に)

    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」を子テーマにコピペし文言を追加
     インストールはしていません。

    1. 以下のように書いているのが間違いないのであれば、phpの文法エラーだと思います。

      <?php
      ~~
      <?php
      ~~

      2個目の <?php は不要なはずなので、その6行目は削除してはどうでしょうか。

      1. ご確認頂きまして、ありがとうございます!
        エラーが消え、子テーマがインストール出来ました。

        デモ画面では、スマホでもメニューが固定出来ました。
        私のスマホだとうまく表示されないのですが。。。サイズの問題かと思います。

        ただ、子テーマがインストール出来反映出来たのが、大きな前進です。
        今まで、何度トライしても出来なかったので。

        まずは、うまく出来たので報告させて頂きます^^
        ありがとうございました!!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です