WordPress

WordPress|twenty seventeen カスタマイズ準備|子テーマをつくる

投稿日:2018年9月3日 更新日:

デフォルトのテーマ「twenty seventeen」をカスタマイズする前の準備

テーマをカスタマイズするには、元になるテーマの子テーマを作り、その子テーマを改造していきます。元のテーマは変更しないようにします。
元テーマを直接編集すると、アップデートの際にデータが上書きされて、せっかくカスタマイズした内容が消えてしまうことがあるからです。

子テーマの作り方はとっても簡単。

  1. 「WordPressインストールディレクトリ / wp-content / themes」の中にフォルダを作成します。どのような名前でも良いのですが、わかりやすい名前にした方が管理しやすいです。今回は「twentyseventeenーchild」という名称のフォルダを作成しました。
  2. 「functions.php」と「style.css」というファイルを、いま作成したフォルダ「twentyseventeenーchild」の中に作成します。この2つのファイル中身は下の説明どうりに記載しておきます。
  3. WordPressの左サイドのメニューから「外観」を選ぶと「twentyseventeenーchild」が出来ているはずですので、これを有効化します。そうすると、子テーマが動作するようになり、子テーマにあるファイルを優先して動作するようになります。

その後、元テーマより子テーマにファイルをコピーしてカスタマイズしていきます。

<ディレクトリ構成>

└ wp-content
  └ themes
    ├ 元テーマフォルダ
    │
    └ 子テーマフォルダ
      │(↓ファイルを2つ作ります。)
      ├ functions.php
      └ style.css

 

子テーマ用の基本ファイルセットを作りました。
テーマと同じディレクトリにアップロードして「有効化」します。
ダウンロードはこちら↓
twenty seventeen 子テーマ 最小ファイルセット

 

ファイルに記載する内容

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' );
}
?>

スタイルシートを読み込んでいないようなら、下のコードを試してみてください。

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

 

style.css

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

ちょっと長いので、最少にすると。。。

/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
*/

これだけでOK。文字コードはUTF-8で保存します。

 

子テーマのスタイルシートが反映されないとき

デザイン変更して通常の再読み込みでデザイン変更されていない場合は、ブラウザに残っているキャッシュを強制的に無視して、サイトの情報法を全て読み込みし直すとよい。

それでもダメな時は

ブラウザによって操作は違いますが、過去の閲覧履歴等を消去してみましょう。

 

出典:http://wpdocs.osdn.jp/子テーマ

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:


comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPressサイト構築★プラグインを加える その1

新しくwordpressサイトを構築するためにやったことの備忘録。 ******************************* 追加したプラグイン ************************ …

Wordress★「Duplicate Post」の代替プラグイン

WordPressには「Duplicate Post」という投稿記事や固定ページを簡単に複製できるプラグインがあり、今回取り組んでいる案件でも使おうと検索してみるのですがゼンゼン見つからない!よく似た …

WordPress★Contact Form 7 で隠しフィールドを設定する

Contact Form 7 と Flamingo のセットで使用中。 Flamingo側の受信メッセージの一覧表示で使うために、送信元となるContact Form 7 に隠しフィールドを設定するこ …

no image

WordPress★カスタムフィールドを使って関連リンクを手動で埋め込む方法

SEOの「内部対策」のひとつ、 内部リンクの調整で大切なこと SEOには「内部対策」と「外部対策」の二つがあります。 内部対策は、Googleからクロール&インデックスされやすいようにHTMLソースを …

WP★Twenty Seventeenをカスタマイズ03 カテゴリーのページタイトルから「カテゴリー:」取るには?

カテゴリーのページタイトルに自動で出力される「カテゴリー:」を取る方法です。 カテゴリーの一覧(アーカイブ)ページは、Twenty Seventeenではarchive.phpで出力されています。 < …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。