賢威7でcssが反映されない・子テーマをインストールしていますか?

スポンサーリンク



賢威7で画像に枠を付けたいけどスタイルcssが反映されない・・・カスタムcssも試したけどだめだった・・・キャッシュも削除したのにそれでもダメ、お手上げ状態でお困りの方はいませんか?

私は今まで「親テーマ」を直接編集してカスタマイズしていたのですが、アップデートの度にカスタマイズし直すのも面倒だと思い、「子テーマ」使った編集に切り替えたところ何故かcssが反映されるようになりました(笑)

PCの不調だったのか環境のせいだったのか定かではありませんが取り合えず編集が反映されるようになり一安心です。(本当に何が原因だったんでしょう。)

そもそも賢威7や他のテンプレートをカスタマイズするときは、「親テーマ」の他に「子テーマ」を作ってその「子テーマ」使って編集していくのが一般的なやり方なんですよね・・・。

初めのころはさっぱり分からなくて扱いに苦労しましたが、慣れてしまえばどうということはありません。

素人の私でもネットの寄せ集め情報だけでガッタガタだけど何とかなりましたからね。

私の場合は、「子テーマ」を使った編集でcssが反映されるようになったので、今回は「賢威7で子テーマを作る方法」と、編集に必要な「phpファイルの複製法」を解説していきたいと思います。

cssが反映されない主な原因は”キャッシュ”にあると言われています。ブラウザやワードプレスのキャッシュ系プラグイン等を削除するのがsccを反映させるのに非常に有効な手段です。しかし、それでもcssが反映されない場合は使っているPCや環境に問題があるかもしれません。今回の記事では、cssが繁栄されるようになった一例として「子テーマの使用」を紹介しています。この操作を行えば”必ずsccが反映されるようになる”という訳ではないのでご了承ください。

 

 

賢威は最も有名なテンプレートのひとつです



子テーマって?

まず「親テーマ」についてですが、簡単に言うと「親テーマ」とは、あなたが最初にインストールしたテンプレートのテーマのことです。

WordPressにデフォルトで入っている無料テーマや、賢威やオープンゲージなどの有料テーマ。

これらのテーマのcssやphpを編集することで簡単にページのデザインを変えることが出来ますが、テーマ(親テーマ)を直接カスタマイズしてしまうと、そのテーマがバージョンアップされた時に、変更した部分が上書きされてすべて消えてしまいます。面倒くさい!

そこで、テーマがバージョンアップされても変更内容を保持したいときに「子テーマ」という「親テーマ」に紐付けられたテーマを編集することで、変更部分を保持できるようになるのです。

元にするテーマを「親テーマ」、それを元にカスタマイズしていくテーマを「子テーマ」と言います。

 

子テーマを作るには?

子テーマの作成は、有料のテーマであれば、だいたい「親テーマ」をダウンロードした管理サイトやサポート画面で「子テーマ」もダウンロードできます。

「子テーマ」のダウンロードとワードプレスでの「親テーマ」の紐付けは割りと簡単にできます。

テーマのアップロードに備えて効率的にサイト運営したいのであれば、絶対に「子テーマ」を作ることをおすすめします。

 

賢威7の子テーマ作成法

【1】賢威7の「親テーマ」をインストール

すでにインストール済みとは思いますが、事前準備として賢威 7をインストールします。

ダウンロードはこちらのページから行えます↓
賢威7テンプレートをダウンロード

使いたいテーマのWordPress版を選び「ダウンロード」を押して親テーマをダウンロードします。

今回は賢威7のクール版テンプレートをダウンロードしました。

賢威7クール版の親テーマのファイル↑

 

【2】次に、「親テーマ」をワードプレスにインストールします。

※ワードプレスで既に賢威7の「親テーマ」を使用している場合は不要です。

「外観」→「テーマ」の「新規追加」から「テーマのアップロード」を選択し、ファイルを選択して「今すぐインストール」をクリックします。

 

↑ここから新規追加まで進む

 

↑子テーマを選択してインストール

 

↑賢威7クール版の親テーマ

 

子テーマをインストールするので「親テーマ」は有効化してもしなくても構いません。

 

【3】賢威7の「子テーマ」をダウンロード

 

続いて下の賢威サポートページから「子テーマ」をインストールしましょう。

賢威7WordPress版子テーマのダウンロード

 

【4】「子テーマ」をワードプレスにインストールします。

「親テーマ」と同じように「外観」-「テーマ」の「新規追加」から「テーマのアップロード」を選択し、ファイルを選択して「今すぐインストール」をクリックします。

↑ここから新規追加まで進む

 

子テーマをアップロード

 

↑子テーマのファイル

 

すると、「親テーマが見つかりませんでした。この子テーマを利用する前に、親テーマkeni70_wp をインストールしてください。」とメッセージが表示されます。

 

これは、次のステップで「子テーマ」と「親テーマ」を紐付けすることで修正するので、今は気にしなくて大丈夫です。

 

【5】子テーマの修正

「外観」→「テーマの編集」メニューを開いてください。

 

画面右上の「編集するテーマを選択」から「賢威7.0 スタンダード版 カスタマイズ版(子テーマ)」を選んで「選択」をクリックしましょう。

 

「賢威7.0 スタンダード版 カスタマイズ版」を開くと、style.cssに「このテーマは壊れています。」と表示されますが問題ありません。

 

設定されているテンプレート名「keni70_wp」の部分を見つけたら、最初にダウンロードした「親テーマ」のファイル名を「keni70_wp」と置き換えます。

※「親テーマ」のファイル名はダウンロードするごとに変わるので、同じテーマを何度かダウンロードしている方は注意しましょう。

「ファイルを更新」ボタンをクリックすると設定完了です。

正しく設定できていれば、「このテーマは壊れています。」の表示が消えているはずです。

 

【6】子テーマを有効化する

「外観」→「テーマ」と進んで、賢威7の子テーマ(賢威7.0 スタンダード版 カスタマイズ版)を有効化しましょう。

これで賢威の「子テーマ」の設定は完了です。

自分のサイトを表示してデザインが崩れたりしていないかチェックしてみましょう。

「親テーマ」でcssを編集してカスタマイズしていた方は、その編集は消えているので、面倒ですが「子テーマ」で再編集しましょう。

「子テーマ」で編集していけば、バージョンアップの度にせっかくカスタマイズしたサイトを一から編集し直す必要もありません。

 

子テーマに編集したいphpファイルが無い

「子テーマ」の「テーマ編集」に進むとわかるかと思いますが、「親テーマ」にあったheader.php(ヘッダーをカスタマイズするためのテンプレート)やsocial-button.php(ソーシャルボタンを作成するためのテンプレート)が無いことが分かります。

 

 

これらは、「親テーマ」から「子テーマ」にダウンロードして作成する必要があります。

ファイルのダウンロードは、「FFFTP」などのFTPソフトを使用して、「親テーマ」から目的のphpファイルをダウンロードし、そのまま子テーマにアップロードするのが、最も一般的な方法です。

また、これらのソフトを使用してファイルをコピーしておけばそのままバックアップが取れるので、安全に「子テーマ」にファイルをダウンロードできる上にバックアップもついでにできるという一石二鳥の効率的な方法と言えるでしょう。

次はこの「FTP」経由でphpファイルをダウンロードする方法を解説していきます。

FFFTPのダウンロード

 

 

FFFTPは、無料で使えるFTP専用のファイル転送ソフトです。

手元のPCで作成したWebサイトのファイルをサーバーにアップロードする際には、欠かせないFTPソフトの中でも人気の高いソフトです。

今回はこの「FFFTP」というソフトを使っていきます。

 

【1】ソフトをダウンロード
まずはダウンロードページにアクセスしてソフトをダウンロードしましょう。

FFFTPダウンロードページ

 

【2】確認ウィンドウが出てきますので、「ファイルを保存」をクリックします。

 

【3】ファイルの保存が完了したら、保存されたファイルを開きましょう。

すると、ユーザーアカウント制御のポップアップが表示されるので「はい」をクリックします。

 

【4】「次へ」と「はい」で進んでいきましょう。

 

 

 

 

※この画面の時に”デスクトップ上にショートカットを作成する”にチェックを入れておくとデスクトップにFFFTPのアイコンが表示されるようになるので便利です。

 

「完了」をクリックすればインストール終了です。

 

FFFTPの初期設定

【1】FFFTPでサーバーに接続するためには、新規ホストを作成しなければなりません。

FFFTPを起動して次の画面で「新規ホスト(N)」をクリックしてください。
※既に作成済みの方は不要です。

 

【2】必要項目を入力して下さい。

1・ホスト名
サーバーと同一のものを入れます。サーバーの管理画面で確認できます。
(ホスト名とはIPアドレスや、 www.*******.comのようなドメインのこと)

2・ユーザー名
サーバーと同一のものを入れます。サーバーの管理画面で確認できます。

3・パスワード/パスフレーズ
サーバーのパスワードと同一のものを入れます。

以下のの項目は入力しなくても大丈夫です。

4・ホストの設定名
ホスト一覧に表示される名前です。さっき入力したホスト名がホスト設定名となります。

5・ローカルの初期フォルダ
FFFTPに接続したときに自動的に最初に出てくるPC側のフォルダを指定できます。自分のサイトのデータが入っている場所を指定しておくと便利です。

6・ホストの初期フォルダ
FFFTPに接続したときに自動的に最初に出てくるサーバー側のフォルダを指定できます。

7・最後にアクセスしたフォルダを次回の初期フォルダとする
チェックを入れておくと、最後にアクセスした場所を次回も表示してくれます。

必要情報を入力したら「OK」をクリックしてください。

 

【3】FFFTPでサーバーへ接続
さっき入力したホストの設定名を選択して、「接続」をクリックしましょう。

 

【4】「暗号化の状態の保存」と出ますが、「はい」か「いいえ」のどちらでもかまいません。


これでサーバーへの接続が完了します。

 

phpファイルを子テーマにアップロード

試しに賢威テーマのindex.phpを「子テーマ」にアップロードしてみましょう。

FFFTPの画面の見方は、左が手元のPC、右がサーバーになります。

 

このフォルダアイコンボタンで一つ上のフォルダに移動できます。

 

【1】サーバー上のファイルを、手元のPC上にコピーします。
画面右側のサーバーから「親テーマ」のフォルダを捜し、そのフォルダから「子テーマ」にアップロードしたいphpファイルを探します。

今回はindex.phpを「子テーマ」に追加してみたいと思います。

「親テーマ」の中のindex.phpファイルを見つけましょう。

 

【2】コピーしたいファイル(index.php)を右クリックし、「ダウンロード」をクリックします。


すると左画面の手元pcにindex.phpフォルダのコピーが生成されます。
※PCへファイルをコピーすることでサーバーのバックアップを行うことも可能です。

 

【3】「子テーマ」にindex.phpファイルをアップロードします。
左画面の手元PCに、index.phpファイルをコピーしたら、右下面で「子テーマ」フォルダを探しましょう。

 

「子テーマ」フォルダが見つかったら先ほどコピーしたindex.phpをドラッグ&ドロップでアップロードできます。

 

【4】「子テーマ」にphpファイルが表示されているか確認します。

ワードプレス管理画面の「外観」→「テーマの編集」で画面右に「index.php」が表示されていれば成功です。

他の編集したいphpファイルも同じ方法でアップロードすることで、「子テーマ」で編集できるようになります。

 

 

 

まとめ

以上が「子テーマ」のインストールとphpファイルのコピー法でした。

今回はcssを反映させるために「子テーマ」のインストール法をまとめてきましたが、本来「子テーマ」は「親テーマ」がアップロードされても編集が初期状態に戻ってしまうのを防ぎ、効率的にサイトを運営するのが目的のものです。

子テーマを利用してcss等を編集をすれば、もし間違ってしまったとしても、ダメになったファイルをサーバーから削除するだけで元通りになるので、安心してチャレンジが出来ます。

「子テーマ」でもcssが反映されない現象ですが、キャッシュ削除を試して駄目だった場合はもしかしたら編集しているPCに問題があるかもしれません。

私の場合、「子テーマ」でcssを編集することで改善されましたが、別のノートPCでワードプレスにログインして編集したところ、こちらでまたcssが反映されない事態になりました。

サーバーに問題があるのか、ブラウザのキャッシュ削除の仕方が間違っているのか、プラグインが原因なのか、こればかりはひとつひとつ可能性を潰していってトラブルシューティングするしかないようです。

ともあれこの記事が何かの役に立てば嬉しく思います。

スポンサーリンク



スポンサーリンク



コメントを残す

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