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

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

 

style.css

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

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

 

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

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

それでもダメな時は

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

 

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





-WordPress

執筆者:


comment

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

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

関連記事

WordPress★オリジナルテーマにサムネイル画像を設定する

  オリジナルテーマを作ったときに、 「外観」>「テーマ」の一覧表示でサムネイル画像が出るようにする方法。 今回のWordPressのバージョンは4.7.3です。 何も設定してなければ、 サ …

WordPress★ログイン画面をカスタマイズする

ログイン画面のカスタマイズでつまずいたので、その時のメモ。 英語のサイトですが本家WordPress.orgのCodexにその解説があります。 https://codex.wordpress.org/ …

WP★吹き出し風デザインをCSSだけでやる方法

このページのもくじ ワードプレスでプラグインを使わずに、 HTMLとCSSだけで下のような感じの会話風レイアウトの作り方。手順はこちらもっと便利に! ワードプレスでプラグインを使わずに、 HTMLとC …

WordPress|Twenty Nineteen 固定ページをカスタマイズするときに編集するファイル

themes > Twenty Nineteen > page.phpファイルを複製 複製してできたpage copy.phpファイルを子テーマのフォルダに移動 page copy.php …

WordPress★コメント入力フォームをカスタマイズする

  WordPressのバージョンは4.7.3 コメント入力フォームをカスタマイズする方法です。変更内容は 1)コメントの入力フォームで不要な部分を非表示にする 2)入力フォームの文言を自由に変更する …