さきはやすみます

やすみたいが口癖

Stinger3カスタマイズ記録―子テーマを作成するには?―

      2017/07/06

pcimage前回は、ざっとデザイン変更でやったことを一覧で書きました。

羅列するといろいろあって気が遠くなりそうですが、やっている時は「ここがこうだったらもっとかわいいのにー!」と思う部分に手当たり次第に変更を加えていっただけなので、全体で3日くらいでできました。

やり方が最初からわかっていればもっと早くできるんだと思いますが、勉強しながらなので仕方ないですね。

今回は一番デザインのカスタマイズに取り掛かる前に、やっておきたい準備のご紹介をします。

WordPressテーマの編集は子テーマでする!

子テーマとは??

さぁいよいよデザインをいじるぞ!ということで、ウェブサイトの見た目部分のファイルである、CSSを編集しようといろいろとやり方を調べていたところ、Wordpressのテーマのファイルは、直接編集してはダメです!という情報がちらほら。

何!?直接編集しないってどういうこと!?

と調べていくと、こちらのサイトに詳しいことが載っていたので参考にしました。

元のファイルに上書きして編集してしまうと、テーマのバージョンアップがあった時にカスタマイズした部分まで上書きされて変更したものが全部消えてしまいます。それを防ぐためにも、元の親テーマのコピーと言える子テーマを作って、そちらに編集していきましょうね、ということらしいです。

詳しいことはわからないけど、とにかく子テーマとやらを作るのがいいのね、ということで、上記サイトを参考にやってみました。

子テーマを作成する時に超初心者がつまづいた点

子テーマの作り方は、上記サイトや他の解説サイトのほうにわかりやすく載っているので詳しくはそちらを参照してもらう方がいいのですが、WEBの知識のない私がこの通りにやろうとするとちょっと困ったことがいくつかありました。少しでもサイト構築の知識がある人からすれば、そんなの基本中の基本でしょ!と言われてしまいそうですが、サイトを作る前に事前に勉強する…なんてマジメなことができない私みたいな人がいきなりいじりはじめると、初歩的すぎてどこにも載ってなくて苦労したりするんですよね。

最初にやること!子テーマのディレクトリを作る

WordPressインストールディレクトリ配下の「themes」ディレクトリ配下に、親テーマ(Stinger)と子テーマを同階層に並べて配置します。

まず最初にやることとして解説されていますが…はい、もういろいろとわかりません。まずディレクトリという言葉を知らなかった無知な私です。ディレクトリって要はフォルダのことなんですね。なるほど。

自分でわかるレベルまで最初の文章を翻訳するとつまり、データベース上にあるWordpressをインストールしたフォルダの中の、「themes」フォルダ内に子テーマのフォルダを新しく作りましょうということ。

ディレクトリを新しく作るには、前回紹介したフリーソフト「FFFTP」を使いました。

  1. FFFTPを開いてさくらのデータベースに接続。
  2. 「www」→「wordpress」(WPをインストールする時につけた任意のフォルダ名)→「wp-content」と辿っていくと「themes」フォルダを発見。
  3. これを開くとダウンロードしたstingerテーマのフォルダ「stinger3ver20131023」があるので、この階層にフォルダ作成で新しく子テーマのフォルダを作ります
  4. 子テーマフォルダ名は自分でわかりやすい名前をつければOKです。私は「stinger-child」でつくりました。この名前は後から使うときに大文字小文字を区別するので、小文字で統一したほうがよさげです。

これで、子テーマのディレクトリ(フォルダ)ができました。

CSSファイルを新しく作る

次に、この中にstyle.cssというファイルを作ります。これがまた、初心者にはcssファイルを作るって簡単に言われても、なかなかすぐにできないところです。

ここでいったんFFFTPから離れて、テキスト編集ソフトのTerapadを起動します。そこに親テーマの内容を引き継ぐためのコードを貼り付けます。

/*
Theme Name: stinger-child
Template: stinger3ver20131023
*/
@import url('../stinger3ver20131023/style.css');

Theme Nameは子テーマの名前、Templateはもとの親テーマstingerの親テーマディレクトリの名前をそのまま入れます。その下の()の中は、/親テーマディレクトリ名/style.cssにします。大文字小文字を区別するので、必ずディレクトリ名と一致するようにしてくださいね。

記入したら、名前を「style.css」で適当な場所に保存します。テーマカスタマイズに使うファイルは今後全てそうするのですが、必ず「文字/改行コード指定保存」で文字コード「UTF-8N」改行コード「LF」にしておかないとおかしくなるようです。

もう一度FFFTPを開き、先ほど作った子テーマディレクトリ「stinger-child」を開きます。ここに、新しく作った「style.css」をドラッグ&ドロップするとディレクトリの中にファイルがアップロードされます。

ここまでで、一応完了です。長かった。

ダッシュボードから子テーマを有効化しよう!

さてここまできたら、wordpressのダッシュボードでの作業。きちんと子テーマが作成されていると、ダッシュボードの外観→テーマの中の利用可能なテーマに、先ほど作ったstinger-childが表示されているはずなので、それを有効化します。

そうすると、有効化しているのは先ほど作った子テーマですが、そこに親の情報が引き継がれて、最初に元々のstingerを有効化した時のデザインがそのままサイトに表示されるようになっているはず。

あとは、この子テーマの中のstyle.cssにカスタマイズしたいことをどんどん追加して書いていけば、その内容が反映されるというわけです。

初心者にはここまでくるだけで一苦労でした…。一応私はこのやり方で問題なく子テーマを作ることができましたが、いろいろと知識不足なのでもっと効率いい方法、ここはこうしないとだめだよ!とかあればぜひ教えてください。

 

では、次回はやっとやっと見た目部分を変えるカスタマイズに入っていきます!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで早をフォローしよう!

◆noteで日記も書いてます。面白かったらフォローしてね!

 note | 早《saki》

 - ブログ運営

ad

ad

Comment

  1. […] Stinger3カスタマイズ記録―子テーマを作成するには?―  これは意外と簡単 […]

  2. ばにあん より:

    はじめまして。ばにあんと申します。
    stinger3のデザインはかなり参考にさせていただきました。
    今回サイドバーをカスタマイズしようとしたところ、サイドバーには「NEW ENTRY」しか表示されなくなっていました。できればサイドバーのみデフォルトに戻したいのですが、なにかいい方法はありますか?

  3. Taka より:

    初めて訪問させて頂きました。
    最近、アメブロから独自ドメインへの引っ越しをしようと知識ゼロからworpressをいじくり回してましたが、私もディレクトリ…?というレベルですので、大変助かりました。
    他にここまで親切に書いてくれているブログが全然ないので、、。
    無事、子テーマ作成できました。

    今後も参考にさせて頂きます。

  4. […] Stinger3カスタマイズ記録―子テーマを作成するには? […]

  5. […] ナーsakiyamaさんのサイト。きれいな背景画像です。まずこちらで子テーマの作成を勉強しました。 Saki Sugiyama/24歳ドレスデザイナー、もうすぐ一児の母。渋谷在住個人事業主の日々の記録 […]

  関連記事

電球のイメージ
WordPressテーマ「Stinger3」をおしゃれにカスタマイズする!

  ※こちらの記事は以前stingerをカスタマイズしたテーマを使用し …

Stinger3カスタマイズ記録―Background Managerで背景をフルスクリーン写真にする―

こんにちは。先日のエントリーが、このブログの使用テーマSTINGER3開発者、E …

さきはやすみます。っていうブログになりました。

すっごく久しぶりにブログを触りました。 あまりにも触らなすぎてあれこれ忘れている …

やらないと絶対損!言葉が主戦場でないクリエイターが、言葉を使えると強い。

最近ブログが楽しいです。 もともと文章を書くのが特別得意とか、好きとか言うわけで …

WordPressテーマをSTINGER3 Ladysに変えてみたよ

いままでテーマはSTINGER3をカスタマイズして使っていたのですが、限定公開の …

STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする―

STINGER3のカスタマイズ、続きましてはメインウィンドウとサイドバー、メニュ …

Contact Form 7が急にエラーになった!解決方法は超簡単なことでした…

最近noteの方が楽しくてこちらはちょっとご無沙汰でした。早です。 先日、仕事の …

Stinger3カスタマイズ記録―ブログタイトルを画像に変更―

こんにちは。 久しぶりにカスタマイズメモを更新したいと思います! ここしばらく本 …