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アドレスを間違って入力した場合の対処法

ダッシュボードからWordPressのアドレスを設定できるが、「WordPressアドレス」を間違って変更してしまった場合、サイトが正しく表示されないのはもちろん、管理画面にもアクセスできなくなる。 …

no image

MailPoet|購読者ページのカスタマイズ

ニュースレーターを配信できるプラグインを探していたらこの「MailPote」と「MailChimp」という2つのプラグインがダントツで使われていたので試してみた。 まずは一番人気のMailChimpだ …

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

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

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

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

WordPress★記事の複製ができるプラグイン「Duplicate Post」

  記事の更新で、過去の記事をひな形としてを使いたいときに便利なプラグイン。 投稿一覧から簡単に複製できるようになります。 Duplicate Post プラグインのダウンロード⇒ インスト …